<template>
  <div class="population-drawer">
    <m-card title="相关案件">
      <div
        v-for="(item, i) in caseList"
        :key="i"
        class="case-item"
        :class="{ done: item.status === 1 }"
      >
        <div>
          <p>
            <span>{{ item.type }}</span>
            {{ item.address }}
          </p>
          <p>{{ item.date }}</p>
        </div>
        <div>{{ item.content }}</div>
        <div v-if="item.status === 1" class="flag">已结案</div>
        <div v-else class="flag">处置中</div>
      </div>
    </m-card>
    <m-card title="人口详情">
      <Tabs class="tabs" :list="tabs" horizontal />
      <SubTitle>基本信息</SubTitle>
      <m-form
        :template="[
          'community:所属小区|building:门牌幢',
          'communityType:小区类型|roomNo:室号',
          'company:物业公司|manager:物业经理',
          'manageOffice:管理处|hasElev:有无电梯',
          'yewei:业委会|juwei:居委会',
        ]"
        :data="data1"
        label-width="1.2rem"
      />
      <SubTitle>房主信息</SubTitle>
      <m-form
        :template="['name:姓名|phone:手机号码', 'household:户籍|']"
        :data="data2"
        label-width="1.2rem"
      />
      <Tabs class="tabs" :list="tabs2" horizontal />
      <m-form
        :template="[
          'name:小区名称',
          'address:小区地址|belong:所属居委会',
          'buildingNum:总门牌幢数|roomNum:总户数',
          'buildingArea:总建筑面积|aera:占地面积',
          'range:小区四至范围|excludeRange:四至范围不包括',
        ]"
        :data="data3"
        label-width="1.2rem"
      />
    </m-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Tabs, { TabsProp } from '../components/tabs.vue'
import SubTitle from '../components/sub-title.vue'

export default defineComponent({
  name: 'PopulationDrawer',
  components: { Tabs, SubTitle },
  setup() {
    const caseList = ref([
      {
        address: 'XX区XX路XX弄XX号',
        date: '2021-01-23 ~ 2021-01-24',
        type: '案件分类',
        status: 1,
        content:
          '案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述',
      },
      {
        address: 'XX区XX路XX弄XX号',
        date: '2021-01-23 ~ 2021-01-24',
        type: '案件分类',
        status: 0,
        content:
          '案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述',
      },
      {
        address: 'XX区XX路XX弄XX号',
        date: '2021-01-23 ~ 2021-01-24',
        type: '案件分类',
        status: 0,
        content:
          '案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述',
      },
    ])
    const tabs = ref<TabsProp[]>([
      {
        key: 'person',
        name: '实住人',
      },
      {
        key: 'house',
        name: '房屋信息',
      },
    ])
    const tabs2 = ref<TabsProp[]>([
      {
        key: 'community',
        name: '小区信息',
      },
      {
        key: 'room',
        name: '门牌户室',
      },
      {
        key: 'property',
        name: '物业信息',
      },
      {
        key: 'committee',
        name: '业委会',
      },
      {
        key: 'device',
        name: '设施设备',
      },
      {
        key: 'public',
        name: '公共设施',
      },
    ])
    const data1 = ref({
      community: '测试文字',
      building: '测试文字',
      communityType: '测试文字',
      roomNo: '测试文字',
      company: '测试文字',
      manager: '测试文字',
      manageOffice: '测试文字',
      hasElev: '测试文字',
      yewei: '测试文字',
      juwei: '测试文字',
    })
    const data2 = ref({
      name: '暂无',
      phone: '暂无',
      household: '暂无',
    })
    const data3 = ref({
      name: '测试文字',
      address: '测试文字',
      belong: '测试文字',
      buildingNum: '测试文字',
      roomNum: '测试文字',
      buildingArea: '测试文字',
      area: '测试文字',
      range: '测试文字',
      excludeRange: '测试文字',
    })
    return {
      caseList,
      tabs,
      tabs2,
      data1,
      data2,
      data3,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
$border = .01rem solid rgba(91,213,255,.3)

.population-drawer
  display flex
  justify-content space-between
  >div
    width 35%
    &:last-child
      width 64%
  .tabs
    margin .1rem 0
  .case-item
    position relative
    border $border
    border-left .02rem solid $secondary-color
    margin .1rem 0
    padding .05rem .1rem
    overflow hidden
    background rgba(51,145,255,.1)
    &.done
      border-left-color #27C5A2
      .flag
        background #27C5A2
    >div
      &:nth-of-type(1)
        border-bottom $border
        padding-bottom .05rem
        margin-bottom .05rem
        p
          span
            display inline-block
            color orange
            border .01rem solid orange
            border-radius .02rem
            margin-right .1rem
            padding 0 .03rem
            font-size .08rem
          &:last-child
            color #aaa
            font-size .08rem
            margin-top .05rem
    .flag
      background $secondary-color
      position absolute
      top -0.08rem
      right -0.28rem
      transform rotate(45deg)
      height .4rem
      width .8rem
      display flex
      align-items flex-end
      justify-content center
      font-weight bold
      padding-bottom .02rem
</style>
