<template>
  <div class="community-list" :class="{ 'select-able': selectAble }">
    <template v-if="list && list.length > 0">
      <div
        v-for="(item, i) in list"
        :key="i"
        class="community-item"
        @click="handleClick(item)"
      >
        <div>
          <p>{{ item.stNameFrst }}</p>
          <span>
            <b>{{ item.sectTypeName }}</b>
          </span>
          <template v-if="item.cmtName"> | {{ item.cmtName }} | </template>
        </div>
        <p>{{ item.addrFrst }}</p>
        <p>{{ item.cspName }}</p>
      </div>
    </template>
    <m-empty v-else :img="empty" hidden-text />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'
import empty from '@/assets/images/empty.png'

export default defineComponent({
  name: 'CommunityList',
  props: {
    list: {
      type: Array as PropType<any[] | null>,
      default: () => {
        return []
      },
    },
    selectAble: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
  },
  emits: ['select'],
  setup(_, ctx) {
    const handleClick = (data: unknown) => {
      ctx.emit('select', data)
    }
    const data = ref<any>([])
    return {
      data,
      empty,
      handleClick,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'

.community-list
  width 100%
  height 100%
  padding-right .05rem
  overflow-y auto
  &.select-able
    .community-item
      cursor pointer
      transition all .1s ease
      &:hover
        background rgba(70,83,97,.25)
        box-shadow none
  .community-item
    position relative
    margin-bottom .08rem
    padding .05rem .08rem
    overflow hidden
    background rgba(70,83,97,.45)
    box-shadow 0 0 .04rem 0 rgba(44,51,70,.65), inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
    border-radius .04rem
    >p
      &:nth-of-type(1)
        color #ccc
      &:nth-of-type(2)
        color $blue
    >div
      display flex
      align-items center
      border-bottom .01rem dotted rgba(91,213,255,.5)
      margin-bottom .08rem
      padding-bottom .06rem
      color #ccc
      p
        font-size .11rem
        font-weight bold
        color #fff
      span
        display inline-block
        font-size .08rem
        padding 0 .06rem
        border-radius .08rem
        margin 0 .1rem
        transform skew(-30deg)
        background $edge
        >b
          display inline-block
          transform skew(30deg)
          font-weight normal
          color #000
</style>
