<template>
<div class="main-container">
  <div class="right_side">
    <div class="content_wrap">
      <div class="title_wrap">
        <h2>任务管理</h2>
      </div>
      <div class="page_container">
        <div class="grid_wrapper">
          <table>
            <tr>
              <th>选中</th>
              <th>序号</th>
              <th>任务号</th>
              <th>目标站点</th>
              <th>任务状态</th>
              <th>生成时间</th>
            </tr>
            <tr v-for="(e, i) in dataList" :key="i"  @click="toRadio(e, i)">
              <!-- <td>
                <div class="radio__input icon_radio_checked"><i class="icon_radio"></i></div>
              </td> -->
              <td><div class="selbox radio_uncheck" :class="{'radio_checked': pkId === e.task_uuid}"></div></td>
              <td>{{i+1}}</td>
              <td>{{e.task_code}}</td>
              <td>{{e.next_point_code}}</td>
              <td><span class="icon" :class="{bgred: e.task_status_name ==='生成未执行', bgyellow: (e.task_status_name ==='执行中' || e.task_status_name ==='完成')}"></span>{{e.task_status_name}}</td>
              <td>{{e.create_time}}</td>
            </tr>
          </table>
        </div>
        <div class="buttons_wrapper">
          <button class="button_control button_control_disabled" @click="toUp(dataList, selectIndex)"><p>任务上移</p></button>
          <button class="button_control button_control_disabled" @click="toDown(dataList, selectIndex)"><p>任务下移</p></button>
          <button class="button_control button_control_disabled" @click="toDel(selectIndex)"><p>任务取消</p></button>
          <button class="button_control" @click="updateTask"><p>任务提交</p></button>
        </div>
      </div>
    </div>
    <!-- <div class="content_wrap">
      <div class="title_wrap">
        <h2>任务管理</h2>
      </div>
      <div class="con1 grid_wrapper">
        <table>
          <tr class="t-head">
            <th><div class="selbox"></div></th>
            <th>序号</th>
            <th>任务号</th>
            <th>目标站点</th>
            <th>任务状态</th>
            <th>生成时间</th>
          </tr>
          <tr v-for="(e,index) in dataList" :key="e.task_uuid"  @click="toRadio(e, index)">
            <td><div class="selbox radio_uncheck" :class="{'radio_checked': pkId === e.task_uuid}"></div></td>
            <td>{{index+1}}</td>
            <td>{{e.task_code}}</td>
            <td>{{e.next_point_code}}</td>
            <td><span class="icon" :class="{bgred: e.task_status_name ==='生成未执行', bgyellow: (e.task_status_name ==='执行中' || e.task_status_name ==='完成')}"></span>{{e.task_status_name}}</td>
            <td>{{e.create_time}}</td>
          </tr>
        </table>
        <div class="subbar">
          <button class="btn btn01" @click="toUp(dataList, selectIndex)">任务上移</button>
          <button class="btn btn02" @click="toDown(dataList, selectIndex)">任务下移</button>
          <button class="btn btn1" @click="toDel(selectIndex)">任务取消</button>
          <button class="btn btn2" @click="updateTask">任务提交</button>
        </div>
      </div>
    </div> -->
  </div>
</div>
</template>

<script>
import {queryTaskList, updateTask} from '@/config/getData.js'
export default {
  name: 'TaskLists',
  data () {
    return {
      selectObj: {},
      selectIndex: '',
      pkId: '',
      pwd: '',
      up: false,
      down: false,
      del: false,
      dataList: []
      // dataList: [
      //   {
      //     task_uuid: '01'
      //   },
      //   {
      //     task_uuid: '02'
      //   },
      //   {
      //     task_uuid: '03'
      //   },
      //   {
      //     task_uuid: '04'
      //   },
      //   {
      //     task_uuid: '05'
      //   },
      //   {
      //     task_uuid: '06'
      //   },
      //   {
      //     task_uuid: '07'
      //   },
      //   {
      //     task_uuid: '08'
      //   },
      //   {
      //     task_uuid: '09'
      //   },
      //   {
      //     task_uuid: '10'
      //   },
      //   {
      //     task_uuid: '11'
      //   },
      //   {
      //     task_uuid: '12'
      //   },
      //   {
      //     task_uuid: '13'
      //   }
      // ]
    }
  },
  created () {
    this.initData()
  },
  methods: {
    async initData () {
      let res = await queryTaskList()
      if (res.code === '1') {
        this.dataList = res.result
      } else {
        this.toast(res.desc)
      }
    },
    async updateTask () {
      let res = await updateTask(this.dataList)
      if (res.code === '1') {
        this.toast(res.desc)
        this.pkId = ''
        this.selectObj = {}
        this.initData()
      } else {
        this.toast(res.desc)
      }
    },
    toRadio (e, index) {
      this.selectObj = this.selectObj === e ? {} : e
      this.selectIndex = index
      this.pkId = this.pkId === e.task_uuid ? '' : e.task_uuid
      if (this.pkId) {
        this.up = true
        this.down = true
        this.del = true
      } else {
        this.up = false
        this.down = false
        this.del = false
      }
      this.checkUpDown()
    },
    checkUpDown () {
      // 最后一条不能下移
      if (this.selectIndex === this.dataList.length - 1) {
        this.down = false
      }
      if (this.dataList[0].task_status === '00') {
        if (this.selectIndex === 0) {
          this.up = false
        }
      } else {
        if (this.selectIndex === 0) {
          this.up = false
          this.down = false
        }
        if (this.selectIndex === 1) {
          this.up = false
        }
      }
    },
    swapItems (arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },
    toUp (arr) {
      if (!this.up) {
        return
      }
      if (this.pkId) {
        if (arr.length > 1 && this.selectIndex !== 0) {
          this.dataList = this.swapItems(arr, this.selectIndex, this.selectIndex - 1)
          // this.pkId = ''
          this.selectIndex = this.selectIndex - 1
          if (this.selectIndex === 0) {
            this.up = false
            this.down = true
          } else {
            this.up = true
            this.down = true
            this.checkUpDown()
          }
        }
      }
    },
    toDown (arr) {
      if (!this.down) {
        return
      }
      if (this.pkId) {
        if (arr.length > 1 && this.selectIndex !== (arr.length - 1)) {
          this.dataList = this.swapItems(arr, this.selectIndex, this.selectIndex + 1)
          // this.pkId = ''
          this.selectIndex = this.selectIndex + 1
          if (this.selectIndex === this.dataList.length - 1) {
            this.up = true
            this.down = false
          } else {
            this.up = true
            this.down = true
            this.checkUpDown()
          }
        }
      }
    },
    toDel (index) {
      if (this.pkId) {
        this.dataList.splice(index, 1)
        this.pkId = ''
        this.up = false
        this.down = false
        this.del = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.page_container
  padding 31px 31px 31px 45px
.grid_wrapper
  height calc(100% - 122px)
  overflow-y auto
.selbox
  width 40px
  height 40px
  position relative
.radio_uncheck
  background center / 100% 100% url(../../../images/new/icon-check1.png) no-repeat
.radio_checked
  background center / 100% 100% url(../../../images/new/icon-check2.png) no-repeat
.icon
  display inline-block
  width 43px
  height 43px
  position relative
  top 10px
.bgyellow
  background center / 100% 100% url(../../../images/new/icon-error1.png) no-repeat
.bgred
  background center / 100% 100% url(../../../images/new/icon-error2.png) no-repeat
</style>
