<template>
  <div class="case-drawer">
    <m-card title="相关案件">
      <SubTitle>小区信息</SubTitle>
      <m-form
        :template="[
          'stNameFrst:小区名称',
          'address:地址',
          'cmtName:所属居委会',
          'totUnits:总门牌幢数',
          'totHous:总户数',
          'stCnstArea:总建筑面积',
          'landArea:占地面积',
          'range:小区四至范围',
          'stNotcsparea:小区四至范围不包括',
        ]"
        :data="communityData"
        label-width="1.4rem"
      />
      <SubTitle>物业信息</SubTitle>
      <m-form
        :template="[
          'cspName:物业企业名称',
          'hpbName:注册区县',
          'registerAddress:注册地址',
          'orgCode:组织机构代码',
          'legalRepName:法人代表',
          'cspContacter:企业联系人',
          'cspTel:企业联系人电话',
          'cspFax:企业联系人传真',
          'bizLicenseValidDate:营业执照有效期',
          'bizLicenseCode:营业执照号',
        ]"
        :data="propertyInfo"
        label-width="1.4rem"
      />
    </m-card>
    <m-card title="快处详情">
      <div class="sum">
        <p>{{ caseInfo.buildingAddr }}</p>
        <span
          v-if="caseInfo.category"
          :style="`background:${transType(caseInfo.category).color}`"
        >
          <b>{{ transType(caseInfo.category).text }}</b>
        </span>
      </div>
      <template v-if="details && details.length > 0">
        <div v-for="item in details" :key="item.title" class="step">
          <p class="title">
            <img src="@/assets/images/dot.png" /> {{ item.title }}
          </p>
          <div class="content">
            <p class="sub">{{ item.sub }}</p>
            <p>{{ item.content }}</p>
            <template v-if="item.imgs && item.imgs.length > 0">
              <template v-for="(img, i) in item.imgs">
                <img
                  v-if="img"
                  :key="i"
                  :src="'data:image/png;base64,' + img"
                />
              </template>
            </template>
          </div>
        </div>
      </template>
      <m-empty v-else style="margin-top: 1rem" />
    </m-card>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import SubTitle from '../components/sub-title.vue'
import { transType } from '@/tools/index'

export default defineComponent({
  name: 'DisposeDrawer',
  components: { SubTitle },
  props: {
    communityInfo: {
      type: Object as PropType<{ [key: string]: any } | null>,
      default: () => {
        return {}
      },
    },
    propertyInfo: {
      type: Object as PropType<{ [key: string]: any } | null>,
      default: () => {
        return {}
      },
    },
    caseInfo: {
      type: Object as PropType<{ [key: string]: any } | null>,
      default: () => {
        return {}
      },
    },
    detail: {
      type: Object as PropType<{ [key: string]: any }[]>,
      default: () => {
        return []
      },
    },
  },
  setup(props) {
    const communityData = computed(() => {
      const { communityInfo = {}, caseInfo = {} } = props
      const keys = [
        { name: '北', key: 'stCspNorth' },
        { name: '南', key: 'stCspSouth' },
        { name: '西', key: 'getStCspWest' },
        { name: '东', key: 'stCspEast' },
      ]
      const range = keys.map((item) =>
        communityInfo && communityInfo[item.key]
          ? item.name + communityInfo[item.key]
          : null
      )

      return {
        ...communityInfo,
        address: caseInfo && caseInfo.buildingAddr,
        range: range.filter((e) => e !== null).join('，'),
      }
    })
    const details = computed(() => {
      /**
       * 待处置 pending(0)
       * 认定 identified(1)
       * 自行整改 rectification(2)
       * 联勤联动整治 regulation(3)
       * 已完结 over(9)
       */
      const { detail = [] } = props
      const pending = detail.find((item) => item.status === 'pending')
      const identified = detail.find((item) => item.status === 'identified')
      const rectification = detail.find(
        (item) => item.status === 'rectification'
      )
      const regulation = detail.find((item) => item.status === 'regulation')
      const over = detail.find((item) => item.status === 'over')

      const result: any[] = []
      pending &&
        result.push({
          title:
            '待处置' +
            (pending?.disposalOrg ? ' · ' + pending?.disposalOrg : ''),
          sub: pending?.disposalTime || '',
          content: pending?.processDescription,
          imgs: [pending?.processPic],
        })
      identified &&
        result.push({
          title:
            '认定' +
            (identified?.disposalOrg ? ' · ' + identified?.disposalOrg : ''),
          sub: identified?.disposalTime || '',
          content: identified?.processDescription,
          imgs: [identified?.processPic],
        })
      rectification &&
        result.push({
          title:
            '自行整改' +
            (rectification?.disposalOrg
              ? ' · ' + rectification?.disposalOrg
              : ''),
          sub: rectification?.disposalTime || '',
          content: rectification?.processDescription,
          imgs: [rectification?.processPic],
        })
      regulation &&
        result.push({
          title:
            '联勤联动整治' +
            (regulation?.disposalOrg ? ' · ' + regulation?.disposalOrg : ''),
          sub: regulation?.disposalTime || '',
          content: regulation?.processDescription,
          imgs: [regulation?.processPic],
        })
      over &&
        result.push({
          title:
            '已完结' + (over?.disposalOrg ? ' · ' + over?.disposalOrg : ''),
          sub: over?.disposalTime || '',
          content: over?.processDescription,
          imgs: [over?.processPic],
        })

      return result
    })
    return {
      communityData,
      details,
      transType,
    }
  },
})
</script>

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

.case-drawer
  display flex
  justify-content space-between
  >div
    width 40%
    &:last-child
      width 59%
  .sum
    border-bottom .01rem dotted $primary-border
    padding-bottom .1rem
    background rgba(70,83,97,.45)
    box-shadow 0 0 .04rem 0 rgba(44,51,70,.65)
    padding .05rem .1rem
    p
      font-size .12rem
      font-weight bold
    span
      display inline-block
      font-size .08rem
      padding 0 .1rem
      border-radius .08rem
      margin-right .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)
  .step
    background rgba(70,83,97,.45)
    box-shadow 0 0 .04rem 0 rgba(44,51,70,.65)
    padding .05rem .1rem
    p
      &.title
        font-size .14rem
        display flex
        align-items center
        color $secondary-color
        font-weight bold
        background-clip text
        -webkit-background-clip text
        -webkit-text-fill-color transparent
        background-image linear-gradient(to right, #FF521E, gold)
        >img
          width .14rem
          margin-right .08rem
          transform translateX(10%)
      &.sub
        color #ccc
        font-size .09rem
        border-bottom .01rem solid rgba(255,255,255,0.1)
        margin .04rem 0
        padding .04rem 0
    .content
      padding-left .15rem
      border-left .01rem solid $secondary-color
      margin-left .05rem
      >img
        width 1rem
        margin-right .05rem
</style>
