<template>
  <div class="community-drawer">
    <m-card title="相关案件">
      <div class="case-wrap">
        <CaseList :list="caseInfo" />
      </div>
    </m-card>
    <m-card title="房屋档案">
      <m-form
        class="basic-info"
        :template="[
          'stNameFrst:小区名称',
          'address:小区地址|cmtName:所属居委会',
          'totUnits:总门牌幢数|totHous:总户数',
          'stCnstArea:总建筑面积|landArea:占地面积',
          'range:小区四至范围|stNotcsparea:四至范围不包括',
        ]"
        :data="communityData"
        label-width="1.2rem"
      />
      <Tabs class="tabs" :list="tabs" horizontal @select="curTab = $event" />
      <template v-if="curTab === 'room'">
        <template v-if="showBuildingRoom">
          <div class="person-bar">
            <div class="photo"></div>
            <div class="back-btn" @click="showBuildingRoom = false">返回</div>
          </div>
          <div class="room-table">
            <m-table
              :template="['户室|面积', 'houseNo|houseArea']"
              :data="buildingRoomList"
            />
          </div>
        </template>
        <template v-else>
          <div
            v-if="
              communityInfo.buildingList &&
              communityInfo.buildingList.length > 0
            "
            class="building-list"
          >
            <div
              v-for="item in communityInfo.buildingList"
              :key="item.id"
              @click="selectBuilding(item)"
            >
              <p class="title">{{ item.unitNo }}</p>
              <p class="line" />
              <p>{{ item.unitFlag ? '有' : '无' }}电梯</p>
              <p>{{ item.unitKindName }}</p>
            </div>
          </div>
          <div v-else style="height: 30vh">
            <m-empty />
          </div>
        </template>
      </template>
      <template v-else-if="curTab === 'property'">
        <m-form
          :template="[
            'cspName:物业企业名称|hpbName:注册区县',
            'registerAddress:注册地址|orgCode:组织机构代码',
            'legalRepName:法人代表|cspContacter:企业联系人',
            'cspTel:企业联系人电话|cspFax:企业联系人传真',
            'bizLicenseValidDate:营业执照有效期|bizLicenseCode:营业执照号',
          ]"
          :data="propertyInfo"
          label-width="1.4rem"
        />
        <SubTitle>小区管理处</SubTitle>
        <m-form
          :template="[
            'csName:管理处名称|csAddress:办公地址',
            'csContacter:联系人姓名|csTel:联系人电话',
            'csDayTel:日间报修电话|nightTel:夜间报修电话',
            'csFax:管理处传真|complaintTel:物业投诉电话',
          ]"
          :data="communityInfo.manageInfo"
          label-width="1.4rem"
        />
      </template>
      <template v-else-if="curTab === 'committee'">
        <m-form
          :template="[
            'hocCode:业主大会代码|hocName:业主大会名称',
            'hocAddr:办公地址',
          ]"
          :data="communityInfo.hocInfo"
          label-width="1.4rem"
        />
        <SubTitle>指挥体系</SubTitle>
        <m-table
          v-if="
            communityInfo.hocInfo.memberList &&
            communityInfo.hocInfo.memberList.length > 0
          "
          :template="[
            '职位|姓名|性别|联系电话|政治面貌',
            'dirDuty|dirName|dirSex|phone|dirPoliticsStatus',
          ]"
          :data="communityInfo.hocInfo.memberList"
        />
        <m-empty v-else />
      </template>
      <template v-else-if="curTab === 'device'">
        <div class="select-bar">
          <a-select
            v-model:value="deviceType"
            dropdown-class-name="device-selector-drop-down"
          >
            <a-select-option
              v-for="option in deviceOptions"
              :key="option.name"
              :value="option.name"
            >
              {{ option.name }}
            </a-select-option>
          </a-select>
        </div>
        <div v-if="deviceList.length > 0" class="device-table">
          <m-table
            :template="[
              '序号|安装位置*2|名称*2|类型|维保单位*3',
              'index|ieAddr|ieName|ieType|ieUnit',
            ]"
            :data="deviceList"
          />
        </div>
        <m-empty v-else />
      </template>
      <template v-else-if="curTab === 'public'">
        <m-empty />
      </template>
    </m-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType, computed } from 'vue'
import Tabs, { TabsProp } from '../components/tabs.vue'
import SubTitle from '../components/sub-title.vue'
import CaseList from '../components/case-list.vue'
import { ajax, api } from '@/ajax'

export default defineComponent({
  name: 'CommunityDrawer',
  components: { Tabs, SubTitle, CaseList },
  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: Array as PropType<any[] | null>,
      default: () => {
        return []
      },
    },
  },
  setup(props) {
    const curTab = ref('room')
    const tabs = ref<TabsProp[]>([
      {
        key: 'room',
        name: '门牌户室',
      },
      {
        key: 'property',
        name: '物业信息',
      },
      {
        key: 'committee',
        name: '业委会',
      },
      {
        key: 'device',
        name: '设施设备',
      },
      {
        key: 'public',
        name: '公共设施',
      },
    ])
    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[0] && caseInfo[0].address,
        range: range.filter((e) => e !== null).join('，'),
      }
    })

    const showBuildingRoom = ref(false)
    const buildingRoomList = ref<any>([])
    const selectBuilding = async (data: any) => {
      const { content } = (
        await ajax.get({
          url: api.GET_ROOM,
          params: { pageSize: 100, addr_l: data.unitAddr },
        })
      ).data
      buildingRoomList.value = content
      showBuildingRoom.value = true
    }

    const deviceType = ref('大门')
    const deviceOptions = ref([
      { name: '大门', type: 'gate' },
      { name: '监控', type: 'monitor' },
      { name: '防盗门', type: 'security' },
      { name: '电梯', type: 'elevator' },
      { name: '消防泵', type: 'fire' },
    ])
    const deviceList = computed(() => {
      const { deviceList: list } = props.communityInfo as any
      if (!list || list.length === 0) return []
      return list
        .filter((e: any) => e.ieClassify.includes(deviceType.value))
        .map((e: any, i: number) => ({ index: i + 1, ...e }))
    })

    return {
      curTab,
      tabs,
      communityData,
      showBuildingRoom,
      selectBuilding,
      buildingRoomList,
      deviceType,
      deviceOptions,
      deviceList,
    }
  },
})
</script>

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

.community-drawer
  display flex
  justify-content space-between
  >div
    width 35%
    &:last-child
      width 64%
  .case-wrap
    height 85vh
    overflow hidden
.person-bar
  display flex
  justify-content space-between
  .back-btn
    padding 0 .06rem
    background $primary-color
    cursor pointer
    border-radius .02rem
    margin .04rem 0
    font-size .09rem
    &:hover
      background $secondary-color
.building-list
  max-height 53vh
  overflow-y auto
  >div
    display inline-block
    width 24%
    margin .06rem 0 0 .06rem
    background linear-gradient(to right, rgba(124,139,154,.4), rgba(70,83,97,.4))
    box-shadow 0 0 .04rem 0 rgba(45,51,66,.5)
    border-radius .03rem
    box-sizing border-box
    padding .04rem .08rem
    cursor pointer
    border .01rem solid transparent
    transition all .1s ease
    &:hover
      background linear-gradient(to right, rgba(124,139,154,.2), rgba(70,83,97,.2))
      border .01rem solid rgba(130,207,255,.3)
    p
      color #ccc
      font-size .09rem
      &.title
        font-weight bold
        font-size .11rem
        color #fff
      &.line
        border-bottom .01rem dotted rgba(91,213,255,.4)
        margin .04rem 0
.room-table
  max-height 50vh
  overflow-y auto
.device-table
  max-height 48vh
  overflow-y auto
</style>

<style lang="stylus">
.community-drawer
  .basic-info
    margin-bottom .05rem
    .row
      .col
        p
          font-weight bold
          padding .05rem
$bg = rgba(13, 39, 76, .7)
$size = .1rem
$height = .2rem

.select-bar
  margin .04rem 0
  .ant-select
    background $bg
    min-width .9rem
    .ant-select-selector
      min-width .9rem
      border-top none
      border-left none
      border-right none
      height $height
      .ant-select-selection-item
        font-size $size
        line-height $height
        text-align center
        color #fff
        font-weight bold
    .ant-select-arrow
      font-size $size * 0.8
.device-selector-drop-down
  &.ant-select-dropdown
    background $bg
    font-size $size
    .ant-select-item
      font-size $size
      line-height $height / 2
    .ant-select-item-option-selected:not(.ant-select-item-option-disabled)
      background $bg
      font-size $size
</style>
