<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 && item.status && item.status.indexOf('已结') >= 0,
        }"
        @click="handleClick(item)"
      >
        <div>
          <p>
            {{ item.address }}
            <span v-show="item.managementScoreType">
              <b>{{ item.managementScoreType }}</b>
            </span>
            <span v-show="item.managementType">
              <b>{{ item.managementType }}</b>
            </span>
          </p>
          <p>{{ item.acceptTime }}</p>
        </div>
        <div>{{ item.reportContent || '无' }}</div>
        <div
          v-if="item && item.status && item.status.indexOf('已结') >= 0"
          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: 'CaseList',
  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)
    }
    return {
      empty,
      handleClick,
    }
  },
})
</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
        p
          &:first-child
            width 94%
            font-size .11rem
            font-weight bold
          &:last-child
            font-size .09rem
            color #ccc
            margin .04rem 0
          span
            display inline-block
            font-size .08rem
            padding 0 .1rem
            border-radius .08rem
            margin-left .1rem
            transform skew(-30deg)
            background linear-gradient(to right, #FFF764, #BBA619)
            >b
              display inline-block
              transform skew(30deg)
              font-weight normal
              color #000
            &:last-child
              background linear-gradient(to right, #64DCFF, #02B2D2)
    .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>
