<template>
  <div class="community-list">
    <div
    v-for="(item, index) in list"
    :key="index"
    :class="`${getClass(index + 1)} ${curCommunity == item.COMMUNITYID ? 'on' : ''}`"
    @click="handleClick(item)"
    >
      <div class="dot" />
      <b :title="item.COMMUNITYNAME">{{item.COMMUNITYNAME | check}}</b>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommunityList',
  data() {
    return {
      curCommunity: null,
    }
  },
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    getClass(i) {
      const row = Math.ceil(i / 2)
      if (row % 2 === 0) {
        return 'row-even'
      } else {
        return 'row-odd'
      }
    },
    handleClick(data) {
      this.curCommunity = data.COMMUNITYID
      this.$emit('select', data)
    },
    reset() {
      this.curCommunity = null
    }
  },
  filters: {
    check(val) {
      if (val && val.length > 7) {
        return ([].slice.call(val, 0, 7)).join('') + '...'
      } else {
        return val
      }
    },
  }
}
</script>

<style lang="stylus" scoped>
.community-list
  display flex
  flex-wrap wrap
  width 100%
  height 100%
  >div
    display flex
    align-items center
    justify-content flex-start
    width 47%
    color #fff
    padding 0 0.5rem
    height 3rem
    margin 0 0.3rem
    cursor pointer
    &.row-even
      background rgba(0,0,0,0.2)
      .dot
        background $color-green
    .dot
      width 0.2rem
      height 1rem
      background gold
      margin-right 0.5rem
    &.on
      $selected()
</style>
