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

<script>
export default {
  name: 'CommunityList',
  data() {
    return {
      list: [
        '金港花园一期',
        '顺驰蓝调国际',
        '枫蓝国际中心',
        '旺座中心',
        '美林·香槟小镇',
        '定福家园',
        '万豪君天下',
        '永泰园-新风景',
        '光彩国际公寓',
        '城市复兴·华城',
        '万泉新新家园',
        '金地·格林小镇',
      ],
      curCommunity: null,
    }
  },
  methods: {
    getClass(i) {
      const row = Math.ceil(i / 2)
      if (row % 2 === 0) {
        return 'row-even'
      } else {
        return 'row-odd'
      }
    },
    handleClick(name) {
      this.curCommunity = name
      this.$emit('select', name)
    },
    reset() {
      this.curCommunity = null
    }
  }
}
</script>

<style lang="stylus" scoped>
.community-list
  display flex
  flex-wrap wrap
  width 100%
  height 100%
  >div
    display flex
    align-items center
    width 47%
    color #fff
    padding 0 0.5rem
    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 1rem
    &.on
      $selected()
</style>
