<template>
  <div class="case-drawer">
    <m-card title="房屋档案">
      <SubTitle>小区信息</SubTitle>
      <m-form
        :template="[
          'name:小区名称',
          'address:小区地址',
          'belong:所属居委会',
          'buildingNum:总门牌幢数',
          'roomNum:总户数',
          'buidlingArea:总建筑面积',
          'area:占地面积',
          'rang:小区四至范围',
          'excludeRang:小区四至范围不包括',
        ]"
        :data="formData"
        label-width="1.4rem"
      />
      <SubTitle>物业信息</SubTitle>
      <m-form
        :template="[
          'name:小区名称',
          'address:小区地址',
          'belong:所属居委会',
          'buildingNum:总门牌幢数',
          'roomNum:总户数',
          'buidlingArea:总建筑面积',
          'area:占地面积',
          'rang:小区四至范围',
          'excludeRang:小区四至范围不包括',
        ]"
        :data="formData"
        label-width="1.4rem"
      />
    </m-card>
    <m-card title="案件详情">
      <div class="sum">
        <p>黄浦区重庆北路216弄2~66号重新校区15号605室</p>
        <span>案件分类</span> <span>综合</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 { defineComponent, ref } from 'vue'
import SubTitle from '../components/sub-title.vue'
import detail1 from '@/assets/images/case-detail1.png'
import detail2 from '@/assets/images/case-detail2.png'

export default defineComponent({
  name: 'CaseDrawer',
  components: { SubTitle },
  setup() {
    const formData = ref({
      name: '测试文字',
      address: '测试文字',
      belong: '测试文字',
      buildingNum: '测试文字',
      roomNum: '测试文字',
      buidlingArea: '测试文字',
      area: '测试文字',
      rang: '测试文字',
      excludeRang: '测试文字',
    })
    const details = ref([
      {
        title: '发现 · 举报人',
        sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
        content:
          '案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
        imgs: [detail1, detail2],
      },
      {
        title: '立案 · 举报人',
        sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
        content:
          '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
        imgs: [detail1, detail2],
      },
      {
        title: '派遣 · 举报人',
        sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
        content:
          '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
      },
      {
        title: '处置 · 举报人',
        sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
        content:
          '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
        imgs: [detail1, detail2],
      },
    ])
    return {
      formData,
      details,
    }
  },
})
</script>

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

.case-drawer
  display flex
  justify-content space-between
  >div
    width 35%
    &:last-child
      width 64%
  .sum
    border-bottom .01rem solid $primary-border
    padding-bottom .1rem
    span
      display inline-block
      font-size .08rem
      padding 0 .03rem
      border .01rem solid orange
      border-radius .02rem
      margin-right .03rem
      color orange
      &:last-child
        color gold
        border-color gold
  .step
    margin-top .05rem
    p
      &.title
        font-size .12rem
        display flex
        align-items center
        color $secondary-color
        font-weight bold
        >img
          width .14rem
          margin-right .05rem
      &.sub
        color #aaa
        font-size .09rem
        border-bottom .01rem solid $primary-border
    .content
      padding-left .15rem
      border-left .01rem solid $secondary-color
      margin-left .05rem
      >img
        width 1rem
        margin-right .05rem
</style>
