<template>
  <div class="case-list" :class="{ 'select-able': selectAble }">
    <template v-if="list && list.length > 0">
      <div
        v-for="(item, i) in list"
        :key="i"
        class="case-item"
        :class="{
          done: item?.disposalStatus === 'over',
        }"
        @click="handleClick(item)"
      >
        <div>
          <p>
            {{ item.communityName }} | {{ item.buildingAddr }}
            <span :style="`background:${transType(item.category).color}`">{{
              transType(item.category).text
            }}</span>
          </p>
        </div>
        <div v-show="item.acceptTime">{{ item.acceptTime || '无' }}</div>
        <div v-if="item?.disposalStatus === 'over'" class="flag">已完结</div>
        <div v-else class="flag">待处置</div>
      </div>
    </template>
    <m-empty v-else :img="empty" hidden-text />
  </div>
</template>

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

export default defineComponent({
  name: 'DisposeList',
  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 transType = (type: string) => {
      switch (type) {
        case 'fire':
          return {
            text: '消防通道占用',
            color: '#2F86EE',
          }
        case 'batteryCar':
          return {
            text: '电瓶车入梯',
            color: '#ffd400',
          }
        case 'overflowingGarbage':
          return {
            text: '垃圾满溢',
            color: '#00f2ff',
          }
        case 'groupRent':
          return {
            text: '违规租赁',
            color: '#F7933E',
          }
        case 'highFall':
          return {
            text: '高抛隐患',
            color: '#5BD5FF',
          }
        default:
          return '无'
      }
    }
    return {
      empty,
      handleClick,
      transType,
    }
  },
})
</script>

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

.case-list
  width 100%
  height 100%
  padding-right .05rem
  overflow-y auto
  &.select-able
    .case-item
      cursor pointer
      transition all .1s ease
      &:hover
        background rgba(70,83,97,.25)
        box-shadow none
  .case-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
    &.done
      .flag
        background #27C5A2
    >div
      &:nth-of-type(1)
        border-bottom .01rem dotted rgba(91,213,255,.5)
        margin-bottom .05rem
        padding-bottom .05rem
        p
          width 94%
          font-size .11rem
          font-weight bold
          span
            display inline-block
            font-size .08rem
            padding 0 .1rem
            border-radius .08rem
            margin-left .1rem
            transform skew(-30deg)
            background gold
            color #333
    .flag
      background $orange
      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>
