<template>
  <el-dialog
    title="批量新增"
    append-to-body
    :visible.sync="dialogVisible"
    fullscreen
    destroy-on-close
    width="1000px"
    @close="close"
    @open="open"
  >
    <div class="crud-opts2" style="margin-bottom: 5px;">
      <span class="crud-opts-right2">
        <!--左侧插槽-->
        <slot name="left"/>
        <el-button type="primary" @click="insertDtl">新增一行</el-button>
        <el-button type="primary" @click="copyAdd">复制新增</el-button>
      </span>
    </div>
    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%;"
      border
      highlight-current-row
      @row-click="clickRow"
      :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
    >
      <el-table-column type="index" label="序号" width="50" align="center"/>
      <el-table-column align="center" label="操作" width="100" fixed="right">
        <template scope="scope">
          <el-button
            type="danger"
            class="filter-item"
            size="mini"
            icon="el-icon-delete"
            @click.native.prevent="deleteRow(scope.$index, tableData)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="order_type_scode" label="工单类型" align="center" width="120px">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.order_type_scode"
            class="filter-item"
            :disabled="scope.row.edit"
          >
            <el-option
              v-for="item in dict.PDM_BI_ORDERTYPE"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="workprocedure_id" label="所属工序" align="center" width="150px">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.workprocedure_id"
            class="filter-item"
            :disabled="scope.row.edit"
          >
            <el-option
              v-for="item in workprocedureList"
              :key="item.workprocedure_id"
              :label="item.workprocedure_name"
              :value="item.workprocedure_id"
            />
          </el-select>
        </template>
      </el-table-column>

      <el-table-column prop="produce_date" label="生产日期" align="center" width="250px">
        <template slot-scope="scope">
          <el-date-picker v-model="scope.row.produce_date" type="date" value-format="yyyy-MM-dd"/>
        </template>
      </el-table-column>
      <el-table-column v-if="false" prop="material_id" label="物料标识" align="center"/>
      <el-table-column prop="material_code" label="物料编码" align="center" width="190px">
        <template scope="scope">
          <el-input v-model="scope.row.material_code" disabled class="input-with-select">
            <el-button slot="append" icon="el-icon-plus" @click="queryMater(scope.$index, scope.row)"/>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="material_name" label="物料名称" align="center" width="250px"/>
      <el-table-column prop="material_spec" label="物料规格" align="center" width="150px"/>
      <el-table-column show-overflow-tooltip prop="plan_qty" label="计划数量" align="center" width="100px">
        <template scope="scope">
          <el-input v-show="!scope.row.edit" v-model="scope.row.plan_qty" size="mini"/>
          <span v-show="scope.row.edit">{{ scope.row.plan_qty }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="shift_type_scode" label="班次类型" align="center" width="110px">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.shift_type_scode"
            class="filter-item"
            @change="(val)=>change(val,scope.$index,scope.row)"
            :disabled="scope.row.edit"
          >
            <el-option
              v-for="item in dict.PDM_BI_SHIFTTYPE"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="planproducestart_date" label="计划开始时间" align="center" width="250px">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.planproducestart_date"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            style="width: 200px;"
          />
        </template>
      </el-table-column>
      <el-table-column prop="planproduceend_date" label="计划结束时间" align="center" width="250px">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.planproduceend_date"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            style="width: 200px;"
          />
        </template>
      </el-table-column>
      <el-table-column prop="sale_id" label="销售单标识" align="center" width="150px">
        <template scope="scope">
          <el-input v-model="scope.row.sale_id"/>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="is_needmove" label="是否搬运" align="center" width="150px">
        <template scope="scope">
          <el-radio
            v-for="item in dict.IS_OR_NOT"
            :key="item.id"
            v-model="scope.row.is_needmove"
            :label="item.value"
          >{{ item.label }}
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="is_canupdate_update" label="允许修改报工数量" align="center" width="200px">
        <template scope="scope">
          <el-radio
            v-for="item in dict.IS_OR_NOT"
            :key="item.id"
            v-model="scope.row.is_canupdate_update"
            :label="item.value"
          >{{ item.label }}
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="orderNum" label="订单数量" align="center" width="150px">
        <template scope="scope">
          <el-input v-model="scope.row.orderNum" type="number" :min="1" oninput="value = value.replace(/[^\d]/g, '')" style="width: 200px;"/>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancle">取消</el-button>
      <el-button :loading="crud.cu === 2" type="primary" @click="submit">确认</el-button>
    </div>
    <MaterDtl
      :dialog-show.sync="materialShow"
      :is-single="true"
      :mater-opt-code="materType"
      @setMaterValue="setMaterValue"
    />
  </el-dialog>
</template>

<script>

import CRUD, { crud, header, presenter } from '@crud/crud'
import MaterDtl from '@/views/wms/pub/MaterDialog'
import crudWorkProcedure from '@/api/wms/basedata/pdm/workProcedure'
import crudProduceshiftorder from '@/api/wms/mps/produceshiftorder'

export default {
  name: 'AddDtl',
  components: { MaterDtl },
  dicts: ['PDM_BI_SHIFTTYPE', 'MPS_BD_ORDERSTATUS', 'is_used', 'PDM_BI_ORDERTYPE', 'IS_OR_NOT'],
  mixins: [presenter(), header(), crud()],
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      materType: '01',
      current_row: null,
      workprocedureList: [],
      rows: [],
      materialShow: false,
      tableData: []
    }
  },
  watch: {
    dialogShow: {
      handler(newValue, oldValue) {
        this.dialogVisible = newValue
      }
    }
  },
  methods: {
    cancle() {
      this.$emit('update:dialogShow', false)
    },
    insertDtl() {
      const date = this.dateFormatter(new Date())
      const formatter1 = this.dateFormatter1(new Date())
      this.tableData.push({
        produceorder_id: '',
        produceorder_code: '',
        producedeviceorder_code: '',
        shift_type_scode: '01',
        workprocedure_id: '',
        produce_date: date,
        plan_qty: '',
        real_qty: '',
        report_qty: '',
        material_id: '',
        material_code: '',
        material_weight: '',
        planproducestart_date: date,
        planproduceend_date: formatter1,
        realproducestart_date: '',
        realproduceend_date: '',
        order_status: '00',
        is_needmove: '0',
        order_type_scode: '01',
        material_name: '',
        device_id: '',
        is_canupdate_update: '1',
        material_spec: '',
        sale_id: '',
        orderNum: 1
      })
    },
    open() {
      // 查询工序
      crudWorkProcedure.downSelect({}).then(res => {
        this.workprocedureList = res
      })
    },
    copyAdd() {
      if (!this.current_row) {
        this.crud.notify('请选择一条工单进行复制！', CRUD.NOTIFICATION_TYPE.INFO)
        return false
      }
      const row = JSON.parse(JSON.stringify(this.current_row))
      this.tableData.push(row)
    },
    close() {
      this.$emit('update:dialogShow', false)
      this.$emit('AddChanged')
      this.tableData = []
      this.current_row = null
    },
    queryMater(index, row) {
      this.materialShow = true
      this.nowindex = index
      this.nowrow = row
    },
    change(val, index, row) {
      const d = new Date()
      const year = d.getFullYear()
      const month = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1)
      const day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
      if (val === '02') {
        row.planproducestart_date = [year, month, day].join('-') + ' ' + ['18', '30', '00'].join(':')
        const day1 = d.getDate() < 10 ? '0' + (d.getDate() + 1) : d.getDate() + 1
        row.planproduceend_date = [year, month, day1].join('-') + ' ' + ['07', '30', '00'].join(':')
      }
      if (val === '01') {
        row.planproducestart_date = [year, month, day].join('-') + ' ' + ['07', '30', '00'].join(':')
        row.planproduceend_date = [year, month, day].join('-') + ' ' + ['18', '30', '00'].join(':')
      }
      this.tableData.splice(index, 1, row)
    },
    setMaterValue(row) {
      this.nowrow.material_id = row.material_id
      this.nowrow.material_code = row.material_code
      this.nowrow.material_name = row.material_name
      this.nowrow.material_spec = row.material_spec
      this.tableData.splice(this.nowindex, 1, this.nowrow) // 通过splice 替换数据 触发视图更新
    },
    clickRow(row) {
      debugger
      this.current_row = row
    },
    dateFormatter(str) {
      const d = new Date(str)
      const year = d.getFullYear()
      const month = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1)
      const day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
      return [year, month, day].join('-') + ' ' + ['07', '30', '00'].join(':')
    },
    dateFormatter1(str) {
      const d = new Date(str)
      const year = d.getFullYear()
      const month = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1)
      const day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
      return [year, month, day].join('-') + ' ' + ['18', '30', '00'].join(':')
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    submit() {
      for (let i = 0; i < this.tableData.length; i++) {
        const row = this.tableData[i]
        if (!row.workprocedure_id) {
          this.crud.notify('所属工序不能为空！', CRUD.NOTIFICATION_TYPE.INFO)
          return false
        }
        if (!row.produce_date) {
          this.crud.notify('生产日期不能为空！', CRUD.NOTIFICATION_TYPE.INFO)
          return false
        }
        if (!row.material_id) {
          this.crud.notify('物料编码不能为空！', CRUD.NOTIFICATION_TYPE.INFO)
          return false
        }
        if (!row.plan_qty) {
          this.crud.notify('计划数量不能为空！', CRUD.NOTIFICATION_TYPE.INFO)
          return false
        }
        if (!row.planproducestart_date) {
          this.crud.notify('计划开始时间不能为空！', CRUD.NOTIFICATION_TYPE.INFO)
          return false
        }
      }
      crudProduceshiftorder.addRows(this.tableData)
      this.$emit('update:dialogShow', false)
      this.$emit('AddChanged')
    }
  }
}
</script>

