<template>
  <ele-modal
    width="60vw"
    :visible.sync="visible"
    :close-on-click-modal="false"
    row-key="code"
    custom-class="ele-dialog-form"
    :title="'合批'"
    :maxable="true"
  >
    <div class="form-wrapper">

      <headerTitle title="合批" > </headerTitle>
      <ele-pro-table
        ref="table"
        :needPage="false"
        :columns="columns"
        :datasource="mergeList"
      >
        <template v-slot:action="{ $index }">
          <el-popconfirm
            class="ele-action"
            title="确定要删除此子单吗？"
            @confirm="remove($index)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>

      <el-form
        :model="formData"
        ref="form"
        label-width="140px"
        class="mt20"
        :rules="rules"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="要求生产数量" prop="requiredFormingNum">
              {{ mTotal }}
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="要求完成日期" prop="reqMoldTime">
              <el-date-picker
                v-model="formData.reqMoldTime"
                type="date"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="批次号" prop="batchNo">
              <el-input
                v-model="formData.batchNo"
                style="width: 220px"
                placeholder="请输入批次号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer">
      <el-button plain @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import { mergeBatch } from '@/api/productionPlan/index.js';
  export default {
    components: {},
    data() {
      return {
        visible: false,

        mergeList: [],

        formData: {},

        rules: {
          reqMoldTime: [
            { required: true, message: '请要求完成日期', trigger: 'change' }
          ],
          batchNo: [
            { required: true, message: '请输入批次号', trigger: 'blur' }
          ]
        },
        mTotal: 0,

        columns: [
          {
            prop: 'batchNo',
            label: '批次号',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },

          {
            prop: 'code',
            label: '计划编号',
            align: 'center',
            minWidth: 200
          },

          {
            prop: 'produceRoutingName',
            label: '工艺路线',
            align: 'center',
            minWidth: 120
          },
          {
            prop: 'requiredFormingNum',
            label: '要求生产数量',
            align: 'center',
            minWidth: 200
          },

          {
            prop: 'reqMoldTime',
            label: '要求完成日期',
            align: 'center',
            minWidth: 200
          },
          {
            prop: 'action',
            slot: 'action',
            label: '操作',
            align: 'center',
            minWidth: 100
          }
        ]
      };
    },
    methods: {
      open(list) {
        this.mergeList = list;
        this.changeNum();
        this.visible = true;
      },

      remove(index) {
        if (this.mergeList.length <= 2)
          return this.$message.warning('至少保留二个计划');
        this.mergeList.splice(index, 1);
        this.changeNum();
      },

      changeNum() {
        this.mTotal = 0;
        this.mergeList.forEach((item) => {
          this.mTotal += item.requiredFormingNum;
        });
      },

      cancel() {
        this.formData = {};
        this.visible = false;
        this.$refs.form.resetFields();
      },

      confirm() {
        this.$refs.form.validate(async (value) => {
          if (value) {
            const params = {
              ids: this.mergeList.map((item) => item.id),
              reqMoldTime: this.formData.reqMoldTime,
              batchNo: this.formData.batchNo,
              requiredFormingNum: this.mTotal
            };

            const res = await mergeBatch(params);
            if (res) {
              this.$message.success('计划合并成功！');
              this.$emit('success');
              this.cancel();
            }
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .mt20 {
    margin-top: 20px;
  }
</style>
