<template>
  <div class="contianer">
    <jxHeader type="2" title="工单明细"></jxHeader>
    <div class="contianer content">
      <div class="contianer content_wraper">
        <div class="zd-row filter_wraper">
          <div class="zd-col-6 zd-row">
            <div class="zd-col-6 filter-label">设备号</div>
            <div class="zd-col-17 filter-select">
              <el-select v-model="value" placeholder="请选择" @change="selectChange">
                <el-option
                  v-for="item in options"
                  :key="item.device_code"
                  :label="item.device_name"
                  :value="item.device_code">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="contianer mgt2 grid_wraper">
          <table>
            <tr>
              <th>工单编码</th>
              <th>产品编号</th>
              <th>产品名称</th>
              <th>计划重量</th>
              <th>产线</th>
              <th>开工时间</th>
              <th>站点编码</th>
              <th>工单状态</th>
              <th style="text-align: center">操作</th>
            </tr>
            <tr v-for="(e, i) in dataList" :key="i">
              <td>{{ e.mfg_order_name }}</td>
              <td>{{ e.product_name }}</td>
              <td>{{ e.description }}</td>
              <td>{{ e.total_qty }}</td>
              <td>{{ e.resource_name }}</td>
              <td>{{ e.realstart_time }}</td>
              <td>{{ e.point_code }}</td>
              <td>{{ e.status }}</td>
              <td>
                <div class="zd-row btn_wraper">
                  <button v-if="e.status === '执行中'" class="grid_button" @click="toJump(e)">执行中</button>
                  <button v-else class="grid_button" :class="{'grid_button_disabled': e.checked && disabled1}" :disabled="disabled1" @click="_startOrder(e)">开始</button>
                  <button class="grid_button" :class="{'grid_button_disabled': e.checked && disabled2}" :disabled="disabled2" @click="_forceFinish(e)">强制完成</button>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import jxHeader from '@components/header.vue'
// import {queryDevices, queryOrders, startOrder} from '@config/mork.js'
import {queryDevices, queryOrders, startOrder, forceFinish} from '@config/getData.js'
export default {
  name: 'index',
  components: {
    jxHeader
  },
  data () {
    return {
      value: '',
      options: [],
      dataList: [],
      disabled1: false,
      disabled2: false
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.path === '/home' || to.path === '/setup') {
      this.$store.dispatch('setKeepAlive', [])
    }
    next()
  },
  mounted () {
    this._queryDevices()
  },
  activated () {
    if (this.value) {
      this._queryOrders(this.value)
    }
  },
  methods: {
    async _queryDevices () {
      let res = await queryDevices()
      this.options = [...res]
    },
    async _queryOrders (e) {
      let res = await queryOrders(e)
      this.dataList = [...res]
      this.dataList.map(el => {
        this.$set(el, 'checked', false)
      })
    },
    selectChange (e) {
      if (e) {
        this._queryOrders(e)
      }
    },
    async _startOrder (e) {
      this.disabled1 = true
      e.checked = true
      try {
        let res = await startOrder(this.value, e.mfg_order_name)
        if (res.message) {
          this.disabled1 = false
          e.checked = false
          this.$store.dispatch('setKeepAlive', ['index'])
          this.$router.push({
            path: '/task',
            query: {order: e.mfg_order_name}
          })
        }
      } catch (e) {
        this.disabled1 = false
        e.checked = false
      }
    },
    toJump (e) {
      this.$store.dispatch('setKeepAlive', ['index'])
      this.$router.push({
        path: '/task',
        query: {order: e.mfg_order_name}
      })
    },
    async _forceFinish (e) {
      this.disabled2 = true
      e.checked = true
      try {
        let res = await forceFinish(e.mfg_order_name)
        this._queryOrders(this.value)
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.disabled2 = false
        e.checked = false
      } catch (e) {
        this.disabled2 = false
        e.checked = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
// @import '~@style/mixin'
.btn_wraper
  width 2.6rem
</style>
