<template>
  <div class="container">
    <Header title="隐患列表" />
    <div class="main">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <ul>
        <van-swipe-cell  v-for="(item, index) in list" :key="index">
          <li @click="seeItem(item.id)" :class="[item.dangerStatus === 10 ? 'itemLi' : 'itemLi1']">
          <div class="itemTop">
          <h4>{{ item.dangerName }}</h4>
          <p>
            <van-tag :color="colorList[item.dangerStatus]">{{ textList[item.dangerStatus] }}</van-tag>
            <van-icon name="arrow" />
          </p>
        </div>
        <div class="cont">
          <img class="img" v-if="item.dangerImage" :src="baseUrl + item.dangerImage.split(',')[0]" alt="">
          <div class="img" v-else></div>
          <div class="text">
            <p>隐患区域：<span>{{ item.areaName }}</span></p>
            <p>发现时间：<span>{{ item.registTime }}</span></p>
            <p>隐患类型：<span>{{$findItemById(dangerTypeList, item.hazardDangerType ) }}</span></p>
          </div>
        </div>
      </li>
  <template #right v-if="item.dangerStatus === 10 && item.createUserId === user.userId">
    <button class="editBtn" @click="editItem(item.id)">编辑</button>
  </template>
</van-swipe-cell>
      </ul>
    </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getList } from '@/api/danger'
import { mapState } from 'vuex'
export default {
  name: 'Vueh5CbsDangerList',
  computed: {
    ...mapState('baseUrl', ['baseUrl']),
    ...mapState('login', ['user']),
    ...mapState('dangerList', [
      'dangerSrcList',
      'dangerTypeList',
      'getAreaTree',
      'getDeptTree',
      'getDeptUserTree'
    ])
  },
  data () {
    return {
      list: [],
      isLoading: false,
      colorList: {
        10: '#1c4990',
        20: '#1c4990',
        30: 'orange',
        40: '#1c4990',
        50: 'green',
        60: '#768091'
      },
      textList: {
        10: '待审核',
        20: '认领中',
        30: '整改中',
        40: '待验收',
        50: '已验收',
        60: '已取消'
      }
    }
  },

  mounted () {
    getList().then(({ data }) => {
      console.log(data)
      if (data.code === 200) {
        this.list = data.rows
      } else {
        this.$notify({
          type: 'warning',
          message: data.msg,
          duration: 1000
        })
      }
    })
  },

  methods: {
    onRefresh () {
      getList().then(({ data }) => {
        console.log(data)
        if (data.code === 200) {
          this.list = data.rows
          Toast('刷新成功')
          this.isLoading = false
        } else {
          this.$notify({
            type: 'danger',
            message: data.msg,
            duration: 1000
          })
        }
      })
    },
    seeItem (id) {
      this.$router.push({ path: '/dangerDetails', query: { id } })
    },
    editItem (id) {
      this.$router.push({ path: '/addDanger', query: { id } })
    }
  }
}
</script>

<style lang="less" scoped>
ul{
  width: 100%;
  height: auto;
  .itemLi1{
    width: 100%;
    min-height: 130px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px 1px #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 8px;
    .itemTop{
      display: flex;
      justify-content: space-between;
      span{
        font-size: 14px;
        padding: 3px 5px;
        border-radius: 2px;
        color: #fff;
      }
    }
    .cont{
      width: 100%;
      margin-top: 10px;
      display: flex;
      justify-content: flex-start;
      .img{
        width: 80px;
        height: 80px;
        border-radius: 3px;
      }
      .text{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
        font-size: 14px;
        color: #969799;
        text-align: left;
        span{
          color: #000;
        }
      }
    }
  }
  .itemLi{
    width: 100%;
    min-height: 130px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px 1px #ccc;
    border-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-bottom: 15px;
    padding: 8px;
    .itemTop{
      display: flex;
      justify-content: space-between;
      span{
        font-size: 14px;
        padding: 3px 5px;
        border-radius: 2px;
        color: #fff;
      }
    }
    .cont{
      width: 100%;
      margin-top: 10px;
      display: flex;
      justify-content: flex-start;
      .img{
        width: 80px;
        height: 80px;
        border-radius: 3px;
      }
      .text{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
        font-size: 14px;
        color: #969799;
        text-align: left;
        span{
          color: #000;
        }
      }
    }
  }
}
</style>
