<script setup>
import dayjs from 'dayjs'
import CardCellData from './components/CardCellData.vue'
import { getElevatorInfoApi } from '@/api/elevator'
import { useFetch } from '@/composables/use-fetch'

// 电梯信息
const baseInfo = ref({
  title: '电梯信息',
  // 注册代码 登记证号 内部使用编号 电梯号码 电梯名称 电梯地址 梯龄 上次维保时间 年检日期
  keyValue: [
    { key: '注册代码', value: '', field: 'registerCode' },
    { key: '登记证号', value: '', field: 'registerNumber' },
    { key: '内部使用编号', value: '', field: 'innerCode' },
    { key: '电梯号码', value: '', field: 'elevatorNum' },
    { key: '电梯名称', value: '', field: 'elevatorName' },
    { key: '电梯地址', value: '', field: 'elevatorAddress' },
    { key: '梯龄', value: '', field: 'elevatorAge' },
    { key: '上次维保时间', value: '', field: 'lastMaintenanceTime' },
    { key: '年检日期', value: '', field: 'annualDate' }
  ]
})

// 物业管理信息
const propertyInfo = ref({
  title: '物业管理信息',
  // 单位名称 单位地址 联系人 联系电话
  keyValue: [
    { key: '单位名称', value: '', field: 'name' },
    { key: '单位地址', value: '', field: 'address' },
    { key: '联系人', value: '', field: 'contacts' },
    { key: '联系电话', value: '', field: 'phone' }
  ]
})

// 维保管理信息
const maintenanceInfo = ref({
  title: '维保管理信息',
  // 单位名称 单位地址 联系人 联系电话
  keyValue: [
    { key: '单位名称', value: '', field: 'name' },
    { key: '单位地址', value: '', field: 'address' },
    { key: '联系人', value: '', field: 'principal' },
    { key: '联系电话', value: '', field: 'principalPhone' }
  ]
})

const { result, fetchApi } = useFetch({
  apiFn: getElevatorInfoApi,
  formatResult: (r) => {
    const date = r.installDate
    if (date) {
      const y = dayjs().diff(date, 'year')
      const m = dayjs().diff(date, 'month') % 12
      r.elevatorAge = `${y}年${m}个月`
    }
    return r
  }
})
const options = ref({})
onLoad(async (e) => {
  options.value = e
  await fetchApi(e)
})
</script>

<template>
  <view class="elevator-data" pb-30>
    <CardCellData :info="baseInfo" :field-result="result" />
    <CardCellData :info="propertyInfo" :field-result="result.tenementInfo" />
    <CardCellData
      :info="maintenanceInfo"
      :field-result="result.maintenanceInfo"
    />
  </view>
</template>

<style>
.elevator-data .u-card__body {
  padding: 0 !important;
}
</style>
