<template>
  <div class="container">
    <Header title="检查计划" />
    <div class="main">
      <van-collapse v-model="activeNames" accordion @change="setChange">
        <van-collapse-item
          v-for="(item, index) in list"
          :key="index"
          :name="item.riskUnitId"
          class="collapse"
        >
          <template #title>
            <div>
              <p>{{ index + 1 }}. {{ item.riskUnitName }}</p>
              <p class="lastP">
                <span>管控措施：</span>{{ item.riskMeasureCount }} <b>|</b>
                <span>排查任务：</span>{{ item.checkTaskInventoryCount }}
              </p>
            </div>
          </template>
          <van-tabs v-model="active" animated color="#1c4990" @click="setTab">
            <van-tab title="未完成" name="0">
              <van-swipe-cell v-for="(pro, id) in childrenList1" :key="id">
                <p class="top">巡检时间：{{pro.startDate }} ~ {{pro.endDate }}</p>
                <div class="swipeCell">
                    <p class="leftContent">{{ id + 1 }}. {{ pro.riskEeasureItem }}</p>
                  <p
                      class="types"
                      :style="{ background: pro.status === 1 ? '#1c4990' :pro.status === 0 ? 'orange' : 'red' }"
                    >
                      {{ pro.status === 1 ? "已巡检" : pro.status === 0 ?"待巡检" : "漏检" }}
                    </p>
                </div>
                <template #right>
                  <button class="appearBtn" @click="addDanger(pro)">隐患上报</button>
                </template>
              </van-swipe-cell>
              <p style="text-align: center;" v-if="!childrenList1.length">
                没有更多了
              </p>
            </van-tab>
            <van-tab title="已完成" name="1">
                <van-swipe-cell v-for="(pro, id) in childrenList" :key="id">
                  <p class="top">巡检时间：{{pro.startDate }} ~ {{pro.endDate }}</p>
                  <div class="swipeCell">
                    <p class="leftContent">{{ id + 1 }}. {{ pro.riskEeasureItem }}</p>
                    <p
                      class="types"
                      :style="{ background: pro.status === 1 ? '#1c4990' :pro.status === 0 ? 'orange' : 'red' }"
                    >
                      {{ pro.status === 1 ? "已巡检" : pro.status === 0 ?"待巡检" : "漏检" }}
                    </p>
                  </div>
                  <template #right>
                    <button class="appearBtn" @click="addDanger(pro)">隐患上报</button>
                  </template>
                </van-swipe-cell>
                <p style="text-align: center;" @click="setList" v-if="!typeBtn && childrenList.length">
               点击加载更多
              </p>
              <p v-else  style="text-align: center;">没有更多了</p>
              <!-- </van-list> -->
            </van-tab>
            <van-tab title="漏检" name="2">
                <van-swipe-cell v-for="(pro, id) in childrenList" :key="id">
                  <p class="top">巡检时间：{{pro.startDate }} ~ {{pro.endDate }}</p>
                  <div class="swipeCell">
                    <p class="leftContent">{{ id + 1 }}. {{ pro.riskEeasureItem }}</p>
                    <p
                      class="types"
                      :style="{ background: pro.status === 1 ? '#1c4990' :pro.status === 0 ? 'orange' : 'red' }"
                    >
                      {{ pro.status === 1 ? "已巡检" : pro.status === 0 ?"待巡检" : "漏检" }}
                    </p>
                  </div>
                  <template #right>
                    <button class="appearBtn" @click="addDanger(pro)">隐患上报</button>
                  </template>
                </van-swipe-cell>
                <p style="text-align: center;" @click="setList" v-if="!typeBtn && childrenList.length">
               点击加载更多
              </p>
              <p v-else  style="text-align: center;">没有更多了</p>
              <!-- </van-list> -->
            </van-tab>
          </van-tabs>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
import {
  getAreaCheckTaskList,
  getCheckTaskInventoryListByRistUnitId
} from '@/api/polling'
import {
  getHazardList
} from '@/api/danger'
export default {
  name: 'VueSkInspect',

  data () {
    return {
      activeNames: '',
      active: '0',
      list: [],
      childrenList: [],
      childrenList1: [],
      loading: false,
      finished: false,
      pageSize: 10,
      pageNum: 1,
      typeBtn: false
    }
  },

  mounted () {
    console.log(this.$route.query)
    getAreaCheckTaskList({ areaId: this.$route.query.id }).then(({ data }) => {
      if (data.code === 200) {
        console.log(data.rows)
        this.list = data.rows
      }
    })
  },

  methods: {
    addDanger (item) {
      console.log(item)
      getHazardList({ areaId: item.areaId }).then(({ data }) => {
        if (data.code === 200) {
          this.getAreaTree1 = this.getUsers(data.data)
          this.$router.push({ name: 'addDanger', params: { id: item.id, hazardId: item.hazardId, areaId: item.areaId, riskMeasureId: item.riskMeasureId, list: this.getUsers(data.data) } })
        }
      })
    },
    getUsers (data) {
      return data.map(item => {
        return { text: item.hazardName, value: item.id }
      })
    },
    setTab (name) {
      this.typeBtn = false
      if (name === '0') {
        this.setActive()
      } else {
        this.childrenList = []
        this.pageNum = 1
        getCheckTaskInventoryListByRistUnitId({
          riskUnitId: this.activeNames,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          status: this.active
        }).then(({ data }) => {
          if (data.code === 200) {
            this.childrenList = data.rows
            if (this.childrenList.length >= data.total) {
              this.typeBtn = true
            }
          }
        })
      }
    },
    setChange (val) {
      this.childrenList = []
      this.childrenList1 = []
      console.log(val, this.activeNames)
      this.typeBtn = false
      if (!val) return
      this.active = '0'
      this.activeNames = val
      this.setActive()
    },
    setList () {
      this.pageNum++
      getCheckTaskInventoryListByRistUnitId({
        riskUnitId: this.activeNames,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: this.active
      }).then(({ data }) => {
        if (data.code === 200) {
          this.childrenList.push(...data.rows)
          if (this.childrenList.length >= data.total) {
            this.typeBtn = true
          }
        }
      })
    },
    setActive () {
      getCheckTaskInventoryListByRistUnitId({
        riskUnitId: this.activeNames,
        status: this.active
      }).then(({ data }) => {
        if (data.code === 200) {
          this.childrenList1 = data.rows
        }
      })
    }
  }
}
</script>

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

    b {
      margin: 0 10px;
      font-size: 16px;
      font-weight: 400;
    }
  }
  .lastP {
    margin-left: 15px;
  }
}
.top{
  font-size: 10px; padding: 0; margin: 10px 0 -5px 0 !important;
}
.swipeCell {
  width: 100%;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  padding: 3px 5px;
  .leftContent{
    padding-right: 10px;
  }
}
.types {
  margin-right: 20px !important;
  padding: 3px 5px;
  color: #fff;
  border-radius: 3px;
  min-width: 60px;
  text-align: center;
  height: 27px;
}
</style>
