<template>
  <div style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;">
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple"><h2 style="margin-left: 30px;padding-top: 10px;">车间加工看板</h2></div>
        <div class="grid-content bg-purple">
          &ensp;&ensp;
          <!--          <el-button type="primary" icon="el-icon-search" @click="queryTask(query.device_code)">搜索</el-button>-->
          <el-button type="primary" icon="el-icon-thumb" @click="fresh">刷新</el-button>
          <el-button type="warning" icon="el-icon-position" :disabled="is_openStart" @click="openStart">开工</el-button>
          <el-button type="success" icon="el-icon-finished" :disabled="is_reportWork" @click="reportWork">报工</el-button>
          <el-button type="danger" icon="el-icon-finished" :disabled="is_finish" @click="finish">强制完成</el-button>
        </div>
      </el-col>

      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <h2 style="text-align:right;margin-right: 140px;">{{ getTime }}</h2>
        </div>
        <div class="grid-content bg-purple-light">
          <p style="text-align:right;margin-right: 110px;"><b>{{ getDate }}</b></p>
        </div>
      </el-col>
    </el-row>
    <br>
    <br>
    <div>
      <!--表格渲染-->
      <el-table
        ref="table"
        :data="tableData"
        size="small"
        style="width: 100%;"
        @current-change="handleCurrentChange"
        @select="handleSelectionChange"
        @select-all="onSelectAll"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column v-if="false" prop="produceorder_id" label="生产班次工单标识" />
        <el-table-column prop="produceorder_code" label="工单编号" width="130px" />
        <el-table-column prop="order_status" label="工单状态">
          <template slot-scope="scope">
            {{ dict.label.MPS_BD_ORDERSTATUS[scope.row.order_status] }}
          </template>
        </el-table-column>
        <el-table-column prop="shift_type_scode" label="班次类型">
          <template slot-scope="scope">
            {{ dict.label.PDM_BI_SHIFTTYPE[scope.row.shift_type_scode] }}
          </template>
        </el-table-column>
        <el-table-column v-if="false" prop="workprocedure_id" label="工序标识" />
        <el-table-column prop="produce_date" label="生产日期" width="100px" />
        <el-table-column prop="plan_qty" label="计划数量" />
        <el-table-column prop="report_qty" label="完工数量" />
        <el-table-column v-if="false" prop="material_id" label="物料标识" />
        <el-table-column prop="material_code" label="物料编码" width="100" show-overflow-tooltip />
        <el-table-column prop="material_name" label="物料名称" width="100" show-overflow-tooltip />
        <el-table-column prop="material_spec" label="物料规格" width="100" show-overflow-tooltip />
        <el-table-column prop="realproducestart_date" label="开始时间" width="150" />
      </el-table>
      <!--分页组件-->

    </div>
    <el-dialog
      title="请绑定设备"
      :visible.sync="devicedialogVisible"
      width="35%"
      :before-close="handleClose">
        <el-form :model="deviceForm" status-icon label-width="120px" ref="deviceForm" class="demo-ruleForm">
          <el-form-item label="选择设备" prop="device_id">
          <el-select
              v-model="deviceForm.device_id"
              clearable
              size="mini"
              class="filter-item"
            >
              <el-option
                v-for="item in deviceList"
                :key="item.device_id"
                :label="item.device_name"
                :value="item.device_id"
              />
            </el-select>
          </el-form-item>
        </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveDevice">保存</el-button>
            <el-button @click="devicedialogVisible = false">取消</el-button>
         </div>
    </el-dialog>

    <el-dialog
      title="报工数量"
      :visible.sync="reportdialogVisibler"
      width="35%"
      :before-close="handleClose">
      <el-form :model="reportForm" status-icon ref="reportForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="生产数量" prop="produce_qty">
          <el-input disabled  v-model="reportForm.produce_qty" />
        </el-form-item>
        <el-form-item label="期初数量" prop="init_qty">
          <el-input  disabled  v-model="reportForm.init_qty"/>
        </el-form-item>
        <el-form-item label="期末数量" prop="report_qty">
          <el-input  disabled  v-model="reportForm.finish_qty" />
        </el-form-item>
        <el-form-item label="完成数量" prop="report_qty">
          <el-input  disabled  v-model="reportForm.finishproduct_qty" />
        </el-form-item>
        <el-form-item label="报工数量" prop="report_qty">
          <el-input  clearable oninput="value = value.replace(/[^\d]/g, '')" type="number"  :disabled="is_disabled()"  v-model="reportForm.report_qty"  />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveReport">保存</el-button>
        <el-button @click="reportdialogVisibler = false">取消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import crud from '@/mixins/crud'
import crudProduceshiftorder from '@/api/wms/mps/produceshiftorder'

export default {
  name: 'BigscreenTask',
  mixins: [crud],
  dicts: ['PDM_BI_SHIFTTYPE', 'MPS_BD_ORDERSTATUS', 'is_used', 'PDM_BI_ORDERTYPE'],
  data() {
    return {
      devicedialogVisible: false,
      reportdialogVisibler: false,
      deviceForm: { device_id: null },
      reportForm: { report_qty: null, produce_qty: null, init_qty: null, finish_qty: null, finishproduct_qty: null },
      currentDate: new Date(),
      getTime: '',
      getDate: '',
      deviceList: [],
      choice: '',
      is_openStart: true,
      is_reportWork: true,
      is_finish: true,
      is_report_qty: false,
      ProduceStatusList: [],
      materialList: [],
      tableData: [],
      rules: {
      }
    }
  },
  created() {
    this.getTable()
  },
  mounted() {
    // 定时器
    const timer = setInterval(() => {
      this.settime()// 你所加载数据的方法
    }, 1000)
    // 销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
    })
  },
  methods: {
    settime() {
      const _this = this
      const yy = new Date().getFullYear()
      const mm = new Date().getMonth() + 1
      const dd = new Date().getDate()
      const hh = new Date().getHours()
      const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      _this.getDate = yy + '年' + mm + '月' + dd + '日 ' + '星期' + '日一二三四五六'.charAt(new Date().getDay())
      _this.getTime = hh + ':' + mf + ':' + ss
    },
    is_disabled() {
      if (this.choice !== null) {
        if (this.choice.is_canupdate_update === '1') {
          return false
        } else {
          return true
        }
      }
    },
    isDisabled() {
      this.is_openStart = true
      this.is_finish = true
      this.is_reportWork = true
    },
    handleCurrentChange(current) {
      if (current === null) {
        this.choice = null
        this.is_openStart = true
        this.is_reportWork = true
        this.is_finish = true
      }
    },
    handleSelectionChange(val, row) {
      if (val.length > 1) {
        this.$refs.table.clearSelection()
        this.$refs.table.toggleRowSelection(val.pop())
        this.buttonChange(row)
      } else if (val.length === 1) {
        this.buttonChange(row)
      } else {
        this.handleCurrentChange(null)
      }
    },
    onSelectAll() {
      this.$refs.table.clearSelection()
      this.handleCurrentChange(null)
    },
    buttonChange(current) {
      if (current !== null) {
        this.choice = current
        if (current.order_status === '01' || current.order_status === '03') {
          this.is_openStart = false
        } else {
          this.is_openStart = true
        }
        if (current.order_status === '02') {
          this.is_reportWork = false
        } else {
          this.is_reportWork = true
        }
        this.is_finish = false
      } else {
        this.is_finish = true
      }
    },
    notify(title, type) {
      this.$notify({
        title: title,
        type: type,
        duration: 2500
      })
    },
    fresh() {
      this.handleCurrentChange(null)
      this.getTable()
      this.isDisabled()
      this.notify('刷新成功', 'success')
    },
    handleClose() {
      this.devicedialogVisible = false
      this.reportdialogVisibler = false
    },
    getTable() {
      crudProduceshiftorder.getTable({ device_id: this.query.device_id }).then(res => {
        this.tableData = res
      })
    },
    openStart() {
      crudProduceshiftorder.getDevice({ workprocedure_id: this.choice.workprocedure_id }).then(res => {
        this.deviceList = res
      })
      this.devicedialogVisible = true
      this.deviceForm.device_id = this.choice.device_id
    },
    reportWork() {
      this.reportdialogVisibler = true
      this.getReportWork(this.choice.produceorder_id)
    },
    getReportWork(produceorder_id) {
      crudProduceshiftorder.getReportWork({ produceorder_id: produceorder_id }).then(res => {
        this.reportForm.init_qty = res.init_qty
        this.reportForm.finish_qty = res.finish_qty
        this.reportForm.produce_qty = res.produce_qty
        this.reportForm.finishproduct_qty = res.finishproduct_qty
        this.reportForm.report_qty = res.finishproduct_qty
      })
    },
    saveReport() {
      if (this.reportForm.report_qty === '' || this.reportForm.report_qty === null || this.reportForm.report_qty === undefined) {
        this.notify('请输入报工数量', 'info')
        return
      }
      crudProduceshiftorder.saveReport({ report_qty: this.reportForm.report_qty, row: this.choice }).then(res => {
        this.notify('操作成功', 'success')
        this.getTable()
        this.reportdialogVisibler = false
        this.isDisabled()
      })
    },
    saveDevice() {
      if (this.deviceForm.device_id === '' || this.deviceForm.device_id === null || this.deviceForm.device_id === undefined) {
        this.notify('请选择要绑定的设备', 'info')
        return
      }
      crudProduceshiftorder.openStart({ device_id: this.deviceForm.device_id, row: this.choice }).then(res => {
        this.notify('操作成功', 'success')
        this.getTable()
        this.devicedialogVisible = false
        this.isDisabled()
      })
    },
    finish() {
      crudProduceshiftorder.finish({ row: this.choice }).then(res => {
        this.notify('操作成功', 'success')
        this.getTable()
        this.isDisabled()
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
