<template>
  <section>
    <nav-bar title="任务管理"></nav-bar>
    <section class="content mgt15 grid-wraper">
      <div class="left_fixed">
        <table class="layout-t left_layout_t">
          <tr>
           <th>任务号</th>
          </tr>
          <tr v-for="(e, i) in dataList" :key="i" @click="toCheck(e)" :class="{'checked': e.task_uuid === pkId}">
            <td>{{e.task_no}}</td>
          </tr>
        </table>
      </div>
      <div class="slide">
        <table class="layout-t">
          <tr>
            <th>起点</th>
            <th>终点</th>
            <th>状态</th>
            <th>物料类型</th>
            <th>优先级</th>
            <th>时间</th>
          </tr>
          <tr v-for="(e, i) in dataList" :key="i" @click="toCheck(e)" :class="{'checked': e.task_uuid === pkId}">
            <td>{{e.start_devicecode}}</td>
            <td>{{e.next_devicecode}}</td>
            <td>{{e.task_status_name}}</td>
            <td>{{e.material_type_name}}</td>
            <td>{{e.priority}}</td>
            <td>{{e.create_time}}</td>
          </tr>
        </table>
      </div>
    </section>
    <section class="submit-bar">
      <button class="btn btn-disabled submit-button" :class="{'bgred' : btnred}" :disabled="disabled" @click="toSure('1')">重新生成</button>
      <button class="btn btn-disabled submit-button" :class="{'bgred' : btnred}" :disabled="disabled" @click="toSure('2')">强制完成</button>
    </section>
  </section>
</template>

<script>
import NavBar from '@components/NavBar.vue'
import {queryTask, taskOperation} from '@config/getData01'
export default {
  name: 'TaskManage',
  components: {
    NavBar
  },
  data () {
    return {
      keyword: '',
      startPoint: '',
      endPoint: '',
      btnred: false,
      disabled: false,
      dataList: [],
      // dataList: [
      //   {
      //     task_uuid: '1',
      //     task_no: '87511',
      //     start_devicecode: 'A12',
      //     next_devicecode: 'F99',
      //     inst_status: '放货完成',
      //     agv_no: 'A01'
      //   }
      // ],
      pkId: ''
    }
  },
  mounted () {
    this.queryTask(this.keyword, this.startPoint, this.endPoint)
  },
  methods: {
    async queryTask () {
      try {
        let res = await queryTask(this.keyword, this.startPoint, this.endPoint)
        if (res.code === '1') {
          this.dataList = res.result
        } else {
          this.Dialog(res.desc)
        }
      } catch (err) {
        this.Dialog(err)
      }
    },
    async taskOperation (type) {
      try {
        let res = await taskOperation(this.pkId, type)
        if (res.code === '1') {
          this.toast('操作成功')
          this.disabled = false
          this.pkId = ''
          this.btnred = false
          this.dataList = []
          this.queryTask()
        } else {
          this.Dialog(res.desc)
          this.disabled = false
        }
      } catch (err) {
        console.log(err)
      }
    },
    toSure (type) {
      if (this.pkId) {
        this.disabled = true
        this.taskOperation(type)
      } else {
        // this.toast('请选择')
      }
    },
    toCheck (e) {
      this.pkId = this.pkId === e.task_uuid ? '' : e.task_uuid
      if (this.pkId) {
        this.btnred = true
      } else {
        this.btnred = false
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.left_fixed
  flex 0 0 .5rem
.left_layout_t
  min-width 1.5rem
</style>
