<template>
  <div class="tasklist">
    <nav-bar></nav-bar>
    <div class="con1">
      <table class="filter-table">
        <tr>
          <!-- <th>当前状态</th> -->
          <th>故障名称</th>
          <th>故障类别</th>
          <th>故障内容</th>
          <th>处理办法</th>
        </tr>
        <tr v-for="(e,index) in dataList" :key="index">
          <!-- <td><span class="status-box" :class="{bgyellow:e.error_status ==='1',bgred:e.error_status ==='2',bggreen:e.error_status ==='0',}"></span></td> -->
          <td>{{e.error_name}}</td>
          <td :class="{cyellow:e.errorcategory_code ==='01',cred:e.errorcategory_code ==='02',cgreen:e.errorcategory_code ==='00',}">{{e.errorcategory_name}}</td>
          <!-- <td>{{e.error_category}}<span class="status-box" :class="{bgyellow:e.error_status ==='1',bgred:e.error_status ==='2',bggreen:e.error_status ==='0',}"></span></td> -->
          <td>{{e.error_content}}</td>
          <td class="last-td">{{e.handing_method}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import {querryError} from '@/config/getData.js'
import NavBar from '@components/NavBar.vue'
export default {
  name: 'ErrorManage',
  components: {
    NavBar
  },
  data () {
    return {
      pkId: '',
      dataList: []
      // dataList: [
      //   {
      //     task_id: '1',
      //     error_status: '1',
      //     error_status_name: '一类故障',
      //     error_name: '障碍物报警',
      //     error_category: '一类',
      //     error_content: '车辆安全避障范围内有障碍物出现',
      //     handing_method: '检查车辆行驶路线，移除障碍物'
      //   },
      //   {
      //     task_id: '2',
      //     error_status: '2',
      //     error_status_name: '二类故障',
      //     error_name: '障碍物报警',
      //     error_category: '一类',
      //     error_content: '车辆安全避障范围内有障碍物出现',
      //     handing_method: '检查车辆行驶路线，移除障碍物'
      //   },
      //   {
      //     task_id: '3',
      //     error_status: '0',
      //     error_status_name: '无故障',
      //     error_name: '障碍物报警',
      //     error_category: '一类',
      //     error_content: '车辆安全避障范围内有障碍物出现',
      //     handing_method: '检查车辆行驶路线，移除障碍物'
      //   }
      // ]
    }
  },
  created () {
    this.initData()
  },
  methods: {
    async initData () {
      let res = await querryError()
      if (res.code === '1') {
        this.dataList = res.result
      } else {
        this.toast(res.desc)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.bgyellow
  background #ECA800
.bgred
  background #FA6400
.bggreen
  background #00C852
.cyellow
  color #ECA800
.cred
  color #FA6400
.cgreen
  color #00C852
.con1
  float left
  box-sizing border-box
  width 100%
  padding .25rem
.last-td
  width 4.4rem
  text-align left
  padding-left 0.5rem
  box-sizing border-box
.status-box
  display inline-block
  width .4rem
  height .4rem
  border-radius .2rem
</style>
