<template>
  <div>
    <div class="face-wrapper">
      <div @click="$emit('select', safe)"><p>安全：{{count.safe}}</p><img :src="require(`@/assets/images/${getFace(count.safe)}.png`)"/></div>
      <div @click="$emit('select', order)"><p>有序：{{count.order}}</p><img :src="require(`@/assets/images/${getFace(count.order)}.png`)"/></div>
      <div @click="$emit('select', clean)"><p>干净：{{count.clean}}</p><img :src="require(`@/assets/images/${getFace(count.clean)}.png`)"/></div>
    </div>
    <div class="content">
      <div class="title">小区巡查事项清单</div>
      <div class="list">
        <div v-for="(col, i) in list" :key="i">
          <p v-for="(item, index) in col" :key="item + index">{{item}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ManageIssue',
  data() {
    return {
      list: [
        [
          '高空坠物隐患',
          '水电气异常',
          '消防设施异常',
          '.',
          '.',
        ],
        [
          '违规租赁',
          '毁绿占绿',
          '停车矛盾',
          '改变物业性质',
          '占用公共部位',
        ],
        [
          '建筑垃圾违规',
          '乱布线',
          '楼道乱张贴',
          '.',
          '.',
        ]
      ],
      count: {
        safe: 0,
        order: 0,
        clean: 0,
      },
      safe: {
        title: '安全管理',
        data: [],
      },
      order: {
        title: '有序管理',
        data: [],
      },
      clean: {
        title: '卫生管理',
        data: [],
      },
    }
  },
  methods: {
    init(foundList) {
      const cleans = ['trash']
      const orders = ['weixiuzijin', 'staffLeaveAlarmTcfteodr', 'hermeticSpace']
      const cleanList = [], orderList = [], safeList = []
      let cleanSum = 0, orderSum = 0, safeSum = 0
      foundList.forEach(item => {
        if (item.num == 0) return
        if (cleans.indexOf(item.key) >= 0) { // 干净
          const count = 5
          cleanSum += count
          cleanList.push({name: item.title, count})
        } else if (orders.indexOf(item.key) >= 0) { // 有序
          const count = 2.3
          orderSum += count
          orderList.push({name: item.title, count})
        } else { // 安全
          const count = 7.2
          safeSum += count
          safeList.push({name: item.title, count})
        }
      })
      this.$set(this.clean, 'data', [...cleanList, {name: '- 汇总 -', count: cleanSum + ''}])
      this.$set(this.order, 'data', [...orderList, {name: '- 汇总 -', count: orderSum + ''}])
      this.$set(this.safe, 'data', [...safeList, {name: '- 汇总 -', count: safeSum + ''}])
      this.count = {
        safe: 100 - safeSum,
        order: 100 - orderSum,
        clean: 100 - cleanSum,
      }
    },
    getFace(val) {
      if (val >= 90) {
        return 'face1'
      } else if (val >= 80 && val < 90) {
        return 'face2'
      } else {
        return 'face3'
      }
    },
  },
  watch: {
    '$store.state.foundList': {
      handler(cur) {
        this.init(cur)
      },
      immediate: true
    }
  }
}
</script>

<style lang="stylus" scoped>
.face-wrapper
  display flex
  margin-top 1rem
  >div
    width 33.3%
    text-align center
    cursor pointer
    font-size 1.2rem
    img
      width 4rem
      margin .3rem 0
      transition transform .3s ease-in
    &:hover
      img
        transform scale(1.2)
.content
  overflow hidden
  .title
    background #7175a0
    text-align center
    font-size 1.2rem
  .list
    display flex
    font-size 1.1rem
    >div
      width 33.3%
      border .1rem solid gray
      box-sizing border-box
      border-right none
      &:last-child
        border-right .1rem solid gray
      >p
        background rgba(113,117,160,.5)
        text-indent .5rem
        line-height 2
        &:nth-child(2n+1)
          background rgba(0,0,0,.2)
</style>
