<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.name">{{item.name}}</p>
    </div>
  </div>
</template>

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

    }
  },
}
</script>

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