<template>
  <div>
    <div style="max-height: calc(100vh - 174px); overflow-y: auto; overflow-x: hidden">
      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
        <template #purchaseId>
          <div style="width: 100%">
            <el-select v-model="formData.data.purchaseId" placeholder="采购合同" @change="changePurchase()">
              <el-option v-for="item in purchaseList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
            </el-select>
          </div>
        </template>
        <template #purchaseReturnBomList>
          <div style="width: 100%">
            <el-table :data="formData.data.purchaseReturnBomList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
              <el-table-column label="品号" prop="bomSpecCode" width="140" />
              <el-table-column label="品名" prop="bomSpecName" min-width="220" />
              <el-table-column label="含税单价" prop="unitPrice" width="120" />
              <el-table-column label="采购数量" prop="purchaseQuantity" width="100" />
              <el-table-column label="已退货数量" prop="finishReturnQuantity" width="100" />
              <el-table-column label="剩余数量" prop="canReturnQuantity" width="100" />
              <el-table-column label="含税小计" width="120">
                <template #default="{ row }">
                  <span>{{ Number(Math.round(row.purchaseQuantity * row.unitPrice * 100) / 100) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="退货数量" width="120">
                <template #default="{ row, $index }">
                  <el-form-item :prop="'purchaseReturnBomList.' + $index + '.returnQuantity'" :rules="rules.returnQuantity" style="width: 100%">
                    <el-input-number
                      onmousewheel="return false;"
                      v-model="row.returnQuantity"
                      placeholder="数量"
                      style="width: 100%"
                      :controls="false"
                      :min="0"
                      :max="row.canReturnQuantity" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="当前退货金额" width="140">
                <template #default="{ row }">
                  <span>{{ Number(Math.round(row.returnQuantity * row.unitPrice * 100) / 100) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </byForm>
    </div>
    <div style="text-align: center; margin: 10px">
      <el-button @click="clickCancel()" size="large">取 消</el-button>
      <el-button type="primary" @click="submitForm()" size="large" v-preReClick>确 定</el-button>
    </div>
  </div>
</template>

<script setup>
import byForm from "/src/components/byForm/index";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const purchaseList = ref([]);
const formOption = reactive({
  inline: true,
  labelWidth: "120px",
  itemWidth: 100,
  rules: [],
  labelPosition: "right",
});
const formData = reactive({
  data: {
    purchaseId: "",
    purchaseReturnBomList: [],
  },
});
const formConfig = computed(() => {
  return [
    {
      type: "slot",
      prop: "purchaseId",
      slotName: "purchaseId",
      label: "采购合同",
      itemWidth: 50,
    },
    {
      type: "slot",
      slotName: "purchaseReturnBomList",
      label: "",
    },
  ];
});
const rules = ref({
  purchaseId: [{ required: true, message: "请选择采购合同", trigger: "change" }],
  returnQuantity: [{ required: true, message: "请输入数量", trigger: "change" }],
});
const getDemandData = () => {
  proxy.post("/purchase/getPurchaseSelectList", { pageNum: 1, pageSize: 9999, flowStatus: 2 }).then((res) => {
    if (res.rows && res.rows.length > 0) {
      purchaseList.value = purchaseList.value.concat(
        res.rows.map((item) => {
          return {
            dictKey: item.id,
            dictValue: item.code,
          };
        })
      );
    }
  });
};
getDemandData();
const changePurchase = () => {
  formData.data.purchaseReturnBomList = [];
  proxy.post("/purchaseReturn/getPurchaseBomPage", { id: formData.data.purchaseId }).then((res) => {
    formData.data.purchaseReturnBomList = res;
  });
};
const submitForm = () => {
  proxy.$refs.submit.handleSubmit(() => {
    if (formData.data.purchaseReturnBomList && formData.data.purchaseReturnBomList.length > 0) {
      let list = formData.data.purchaseReturnBomList.filter((item) => item.returnQuantity > 0);
      if (list && list.length > 0) {
        list = list.map((item) => {
          return {
            ...item,
            purchaseId: formData.data.purchaseId,
          };
        });
        emit("clickCancel", list);
      } else {
        return ElMessage("请输入退货数量");
      }
    } else {
      return ElMessage("请选择退货产品");
    }
  });
};
const emit = defineEmits(["clickCancel"]);
const clickCancel = () => {
  emit("clickCancel", false);
};
</script>

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