<template>
  <el-card class="cards">
    <div slot="header">
      <span class="card-title">
        备料明细
      </span>
    </div>

    <!-- 列表 -->
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="list"
      border
      :row-key="getOnlyRowKey"
      @selection-change="handleSelectionChange"
      @select="select"
      @select-all="selectAll"
    >
      <el-table-column
        type="selection"
        width="55"
        :reserve-selection="true"
        fixed="left"
      />
      <el-table-column
        label="物料编码"
        align="center"
        prop="materialNo"
        fixed="left"
        show-overflow-tooltip
      />
      <el-table-column
        label="物料名称"
        align="center"
        prop="materialName"
        show-overflow-tooltip
      />
      <el-table-column
        label="应备总量"
        align="center"
        prop="shouldPrepareQty"
        show-overflow-tooltip
      />
    </el-table>
  </el-card>
</template>

<script>
import { getMasterDetail, createSendMaster } from '@/api/wms/inLibrary/productionPreparation'

export default {
  name: 'ProductionPreparation',
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用料清单（投料单）列表
      list: [],
      // 是否显示弹出层
      open: false,
      currentRows: [],
      // 查看查询禁用
      queryDisabled: false,
      // 发料支援表列表
      resourceList: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        materialNo: null,
        materialName: null,
        masterId: null
      }
    }
  },
  created() {
    this.queryParams.masterId = this.$route.query.masterId
    if (this.queryParams.masterId !== null && this.queryParams.masterId !== undefined) {
      this.queryDisabled = true
      this.getList()
    } else {
      this.queryDisabled = false
    }
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true
      // 执行查询
      getMasterDetail(this.queryParams).then(response => {
        this.list = response.data.body
        this.queryParams = response.data.head
        this.total = response.data.total
      }).finally(() => {
        this.loading = false
      })
    },
    /** 取消按钮 */
    cancel() {
      this.open = false
      this.reset()
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        orderType: undefined,
        erpId: undefined,
        erpOrderNo: undefined,
        erpOrderTime: undefined,
        status: undefined,
        workErpId: undefined,
        workOrderNo: undefined,
        workDetailErpId: undefined,
        productCode: undefined,
        productUnit: undefined,
        productName: undefined,
        productModel: undefined,
        productAmount: undefined,
        departmentNo: undefined,
        remark: undefined,
        erpMdtime: undefined,
        erpMark: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 支援明细
    handleGenerateSupport() {
      if (this.$route.query.masterId !== null && this.$route.query.masterId !== undefined) {
        if (this.currentRows.length <= 0) {
          this.$modal.msgWarning('请选择您要查看明细的数据!')
          return
        }
        this.$refs.issueSupport.queryParams.masterId = this.currentRows[0].masterId
        this.$refs.issueSupport.issueDisable = true
        this.$refs.issueSupport.open = true
      } else {
        this.$refs.issueSupport.issueDisable = false
        this.$refs.issueSupport.open = true
      }
    },
    handleRows(data) {
      this.resourceList = data
      data.forEach((item, index) => {
        const { materialNo, materialName, nowSendQty: shouldPrepareQty } = item
        const findIndex = this.list.findIndex(i => i.materialNo === materialNo)
        if (findIndex > -1) {
          this.list[findIndex].shouldPrepareQty += Number(shouldPrepareQty)
        } else {
          this.list.push({ materialNo, materialName, shouldPrepareQty })
        }
      })
    },
    // 提交
    handleSubmit() {
      if (this.list.length <= 0) {
        this.$modal.msgWarning('请先选择支援明细!')
        return
      }
      this.resourceList = this.resourceList.map(item => {
        const {
          materialName,
          materialNo,
          needQty,
          nowSendQty,
          workOrderBomNo,
          workOrderNo,
          detailErpId: workDetailErpId,
          id: wmsProductionWorkOrderBomDetailId } = item
        return {
          materialName,
          materialNo,
          needQty,
          nowSendQty,
          workOrderBomNo,
          workOrderNo,
          workDetailErpId,
          wmsProductionWorkOrderBomDetailId
        }
      })
      const rowList = this.list.reduce((acc, cur) => {
        const { materialNo } = cur
        const item = this.resourceList.filter(i => i.materialNo === materialNo)
        acc.push({ ...cur, ...{ resource: item }})
        return acc
      }, [])
      const params = {
        remark: this.queryParams.remark,
        detail: rowList
      }
      createSendMaster(params).then(res => {
        this.$modal.msgSuccess('创建成功!')
        this.$tab.closeOpenPage()
        this.$router.go(-1)
      })
    },
    getOnlyRowKey(row) {
      return row.id
    },
    // 选中的
    handleSelectionChange(val) {
      this.currentRows = val
    },
    select(selection, row) {
      if (selection.length > 1) {
        const del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },
    selectAll(selection) {
      if (selection.length > 1) {
        selection.length = 1
      }
    }
  }
}
</script>

