<script setup>
import dayjs from 'dayjs'
import CardCellData from './components/CardCellData.vue'
import { getElevatorIdInfoWxApi } from '@/api/elevator'
import { useFetch } from '@/composables/use-fetch'
import { useUniApi } from '@/composables/use-uni-api'
import { useUserStore } from '@/store/user'
import { Qs } from '@/utils/common'

const { navigateTo } = useUniApi()

// 电梯信息
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: 'contacts' },
    { key: '联系电话', value: '', field: 'phone' }
  ]
})

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

const { result, fetchApi } = useFetch({
  apiFn: getElevatorIdInfoWxApi,
  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) => {
  // uni.hideHomeButton()
  options.value = e
  await fetchApi(e)
  // checkUserPermission()
})

const checkUserPermission = () => {
  if (isVisitor.value) {
    return
  }

  uni.showHomeButton()
}

// 是否维保人员
const isMain = computed(() => {
  const { roles } = storeToRefs(useUserStore())
  return roles.value && roles.value.includes('maintenance')
})

// 是否访客
const isVisitor = computed(() => {
  const { userInfo } = storeToRefs(useUserStore())
  if (!userInfo.value || !Object.keys(userInfo.value).length) {
    return true
  }
  return false
})

const toHome = () => {
  uni.reLaunch({
    url: '/pages/index/index'
  })
}
const toFeedback = () => {
  const { elevatorNum } = result.value
  const urlParams = Qs.stringify({ ...options.value, elevatorNum })
  navigateTo(`/pages/views/basic-info/feedback?${urlParams}`)
}
const toMaintenance = () => {
  // navigateTo('/pages/views/elevator-maintenance/index')
  uni.reLaunch({
    url: '/pages/views/elevator-maintenance/index'
  })
}
const toMaintain = () => {
  // navigateTo('/pages/views/elevator-maintain/index')
  uni.reLaunch({
    url: '/pages/views/elevator-maintain/index'
  })
}
</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 v-if="isMain" f-c-c justify-between px-30 mt-30>
      <up-button type="primary" text="去维保" @click="toMaintenance" />
      <view flex-none w-30 />
      <up-button type="warning" text="去维修" @click="toMaintain" />
    </view>
    <view v-else-if="isVisitor" f-c-c px-30 mt-30>
      <up-button type="primary" text="乘客意见" @click="toFeedback" />
    </view>
    <view v-else f-c-c px-30 mt-30>
      <up-button type="primary" text="返回首页" @click="toHome" />
    </view>
  </view>
</template>

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