<template>
   <div class="container">
    <div class="header">
      <van-icon name="arrow-left" class="vanIcon" @click="backtrack" />
      <span>巡检任务</span>
      <van-icon name="wap-home-o" class="rightIcon" @click="backtrack" />
</div>
    <div class="main">
      <ul>
        <li v-for="(item, index) in list" :key="index" @click="setPath(item)">
        <p><span></span>{{ item.areaName }}</p>
        <p class="aa"><span>区域负责人：</span>{{ item.areaUserList.map(item => item.nickName).join(',') }}</p>
        <p class="aa"><span>任务数量：</span>{{ item.completedCheckTaskCount }} / {{ item.checkTaskCount }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { areaList, register } from '@/api/polling'
export default {
  name: 'VueSkTask',

  data () {
    return {
      list: [
      ],
      nfcTime: null

    }
  },

  mounted () {
    // const nfcCode = Android.getNfcCode()
    // console.log(nfcCode, '这是nfc卡号')
    // if (nfcCode) {
    //   register(nfcCode).then((res) => {
    //     console.log('页面刷新的，重新调用列表数据了')
    //     if (res.code === 200) {
    //       console.log('打卡成功！！！！！')
    //       this.$notify({
    //         type: 'success',
    //         message: res.msg,
    //         duration: 1500
    //       })
    //     }
    //   }).catch(err => {
    //     console.log(err, '走到错误了')
    //   })
    //   this.areaList()
    // }
    // this.nfcTime = setInterval(() => {
    //   this.getNfc()
    // }, 1000)
    this.areaList()
  },
  beforeDestroy () {
    clearInterval(this.nfcTime)
  },
  methods: {
    getNfc () {
      console.log('定时启动啦')
      const nfcCode = Android.getNfcCode()
      if (nfcCode) {
        register(nfcCode).then((res) => {
          console.log('页面刷新的，重新调用列表数据了，定时打卡')
          if (res.code === 200) {
            console.log('打卡成功！！！！！，定时打卡')
            this.$notify({
              type: 'success',
              message: res.msg,
              duration: 1500
            })
          }
        }).catch(err => {
          console.log(err, '走到错误了')
        })
        this.areaList()
      }
    },
    backtrack () {
      this.$router.push('/home')
    },
    areaList () {
      areaList().then(({ data }) => {
        if (data.code === 200) {
          this.list = data.rows
          console.log('列表的数据为', this.list)
        }
      })
    },
    setPath (item) {
      this.$router.push({ name: 'inspect', query: { id: item.areaId } })
    }
  }
}
</script>

<style lang="less" scoped>
ul{
  width: 100%;
  li{
    width: 100%;
    min-height: 60px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px 1px #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 8px;
    font-size: 16px;
    p{
      text-align: left;
      margin: 10px;
    }
    span{
      color: #969799;
    }
    .aa{
      font-size: 13px;
    }
  }
}
</style>
