<template>
  <el-form :model="form" ref="form">
    <ele-pro-table
      ref="table"
      :needPage="false"
      :columns="columns"
      max-height="500px"
      :span-method="objectSpanMethod"
      :datasource="form.resultList"
      @columns-change="handleColumnChange"
      :cache-key="cacheKeyUrl"
      class="time-form"
    >
      <!-- 表头工具栏 -->

      <template v-slot:toolbar>
        <slot name="generateContracts"></slot>
        <el-row
          type="flex"
          justify="end"
          align="middle"
          style="margin-right: 15px"
        >
          <el-popconfirm
            class="ele-action"
            title="确定要删除吗？"
            @confirm="removeSupplier"
            v-if="status !== 'Detail'"
          >
            <template v-slot:reference>
              <el-link
                type="danger"
                title="删除供应商"
                :underline="false"
                icon="el-icon-delete"
              >
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </el-row>
      </template>
      <template v-slot:supplierName="{ row, $index }">
        {{ form.supplierName }}
      </template>
      <template v-slot:supplierTotalPrice="{ row, $index }">
        {{ form.totalPrice }}
      </template>
      <template v-slot:preferentialPrice="{ row, $index }">
        <el-form-item
          prop="preferentialPrice"
          v-if="status !== 'Detail'"
          :rules="{
            required: true,
            message: '请输入优惠价',
            trigger: 'blur'
          }"
        >
          <el-input v-model="form.preferentialPrice"></el-input>
        </el-form-item>
        <span v-else>
          {{ form.preferentialPrice }}
        </span>
      </template>
      <template v-slot:settlementMode="{ row, $index }">
        <el-form-item>
          <DictSelection
            dictName="结算方式"
            clearable
            v-model="form.settlementMode"
            @itemChange="chaengMode"
            :disabled="status == 'Detail'"
          >
          </DictSelection>
        </el-form-item>
      </template>
      <template v-slot:deliveryDate="{ row, $index }">
        <el-form-item
          prop="deliveryDate"
          v-if="status !== 'Detail'"
          :rules="{
            required: true,
            message: '请选择交货日期',
            trigger: 'change'
          }"
        >
          <el-date-picker
            style="width: 100%"
            clearable
            type="date"
            :disabled="status == 'Detail'"
            v-model="form.deliveryDate"
            value-format="yyyy-MM-dd"
            placeholder="请选择日期"
            @change="deliveryDateChange"
          >
          </el-date-picker>
        </el-form-item>
        <span v-else>
          {{ form.deliveryDate }}
        </span>
      </template>
      <template v-slot:taxRate="{ row, $index }">
        <el-form-item
          v-if="status !== 'Detail'"
          :rules="{
            required: isTaxRate==1 ? true : '',
            message: '请输入税率',
            trigger: 'change'
          }"
        >
          <el-input
            v-model="row.taxRate"
            style="width: 100%"
            :disabled="status == 'Detail'"
          >
            <template slot="suffix">%</template>
          </el-input>
        </el-form-item>
        <span v-else>
          {{ row.taxRate ? row.taxRate + '%' : '' }}
        </span>
      </template>
      <template v-slot:files="{ row, $index }">
        <el-form-item>
          <fileMain
            v-model="form.files"
            :type="status == 'Detail' ? 'view' : ''"
          ></fileMain>
        </el-form-item>
      </template>

      <template v-slot:isWinner="{ row, $index }">
        <el-form-item
          v-if="status !== 'Detail'"
          :prop="'resultList.' + $index + '.isWinner'"
          :rules="{
            required: true,
            message: '请输入',
            trigger: 'change'
          }"
        >
          <el-select v-model="row.isWinner" :disabled="status == 'Detail'">
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <span v-else>
          {{ row.isWinner == 1 ? '是' : '否' }}
        </span>
      </template>
      <template
        v-slot:supplierProductName="{ row, $index }"
        v-if="status !== 'Detail'"
      >
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'resultList.' + $index + '.supplierProductName'"
          :rules="{
            required: true,
            message: '请输入',
            trigger: 'change'
          }"
        >
          <el-input
            v-model="row.supplierProductName"
            placeholder="请输入"
            :disabled="status == 'Detail'"
          ></el-input>
        </el-form-item>
      </template>
      <template v-slot:supplierProductCode="scope" v-if="status !== 'Detail'">
        <el-form-item style="margin-bottom: 20px">
          <el-input
            v-model="scope.row.supplierProductCode"
            :disabled="status == 'Detail'"
          ></el-input>
        </el-form-item>
      </template>
      <template v-slot:deliveryDays="scope" v-if="status !== 'Detail'">
        <el-form-item style="margin-bottom: 20px">
          <el-input v-model="scope.row.deliveryDays"></el-input>
        </el-form-item>
      </template>
      <template v-slot:guaranteePeriod="scope" v-if="status !== 'Detail'">
        <el-form-item style="margin-bottom: 20px">
          <el-input
            v-model="scope.row.guaranteePeriod"
            :disabled="status == 'Detail'"
          ></el-input>
        </el-form-item>
      </template>
      <template v-slot:guaranteePeriodUnitCode="scope">
        <el-form-item style="margin-bottom: 20px">
          <DictSelection
            dictName="质保期单位"
            clearable
            v-model="scope.row.guaranteePeriodUnitCode"
            :disabled="status == 'Detail'"
            @itemChange="chaengUnitCode"
          >
          </DictSelection>
        </el-form-item>
      </template>
      <template v-slot:singlePrice="scope" v-if="status !== 'Detail'">
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'resultList.' + scope.$index + '.singlePrice'"
          :rules="{
            required: true,
            message: '请输入',
            trigger: 'change'
          }"
        >
          <el-input
            @blur="changeGetPrice(scope.row)"
            v-model="scope.row.singlePrice"
            :disabled="status == 'Detail'"
            type="number"
          >
            <template slot="suffix">元</template>
          </el-input>
        </el-form-item>
      </template>

      <template v-slot:notaxSinglePrice="scope">
        <el-form-item style="margin-bottom: 20px">
          <el-input
            v-model="scope.row.notaxSinglePrice"
            placeholder="请输入"
            type="number"
            :disabled="status == 'Detail'"
          >
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </template>
      <template v-slot:totalCount="scope" v-if="status !== 'Detail'">
        <el-form-item
          :prop="'resultList.' + scope.$index + '.totalCount'"
          :rules="{
            required: true,
            message: '请输入数字',
            trigger: 'blur'
          }"
        >
          <el-input
            @blur="changeGetPrice(scope.row)"
            v-model="scope.row.totalCount"
            :disabled="status == 'Detail'"
            placeholder="请输入"
            type="number"
          ></el-input>
        </el-form-item>
      </template>

      <template v-slot:totalPrice="scope">
        <span>{{
          totalPrice(scope.row.totalCount, scope.row.singlePrice, scope.row)
        }}</span>
      </template>
      <template v-slot:provenance="scope">
        <el-form-item>
          <DictSelection
            dictName="产地"
            clearable
            :disabled="status == 'Detail'"
            v-model="scope.row.provenance"
            multiple
          >
          </DictSelection>
        </el-form-item>
      </template>
      <template v-slot:modelType="scope" v-if="status !== 'Detail'">
        <el-form-item style="margin-bottom: 20px">
          <el-input
            v-model="scope.row.modelType"
            :disabled="status == 'Detail'"
          ></el-input>
        </el-form-item>
      </template>

      <template v-slot:specification="scope" v-if="status !== 'Detail'">
        <el-form-item style="margin-bottom: 20px">
          <el-input
            v-model="scope.row.specification"
            :disabled="status == 'Detail'"
          ></el-input>
        </el-form-item>
      </template>

      <template v-slot:remark="scope" v-if="status !== 'Detail'">
        <el-form-item style="margin-bottom: 20px">
          <el-input
            v-model="scope.row.remark"
            type="textarea"
            placeholder="请输入"
            :disabled="status == 'Detail'"
          ></el-input>
        </el-form-item>
      </template>

      <template v-slot:isRequired="{ column }">
        <span class="is-required">{{ column.label }}</span>
      </template>
    </ele-pro-table>
  </el-form>
</template>
<script>
  import { numberReg } from 'ele-admin';
  import dictMixins from '@/mixins/dictMixins';
  import fileUpload from '@/components/upload/fileUpload';
  import { copyObj } from '@/utils/util';
  import { getFile } from '@/api/system/file';
  import fileMain from '@/components/addDoc/index.vue';
  import { getInventoryTotalAPI } from '@/api/wms';
  import { listByContactId } from '@/api/saleManage/contact';
  import tabMixins from '@/mixins/tableColumnsMixin';
  import { parameterGetByCode } from '@/api/main/index.js';

  export default {
    mixins: [dictMixins, tabMixins],
    components: {
      fileMain,
      fileUpload
      // headList
    },
    props: {
      obj: {
        default: () => {
          return {};
        }
      },
      status: {
        default: 'edit'
      },
      radio: {
        default: ''
      },
      isUpdate: {
        default: false
      }
    },
    data() {
      const defaultForm = {
        key: null,
        endTime: '',
        isFirst: 0,
        name: ''
      };

      return {
        numberReg,
        defaultForm,
        radio1: '',
        cacheKeyUrl: 'eom-purchasingManage-inquiryTable',
        form: {
          resultList: [
            {
              supplierProductCode: '',
              deliveryDays: '',
              guaranteePeriod: '',
              guaranteePeriodUnitCode: '',
              guaranteePeriodUnitName: '',
              measuringUnit: '',
              modelType: '',
              productCode: '',
              isWinner: '',
              remark: '',
              singlePrice: '',
              specification: '',
              supplierProductName: '',
              technicalAnswerName: '',
              technicalParams: '',
              totalCount: '',
              totalPrice: ''
            }
          ]
        },
        dataList: [],
        spanArr: [],

        isTaxRate: 0
      };
    },
    computed: {
      columns() {
        return [
          {
            width: 50,
            label: '序号',
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          {
            minWidth: 120,
            prop: 'supplierName',
            label: '供应商',
            slot: 'supplierName',
            align: 'center',
            showOverflowTooltip: true,
            isMerge: true,
            fixed: 'left'
          },
          {
            minWidth: 80,
            prop: 'supplierTotalPrice',
            label: '总价',
            slot: 'supplierTotalPrice',
            align: 'center',
            showOverflowTooltip: true,
            isMerge: true,
            fixed: 'left'
          },
          {
            minWidth: 120,
            prop: 'preferentialPrice',
            label: '优惠后总价',
            slot: 'preferentialPrice',
            headerSlot: 'isRequired',
            align: 'center',
            showOverflowTooltip: true,
            isMerge: true,
            fixed: 'left'
          },
          {
            minWidth: 120,
            prop: 'settlementMode',
            label: '结算方式',
            slot: 'settlementMode',
            headerSlot: 'isRequired',
            align: 'center',
            showOverflowTooltip: true,
            isMerge: true,
            fixed: 'left'
          },
          {
            minWidth: 160,
            prop: 'deliveryDate',
            label: '交货日期',
            slot: 'deliveryDate',
            headerSlot: 'isRequired',
            align: 'center',
            showOverflowTooltip: true,
            isMerge: true,
            fixed: 'left'
          },
          {
            minWidth: 100,
            prop: 'productCode',
            label: '编码',
            slot: 'productCode',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 100,
            prop: 'productName',
            label: '产品名称',
            slot: 'productName',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 100,
            prop: 'isWinner',
            label: '是否中标',
            slot: 'isWinner',
            align: 'center',
            headerSlot: 'isRequired',
            showOverflowTooltip: true
          },
          {
            minWidth: 140,
            prop: 'supplierProductCode',
            label: '供应商产品编码',
            slot: 'supplierProductCode',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 160,
            prop: 'supplierProductName',
            label: '供应商产品名称',
            slot: 'supplierProductName',
            headerSlot: 'isRequired',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 130,
            prop: 'reqTotalCount',
            label: '需求数量',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 130,
            prop: 'totalCount',
            label: '购买数量',
            slot: 'totalCount',
            headerSlot: 'isRequired',
            showOverflowTooltip: true,
            align: 'center'
          },

          {
            minWidth: 80,
            prop: 'availableCountBase',
            label: '库存数量',
            slot: 'availableCountBase',
            align: 'center'
          },
          {
            minWidth: 80,
            prop: 'measuringUnit',
            label: '单位',
            slot: 'measuringUnit',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 120,
            prop: 'modelType',
            label: '型号',
            slot: 'modelType',
            showOverflowTooltip: true,
            align: 'center'
          },

          {
            minWidth: 120,
            prop: 'specification',
            label: '规格',
            slot: 'specification',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 120,
            prop: 'minimumOrderQuantity',
            label: '最低订购量',
            align: 'center'
          },
          {
            minWidth: 80,
            prop: 'doneTotalCount',
            label: '已采数量',
            align: 'center'
          },
          {
            minWidth: 80,
            prop: 'waitTotalCount',
            label: '待采数量',
            align: 'center'
          },

          {
            minWidth: 140,
            prop: 'singlePrice',
            label: '采购单价',
            slot: 'singlePrice',
            headerSlot: 'isRequired',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            width: 180,
            prop: 'notaxSinglePrice',
            label: '不含税单价',
            slot: 'notaxSinglePrice',
            align: 'center'
          },
          {
            minWidth: 80,
            prop: 'totalPrice',
            label: '采购金额',
            slot: 'totalPrice',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 150,
            prop: 'taskName',
            label: '工序',
            slot: 'taskName',
            align: 'center'
          },
          {
            width: 110,
            prop: 'batchNo',
            label: '批次号',
            slot: 'batchNo',
            align: 'center'
          },
          {
            prop: 'provenance',
            label: '产地',
            slot: 'provenance',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200
          },

          // {
          //   width: 130,
          //   prop: 'brand',
          //   label: '品牌',
          //   slot: 'brand'
          // },
          {
            minWidth: 80,
            prop: 'deliveryDays',
            label: '交期(天)',
            slot: 'deliveryDays',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 100,
            prop: 'guaranteePeriod',
            label: '质保期',
            slot: 'guaranteePeriod',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 120,
            prop: 'guaranteePeriodUnitCode',
            label: '质保期单位',
            slot: 'guaranteePeriodUnitCode',
            showOverflowTooltip: true,
            align: 'center'
          },
          // {
          //   width: 120,
          //   prop: 'produceType',
          //   align: 'center',
          //   label: '属性类型',
          //   showOverflowTooltip: true,
          //   formatter: (row, column) => {
          //     return row.produceType && row.produceType.length
          //       ? row.produceType
          //           .map((item) => this.getDictValue('生产类型', item + ''))
          //           .join(',')
          //       : '';
          //   }
          // },
          {
            minWidth: 120,
            prop: 'packingSpecification',
            align: 'center',
            label: '包装规格',
            showOverflowTooltip: true
          },
          {
            minWidth: 220,
            prop: 'remark',
            label: '备注',
            slot: 'remark',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 90,
            prop: 'taxRate',
            label: '税率',
            slot: 'taxRate',
            align: 'center',
            headerSlot: this.isTaxRate==1 ? 'isRequired' : '',
            // isMerge: true,
            showOverflowTooltip: true
          },
          {
            minWidth: 220,
            prop: 'files',
            label: '附件',
            slot: 'files',
            align: 'center',
            isMerge: true,
            showOverflowTooltip: true
          }
        ];
      }
    },
    watch: {
      radio(n, v) {
        this.radio1 = n;
      }
    },

    created() {
      parameterGetByCode({
        code: 'eom_purchasingManage_inquiryManage_taxRate'
      }).then((res) => {
        this.isTaxRate = res.value;
        console.log(this.isTaxRate,'this.isTaxRate')
      });
      this.obj.resultList.forEach((item) => {
        this.obj['deliveryDate'] =
          this.obj.deliveryDate || item.expectReceiveDate;
      });
      this.form = copyObj(this.obj);
      console.log(this.form, '');

      this.radio1 = this.radio;
      this.getSpanArr();
      this.setDeliveryDays();
      this.setIsInquiry();
      this.getInventoryTotalAPI();
      this.getListByContactId();

      // this.dataList=copyObj(this.list)
    },
    methods: {
      //计算交期
      setDeliveryDays() {
        console.log(this.form.resultList);
        this.form.resultList.forEach((item, index) => {
          let day =
            this.form.deliveryDate &&
            (new Date(this.form.deliveryDate).getTime() -
              new Date().getTime()) /
              1000 /
              60 /
              60 /
              24;
          this.$set(
            this.form.resultList[index],
            'deliveryDays',
            Math.ceil(day) || 1
          );
          // item.deliveryDays =
        });
        this.$forceUpdate();
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (this.columns[columnIndex]?.isMerge) {
          const _row = this.spanArr[rowIndex]?.supplierName || 0;
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        return {
          rowspan: 1,
          colspan: 1
        };
      },
      async getInventoryTotalAPI() {
        let codeList = this.form.resultList
          .filter((item) => item.productCode)
          .map((item) => item.productCode);
        //获取仓库库存
        let inventoryTotalList = await getInventoryTotalAPI(codeList);
        this.form.resultList
          .filter((item) => item.productCode)
          .forEach((item, index) => {
            let find =
              inventoryTotalList.find((key) => key.code == item.productCode) ||
              {};
            // item.availableCountBase = find.availableCountBase;
            this.$set(
              this.form.resultList[index],
              'availableCountBase',
              find.availableCountBase
            );
          });
      },
      //获取最新订购量
      async getListByContactId() {
        let productIds = this.form.resultList
          .filter((item) => item.productId)
          .map((item) => item.productId);
        if (productIds?.length > 0) {
          const data = await listByContactId({
            contactId: this.form.supplierId,
            productIds
          });
          this.form.resultList
            .filter((item) => item.productCode)
            .forEach((item, index) => {
              let pData = data.find((val) => val.productId == item.productId);
              if (pData) {
                this.$set(
                  this.form.resultList[index],
                  'minimumOrderQuantity',
                  pData.minimumOrderQuantity
                );
              }
            });
        }
      },
      setIsInquiry() {
        return;
        this.$emit('setIsInquiry');
      },
      deliveryDateChange(row) {
        this.$emit('deliveryDateChange', (data) => {
          let is = false,
            iSexpectReceiveDate = false;

          if (data.length > 0) {
            data.forEach((item) => {
              if (
                new Date(this.form.deliveryDate).getTime() >
                new Date(item.expectReceiveDate).getTime()
              ) {
                is = true;
              }
              if (item.expectReceiveDate) {
                iSexpectReceiveDate = true;
              }
            });
          }
          if (is && iSexpectReceiveDate) {
            this.$message.warning('交货日期大于到货日期');
          }
        });
        this.setDeliveryDays();
      },
      getSpanArr() {
        let pos = 0;
        this.spanArr = [];
        this.form.resultList.forEach((item, index) => {
          if (index === 0) {
            let obj = {};
            this.columns.forEach((col) => {
              if (col.isMerge) {
                obj[col.prop] = 1;
              }
            });
            this.spanArr.push(obj);
          } else {
            let nameSame =
              item.supplierName ===
              this.form.resultList[index - 1].supplierName;
            if (nameSame) {
              this.spanArr[pos].supplierName += 1;
              this.spanArr.push({
                supplierName: 0,
                supplierTotalPrice: 0,
                preferentialPrice: 0,
                settlementMode: '4',
                taxRate: 0,
                files: 0,
                deliveryDate: 0
              });
            } else {
              pos = index;
              let obj = {};
              this.columns.forEach((col) => {
                if (col.isMerge) {
                  obj[col.prop] = 1;
                }
              });
              this.spanArr.push(obj);
            }
          }
        });
      },
      downloadFile(file) {
        getFile({ objectName: file.storePath }, file.name);
      },
      //
      changeGetPrice(row) {
        if (row.singlePrice && row.totalCount) {
          let num = 0;
          this.form.resultList.forEach((item) => {
            num += item.totalPrice || 0;
          });
          this.form.preferentialPrice = parseFloat(num.toFixed(2));
        }
        this.setIsInquiry();
      },
      //计算销售金额
      totalPrice(a, b, row) {
        if (!a || !b) {
          return;
        }
        row.totalPrice = parseFloat((a * b).toFixed(2));
        this.totalPriceAll();
        return row.totalPrice;
      },
      //计算销售总价
      totalPriceAll() {
        let num = 0;
        this.form.resultList.forEach((item) => {
          num += item.totalPrice || 0;
        });
        this.form.totalPrice = parseFloat(num.toFixed(2));
        // this.form.preferentialPrice = parseFloat(num.toFixed(2));
        // console.log(this.form.resultList,'dasdasd')
      },
      // 返回列表数据
      getTableValue() {
        return this.form;
      },

      chaengMode(data) {
        this.form.settlementModeName = data.dictValue;
      },
      chaengUnitCode(data) {
        this.form.settlementModeName = data.dictValue;
      },
      //修改回显
      putTableValue(data) {
        this.form.resultList = copyObj(data);
        this.getListByContactId();
        this.setDeliveryDays();
        this.setIsInquiry();
      },

      remove(productCode) {
        let index = this.form.resultList.findIndex(
          (item) => item.productCode == productCode
        );
        this.form.resultList.splice(index, 1);
        this.setIsInquiry();

        this.setSort();
      },
      removeSupplier() {
        this.$emit('removeSupplier', this.form.supplierId);
      },
      // 清空表格
      restTable() {
        this.form.resultList = [];
      },
      // 重新排序
      setSort() {
        this.form.resultList.forEach((n, index) => {
          n.key = index + 1;
        });
      },

      validateForm(callback) {
        //开始表单校验
        this.$refs.form.validate((valid) => {
          callback(valid);
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .headbox {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .amount {
      font-size: 14px;
      font-weight: bold;
    }
  }

  .time-form .el-form-item {
    margin-bottom: 0 !important;
  }

  ::v-deep .period {
    display: flex;

    .borderleftnone {
      .el-input--medium .el-input__inner {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    .borderrightnone {
      .el-input--medium .el-input__inner {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }

  ::v-deep .time-form tbody > tr:hover > td {
    background-color: transparent !important;
  }

  ::v-deep .time-form .el-table tr {
    background-color: #ffffff;
  }

  ::v-deep .el-upload-list--text {
    width: 75%;
  }
</style>
