<template>
  <div class="examination batch-edit-wrap">
    <el-dialog
      @close="closeDialog"
      :visible.sync="showFlag"
      customClass="customWidth_syst"
      title="批量修改"
      :close-on-click-modal="false"
    >
      <el-form
        ref="editData"
        label-width="80px"
        :inline="true"
        :model="editData"
      >
        <el-form-item prop="contractNo" label="合 同  号">
          <el-input
            v-model="editData.contractNo"
            clearable
            size="small"
            style="width: 160px"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item prop="matterName" label="物资名称">
          <el-select
            v-model="editData.matterName"
            clearable
            filterable
            collapse-tags
            size="small"
            style="width: 160px"
            :filter-method="getMatterName"
            @change="
              (val) =>
                selectChange(val, 'matterName', 'matterNo', matterNameItem)
            "
          >
            <el-option
              v-for="item in matterNameItem"
              :key="item.matterNo"
              :label="item.matterName"
              :value="item.matterName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="forwardingUnitName" label="发货单位">
          <el-select
            v-model="editData.forwardingUnitName"
            clearable
            filterable
            collapse-tags
            size="small"
            style="width: 160px"
            :filter-method="(val) => unitFilter(val, 'sdr')"
            @change="(val) => unitChange(val, 'forwardingUnitNo')"
          >
            <el-option
              v-for="item in forwardingUnitNameItem"
              :key="item.customerSupplierNo"
              :label="item.customerSupplierName"
              :value="item.customerSupplierName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="receivingUintName" label="收货单位">
          <el-select
            v-model="editData.receivingUintName"
            clearable
            filterable
            collapse-tags
            size="small"
            style="width: 160px"
            @change="(val) => unitChange(val, 'receivingUintNo')"
            :filter-method="(val) => unitFilter(val, 'rcv')"
          >
            <el-option
              v-for="item in receivingUintNameItem"
              :key="item.customerSupplierNo"
              :label="item.customerSupplierName"
              :value="item.customerSupplierName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item prop="shipmentNetWeight" label="发运净重">
          <el-input
            v-model="editData.shipmentNetWeight"
            clearable
            size="small"
            style="width: 160px"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item prop="shipmentNum" label="发运数量">
          <el-input
            v-model="editData.shipmentNum"
            clearable
            size="small"
            style="width: 160px"
            placeholder="请输入"
          ></el-input>
        </el-form-item> -->
        <el-form-item prop="loadPointName" label="卸货地点">
          <el-select
            v-model="editData.loadPointName"
            clearable
            filterable
            collapse-tags
            size="small"
            style="width: 160px"
            @change="
              (val) =>
                selectChange(
                  val,
                  'loadPointName',
                  'loadPointNo',
                  loadPointNameItem
                )
            "
          >
            <el-option
              v-for="item in loadPointNameItem"
              :key="item.loadPointNo"
              :label="item.loadPointName"
              :value="item.loadPointName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="meterTypeName" label="业务类型">
          <el-select
            v-model="editData.meterTypeName"
            clearable
            filterable
            collapse-tags
            size="small"
            style="width: 160px"
            @change="
              (val) =>
                selectChange(
                  val,
                  'meterTypeName',
                  'meterTypeNo',
                  meterTypeNameItem
                )
            "
          >
            <el-option
              v-for="(item, index) in meterTypeNameItem"
              :key="index"
              :label="item.baseName"
              :value="item.baseName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="isChemical" label="是否危化品">
          <el-select
            v-model="editData.isChemical"
            clearable
            filterable
            collapse-tags
            size="small"
            style="width: 160px"
          >
            <el-option
              v-for="(item, index) in isChemicalItem"
              :key="index"
              :label="item.isChemical"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="carrierUnitName" label="承运单位">
          <el-select
            v-model="editData.carrierUnitName"
            clearable
            filterable
            collapse-tags
            size="small"
            style="width: 160px"
            @change="
              (val) =>
                selectChange(
                  val,
                  'carrierUnitName',
                  'carrierUnitNo',
                  carrierUnitNameItem
                )
            "
          >
            <el-option
              v-for="item in carrierUnitNameItem"
              :key="item.carrierUnitNo"
              :label="item.carrierUnitName"
              :value="item.carrierUnitName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="customerSupplierName" label="供应商">
          <el-select
            v-model="editData.customerSupplierName"
            clearable
            filterable
            collapse-tags
            size="small"
            style="width: 160px"
            @change="(val) => unitChange(val, 'customerSupplierNo')"
            :filter-method="(val) => unitFilter(val, 'cust')"
          >
            <el-option
              v-for="item in customerSupplierNameItem"
              :key="item.customerSupplierNo"
              :label="item.customerSupplierName"
              :value="item.customerSupplierName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="railwayCarriageNo" label="车厢序号">
          <el-input
            v-model="editData.railwayCarriageNo"
            clearable
            size="small"
            style="width: 160px"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item prop="sourceArea" label="原产地">
          <el-input
            v-model="editData.sourceArea"
            clearable
            size="small"
            style="width: 160px"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item prop="station" label="发站">
          <el-input
            type="text"
            size="mini"
            v-model="editData.station"
            clearable
            style="width: 160px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="arrival" label="到站">
          <el-input
            type="text"
            size="mini"
            v-model="editData.arrival"
            clearable
            style="width: 160px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="batchNo" label="批次号" class="edit-row-wrap">
          <el-input
            style="width: 320px"
            v-model="editData.batchNo"
            size="small"
            clearable
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item prop="memo" label="备注" class="edit-row-wrap">
          <el-input
            style="width: 320px"
            v-model="editData.memo"
            size="small"
            type="textarea"
            :rows="2"
            clearable
            placeholder="请输入"
          ></el-input>
        </el-form-item> -->
        <div>
          <span style="color: red"
            >注意：下拉选择的数据项需要先筛选出结果后，然后点击选中下拉框中想要选择的项</span
          >
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="batchEdit"
          >确定</el-button
        >
        <el-button size="mini" type="default" @click="closeDialog"
          >取消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getCookie
} from '@/utils/util.js';
import {
  cookieUserId,
  cookieUserName
} from '@/config/config.js';
let userName = getCookie(cookieUserName);
let userId = getCookie(cookieUserId);
import { recordChange } from '../../../../../../utils/utils'
export default {
  props: ['type', 'showFlag', 'baseData', 'dataList'],
  data () {
    return {
      // 编辑的数据对象
      editData: {
        isChemical: '0',
        loadPointName: '',
        railwayCarriageNo: '',
        sourceArea: '',
        predictionType: '单次预报',
        // shipmentNetWeight: '',
        materialName: '',
        materialNo: '',
        forwardingUnitName: '',
        forwardingUnitNo: '',
        meterTypeName: '',
        meterTypeNo: '',
        // shipmentNum: '',
        specName: '',
        receivingUintName: '',
        receivingUintNo: '',
        contractNo: '',
        matterName: '',
        matterNo: '',
        // shipmentGrossWeight: '',
        carrierUnitName: '',
        carrierUnitNo: '',
        customerSupplierName: '',
        customerSupplierNo: '',
        trailerNo: '',
        // memo: '',
        station: '',
        arrival: '',
        batchNo: ''
      },
      // 是否危化品
      isChemicalItem: [
        { id: '0', isChemical: '否' },
        { id: '1', isChemical: '是' },
      ],
      matterNameItem: [], // 物资名称-简
      matAllList: [], // 物资名称-总
      forwardingUnitNameItem: [], // 发货单位
      receivingUintNameItem: [], // 收货单位
      customerSupplierNameItem: [],
      unitList: [], // 所有单位
      carrierUnitNameItem: [], // 承运单位
      loadPointNameItem: [], // 卸货地点-简
      loadList: [], // 卸货地点-总
      meterTypeNameItem: [], // 业务类型
      oldObj: {}
    }
  },
  async mounted () {
    this.getMatList();
    this.getLoadList();
    this.getTypeList();
    this.getCarrierList();
    this.getCustList();
  },
  methods: {
    // 批量修改保存
    async batchEdit () {
      let dataList = [];
      let logList = []
      let urlStr = ''
      this.dataList.forEach(item => {
        let obj = {
          isChemical: this.editData.isChemical,
          loadPointName: this.editData.loadPointName,
          railwayCarriageNo: this.editData.railwayCarriageNo,
          sourceArea: this.editData.sourceArea,
          predictionType: this.editData.predictionType,
          // shipmentNetWeight: this.editData.shipmentNetWeight,
          materialName: this.editData.materialName,
          materialNo: this.editData.materialNo,
          forwardingUnitName: this.editData.forwardingUnitName,
          forwardingUnitNo: this.editData.forwardingUnitNo,
          meterTypeName: this.editData.meterTypeName,
          meterTypeNo: this.editData.meterTypeNo,
          // shipmentNum: this.editData.shipmentNum,
          specName: this.editData.specName,
          receivingUintName: this.editData.receivingUintName,
          receivingUintNo: this.editData.receivingUintNo,
          contractNo: this.editData.contractNo,
          matterName: this.editData.matterName,
          matterNo: this.editData.matterNo,
          // shipmentGrossWeight: this.editData.shipmentGrossWeight,
          carrierUnitName: this.editData.carrierUnitName,
          carrierUnitNo: this.editData.carrierUnitNo,
          customerSupplierName: this.editData.customerSupplierName,
          customerSupplierNo: this.editData.customerSupplierNo,
          trailerNo: this.editData.trailerNo,
          batchNo: this.editData.batchNo,
          // memo: this.editData.memo,
          station: this.editData.station,
          arrival: this.editData.arrival,
          updateManNo: userId,
          updateManName: userName
        }
        const { oldStr, newStr } = recordChange(item, obj)
        let pageName = this.type === 'forecast' ? '静态轨道衡预报管理页面' : this.type === 'first' ? '静态轨道衡一次计量数据维护' : '静态轨道衡洁净计量数据维护'
        const param = {
          createManNo: userId,
          createManName: userName,
          operationPage: pageName,
          operationFunction: '批量修改',
          operationId: item.id,
          operationPredictionNo: item.predictionNo,
          operationCarnNo: item.railwayNo,
          operationBeforeFix: oldStr,
          operationAfterFix: newStr
        }
        logList.push(param)
        dataList.push({ ...item, ...obj })
      })
      // 记录操作日志
      // // 记录修改的内容

      // 根据传入的type值进行参数拼装
      switch (this.type) {
        case 'forecast':
          urlStr = 'pass/systemBase/v1/meterworkrailwayactuals/batchEditScales'
          break;
        case 'first':
          urlStr = 'pass/systemBase/v1/meterworkrailwayactuals/batchEditActFirsts'
          break;
        case 'actual':
          urlStr = 'pass/systemBase/v1/meterworkrailwayactuals/batchEditActuals'
          break;
      }
      const res = await this.axios.post(urlStr, dataList, { individualType: 'json' });
      if (res.status === 'succeed') {
        const log = await this.axios.post('pass/systemBase/v1/meterbaseoperationlogs/addList', [...logList], { individualType: 'json' })
        if (!log.succeed) {
          this.$message.error('修改日志保存失败');
        }
        this.$message.success('批量修改成功')
        this.closeDialog()
      } else {
        this.$message.error('批量修改失败')
      }
    },
    selectChange (val, name, id, list) {
      let item = list.find(i => i[name] === val)
      if (item) {
        this.editData[id] = item[id]
      }
    },
    // 关闭弹窗
    closeDialog () {
      // this.showFlag = false
      this.$emit('close')
    },
    // 物资名称筛选
    getMatterName (val, name) {
      if (val) {
        this.matterNameItem = this.matAllList.filter(item => {
          if (item.matterName) {
            if (item.matterName.toUpperCase().indexOf(val.toUpperCase()) !== -1) {
              return true
            }
          }
        }).slice(0, 200)
      } else {
        this.matterNameItem = [...this.matAllList].slice(0, 200)
      }
    },
    unitFilter (val, name) {
      let list = []
      if (val) {
        list = this.unitList.filter(item => {
          if (item.customerSupplierName) {
            if (item.customerSupplierName.toUpperCase().indexOf(val.toUpperCase()) !== -1) {
              return true
            }
          }
        }).slice(0, 200)
      } else {
        list = [...this.unitList].slice(0, 200)
      }
      switch (name) {
        case 'sdr': this.forwardingUnitNameItem = [...list]; break;
        case 'rcv': this.receivingUintNameItem = [...list]; break;
        case 'cust': this.customerSupplierNameItem = [...list]; break;
      }
    },
    unitChange (val, name) {
      if (val) {
        let item = this.unitList.find(item => item.customerSupplierName === val)
        this.editData[name] = item.customerSupplierNo
      } else {
        this.editData[name] = ''
      }
    },
    async getMatList () {
      // 物料名称
      if (this.$store.state.mystore.matList.length === 0) {
        await this.$store.dispatch('mystore/setMatList');
      }
      this.matAllList = [...this.$store.state.mystore.matList]
      this.matterNameItem = this.matAllList.slice(0, 200)
    },
    async getLoadList () {
      // 卸货地点
      if (this.$store.state.mystore.loadList.length === 0) {
        await this.$store.dispatch('mystore/setLoadList');
      }
      this.loadList = [...this.$store.state.mystore.loadList]
      this.loadPointNameItem = this.loadList.slice(0, 200)
    },
    async getTypeList () {
      // 业务类型
      if (this.$store.state.mystore.wgtTypeList.length === 0) {
        await this.$store.dispatch('mystore/setTypeList');
      }
      this.meterTypeNameItem = [...this.$store.state.mystore.wgtTypeList]
    },
    async getCarrierList () {
      // 承运单位
      if (this.$store.state.mystore.carrierUnitList.length === 0) {
        await this.$store.dispatch('mystore/setCarrierList');
      }
      this.carrierUnitNameItem = [...this.$store.state.mystore.carrierUnitList]
    },
    async getCustList () {
      // 收、发货单位，供应商
      if (this.$store.state.mystore.unitList.length === 0) {
        await this.$store.dispatch('mystore/setUnitList');
      }
      this.unitList = [...this.$store.state.mystore.unitList]
      this.forwardingUnitNameItem = [...this.$store.state.mystore.unitList].slice(0, 200)
      this.receivingUintNameItem = [...this.$store.state.mystore.unitList].slice(0, 200)
      this.customerSupplierNameItem = [...this.$store.state.mystore.unitList].slice(0, 200)
    }
  },
  watch: {
    baseData (newVal, oldVal) {
      this.oldObj = { ...newVal }
      this.editData = { ...newVal }
    }
  }
}
</script>
<style>
.batch-edit-wrap .el-icon-close {
  display: none;
}

.batch-edit-wrap .el-dialog__header {
  padding-top: 0px;
}

.batch-edit-wrap .el-input__inner {
  padding: 2px !important;
}

.batch-edit-wrap .el-select .el-input__inner {
  padding-right: 25px !important;
}
</style>