<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.address }}</p>
        <span v-show="caseInfo.managementScoreType">
          <b>{{ caseInfo.managementScoreType }}</b>
        </span>
        <span v-show="caseInfo.managementType">
          <b>{{ caseInfo.managementType }}</b>
        </span>
      </div>
      <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">
            <img v-for="(img, i) in item.imgs" :key="i" :src="img" />
          </template>
        </div>
      </div>
    </m-card>
  </div>
</template>

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

export default defineComponent({
  name: 'CaseDrawer',
  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 {}
      },
    },
  },
  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.address,
        range: range.filter((e) => e !== null).join('，'),
      }
    })
    const details = computed(() => {
      const { caseInfo } = props
      if (!caseInfo) return []
      return [
        {
          title: `${caseInfo.status} ${
            caseInfo.reportPersonnel ? '· ' + caseInfo.reportPersonnel : ''
          }`,
          sub: caseInfo.acceptTime,
          content: caseInfo.reportContent,
          imgs: [],
        },
      ]
    })
    // const details = ref([
    //   {
    //     title: '发现 · 举报人',
    //     sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
    //     content:
    //       '案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
    //     imgs: [detail1, detail2],
    //   },
    // ])
    return {
      communityData,
      details,
    }
  },
})
</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>
