<template>
  <div>
    <div class="face-wrapper">
      <div @click="$emit('select', safe)"><p>安全：92.8</p><img src="@/assets/images/face1.png"/></div>
      <div><p>有序：100</p><img src="@/assets/images/face1.png"/></div>
      <div @click="$emit('select', clean)"><p>干净：85</p><img src="@/assets/images/face2.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: [
        [
          '高空坠物隐患',
          '水电气异常',
          '消防设施异常',
          '.',
          '.',
        ],
        [
          '违规租赁',
          '毁绿占绿',
          '停车矛盾',
          '改变物业性质',
          '占用公共部位',
        ],
        [
          '建筑垃圾违规',
          '乱布线',
          '楼道乱张贴',
          '.',
          '.',
        ]
      ],
      safe: {
        title: '安全管理',
        data: [
          {name: '占用消防通道', count: 7.2},
          {name: '- 汇总 -', count: 7.2},
        ],
      },
      clean: {
        title: '卫生管理',
        data: [
          {name: '建筑垃圾违规', count: 5},
          {name: '垃圾分类违规', count: 5},
          {name: '楼道乱张贴', count: 5},
          {name: '- 汇总 -', count: 15},
        ],
      },
    }
  },
}
</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>
