<template>
  <el-dialog
    :visible.sync="visible"
    title="选择备品备件"
    width="90vw"
    append-to-body
  >
    <el-form :model="formData" label-width="120px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="货位" prop="cargoSpaceCode">
            <el-input
              v-model.trim="formData.cargoSpaceCode"
              placeholder="请输入"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="`${title}编码`" prop="onlyCode">
            <el-input
              v-model.trim="formData.onlyCode"
              placeholder="请输入"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="批次号" prop="batchNum">
            <el-input
              v-model.trim="formData.batchNum"
              placeholder="请输入"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="包装编码" prop="num">
            <el-input
              v-model.trim="formData.num"
              placeholder="请输入"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产日期" prop="time">
            <el-date-picker
              v-model="formData.time"
              type="daterange"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="采购日期" prop="productTime">
            <el-date-picker
              v-model="formData.productTime"
              type="daterange"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="text-align: right">
          <el-button @click="reset" icon="el-icon-refresh-left" size="small"
            >重置</el-button
          >
          <el-button
            type="primary"
            @click="handleList"
            icon="el-icon-search"
            size="small"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <div class="info-box">
      <div class="select-box"><span>已选数量</span> {{ selectedNum }}条</div>
    </div>
    <el-table
      height="60vh"
      ref="tableRef"
      :data="tableData"
      @selection-change="handleSelectionChange"
      style="width: 100%"
      :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
    >
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column
        label="货位"
        prop=""
        show-overflow-tooltip
        min-width="200"
      >
        <template slot-scope="{ row }">
          {{ row.warehouseName }}-{{ row.areaName }}-{{ row.shelfCode }}-{{
            row.cargoSpaceCode
          }}
        </template>
      </el-table-column>
      <el-table-column
        :label="`${title}编码`"
        prop="onlyCode"
        width="200px"
      ></el-table-column>
      <el-table-column label="批次号" prop="batchNum"></el-table-column>
      <el-table-column
        label="生产日期"
        prop="manufactureTime"
        width="180"
      ></el-table-column>
      <el-table-column
        label="采购日期"
        prop="procurementTime"
        width="180"
      ></el-table-column>
      <el-table-column
        :label="`最小包装单元`"
        prop=""
        v-if="!infoData.isUnpack"
      >
        <template slot-scope="{ row }">
          {{ row.measurementUnit }}{{ row.unit }}/{{ row.minPackUnit }}
        </template>
      </el-table-column>
      <el-table-column label="包装编码" prop="num"></el-table-column>
      <el-table-column label="入库时间" prop="createTime"></el-table-column>
      <el-table-column width="50" type="selection"> </el-table-column>
    </el-table>
    <div slot="footer" class="footer">
      <div>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  // import { getWarehouseActualDetail } from '@/api/stockManagement/stockLedger.js'
  // import { deepClone } from '@/utils'

  export default {
    props: {
      tableHeader: {
        type: Array,
        default: () => []
      },
      title: {
        type: String,
        default: ''
      },
      warehouseId: {
        type: [Number, String],
        default: ''
      }
    },
    data () {
      return {
        visible: false,
        confirmResolve: null,
        tableData: [],
        selectList: [],
        formData: {
          cargoSpaceCode: '',
          time: '',
          productTime: '',
          batchNum: '',
          num: '',
          onlyCode: ''
        },
        infoData: {},
        memo: [],
        selectionList: []
      };
    },
    computed: {
      selectedNum () {
        return this.memo.length + this.selectionList.length;
      },
      checkedAll: {
        get () {
          return this.tableData.every((item) => item.checked);
        },
        set (val) {
          this.tableData.forEach((item) => (item.checked = val));
        }
      }
    },
    methods: {
      open (infoData, memo = []) {
        this.visible = true;
        this.batchVisible = false;
        this.infoData = infoData;
        this.selectionList = [];
        this.tableData = [];
        this.formData = {};

        this.memo = deepClone(memo || []);
        this.multipleNum = this.memo.length;

        this.handleList();

        return new Promise((res) => (this.confirmResolve = res));
      },
      cancel () {
        this.visible = false;
      },
      confirm () {
        if (!this.selectedNum) {
          return this.$message.error('请勾选数据');
        }
        this.confirmResolve &&
          this.confirmResolve([...this.memo, ...this.selectionList]);
        this.cancel();
      },
      reset () {
        this.formData = {};
        this.handleList();
      },
      handleSelectionChange (val) {
        this.selectionList = val;
      },
      // 表格数据
      async handleList () {
        // 搜索前把已选缓存
        this.memo.push(...this.selectionList);

        const params = {
          assetCode: this.infoData.informationCode,
          ...this.formData
        };
        if (params.time?.length) {
          params.startTime = params.time[0];
          params.endTime = params.time[1];
        }
        if (params.productTime?.length) {
          params.startProductTime = params.productTime[0];
          params.endProductTime = params.productTime[1];
        }
        params.warehouseId = this.warehouseId;
        delete params.time;
        delete params.productTime;
        const res = await getWarehouseActualDetail(params);
        if (res?.success) {
          this.tableData = res.data;
          this.$nextTick(() => {
            this.tableData.map((i) => {
              const index = this.memo.findIndex(
                (itm) => i.onlyCode === itm.onlyCode
              );
              if (index > -1) {
                this.memo.splice(index, 1);
                this.$refs.tableRef.toggleRowSelection(i, true);
              }
            });
          });
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .info-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 14px;
    padding: 20px 0 5px;
  }

  .footer {
    display: flex;
    justify-content: flex-end;
  }
</style>
