<template>
  <div class="example-community">
    <m-scroll v-if="list.length > 0" :length="list.length" :limit="2">
      <div @click="$emit('select', item)" class="detail" v-for="(item, i) in list" :key="i">
        <div>
          <h5>{{item.community}}</h5>
          <div class="line"/>
          <p><m-count class="count" :value="item.area" /><span class="unit">㎡</span></p>
        </div>
        <p>{{item.company}}</p>
        <div class="content">
          <div>
            <p>管理水平</p>
            <m-count class="count" :value="item.num1" />
          </div>
          <div>
            <p>智能化水平</p>
            <m-count class="count" :value="item.num2" />
          </div>
          <div>
            <p>管理水平</p>
            <m-count class="count" :value="item.num3" />
          </div>
        </div>
      </div>
    </m-scroll>
    <div v-else class="no-data">— 暂无数据 —</div>
  </div>
</template>

<script>
export default {
  name: 'ExampleCommunity',
  computed: {
    list() {
      return [
        {community: '杨浦区城市丽园', area: 28592, company: '上海卫百辛（集团）有限公司', num1: 92, num2: 85, num3: 96},
        {community: '杨浦区城市丽园', area: 28592, company: '上海卫百辛（集团）有限公司', num1: 92, num2: 85, num3: 96},
        {community: '杨浦区城市丽园', area: 28592, company: '上海卫百辛（集团）有限公司', num1: 92, num2: 85, num3: 96},
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.example-community
  .no-data
    width 100%
    height 100%
    $flex-center()
  .detail
    background $section-bg
    padding .05rem .1rem
    margin-bottom .1rem
    position relative
    cursor pointer
    transition background .2s, box-shadow .3s ease-in-out
    &:hover
      background $section-hover
      box-shadow -0.05rem .01rem .05rem .01rem rgba(0,0,0,0.8)
    h5
      font-size .1rem
    .unit
      font-size .08rem
      color #aaa
    .count
      color $color-yellow
      font-size .12rem
    >p
      color $cardFontColor
      font-size .09rem
    >div
      &:first-child
        display flex
        justify-content space-between
        align-items center
        .line
          flex 1
          height .01rem
          background $cardFontColor
          opacity .6
          margin 0 .05rem
      &.content
        display flex
        justify-content space-between
        >div
          display flex
          align-items center
          justify-content space-between
          p
            font-size .09rem
            margin-right .05rem

</style>
