<template>
  <div class="community-info">
    <m-sub>小区基本信息</m-sub>
    <m-form
      :template="[
        'stNameFrst:小区名称|stNameScnd:小区别名|addrFrst:小区地址',
        'finishDate:竣工日期|stCnstArea:总建筑面积(㎡)|isOpen:小区封闭与否',
        'hoName:房管办|streetName:街道|loopLineName:环线',
        'stCspEast:小区四至范围东|getStCspWest:小区四至范围西|stCspSouth:小区四至范围南',
        'stCspNorth:小区四至范围北|stNotcsparea:四至不包括|stKindName:小区性质',
        'sectTypeName:小区类型|cspServiceTypeName:物业服务类型|totOngParks:地面停车位数量',
        'totUngParks:地下停车位数量|landArea:占地面积(㎡)|totUnits:总门牌数',
        'totHous:总户数||',
      ]"
      :data="info"
    />
    <m-sub>小区管理处信息</m-sub>
    <m-form
      :template="[
        'csName:管理处名称|csAddress:办公地址|csContacter:管理处联系人',
        'csTel:联系人联系电话|csDayTel:日间报修电话|nightTel:夜间报修电话',
        'complaintTel:物业投诉电话|csFax:管理处传真|csPostCode:管理处邮编',
      ]"
      :data="info"
    />
    <m-sub>物业企业信息</m-sub>
    <m-form
      :template="[
        'cspName:物业企业名称|cspContractStartDate:合同开始日期|cspContractEndDate:合同结束日期',
        'legalRepName:企业法人代表|cspTel:企业联系电话|cspContacter:企业联系人',
        'cspAddr:办公地址||',
      ]"
      :data="info"
    />
    <m-sub>小区经理信息</m-sub>
    <m-form
      :template="[
        'csmName:姓名|csmJobCode:上岗证号|certType:证件类型',
        'csmJobQualification:资格证书名称|csmJobLog:资格证书编号|csmTel:固定电话',
        'credentialsNo:证件号码||',
      ]"
      :data="info"
    />
    <m-sub>业主大会信息</m-sub>
    <m-form
      :template="[
        'hocCode:业主大会代码|hocName:名称|hocAddr:地址',
        'electionDate:选举时间|directorName:主任|deputyDirectorName:副主任',
        'commValidDate:任期|hocTerm:第几届|recordDate:业主大会备案日期',
        'onwersTypeoperName:业主大会运作情况类别|onwersTransitionName:换届情况类别|conStartDate:业委会任期起始时间',
        'conEndDate:业委会任期结束时间||',
      ]"
      :data="info"
    />
    <m-sub>居委会信息</m-sub>
    <m-form
      :template="[
        'cmtName:居委会名称|cmtAddr:居委会地址|cmtDirectorName:居委主任姓名',
        'cmtSecretaryName:居委书记姓名||',
      ]"
      :data="info"
    />
  </div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'

defineProps({
  info: {
    type: Object as PropType<{ [key: string]: unknown }>,
    default: () => ({}),
  },
})
</script>

<style lang="stylus" scoped>
.community-info
  >.my-sub
    margin-top .1rem
    font-size .12rem
    padding-left .1rem
    background-clip text
    -webkit-background-clip text
    -webkit-text-fill-color transparent
    background-image linear-gradient(to bottom, #FFD1B2, #FF8635)
</style>
