<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"
        />
        <m-sub>设施设备信息</m-sub>
        <n-tabs
          v-model:value="curEquipment"
          type="line"
          size="small"
          @update:value="fetchEquipment"
        >
          <n-tab-pane name="大门" tab="大门信息">
            <n-data-table
              size="small"
              :columns="equipmentColumns[0]"
              :data="equipmentList"
              :pagination="pagination"
            />
          </n-tab-pane>
          <n-tab-pane name="防盗门" tab="防盗门信息">
            <n-data-table
              size="small"
              :columns="equipmentColumns[1]"
              :data="equipmentList"
              :pagination="pagination"
            />
          </n-tab-pane>
          <n-tab-pane name="电梯" tab="电梯信息">
            <n-data-table
              size="small"
              :columns="equipmentColumns[2]"
              :data="equipmentList"
              :pagination="pagination"
            />
          </n-tab-pane>
          <n-tab-pane name="监控设备" tab="监控设备信息">
            <n-data-table
              size="small"
              :columns="equipmentColumns[3]"
              :data="equipmentList"
              :pagination="pagination"
            />
          </n-tab-pane>
          <n-tab-pane name="消防泵、生活泵" tab="消防泵、生活泵信息">
            <n-data-table
              size="small"
              :columns="equipmentColumns[4]"
              :data="equipmentList"
              :pagination="pagination"
            />
          </n-tab-pane>
        </n-tabs>
        <m-sub>小区拓展信息</m-sub>
        <m-form
          v-if="expandColumn?.length > 0"
          :template="expandColumn"
          :data="expandData"
        />
        <m-empty v-else />
      </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-if="showRiskDetail">
          <n-space justify="end">
            <n-button
              type="primary"
              ghost
              size="small"
              @click="showRiskDetail = false"
              >返回</n-button
            >
          </n-space>
          <SafetyInfo :info="riskDetail" />
        </template>
        <template v-else-if="showRiskBuilding">
          <div class="search-bar">
            <p>房屋安全排查结果</p>
            <n-button
              type="primary"
              ghost
              size="small"
              @click="showRiskBuilding = false"
              >返回</n-button
            >
          </div>
          <n-data-table
            size="small"
            :columns="riskBuildingColumn"
            :data="riskBuildingData"
            :pagination="pagination"
          />
        </template>
        <template v-else>
          <div class="search-bar">
            <n-space align="center">
              <n-button
                v-if="showRiskBtn"
                type="primary"
                size="small"
                @click="showRiskBuilding = true"
              >
                查看安全排查结果
              </n-button>
              门牌幢地址：<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"
          @update:value="
            () => {
              showOrderInfo = false
              pagination.page = 1
            }
          "
        >
          <n-tab-pane name="1" tab="房办月查">
            <template v-if="showOrderInfo">
              <n-space justify="end">
                <n-button
                  type="primary"
                  ghost
                  size="small"
                  @click="showOrderInfo = 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="orderInfo"
                :formatter="formatter"
              />
              <m-sub>检查指标</m-sub>
              <n-data-table
                size="small"
                :columns="orderInfoColumn"
                :data="orderInfo?.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="小区经理自查">
            <template v-if="showOrderInfo">
              <n-space justify="end">
                <n-button
                  type="primary"
                  ghost
                  size="small"
                  @click="showOrderInfo = 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="orderInfo"
                :formatter="formatter"
              />
              <m-sub>检查指标</m-sub>
              <n-data-table
                size="small"
                :columns="orderInfoColumn"
                :data="orderInfo?.norms || []"
              />
            </template>
            <template v-else>
              <m-sub>基础信息</m-sub>
              <m-form
                :template="[
                  'stNameFrst:小区名称|addrFrst:小区地址',
                  'csName:管理处名称|csAddress:管理处地址',
                  'csDayTel:日间报修电话|nightTel:夜间报修电话',
                  'csTel:管理处电话|cspName:物业企业名称',
                  'csmName:物业经理|csmTel:物业经理联系电话',
                ]"
                :data="selfCheckBasic"
              />
              <m-sub>检查单</m-sub>
              <n-data-table
                size="small"
                :columns="selfCheckColumn"
                :data="selfCheckData"
                :pagination="pagination"
              />
            </template>
          </n-tab-pane>
          <n-tab-pane name="3" tab="物企双周查">
            <template v-if="showOrderInfo">
              <n-space justify="end">
                <n-button
                  type="primary"
                  ghost
                  size="small"
                  @click="showOrderInfo = 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="orderInfo"
                :formatter="formatter"
              />
              <m-sub>检查指标</m-sub>
              <n-data-table
                size="small"
                :columns="orderInfoColumn"
                :data="orderInfo?.norms || []"
              />
            </template>
            <template v-else>
              <n-data-table
                size="small"
                :columns="doubleCheckColumn"
                :data="doubleCheckData"
                :pagination="pagination"
              />
            </template>
          </n-tab-pane>
        </n-tabs>
      </template>
      <template v-else-if="curMenu === 4">
        <n-tabs
          type="line"
          size="small"
          @update:value="
            () => {
              showBxInfo = false
              pagination.page = 1
            }
          "
        >
          <n-tab-pane name="1" tab="物业报修">
            <template v-if="showBxInfo">
              <n-space justify="end">
                <n-button
                  type="primary"
                  ghost
                  size="small"
                  @click="showBxInfo = false"
                  >返回</n-button
                >
              </n-space>
              <m-sub>基础信息</m-sub>
              <m-form
                :template="[
                  'communityName:小区名称|address:地址',
                  'district:行政区|street:街道',
                  'troubleType:报修类型|troublePhenomenon:报修项目',
                  'billNumber:工单号|reportContent:反映问题',
                  'feedBackDate:反馈时间|acceptTime:受理时间',
                  'backTime:回访时间|status:维修状态',
                  'feedbackStatus:浦房反馈状态|feedbackPhone:反馈人电话',
                  'feedbackTime:浦房反馈时间|updateTime:最后修改时间',
                  'bxmaintainType:是否是险单>yesOrNo|signStatus:接收方>switchReceiver',
                  'signForTime:签收时间|',
                ]"
                :data="bxInfo"
                :formatter="formatter"
              />
            </template>
            <template v-else>
              <n-data-table
                size="small"
                :columns="bxColumn"
                :data="bxData"
                :pagination="pagination"
              />
            </template>
          </n-tab-pane>
          <n-tab-pane name="2" tab="物业投诉">
            <n-data-table
              size="small"
              :columns="tsColumn"
              :data="tsData"
              :pagination="pagination"
            />
          </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,
  NDivider,
} from 'naive-ui'
import { ajax, api } from '@/ajax'
import { switchUnitKind, switchOrderState } from '@/utils'
import SafetyInfo from './safety-info.vue'

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, disabled: true },
]
const searchKey = ref<undefined | string>()
const curEquipment = ref('大门')
const equipmentColumns = [
  [
    {
      title: '设备名称',
      key: 'ieName',
    },
    {
      title: '安装位置',
      key: 'ieAddr',
    },
    {
      title: '设备类型',
      key: 'ieType',
    },
    {
      title: '维保单位',
      key: 'ieUnit',
    },
    {
      title: '是否是主出入口',
      key: 'isMainGate',
    },
    {
      title: '是否有门卫室',
      key: 'ffCode',
    },
  ],
  [
    {
      title: '设备名称',
      key: 'ieName',
    },
    {
      title: '安装位置',
      key: 'ieAddr',
    },
    {
      title: '设备类型',
      key: 'ieType',
    },
    {
      title: '维保单位',
      key: 'ieUnit',
    },
    {
      title: '启用日期',
      key: 'ieDate',
    },
  ],
  [
    {
      title: '设备名称',
      key: 'ieName',
    },
    {
      title: '安装位置',
      key: 'ieAddr',
    },
    {
      title: '设备类型',
      key: 'ieType',
    },
    {
      title: '维保单位',
      key: 'ieUnit',
    },
    {
      title: '启用日期',
      key: 'ieDate',
    },
    {
      title: '型号',
      key: 'ieModel',
    },
    {
      title: '品牌',
      key: 'ieBrand',
    },
    {
      title: '特种设备代码',
      key: 'specialEquipCode',
    },
    {
      title: '检验单位',
      key: 'inspectionUnit',
    },
    {
      title: '救援电话',
      key: 'rescuePhone',
    },
  ],
  [
    {
      title: '设备名称',
      key: 'ieName',
    },
    {
      title: '安装位置',
      key: 'ieAddr',
    },
    {
      title: '设备类型',
      key: 'ieType',
    },
    {
      title: '维保单位',
      key: 'ieUnit',
    },
  ],
  [
    {
      title: '设备名称',
      key: 'ieName',
    },
    {
      title: '安装位置',
      key: 'ieAddr',
    },
    {
      title: '设备类型',
      key: 'ieType',
    },
    {
      title: '维保单位',
      key: 'ieUnit',
    },
    {
      title: '生产厂家',
      key: 'ieFactory',
    },
    {
      title: '供水门牌号',
      key: 'ieWaterDoorplate',
    },
  ],
]
const equipmentList = ref<any[]>([])
async function fetchEquipment(val: string) {
  pagination.page = 1
  curEquipment.value = val
  equipmentList.value =
    (
      await ajax.get({
        url: api.EQUIPMENT,
        params: {
          sectId: props.info?.sectId,
          type: '1',
          ieClassify: val,
          pageSize: 9000,
        },
      })
    )?.data?.content || []
}

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
  },
})
const showRiskBuilding = ref(false)
const showRiskDetail = ref(false)
const riskDetail = ref<{ [key: string]: unknown }>({})
const riskBuildingColumn = [
  {
    title: '小区名称',
    key: 'stNameFrst',
  },
  {
    title: '项目地址',
    key: 'sectAddr',
  },
  {
    title: '自然幢地址',
    key: 'wholeBuildingAddr',
  },
  {
    title: '安全排查结果',
    key: 'judgeType',
  },
  {
    title: '风险类型描述',
    key: 'riskTypeDesc',
  },
  {
    title: '小梁薄板',
    key: 'isThinPlate',
    render({ isThinPlate }) {
      return h('span', null, {
        default: () => (isThinPlate === true ? '是' : '否'),
      })
    },
  },
  {
    title: '操作',
    key: 'actions',
    render(row) {
      return h(
        NButton,
        {
          text: true,
          textColor: '#1890ff',
          size: 'small',
          onClick: () => {
            riskDetail.value = { ...row }
            showRiskDetail.value = true
          },
        },
        { default: () => '查看' },
      )
    },
  },
]
const showRiskBtn = ref(false)
const riskBuildingData = ref<any[]>([])
async function getBuildingList() {
  buildingsData.value =
    (
      await ajax.get({
        url: api.BUILDINGS,
        params: {
          sectId: props.info?.sectId,
          unitAddr_l: searchKey.value,
          pageSize: 9000,
        },
      })
    )?.data?.content || []

  const unitIds = buildingsData.value.map((item) => item.unitId)
  riskBuildingData.value =
    (
      await ajax.get({
        url: api.RISK_BUILDINGS,
        params: {
          unitId_in: unitIds.join(','),
          pageSize: 9000,
        },
      })
    )?.data?.content || []
  showRiskBtn.value = riskBuildingData.value?.length > 0
}
function reset() {
  searchKey.value = ''
  pagination.page = 1
  getBuildingList()
}
const formatter = {
  trueOrFalse: (val: unknown) => (val === true ? '有' : '无'),
  yesOrNo: (val: unknown) => (val == 1 ? '是' : '否'),
  switchUnitKind,
  switchOrderState,
  switchReceiver: (key: unknown) => {
    let result = '应急中心已签收'
    if (key == 0) {
      result = '其他'
    } else if (key == 1) {
      result = '物业已签收'
    }
    return result
  },
  switchCheckState: (checkState: unknown) => {
    let result = '暂无'
    if (checkState == '0') {
      result = '合格'
    } else if (checkState == '1') {
      result = '不合格'
    }
    return result
  },
}

const showOrderInfo = ref(false)
const orderInfo = ref<{ [key: string]: any }>({})
const orderInfoColumn = [
  {
    title: '指标名称',
    key: 'normName',
  },
  {
    title: '指标状态',
    key: 'normState',
    render({ normState }) {
      return h('span', null, {
        default: () => formatter.switchCheckState(normState),
      })
    },
  },
]

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 () => {
            orderInfo.value =
              (
                await ajax.get({
                  url: api.ORDER.replace('{id}', row.id),
                })
              )?.data?.content || {}
            showOrderInfo.value = true
          },
        },
        { default: () => '查看' },
      )
    },
  },
]
const monthCheckData = ref<any[]>([])

const selfCheckBasic = ref<{ [key: string]: unknown }>({})
const selfCheckColumn = [
  {
    title: '检查时间',
    key: 'checkTime',
  },
  {
    title: '检查人',
    key: 'checkPersonName',
  },
  {
    title: '检查状态',
    key: 'checkState',
    render({ checkState }) {
      return h('span', null, {
        default: () => formatter.switchCheckState(checkState),
      })
    },
  },
  {
    title: '整改情况',
    key: 'checkStateDegree',
    render({ checkStateDegree }) {
      return h('span', null, {
        default: () => {
          // 0无需整改 1已整改 2整改中
          switch (checkStateDegree) {
            case '0':
              return '无需整改'
            case '1':
              return '已整改'
            case '2':
              return '整改中'
            default:
              return '暂无'
          }
        },
      })
    },
  },
  {
    title: '操作',
    key: 'actions',
    render(row) {
      return h(
        NButton,
        {
          text: true,
          textColor: '#1890ff',
          size: 'small',
          onClick: async () => {
            orderInfo.value =
              (
                await ajax.get({
                  url: api.ORDER.replace('{id}', row.id),
                })
              )?.data?.content || {}
            showOrderInfo.value = true
          },
        },
        { default: () => '查看检查单' },
      )
    },
  },
]
const selfCheckData = ref<any[]>([])

const doubleCheckColumn = [
  {
    title: '小区名称',
    key: 'communityName',
  },
  {
    title: '小区地址',
    key: 'communityAddress',
  },
  {
    title: '检查人/检查日期',
    key: 'check',
    render({ checkPersonName, checkTime }) {
      return h('span', null, {
        default: () => `${checkPersonName}/${checkTime}`,
      })
    },
  },
  {
    title: '检查状态',
    key: 'checkState',
    render({ checkState }) {
      return h('span', null, {
        default: () => formatter.switchCheckState(checkState),
      })
    },
  },
  {
    title: '整改情况',
    key: 'checkStateDegree',
    render({ checkStateDegree }) {
      return h('span', null, {
        default: () => {
          // 0无需整改 1已整改 2整改中
          switch (checkStateDegree) {
            case '0':
              return '无需整改'
            case '1':
              return '已整改'
            case '2':
              return '整改中'
            default:
              return '暂无'
          }
        },
      })
    },
  },
  {
    title: '操作',
    key: 'actions',
    render(row) {
      return h(
        NButton,
        {
          text: true,
          textColor: '#1890ff',
          size: 'small',
          onClick: async () => {
            orderInfo.value =
              (
                await ajax.get({
                  url: api.ORDER.replace('{id}', row.id),
                })
              )?.data?.content || {}
            showOrderInfo.value = true
          },
        },
        { default: () => '查看检查单' },
      )
    },
  },
]
const doubleCheckData = ref<any[]>([])

const bxInfo = ref<{ [key: string]: unknown }>({})
const showBxInfo = ref(false)
const bxColumn = [
  {
    title: '报修项目',
    key: 'troublePhenomenon',
  },
  {
    title: '报修类型',
    key: 'troubleType',
  },
  {
    title: '受理时间',
    key: 'acceptTime',
  },
  {
    title: '完成时间',
    key: 'feedBackDate',
  },
  {
    title: '反馈人电话',
    key: 'feedbackPhone',
  },
  {
    title: '状态',
    key: 'status',
  },
  {
    title: '操作',
    key: 'actions',
    render(row) {
      return h(
        NButton,
        {
          text: true,
          textColor: '#1890ff',
          size: 'small',
          onClick: async () => {
            bxInfo.value =
              (
                await ajax.get({
                  url: `${api.BX}/${row.id}`,
                })
              )?.data?.content || {}
            showBxInfo.value = true
          },
        },
        { default: () => '查看' },
      )
    },
  },
]
const bxData = ref<any[]>([])

const tsColumn = [
  {
    title: '小区名称',
    key: 'communityName',
  },
  {
    title: '地址',
    key: 'address',
  },
  {
    title: '反应问题',
    key: 'problem',
  },
  {
    title: '受理时间',
    key: 'acceptDate',
  },
  {
    title: '反馈时间',
    key: 'feedBackDate',
  },
  {
    title: '状态',
    key: 'status',
  },
]
const tsData = ref<any[]>([])

const expandData = ref<{ [key: string]: unknown }>({})
const expandColumn = ref<{ title: string; key: string }[]>([])
watch(
  () => curMenu.value,
  async (menu) => {
    pagination.page = 1
    switch (menu) {
      case 1:
        fetchEquipment('大门')
        const data =
          (
            await ajax.get({
              url: api.EXPAND_INFO.replace(
                '{id}',
                props.info?.sectId as string,
              ),
            })
          )?.data?.content || []
        const result: any = {}
        const columns = data.map((item) => {
          result[item.id] = item.keyVal
          return {
            title: item.keyName,
            key: item.id,
          }
        })
        const templates: any[] = []
        for (let i = 0; i < columns.length; i += 3) {
          const arr = (columns.slice(i, i + 3) || [])?.map(
            (item) => `${item.key}:${item.title}`,
          )
          while (arr.length < 3) {
            arr.push('')
          }
          templates.push(arr)
        }
        expandColumn.value = templates.map((item) => item.join('|'))
        expandData.value = result
      case 2:
        showRiskBuilding.value = false
        showBuildingInfo.value = false
        reset()
        break
      case 3:
        showOrderInfo.value = false
        monthCheckData.value =
          (
            await ajax.get({
              url: api.ORDERS,
              params: {
                communityName: props.info?.stNameFrst,
                orderType: 1,
                pageSize: 9000,
              },
            })
          )?.data?.content || []
        const basicInfo =
          (
            await ajax.get({
              url: api.GET_COMMUNITY.replace(
                '{id}',
                props.info?.sectId as string,
              ),
            })
          )?.data?.content || {}
        selfCheckBasic.value = {
          ...(basicInfo?.cmInfo || {}),
          ...(basicInfo?.caoInfo || {}),
          ...basicInfo,
        }
        selfCheckData.value =
          (
            await ajax.get({
              url: api.CHECK_ORDERS,
              params: {
                orderType: '4',
                communityId: props.info?.sectId as string,
                pageSize: 9000,
                checkTime_desc: 'desc',
              },
            })
          )?.data?.content || []
        doubleCheckData.value =
          (
            await ajax.get({
              url: api.CHECK_ORDERS,
              params: {
                orderType: '5',
                communityId: props.info?.sectId as string,
                pageSize: 9000,
                checkTime_desc: 'desc',
              },
            })
          )?.data?.content || []
        break
      case 4:
        showBxInfo.value = false
        bxData.value =
          (
            await ajax.get({
              url: api.BX,
              params: {
                communityId: props.info?.sectId as string,
                pageSize: 9000,
              },
            })
          )?.data?.content || []
        tsData.value =
          (
            await ajax.get({
              url: api.TS,
              params: {
                communityId: props.info?.sectId as string,
                pageSize: 9000,
              },
            })
          )?.data?.content || []
        break
      default:
        break
    }
  },
  { immediate: true },
)
</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>
