<template>
  <div>
    <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" ref="submit">
      <template #returnGoods>
        <div style="width: 100%">
          <div style="margin-bottom: 10px">
            <el-button type="primary" @click="clickMateriel()" v-preReClick>新增退货</el-button>
          </div>
          <el-table :data="formData.data.purchaseReturnBomList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
            <el-table-column label="采购合同" prop="purchaseCode" width="160" />
            <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="120" />
            <el-table-column label="已退货数量" prop="finishReturnQuantity" width="120" />
            <el-table-column label="可退货数量" prop="canReturnQuantity" width="120" />
            <el-table-column label="退货数量" prop="returnQuantity" width="120" />
            <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-column label="操作" align="center" fixed="right" width="60">
              <template #default="{ $index }">
                <el-button type="danger" @click="clickDelete($index)" text>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </byForm>

    <el-dialog title="新增退货" v-if="openAdd" v-model="openAdd" width="90%">
      <Goods @clickCancel="clickCancel"></Goods>
    </el-dialog>
  </div>
</template>

<script setup>
import byForm from "/src/components/byForm/index";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import Goods from "/src/components/return-goods/index.vue";

const route = useRoute();
// 接收父组件的传值
const props = defineProps({
  queryData: Object,
});
const { proxy } = getCurrentInstance();
const formData = reactive({
  data: {
    returnAmount: "",
    purchaseReturnBomList: [],
  },
});
const judgeStatus = () => {
  if (route.query.processType == 20 || route.query.processType == 10) {
    return true;
  }
  if (props.queryData.recordList && props.queryData.recordList.length > 0) {
    let data = props.queryData.recordList.filter((item) => item.status === 2 && item.nodeType !== 1);
    if (data && data.length > 0) {
      return true;
    }
  }
  return false;
};
const formOption = reactive({
  inline: true,
  labelWidth: "120px",
  itemWidth: 100,
  rules: [],
  labelPosition: "right",
  disabled: false,
});
const formConfig = computed(() => {
  return [
    {
      type: "title",
      title: "退货清单",
      label: "",
    },
    {
      type: "slot",
      slotName: "returnGoods",
    },
  ];
});
const openAdd = ref(false);
const clickMateriel = () => {
  openAdd.value = true;
};
const clickCancel = (data) => {
  openAdd.value = false;
  if (data && data.length > 0) {
    formData.data.purchaseReturnBomList = formData.data.purchaseReturnBomList.filter((item) => item.purchaseId !== data[0].purchaseId).concat(data);
  }
  console.log(getFormData());
};
const clickDelete = (index) => {
  formData.data.purchaseReturnBomList.splice(index, 1);
};
const handleSubmit = async (flag) => {
  if (flag) {
    return true;
  } else {
    let status = await proxy.$refs.submit.handleSubmit(() => {});
    if (status) {
      if (!(formData.data.purchaseReturnBomList && formData.data.purchaseReturnBomList.length > 0)) {
        ElMessage("请添加退货清单");
        return false;
      }
      return true;
    } else {
      setTimeout(() => {
        const errorDiv = document.getElementsByClassName("is-error");
        errorDiv[0].scrollIntoView();
      }, 0);
    }
    return false;
  }
};
const getFormData = () => {
  let returnAmount = 0;
  for (let i = 0; i < formData.data.purchaseReturnBomList.length; i++) {
    if (formData.data.purchaseReturnBomList[i].returnQuantity) {
      returnAmount = Number(
        Math.round((returnAmount + formData.data.purchaseReturnBomList[i].returnQuantity * formData.data.purchaseReturnBomList[i].unitPrice) * 100) / 100
      );
    }
  }
  formData.data.returnAmount = returnAmount;
  return proxy.deepClone(formData.data);
};
watch(
  () => props.queryData,
  (newValue) => {
    formOption.disabled = judgeStatus();
    if (props.queryData && ["10", "20", "30", "40"].includes(route.query.processType)) {
      formData.data = proxy.deepClone(newValue);
    }
  },
  {
    deep: true,
  }
);
onMounted(() => {});
// 向父组件暴露
defineExpose({ getFormData, handleSubmit });
</script>

<style lang="scss" scoped>
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
:deep(.el-dialog) {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
</style>
