<template>
  <div class="govern-analysis">
    <div @click="$emit('select', item.name)" class="item" v-for="item in datas" :key="item.name">
      <img :src="require(`@/assets/images/${item.icon}.png`)"/>
      <p :title="item.label">{{item.label}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GovernAnalysis',
  data() {
    return {
      datas: [
        {label: '投诉分类',name: '住宅小区综合管理类诉求二级指标占比', icon: 'img1'},
        {label: '服务落后环节',name: '物业服务满意度得分较低项目', icon: 'img2'},
        {label: '服务落后企业',name: '物业服务企业整体满意度落后企业', icon: 'img2'},
        {label: '投诉密度区排名',name: '12345投诉区排名', icon: 'img3'},
        {label: '业委会运作情况',name: '业委会运作情况', icon: 'img4'},
      ],

    }
  },
}
</script>

<style lang="stylus" scoped>
.govern-analysis
  width 100%
  height 100%
  display flex
  flex-wrap wrap
  font-size 1.1rem
  .item
    width 50%
    display flex
    align-items center
    cursor pointer
    // &:nth-child(2n+1)
    //   background rgba(0,0,0,0.5)
    &:hover
      color $color-blue
      background rgba(0,0,0,0.3)
    img
      width 2rem
      height @width
      margin-right .5rem
      margin-bottom .6rem
    p
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
</style>
