<template>
  <div>
    <el-card>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-divider content-position="left"><span style="font-weight: bold; font-size: larger;">ERP订单信息</span>
        </el-divider>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="订单编号：">{{ form.orderCode }}</el-form-item>
            <el-form-item label="成品名称：">{{ form.materialName }}</el-form-item>
            <el-form-item label="面积与重量：">{{ form.orderDetail.AreaAndWeight }}</el-form-item>
            <el-form-item label="计划开始时间：">{{ parseTime(form.beginDate) }}</el-form-item>
            <!--            <el-form-item label="选择生产BOM：">-->
            <!--              <el-select v-model="form.bomId" placeholder="请选择生产BOM">-->
            <!--                <el-option-->
            <!--                  v-for="item in orderBomList"-->
            <!--                  :key="item.objId"-->
            <!--                  :label="item.materialAll"-->
            <!--                  :value="item.objId"-->
            <!--                />-->
            <!--              </el-select>-->
            <!--            </el-form-item>-->
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划数量（米）：" label-width="140px"> {{ form.orderAmount }}</el-form-item>
            <el-form-item label="客户信息：">{{ form.orderDetail.CustomerInfo }}</el-form-item>
            <el-form-item label="使用原材料：">{{ form.orderDetail.UsingRawMaterials }}</el-form-item>
            <el-form-item label="计划结束时间：" label-width="140px">{{ parseTime(form.endDate) }}</el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left"><span style="font-weight: bold; font-size: larger;">生产工单信息</span>
        </el-divider>
        <!--        <el-row :gutter="10" class="mb8">-->
        <!--          <el-col :span="1.5">-->
        <!--            <el-button icon="el-icon-plus" size="mini" type="primary" @click="handleAddMesProductPlan">新增-->
        <!--            </el-button>-->
        <!--          </el-col>-->
        <!--          <el-col :span="1.5">-->
        <!--            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteMesProductPlan"-->
        <!--                       :disabled="single"-->
        <!--            >删除-->
        <!--            </el-button>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <el-table ref="mesProductPlan" :data="mesProductPlanList"
                  :row-class-name="rowMesProductPlanIndex" @selection-change="handleMesProductPlanSelectionChange"
        >
          <el-table-column align="center" type="selection" width="50"/>
          <el-table-column align="center" label="序号" prop="index" width="50" v-if="false"/>
          <el-table-column align="center" label="工单编号" prop="planCode" width="160">
            <template slot-scope="scope">
              <el-input v-model="scope.row.planCode" :disabled="true"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="物料编号" prop="materialCode" width="140">
            <template slot-scope="scope">
              <el-input v-model="scope.row.materialCode" :disabled="true"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="物料名称" prop="materialName" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.materialName" :disabled="true"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="计划数量" prop="planAmount" width="130">
            <template slot-scope="scope">
              <el-input v-model="scope.row.planAmount" :disabled="true"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="生产工位" prop="stationCode" width="180">
            <template slot-scope="scope">
              <el-select v-model="scope.row.stationCode" placeholder="请选择生产工位">
                <el-option
                  v-for="item in productLineList"
                  :key="item.productLineCode"
                  :label="item.productLineName"
                  :value="item.productLineCode"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="计划班组" prop="teamCode" width="200">
            <template slot-scope="scope">
              <el-select v-model="scope.row.teamCode" placeholder="请选择班组">
                <el-option
                  v-for="item in teamMembersList"
                  :key="item.teamCode"
                  :label="item.teamName"
                  :value="item.teamCode"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="计划开始时间" prop="planBeginTime" width="250">
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.planBeginTime" clearable
                              placeholder="请选择计划开始时间"
                              type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="计划完成时间" prop="planEndTime" width="250">
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.planEndTime" clearable
                              placeholder="请选择计划完成时间"
                              type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <el-form label-width="100px">
        <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button @click="close()">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>


  </div>
</template>

<script>
import { generateWorkOrder } from '@/api/mes/prod/prodOrderInfo'
import { getBaseProductLineList } from '@/api/mes/base/baseProductLine'
import { getTeamMembers } from '@/api/mes/base/baseTeamMembers'
import { orderAddProdPlanInfoList } from '@/api/mes/prod/prodPlanInfo'

export default {
  name: 'ProductPlanEdit',
  dicts: ['product_status'],
  data() {
    return {
      blueprintModel: false,
      sopViewModel: false,
      pictureDetailModel: false,
      // 图片预览地址
      dialogImageUrl: '',
      // 非单个禁用
      single: true,
      checkedMesProductPlanList: [],
      // 上传的文件服务器地址
      uploadImgUrl: process.env.VUE_APP_BASE_API,
      // 选中选项卡的 name
      activeName: 'columnInfo',
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 245 + 'px',
      // 表信息
      tables: [],
      // 表列信息
      columns: [],
      // 生产计划表格数据
      mesProductPlanList: [],
      // 工位选项
      productLineList: [],
      // 班组选项
      teamMembersList: [],
      // BOM下拉框数据
      orderBomList: [],
      // 表详细信息
      info: {},
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        materialId: [
          { required: true, message: '物料ID不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    const objId = this.$route.params && this.$route.params.objId
    if (objId) {
      // 获取表详细信息
      generateWorkOrder({ objId: objId }).then(res => {
        this.form = res.data.prodOrder
        // 根据订单生成工单
        this.addTicketInfo(res.data.planInfoList)
      })
      getBaseProductLineList({ productLineType: 2 }).then(response => {
        this.productLineList = response.data
      })
      getTeamMembers().then(response => {
        this.teamMembersList = response.data
      })
    }
  },
  // watch: {
  //   'form.bomId': function(newVal, oldVal) {
  //     // 执行方法，可以在这里调用你的方法
  //     if (newVal == null) {
  //       return
  //     }
  //     this.addTicketInfo(newVal)
  //   }
  // },
  methods: {
    /** 提交按钮 */
    submitForm() {
      let dataList = this.mesProductPlanList
      if (dataList.length === 0) {
        this.close()
        return
      }

      orderAddProdPlanInfoList(dataList).then(res => {
        this.$modal.msgSuccess(res.msg)
        this.close()
      })

    },
    //添加工单信息
    addTicketInfo(planInfoList) {
      this.mesProductPlanList = []
      planInfoList.forEach(e => {
        let obj = {}
        obj.planCode = e.planCode
        obj.orderCode = this.form.orderCode
        obj.materialCode = e.materialCode
        obj.materialName = e.materialName
        obj.planAmount = e.planAmount
        obj.planBeginTime = this.form.beginDate
        obj.planEndTime = this.form.endDate
        this.mesProductPlanList.push(obj)
      })
    },

    /** 生产计划明细序号 */
    rowMesProductPlanIndex({ row, rowIndex }) {
      row.index = rowIndex + 1
    },
    /** 复选框选中数据 */
    handleMesProductPlanSelectionChange(selection) {
      this.checkedMesProductPlanList = selection
      this.single = selection.length !== 1
    },
    /** 关闭按钮 */
    close() {
      const obj = {
        path: '/prod/prodOrderInfo',
        query: { t: Date.now(), queryParams: this.$route.query.queryParams }
      }
      this.$tab.closeOpenPage(obj)
    },

    /** 生产计划添加按钮操作 */
    handleAddMesProductPlan() {
      let dispatchCode = ''
      getDispatchCode().then(res => {
        dispatchCode = res.msg
        getStationByRouteId(this.form.dispatchId).then(res => {
          if (res.data.length === 0) {
            this.$modal.msgError('工艺路线未维护工位信息！')
          }
          let lastProcessId = null
          res.data.forEach((e, index) => {
            let obj = {}
            obj.dispatchCode = dispatchCode
            obj.processId = e.processId
            obj.processName = e.processName
            obj.processOrder = e.processOrder
            obj.stationId = e.stationId
            obj.stationName = e.stationName
            obj.productionTime = 0
            obj.planBeginTime = this.form.planBeginTime
            obj.planEndTime = this.form.planEndTime
            obj.planStatus = '1'
            // multiStationFlag：一个工序对应工位个数
            if (e.multiStationFlag > 1) {
              obj.planAmount = 0
            } else {
              obj.planAmount = this.form.planAmount - this.form.dispatchAmount
            }
            obj.materialId = this.form.materialId
            obj.materialBomId = this.form.materialBomId
            obj.productOrderId = this.form.productOrderId
            // 上一工序ID
            if (lastProcessId == null) {
              obj.lastProcessId = 0
            } else if (lastProcessId === obj.processId) {
              obj.lastProcessId = this.mesProductPlanList[index - 1].lastProcessId
            } else {
              obj.lastProcessId = lastProcessId
            }
            lastProcessId = e.processId
            // 新添加列标识 false=新添加，true=历史行
            obj.oldRowFlag = false
            this.mesProductPlanList.push(obj)
          })
        })
      })
    }

  },

  mounted() {
  }
}

</script>
