<template>
  <div v-loading="loading">
    <byForm
      :formConfig="formConfigOne"
      :formOption="formOption"
      v-model="formData.dataOne"
    >
      <template #detailSlot>
        <div style="width: 100%">
          <el-table
            :data="formData.dataOne.purchaseDetailVoList"
            show-summary
            :summary-method="getSummariesOne"
          >
            <el-table-column prop="productCustomCode" label="物品编码" />
            <el-table-column prop="productName" label="物品名称" />
            <el-table-column prop="productSpec" label="规格" />
            <el-table-column prop="count" label="采购数量" />
            <el-table-column prop="deliverGoodsQuantity" label="已发货">
              <template #default="{ row }">
                <div>
                  <el-popover
                    placement="bottom-start"
                    title="发货详情"
                    :width="500"
                    trigger="hover"
                  >
                    <div default>
                      <el-table :data="row.deliverGoodsDetailList">
                        <el-table-column
                          label="发货时间"
                          prop="createTime"
                          width="155"
                        />
                        <el-table-column
                          label="物流单号"
                          prop="logisticsCode"
                        />
                        <el-table-column
                          label="数量"
                          prop="deliverGoodsQuantity"
                          width="100"
                        />
                      </el-table>
                    </div>
                    <template #reference>
                      <div style="cursor: pointer; color: #0084ff">
                        {{ row.deliverGoodsQuantity }}
                      </div>
                    </template>
                  </el-popover>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="receiptQuantity" label="已入库">
              <template #default="{ row }">
                <div>
                  <el-popover
                    placement="bottom-start"
                    title="入库详情"
                    :width="500"
                    trigger="hover"
                  >
                    <div default>
                      <el-table :data="row.receiptList">
                        <el-table-column
                          label="入库时间"
                          prop="createTime"
                          width="155"
                        />
                        <el-table-column
                          label="入库单号"
                          prop="logisticsCode"
                        />
                        <el-table-column
                          label="数量"
                          prop="quantity"
                          width="100"
                        />
                        <el-table-column
                          label="入库状态"
                          prop="receiptStatus"
                          width="100"
                          :formatter="
                            (row) =>
                              row.receiptStatus == 1 ? '部分入库' : '完全入库'
                          "
                        />
                      </el-table>
                    </div>
                    <template #reference>
                      <div style="cursor: pointer; color: #0084ff">
                        {{ row.receiptQuantity }}
                      </div>
                    </template>
                  </el-popover>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="purchaseBackQuantity" label="退货">
              <template #default="{ row }">
                <div>
                  <el-popover
                    placement="bottom-start"
                    title="退货详情"
                    :width="500"
                    trigger="hover"
                  >
                    <div default>
                      <el-table :data="row.purchaseBackDetailsList">
                        <el-table-column
                          label="申请时间"
                          prop="createTime"
                          width="155"
                        />
                        <el-table-column label="申请数量" prop="quantity" />
                        <el-table-column
                          label="已退数量"
                          prop="returnedQuantity"
                        />
                        <el-table-column
                          label="操作"
                          width="90"
                          align="center"
                          v-if="isPurcharse"
                        >
                          <template #default="{ row, $index }">
                            <el-button
                              type="primary"
                              text
                              @click="handleClickStatus(row)"
                              >查看关联</el-button
                            >
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                    <template #reference>
                      <div style="cursor: pointer; color: #0084ff">
                        {{ row.purchaseBackQuantity }}
                      </div>
                    </template>
                  </el-popover>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="qualityQuantity" label="已质检数量" />
            <el-table-column prop="noQualifiedCount" label="不合格数量" />
          </el-table>
        </div>
      </template>
    </byForm>
  </div>
</template>

<script setup>
import byForm from "@/components/byForm/index";
const props = defineProps({
  purchaseRow: Object,
  isPurcharse: {
    type: Boolean,
    default: false,
  },
});
const { proxy } = getCurrentInstance();
const loading = ref(false);
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
});
const formConfigOne = computed(() => [
  {
    type: "title",
    title: "基础信息",
  },
  {
    type: "input",
    prop: "supplyName",
    label: "供应商",
    disabled: true,
    itemWidth: 50,
  },
  {
    type: "input",
    prop: "purchaseCode",
    label: "采购单号",
    disabled: true,
    itemWidth: 50,
  },
  {
    type: "title",
    title: "采购明细",
  },
  {
    type: "slot",
    slotName: "detailSlot",
    label: "",
  },
]);
const formData = reactive({
  dataOne: {},
});

const getSummariesOne = (param) => {
  const { columns, data } = param; //columns是每列的信息，data是每行的信息
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "合计"; //此处是在index=0的这一列显示为“合计”
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    if (
      column.property === "count" ||
      column.property === "deliverGoodsQuantity" ||
      column.property === "receiptQuantity" ||
      column.property === "purchaseBackQuantity" ||
      column.property === "qualityQuantity" ||
      column.property === "noQualifiedCount"
    ) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          return Number(parseFloat(prev + curr).toFixed(4));
        } else {
          return prev;
        }
      }, 0);
      sums[index];
    }
  });
  return sums;
};

const getData = (purchaseId) => {
  loading.value = true;
  proxy.post("/deliverGoods/arrivalDetail", { purchaseId }).then((res) => {
    formData.dataOne = {
      supplyName: props.purchaseRow.supplyName,
      purchaseCode: props.purchaseRow.contractCode,
      purchaseDetailVoList: res.purchaseDetailVoList,
    };
    loading.value = false;
  });
};
if (props.purchaseRow && props.purchaseRow.id) {
  getData(props.purchaseRow.id);
}

const handleClickStatus = (row) => {
  proxy.$emit("handleClickStatus", row);
};
</script>

<style lang="scss" scoped>
</style>