<template>
  <div class="community-info">
    <n-menu v-model:value="curMenu" :options="menus" style="width: 1.2rem" />
    <div class="content">
      <template v-if="curMenu === 1">
        <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"
        />
      </template>
      <template v-else-if="curMenu === 2">
        <template v-if="showBuildingInfo">
          <n-space justify="end">
            <n-button
              type="primary"
              ghost
              size="small"
              @click="showBuildingInfo = false"
              >返回</n-button
            >
          </n-space>
          <m-form
            :template="[
              'unitAddr:门牌地址|unitKind:属性>switchUnitKind|unitFlag:电梯标志>trueOrFalse',
              'cnstArea:总面积|totUnit:总户数|uLoad:路',
              'uLong:弄|uSublong:支弄|unitNo:单元号',
              'useType:使用类型|projType:项目立项类型|status:状态',
              'unitTotFloor:总层数|unitTotElevator:电梯数|',
            ]"
            :data="buildingInfo"
            :formatter="formatter"
          />
        </template>
        <template v-else>
          <div class="search-bar">
            <n-space align="center">
              门牌幢地址：<n-input
                v-model:value="searchKey"
                size="small"
                @keypress.enter="getBuildingList"
              />
            </n-space>
            <n-space>
              <n-button size="small" ghost type="primary" @click="reset">
                重置
              </n-button>
              <n-button size="small" type="primary" @click="getBuildingList">
                搜索
              </n-button>
            </n-space>
          </div>
          <n-data-table
            size="small"
            :columns="buildingsColumn"
            :data="buildingsData"
            :pagination="pagination"
          />
        </template>
      </template>
      <template v-else-if="curMenu === 3">
        <n-tabs type="line" size="small">
          <n-tab-pane name="1" tab="房办月查">
            <template v-if="showMonthCheckInfo">
              <n-space justify="end">
                <n-button
                  type="primary"
                  ghost
                  size="small"
                  @click="showMonthCheckInfo = false"
                  >返回</n-button
                >
              </n-space>
              <m-sub>基础信息</m-sub>
              <m-form
                :template="[
                  'community_name:小区名称|street_name:街道名称|check_time:检查时间',
                  'check_user_name:检查人|check_result:检查情况>switchCheckState|order_status:整改情况>switchOrderState',
                  'csp_name:物业公司||',
                ]"
                :data="monthCheckInfo"
                :formatter="formatter"
              />
              <m-sub>检查指标</m-sub>
              <n-data-table
                size="small"
                :columns="monthCheckInfoColumn"
                :data="monthCheckInfo?.norms || []"
              />
            </template>
            <template v-else>
              <n-data-table
                size="small"
                :columns="monthCheckColumn"
                :data="monthCheckData"
                :pagination="pagination"
              />
            </template>
          </n-tab-pane>
          <n-tab-pane name="2" tab="小区经理自查">Hey Jude</n-tab-pane>
          <n-tab-pane name="3" tab="物企双周查">七里香</n-tab-pane>
        </n-tabs>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { PropType, ref, h, reactive, watch } from 'vue'
import {
  NMenu,
  NSpace,
  NInput,
  NButton,
  NDataTable,
  NTabs,
  NTabPane,
} from 'naive-ui'
import { ajax, api } from '@/ajax'
import { switchUnitKind, switchOrderState } from '@/utils'

const props = defineProps({
  info: {
    type: Object as PropType<{ [key: string]: unknown }>,
    default: () => ({}),
  },
})
const curMenu = ref(1)
const menus = [
  { label: '概况', key: 1 },
  { label: '门牌幢', key: 2 },
  { label: '监管和履职', key: 3 },
  { label: '热线信息', key: 4 },
  { label: '维修资金', key: 5 },
]
const searchKey = ref<undefined | string>()
const showBuildingInfo = ref(false)
const buildingInfo = ref<{ [key: string]: unknown }>({})
const buildingsColumn = [
  {
    title: '门牌幢地址',
    key: 'unitAddr',
  },
  {
    title: '门牌属性',
    key: 'unitKind',
    render({ unitKind }) {
      return h('span', null, {
        default: () => switchUnitKind(unitKind),
      })
    },
  },
  {
    title: '总户数',
    key: 'totUnit',
  },
  {
    title: '电梯数量',
    key: 'unitTotElevator',
  },
  {
    title: '建筑面积(m²)',
    key: 'cnstArea',
  },
  {
    title: '操作',
    key: 'actions',
    render(row) {
      return h(
        NButton,
        {
          text: true,
          textColor: '#1890ff',
          size: 'small',
          onClick: async () => {
            buildingInfo.value =
              (
                await ajax.get({
                  url: api.BUILDING.replace('{id}', row.id),
                })
              )?.data?.content || {}
            showBuildingInfo.value = true
          },
        },
        { default: () => '查看' },
      )
    },
  },
]
const buildingsData = ref<any[]>([])
const pagination = reactive({
  page: 1,
  pageSize: 10,
  onChange: (page) => {
    pagination.page = page
  },
})

async function getBuildingList() {
  buildingsData.value =
    (
      await ajax.get({
        url: api.BUILDINGS,
        params: {
          sectId: props.info?.sectId,
          unitAddr_l: searchKey.value,
          pageSize: 9000,
        },
      })
    )?.data?.content || []
}
function reset() {
  searchKey.value = ''
  pagination.page = 1
  getBuildingList()
}
const formatter = {
  trueOrFalse: (val: unknown) => (val === true ? '有' : '无'),
  switchUnitKind,
  switchCheckState: (checkState: unknown) => {
    let result = '暂无'
    if (checkState == '0') {
      result = '合格'
    } else if (checkState == '1') {
      result = '需整改'
    }
    return result
  },
}

const showMonthCheckInfo = ref(false)
const monthCheckInfo = ref<{ [key: string]: unknown }>({})
const monthCheckColumn = [
  {
    title: '小区名称',
    key: 'communityName',
  },
  {
    title: '检查事件',
    key: 'checkTime',
  },
  {
    title: '检查人',
    key: 'checkPersonName',
  },
  {
    title: '检查情况',
    key: 'checkState',
    render({ checkState }) {
      return h('span', null, {
        default: () => formatter.switchCheckState(checkState),
      })
    },
  },
  {
    title: '整改情况',
    key: 'orderState',
    render({ orderState }) {
      return h('span', null, { default: () => switchOrderState(orderState) })
    },
  },
  {
    title: '操作',
    key: 'actions',
    render(row) {
      return h(
        NButton,
        {
          text: true,
          textColor: '#1890ff',
          size: 'small',
          onClick: async () => {
            monthCheckInfo.value =
              (
                await ajax.get({
                  url: api.ORDER.replace('{id}', row.id),
                })
              )?.data?.content || {}
            showMonthCheckInfo.value = true
          },
        },
        { default: () => '查看' },
      )
    },
  },
]
const monthCheckInfoColumn = [
  {
    title: '指标名称',
    key: 'norName',
  },
  {
    title: '指标状态',
    key: 'normState',
    render({ normState }) {
      return h('span', null, {
        default: () => formatter.switchCheckState(normState),
      })
    },
  },
]
const monthCheckData = ref<any[]>([])

watch(
  () => curMenu.value,
  async (menu) => {
    pagination.page = 1
    switch (menu) {
      case 2:
        showBuildingInfo.value = false
        reset()
        break
      case 3:
        monthCheckData.value =
          (
            await ajax.get({
              url: api.ORDERS,
              params: {
                communityName: props.info.stNameFrst,
                orderType: 1,
                pageSize: 9000,
              },
            })
          )?.data?.content || []
        break
      default:
        break
    }
  },
)
</script>

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

.community-info
  display flex
  width 100%
  height 70vh
  overflow hidden
  .content
    flex 1
    overflow-y auto
    padding-right .05rem
    box-sizing border-box
    .search-bar
      display flex
      justify-content space-between
      align-items center
      margin-bottom .1rem
  .my-sub
    margin-top .1rem
    font-size .12rem
    padding-left .1rem
    color $yellow
    // background-clip text !important
    // -webkit-background-clip text !important
    // -webkit-text-fill-rowor transparent !important
    // background-image linear-gradient(to bottom, #FFD1B2, #FF8635) !important
</style>
