<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">
      <el-form :model="requestData" label-width="0" :show-message="false">
        <el-descriptions title="" :column="2" border>
          <el-descriptions-item label="计划编号">
            {{ formData.code }}</el-descriptions-item
          >

          <el-descriptions-item label="产品编码">{{
            formData.productCode
          }}</el-descriptions-item>

          <el-descriptions-item label="产品名称">{{
            formData.productName
          }}</el-descriptions-item>

          <el-descriptions-item label="牌号|型号">
            {{ formData.brandNo }}|{{ formData.model }}</el-descriptions-item
          >

          <el-descriptions-item label="批次号">{{
            formData.batchNo
          }}</el-descriptions-item>

          <el-descriptions-item label="工艺路线">{{
            formData.produceRoutingName
          }}</el-descriptions-item>

          <el-descriptions-item label="要求生产数量">{{
            formData.requiredFormingNum
          }}</el-descriptions-item>
          <el-descriptions-item label="要求完成日期">{{
            formData.reqMoldTime
          }}</el-descriptions-item>
        </el-descriptions>
      </el-form>

      <headerTitle title="剩余拆批" class="mt20"> </headerTitle>
      <el-form ref="form" :model="form" :rules="rules">
        <ele-pro-table
          ref="table"
          :needPage="false"
          :columns="columns"
          :datasource="form.surplusUnpack"
        >
          <template v-slot:toolbar>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              :disabled="requiredFormingNum == 0 ? true : false"
              @click="openUnpack"
            >
              拆批
            </el-button>
          </template>

          <template v-slot:requiredFormingNum="scope">
            <el-form-item
              v-if="requiredFormingNum != 0"
              :prop="'surplusUnpack.' + scope.$index + '.requiredFormingNum'"
              :rules="[
                {
                  required: true,
                  message: '请输入要求生产数量',
                  trigger: 'change'
                },
                {
                  pattern: /^\d+(\.{0,1}\d+){0,1}$/,
                  message: '拆批数超过生产数量',
                  trigger: ['blur', 'change']
                }
              ]"
            >
              <el-input
                disabled
                v-model="requiredFormingNum"
                placeholder="请输入"
              ></el-input>
            </el-form-item>

            <el-form-item v-else> 工单已全部拆完 </el-form-item>
          </template>

          <template v-slot:splitResidue="scope">
            {{ formData.splitResidue }}
          </template>
        </ele-pro-table>

        <headerTitle title="拆批" class="mt20"> </headerTitle>

        <ele-pro-table
          ref="table"
          :needPage="false"
          :columns="columns2"
          :datasource="form.unpackList"
        >
          <template v-slot:batchNo="{ row }">
            <el-input v-model="row.batchNo" placeholder="请输入"></el-input>
          </template>
          <template v-slot:requiredFormingNum="scope">
            <el-form-item
              :prop="'unpackList.' + scope.$index + '.requiredFormingNum'"
              :rules="{
                required: true,
                message: '请输入要求生产数量',
                trigger: 'change'
              }"
            >
              <!-- @change="changeNum(scope.$index)" @input="(scope.$index)"-->
              <!-- <el-input-number type="number" @input="inputNum"  :min="0" :max="maxNum"
                v-model="scope.row.requiredFormingNum" placeholder="请输入"></el-input-number> -->
              <el-input
                v-model="scope.row.requiredFormingNum"
                type="number"
                @input="changeNum(scope.$index)"
                :min="0"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </template>

          <template v-slot:reqMoldTime="scope">
            <el-form-item
              :prop="'unpackList.' + scope.$index + '.reqMoldTime'"
              :rules="{
                required: true,
                message: '请选择开始计划时间',
                trigger: 'change'
              }"
            >
              <!-- formData.reqMoldTime -->
              <el-date-picker
                class="w100"
                v-model="scope.row.reqMoldTime"
                type="date"
                value-format="yyyy-MM-dd"
                @change="changeDateTime(scope.row.reqMoldTime, scope.$index)"
              ></el-date-picker>
            </el-form-item>
          </template>

          <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>
    </div>
    <div slot="footer">
      <el-button plain @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm" :loading="loading"
        >确定</el-button
      >
    </div>
  </ele-modal>
</template>

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

        formData: {},
        requestData: {
          deviceCode: '',
          deviceName: '',
          deviceId: ''
        },
        requiredFormingNum: 0,

        pickerOptions: {
          disabledDate: (time) => {
            // 根据某个条件动态设置最大日期
            if (this.formData.reqMoldTime) {
              const maxDate = new Date(this.formData.reqMoldTime); // 您的逻辑方法
              return time.getTime() > maxDate.getTime();
            } else {
              return false;
            }
          }
        },

        form: {
          surplusUnpack: [],
          unpackList: []
        },

        rules: {},

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

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

          {
            prop: 'requiredFormingNum',
            label: '要求生产数量',
            align: 'center',
            slot: 'requiredFormingNum',
            minWidth: 200
          }
        ],

        columns2: [
          {
            slot: 'batchNo',
            prop: 'batchNo',
            label: '批次号',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },
          {
            prop: 'joinPlanCode',
            label: '计划编号',
            align: 'center',
            minWidth: 200
          },
          {
            prop: 'requiredFormingNum',
            label: '要求生产数量',
            align: 'center',
            slot: 'requiredFormingNum',
            minWidth: 200
          },
          {
            prop: 'reqMoldTime',
            label: '要求完成日期',
            align: 'center',
            slot: 'reqMoldTime',
            minWidth: 200
          },

          {
            columnKey: 'action',
            label: '操作',
            width: 160,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        loading: false,
        custom_code: 1
      };
    },
    methods: {
      open(row) {
        this.visible = true;
        this.formData = deepClone(row);
        this.formData.reqMoldTime = this.formData.reqMoldTime.split(' ')[0];
        if (this.formData.splitBatch == 1) {
          this.columns[2].label = '剩余数量';
          this.requiredFormingNum = this.formData.splitResidue;
        } else {
          this.requiredFormingNum = this.formData.requiredFormingNum;
        }

        this.form.surplusUnpack = [];
        this.form.unpackList = [];
        this.setSurplus();
        // 自定义编码
        if (!row.children || row.children.length == 0) {
          this.custom_code = 1;
          return;
        }
        let maxSum = 0;
        row.children.map((el) => {
          if (!el.batchNo) return;
          // 自定义批次号规则
          let rules = this.extractIntegerAfterDash(el.batchNo);
          if (!rules.exists || !rules.isInteger) return;
          let value = rules.rightValue - 0;
          maxSum = maxSum < value ? value : maxSum;
        });
        this.custom_code = maxSum - 0 + 1;
      },
      extractIntegerAfterDash(str) {
        // 1. 检查字符串是否包含分隔符 '-'
        if (str.includes('-')) {
          // 2. 找到最后一个 '-' 的位置
          const lastIndex = str.lastIndexOf('-');

          // 3. 提取 '-' 右侧的内容
          const rightPart = str.substring(lastIndex + 1).trim();

          // 4. 验证是否为纯整数（正整数或0）
          const isInteger = /^[1-9]\d*$|^0$/.test(rightPart); // 不允许负号和小数点

          return {
            exists: true,
            rightValue: rightPart,
            isInteger: isInteger
          };
        }

        // 不存在分隔符时返回默认结果
        return {
          exists: false,
          rightValue: null,
          isInteger: false
        };
      },
      setSurplus() {
        this.form.surplusUnpack.push({
          joinPlanCode: this.formData.code,
          requiredFormingNum:
            this.formData.splitBatch == 1
              ? this.formData.splitResidue
              : this.formData.requiredFormingNum,
          batchNo: this.formData.batchNo,
          isCopy: 1
        });
      },

      openUnpack() {
        let batchNo = `${this.formData.batchNo}-${this.custom_code}`;
        this.form.unpackList.push({
          joinPlanCode: this.formData.code,
          batchNo: batchNo,
          requiredFormingNum: '',
          reqMoldTime: this.formData.reqMoldTime
        });
        this.custom_code = this.custom_code + 1;
      },

      changeDateTime(val, index) {
        const d1 = new Date(this.formData.reqMoldTime);
        const d2 = new Date(val);

        if (d1.getTime() < d2.getTime()) {
          this.$confirm('所选的完成时间超过要求完成时间, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              // this.$message({
              //   type: 'success',
              //   message: '删除成功!'
              // });
            })
            .catch(() => {
              this.form.unpackList[index].reqMoldTime =
                this.formData.reqMoldTime;
              // this.$message({
              //   type: 'info',
              //   message: '已取消删除'
              // });
            });
        }
      },

      changeNum(index) {
        let num =
          this.formData.splitBatch == 1
            ? this.formData.splitResidue
            : this.formData.requiredFormingNum;
        this.form.unpackList.forEach((e) => {
          if (
            e.requiredFormingNum != null &&
            e.requiredFormingNum != undefined
          ) {
            num = num - Number(e.requiredFormingNum);
            if (num >= 0) {
              this.requiredFormingNum = num;
            } else {
              this.$nextTick(() => {
                this.$set(this.form.unpackList[index], 'requiredFormingNum', 0);
              });
              this.$message.error('拆批数超过生产数量');

              return;
            }
          }
        });
      },

      remove(index) {
        this.form.unpackList.splice(index, 1);
        if (this.form.unpackList.length == 0) {
          this.requiredFormingNum =
            this.formData.splitBatch == 1
              ? this.formData.splitResidue
              : this.formData.requiredFormingNum;
        } else {
          this.changeNum(index);
        }
      },

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

      confirm() {
        this.$refs.form.validate(async (value) => {
          if (value) {
            if (
              this.form.unpackList.length == 1 &&
              this.form.unpackList[0].requiredFormingNum ==
                this.formData.requiredFormingNum
            ) {
              this.$message.info('拆批数要大于1');
              return false;
            }

            if (
              this.form.surplusUnpack.length == 1 &&
              this.form.unpackList.length == 0
            ) {
              this.$message.info('拆批数要大于1');
              return false;
            }

            let params = [];
            // console.log(this.requiredFormingNum,'22222222223333');
            // if (this.requiredFormingNum != 0) {
            this.form.surplusUnpack[0].requiredFormingNum =
              this.requiredFormingNum;
            params = [...this.form.unpackList, ...this.form.surplusUnpack];
            // } else {
            //   params = this.form.unpackList;
            // }

            // console.log(this.form.surplusUnpack,'2222222222');

            // form.surplusUnpack
            // console.log(params, '拆分参数----------------------');

            // return;
            this.loading = true;
            try {
              const res = await splitWork(params);
              this.loading = false;
              if (res) {
                this.$message.success('拆分成功！');

                this.$emit('success', []);
                this.cancel();
              }
            } catch (err) {
              this.loading = false;
            }
          }
        });
      }
    }
  };
</script>

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

  .el-form-item {
    margin-bottom: 0 !important;
  }
</style>
