<template>
  <div style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;">
    <el-row>
      <el-col :span="18">
        <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 style="margin-left: 30px;" type="warning" icon="el-icon-position" @click="callMaterial">生产叫料</el-button>
          <el-button style="margin-left: 30px;" type="success" icon="el-icon-finished" @click="finish">生产完成</el-button>
          <el-button style="margin-left: 30px;" type="danger" icon="el-icon-top-left" @click="materialBack">余料回库</el-button>
          <el-button style="margin-left: 30px;" type="info" icon="el-icon-top-left" @click="emptyVehicleBack">空托回库</el-button>
        </div>
      </el-col>

      <el-col :span="6">
        <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%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column v-if="false" prop="produce_uuid" label="生产标识"/>
        <el-table-column prop="produce_code" label="生产编码"/>
        <el-table-column prop="produce_status_name" label="生产状态" :formatter="formatStatusName"/>
        <el-table-column prop="device_code" label="生产设备"/>
        <el-table-column prop="produce_qty" label="加工数量"/>
        <el-table-column prop="finishproduce_qty" label="完工数量"/>
        <el-table-column prop="order_seq" label="顺序号"/>
        <el-table-column prop="formula" label="配方"/>
        <el-table-column prop="pcsn" label="批次"/>
        <el-table-column v-if="false" prop="material_code" label="物料编码"/>
        <el-table-column prop="material_name" label="物料名字"/>
        <el-table-column prop="start_time" label="开始生产时间"/>
      </el-table>
      <!--分页组件-->

    </div>
  </div>

</template>

<script>
import crudProduceTask from '@/views/wms/produceScreen/produceScreen'
import crud from '@/mixins/crud'

export default {
  name: 'ProduceScreen',
  mixins: [crud],
  data() {
    return {
      currentDate: new Date(),
      getTime: '',
      getDate: '',
      deviceList: [],
      choice: '',
      ProduceStatusList: [],
      materialList: [],
      tableData: [],
      id: null
    }
  },
  created() {
    this.id = this.$route.params.id
    crudProduceTask.getDevice().then(res => {
      this.deviceList = res
    })
    crudProduceTask.getProduceStatus().then(res => {
      this.ProduceStatusList = res
    })
    crudProduceTask.getMaterial().then(res => {
      this.materialList = res
    })
    this.queryId()
  },
  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
    },
    queryTask(value) {
      crudProduceTask.queryTask(value).then(res => {
        this.tableData = res
      })
    },
    notify(title, type) {
      this.$notify({
        title: title,
        type: type,
        duration: 2500
      })
    },
    fresh() {
      this.queryId()
      this.notify('操作成功', 'success')
    },
    callMaterial() {
      if (this.$refs.table.selection.length === 0) {
        this.notify('请选中一条记录！', 'info')
        return
      }
      const data = this.$refs.table.selection[0]
      crudProduceTask.callMaterial(data).then(res => {
        this.notify('操作成功', 'success')
        this.queryId()
      }).cache(err => {
        console.log(err.response.data.message)
      })
    },
    finish() {
      debugger
      if (this.$refs.table.selection.length === 0) {
        this.notify('请选中一条记录！', 'info')
        return
      }
      // 判断是否有完工<加工，弹出提示
      for (const i in this.$refs.table.selection) {
        console.log(this.$refs.table.selection[i])
        if (this.$refs.table.selection[i].finishproduce_qty <= this.$refs.table.selection[i].produce_qty) {
          this.$confirm('完工数量小于加工数量，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const data = this.$refs.table.selection[0]
            crudProduceTask.finish(data).then(res => {
              this.notify('操作成功', 'success')
              this.queryId()
            }).cache(err => {
              console.log(err.response.data.message)
            })
          }).catch(() => {
            /*this.$message({
              type: 'info',
              message: '已取消'
            })*/
          })
        }
      }
    },
    materialBack() {
      if (this.$refs.table.selection.length === 0) {
        this.notify('请选中一条记录！', 'info')
        return
      }
      const data = this.$refs.table.selection[0]
      crudProduceTask.materialBack(data).then(res => {
        this.notify('操作成功', 'success')
        this.queryId()
      }).cache(err => {
        console.log(err.response.data.message)
      })
    },
    emptyVehicleBack() {
      const data = {
        id: this.id
      }
      debugger
      crudProduceTask.emptyVehicleBack(data).then(res => {
        this.notify('操作成功', 'success')
        this.queryId()
      }).cache(err => {
        console.log(err.response.data.message)
      })
    },
    formatStatusName(row, column) {
      for (const item of this.ProduceStatusList) {
        if (item.code === row.produce_status) {
          return item.name
        }
      }
    },
    changeFun(val) {
      this.choice = val[0]
      if (val.length > 1) {
        return this.$message.error('请选择一条信息操作')
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (val.length > 1) {
        this.$refs.table.clearSelection()
        this.$refs.table.toggleRowSelection(val.pop())
      }
    },

    queryId() {
      const id = this.$route.params.id
      crudProduceTask.queryIdDevice(id).then(res => {
        this.tableData = res
      })
    }
  }
}
</script>

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

</style>