<template>
  <div class="person-list" :class="{ 'select-able': selectAble }">
    <template v-if="data && data.length > 0">
      <div
        v-for="(item, i) in data"
        :key="i"
        class="person-item"
        @click="handleClick(item)"
      >
        <div>{{ item.communityName }} | {{ item.addr }}</div>
        <div>
          无
          <span>
            <b>实有人</b>
          </span>
          {{ persons(item) }}
          <span>
            <b>实住人</b>
          </span>
        </div>
        <div
          v-if="item.houseStatus"
          class="flag"
          :style="`background:${roomStatus(item.houseStatus)?.color}`"
        >
          {{ roomStatus(item.houseStatus)?.text }}
        </div>
      </div>
    </template>
    <m-empty v-else :img="empty" hidden-text />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch } from 'vue'
import empty from '@/assets/images/empty.png'
import { ajax, api } from '@/ajax'
import store from '@/store'
import { convertName } from '@/tools/index'
import { roomStatus } from '@/tools/index'

export default defineComponent({
  name: 'CaseList',
  props: {
    list: {
      type: Array as PropType<any[] | null>,
      default: () => {
        return []
      },
    },
    selectAble: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
  },
  emits: ['select'],
  setup(props, ctx) {
    const handleClick = (data: unknown) => {
      ctx.emit('select', data)
    }
    const data = ref<any>([])
    watch(
      () => props.list,
      async (content) => {
        store.commit('SET_LOADING', true)
        if (content && content.length > 0) {
          const res = await Promise.all(
            content.map((item: any) => {
              return ajax.get({
                url: api.GET_PERSON,
                params: { pageSize: 100, liveAddr_l: item.addr },
                showLoading: false,
              })
            })
          )
          if (res && res.length > 0) {
            content.forEach((item: any, index: number) => {
              item.personInfo = res[index]?.data?.content || []
            })
            data.value = content
          }
          store.commit('SET_LOADING', false)
        } else {
          data.value = []
        }
      },
      { immediate: true }
    )
    const persons = (data: any) => {
      const { personInfo } = data
      if (personInfo && personInfo.length > 0) {
        const result = personInfo.map(
          (item: any) => convertName(item.cnName) || item.enName
        )
        return result.join(' | ')
      }
      return '无'
    }
    return {
      data,
      empty,
      handleClick,
      persons,
      roomStatus,
    }
  },
})
</script>

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

.person-list
  width 100%
  height 100%
  padding-right .05rem
  overflow-y auto
  &.select-able
    .person-item
      cursor pointer
      transition all .1s ease
      &:hover
        background rgba(70,83,97,.25)
        box-shadow none
  .person-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
    >div
      font-size .09rem
      span
        display inline-block
        font-size .08rem
        padding 0 .06rem
        border-radius .08rem
        margin-left .1rem
        transform skew(-30deg)
        background $edge
        >b
          display inline-block
          transform skew(30deg)
          font-weight normal
          color #000
        &:nth-of-type(1)
          background gold
          margin-right .6rem
      &:nth-of-type(1)
        border-bottom .01rem dotted rgba(91,213,255,.5)
        margin-bottom .08rem
        padding-bottom .06rem
        font-size .11rem
        font-weight bold
    .flag
      position absolute
      top -0.16rem
      right -0.36rem
      transform rotate(45deg)
      height .4rem
      width .8rem
      display flex
      color #000
      align-items flex-end
      justify-content center
      font-size .08rem
</style>
