<template>
  <ele-modal :visible.sync="visible" :closed="cancel" :title="`${type == 'add' ? '创建' : '编辑'}生产配料计划`"
    custom-class="ele-dialog-form" :close-on-click-modal="true" :close-on-press-escape="false" width="80%">
    <el-form :model="formData" ref="formRef" label-width="120px" class="ele-body" :rules="rules">
      <el-row :gutter="32">
        <el-col :span="12">
          <el-form-item label="配料计划名称" prop="name">
            <el-input placeholder="请选择" v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input placeholder="备注" v-model="formData.remark"></el-input>
          </el-form-item>
        </el-col>








      </el-row>
    </el-form>

    <el-form :model="formData" ref="tableForm">

      <ele-pro-table ref="table" :needPage="false" :columns="columns" row-key="id">


        <template v-slot:toolbar>
          <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="showAdd">
            添加生产订单
          </el-button>
        </template>




        <template v-slot:code="{ row }">
          <el-input placeholder="请输入" readonly :value="row.code || row.salesOrderCode"></el-input>
        </template>





        <template v-slot:action="{ row, $index }">
          <template>
            <el-link type="primary" :underline="false" @click="categorySelect(row)">
              添加物料
            </el-link>
            <el-popconfirm class="ele-action" title="确定要删除此生产订单吗？" @confirm="remove(row, $index)">
              <template v-slot:reference>
                <el-link type="danger" :underline="false" icon="el-icon-delete">
                  删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </template>


        <!-- 展开内容 -->
        <template v-slot:expand="{ row, $index }">
          <div style="width:calc(100% - 95px); min-height: 60px; margin-left: 95px;" v-if="row.materialList.length > 0">
            <ele-pro-table :toolbar="false" toolsTheme="none" ref="table2" :need-page="false"
              :datasource="row.materialList" :columns="columns2" :key="row.categoryId + '-'+ $index">


              <template v-slot:sort="{ $index }">
                {{ $index }}
              </template>

              <template v-slot:taskName="{ row }">
                <div v-if="row.produceSelect">
                  <el-select v-model="row.taskId" placeholder="请选择工序">
                    <el-option v-for="item in row.produceRoutingList" :key="item.id" :label="item.name" :value="item.id"
                      @click.native="row.taskName = item.name">
                    </el-option>
                  </el-select>
                </div>
                <div v-if="!row.produceSelect">
                  {{ row.taskName }}
                </div>
              </template>


              <template v-slot:demandQuantity="{ row }">
                <el-input v-model="row.demandQuantity" placeholder="请输入" @input="(value) =>
                (row.demandQuantity = value.replace(
                  /^(-)*(\d+)\.(\d\d\d\d\d\d).*$/,
                  '$1$2.$3'
                ))
                  "></el-input>
              </template>







              <template v-slot:purchaseQuantity="{ row }">
                <el-input v-model="row.purchaseQuantity" placeholder="请输入" @input="(value) =>
                (row.purchaseQuantity = value.replace(
                  /^(-)*(\d+)\.(\d\d\d\d\d\d).*$/,
                  '$1$2.$3'
                ))
                  ">
                    <template slot="append">{{ row.unit }}</template>
                </el-input>
                 
                 
              </template>

              <template v-slot:action="{ row }">
                <el-popconfirm class="ele-action" title="确定要删除当前物料吗？" @confirm="remove2(row)">
                  <template v-slot:reference>
                    <el-link type="danger" :underline="false" icon="el-icon-delete">
                      删除
                    </el-link>
                  </template>
                </el-popconfirm>
              </template>

            </ele-pro-table>
          </div>

        </template>


      </ele-pro-table>

    </el-form>

    <div slot="footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>


    <workOrderPop ref="workOrderRef" @chooseOrder="chooseOrder"></workOrderPop>


    <ProductModal ref="productRefs" @chooseModal="chooseModal" />


  </ele-modal>
</template>

<script>

import workOrderPop from './workOrderPop.vue'
import ProductModal from './ProductModal2.vue'
import { listBomByWorkOrderIds, save, getById } from '@/api/materialPlan/index';

export default {
  components: {
    workOrderPop,
    ProductModal,


  },
  data() {

    return {
      visible: false,
      type: 'add',

      tableData: [],

      xsId: null,


      // 表格列配置
      columns: [
        {
          width: 45,
          type: 'expand',
          columnKey: 'materialList',
          align: 'center',
          slot: 'expand'
        },

        {
          width: 50,
          label: '序号',
          type: 'index',
          align: 'center',
          slot: 'index'
        },

        {
          prop: 'code',
          label: '生产订单号',
          slot: 'code',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 170
        },
        {
          prop: 'salesOrderCode',
          label: '销售订单号',
          align: 'center',
          minWidth: 110,
          sortable: true
        },
        {
          prop: 'customerName',
          label: '客户名称',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'deliveryNum',
          label: '客户代号',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'productCode',
          label: '产品编码',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 140
        },

        {
          prop: 'productName',
          label: '产品名称',
          align: 'center',
          minWidth: 120
        },

        {
          prop: 'model',
          label: '型号',
          align: 'center',
          minWidth: 120
        },

        {
          prop: 'brandNo',
          label: '牌号',
          align: 'center'
        },

        {
          prop: 'deliveryTime',
          label: '交付日期',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'formingNum',
          label: '要求生产数量',
          align: 'center',
          minWidth: 120
        },
   


        {
          prop: 'produceRoutingName',
          label: '工艺路线',
          align: 'center',
          minWidth: 110
        },



        {
          columnKey: 'action',
          label: '操作',
          width: 150,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true
        }
      ],

      columns2: [

        {
          width: 50,
          label: '序号',
          prop: 'sort',
          slot: 'sort',
          align: 'center',
        },

        {
          label: '工序',
          slot: 'taskName',
          prop: 'taskName',
          width: 150,
        },


        {
          label: '物料名称',
          prop: 'name',
        },

        {
          label: '物料编码',
          prop: 'code'
        },
        {
          label: '牌号',
          prop: 'brandNum'
        },
        {
          label: '型号',
          prop: 'modelType'
        },

        // {
        //   prop: 'availableCountBase',
        //   label: '包装库存',
        //   sortable: 'custom',
        // },
        // {
        //   label: '单位',
        //   prop: 'weightUnit'
        // },

        {
          prop: 'inventoryQuantity',
          label: '计量库存',
          sortable: 'custom',
        },

        {
          label: '计量单位',
          prop: 'unit',
        
        },

        {
          label: '需求数量',
          slot: 'demandQuantity',
          action: 'demandQuantity'
        },

        {
          label: '领料数量',
          slot: 'purchaseQuantity',
          action: 'purchaseQuantity',
          width: 160,
        },

        {
          columnKey: 'action',
          label: '操作',
          width: 90,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true
        }

      ],
      rules: {
        name: [
          {
            required: true,
            message: '请输入配料计划名称',
            trigger: ['blur', 'change']
          }
        ],


      },
      formData: {
        name: '',
        remark: '',
        detailRemoveIds: [],
        materialRemoveIds: []

      },


    };
  },
  methods: {
    async open(type, row) {
      this.type = type;
      this.visible = true;
     
      if (row) {
        this.getDetail(row.id)
      } else {
        this.$nextTick(() => {
          this.$refs.table.setData([]);
        })
      }
   
    },


    getDetail(id) {

      getById(id).then(res => {
        this.$set(this.formData, 'name', res.name)
        this.$set(this.formData, 'remark', res.remark)
        this.formData['id'] = res.id
        this.$refs.table.setData([...res.workOrderList]);
        this.$nextTick(() => {
          this.$refs.table.toggleRowExpansionAll()
        })

      })
    },

    isEverySubArrayRequiredFieldPresent(nestedArray, requiredFields) {
      return nestedArray.every(subArray =>
        requiredFields.every(field =>
          subArray.materialList.some(item => item[field] !== '')
        )
      );
    },

    confirm() {
      this.$refs.formRef.validate(async (value) => {
        if (value) {

          let _arr = this.$refs.table.getData() ?? []

          if (_arr.length == 0) {
            this.$message.info('请添加生产订单');
            return false
          }






          const requiredFields = ['taskId']; // 必填字段

          const result = await this.isEverySubArrayRequiredFieldPresent(_arr, requiredFields);



          if (!result) {
            this.$message.info('请选择工序！');
            return false
          }

          let _arr2 = []


          _arr2 = _arr.map(m => {
            if (Object.prototype.hasOwnProperty.call(m, "workOrderId") && m.workOrderId) {
            } else {

              m.workOrderId = m.id
              m.workOrderCode = m.code
              delete m.id
              delete m.code


            }

            m.materialList.forEach(f => {
              if (f.categoryId.includes('-')) {
                f.categoryId = f.categoryId.split('-')[0]
              }

            })

            return {
              ...m,
            }
          })

          console.log(_arr2)


          this.formData['type'] = 2
          this.formData['workOrderList'] = _arr2
          await save(this.formData);
          this.$message.success('保存成功！');
          this.$emit('success');
          this.cancel();
        }
      });
    },
    cancel() {
      this.formData = {};
      this.formData.detailRemoveIds = []
      this.formData.materialRemoveIds = []
      this.$refs.table.setData([]);
      this.$refs.formRef.resetFields();
      this.visible = false;

    },

    datasource({ }) {
      return []
    },

    reload() {
      this.$refs.table.reload();
    },

    showAdd() {
      this.tableData = this.$refs.table.getData();

      this.$refs.workOrderRef.open(this.tableData)
    },

    chooseOrder(list) {
      let workOrderIds = []
      list.map((m => {
        workOrderIds.push(m.id)
        return {
          ...m,
        }
      }))



      if (workOrderIds.length > 0) {
        listBomByWorkOrderIds({ workOrderIds: workOrderIds }).then((res) => {
          res.forEach(m => {
            if (m.materialList.length > 0) {
              m.materialList.forEach(p => {
                p.detailId = m.id
              })
            }
          })


          this.$refs.table.setData([...this.tableData, ...res]);


          this.$nextTick(() => {
            this.$refs.table.toggleRowExpansionAll()
          })
        })
      }
    },

    remove(row, index) {
      this.formData.detailRemoveIds.push(row.id)
      let _arr = this.$refs.table.getData() || [];
      _arr.splice(index, 1);
      this.$refs.table.setData([..._arr]);
    },

    categorySelect(row) {
      this.$refs.productRefs.open(row.materialList, row, this.type)
    },

    chooseModal(data, current) {
      data.map((m => {
        m.detailId = current.id

        return {
          ...m,
        }
      }))

      let tableList = []
      tableList = this.$refs.table.getData()

      tableList.forEach(e => {
        if (e.id == current.id) {

          if (e.materialList.length == 0) {
            e.materialList = data

          } else {
            e.materialList = [...e.materialList, ...data]

          }


        }
      })

      this.$refs.table.setData([...tableList]);
      this.$forceUpdate()

    },

    remove2(row) {
      const data = this.$refs.table.getData() ?? [];
      this.formData.materialRemoveIds.push(row.id)
      data.forEach((e) => {
        if (row.detailId == e.id) {
          e.materialList = e.materialList.filter((d) => d.categoryId !== row.categoryId);
        }
      })

      this.$refs.table.setData([...data])
      this.$forceUpdate()
    },







  }
};
</script>

<style lang="scss" scoped>
:deep(.el-table__expanded-cell) {

  padding-bottom: 30px !important;
  border-bottom: 12px solid #CCFFCC !important;
}
</style>

