<script setup>
import { useUniApi } from 'hooks/use-uni-api'
import AppGroupItem from './components/AppGroupItem.vue'
import {
  usualList,
  taskList,
  realtimeList,
  historyList,
  otherList
} from './constants'
import { getElevatorInfoApi, getThirdPartyUserApi } from '@/api/elevator'
const { navigateTo } = useUniApi()

const usualApps = ref(usualList)
const taskApps = ref(taskList)
const realtimeApps = ref(realtimeList)
const historyApps = ref(historyList)
const otherApps = ref(otherList)

// 创建对子组件的引用
const uToastRef = ref(null)

// 定义方法
const click = ({ path, type }) => {
  const { id, elevatorNum } = options.value
  if (type === 'surveillance-camera') {
    return
  }
  navigateTo(`${path}?id=${id}&elevatorNum=${elevatorNum}&enterType=hasId`)
}
const toCall = ({ phone }) => {
  uni.makePhoneCall({
    phoneNumber: phone
  })
}

const elevatorInfo = ref({})
provide('elevatorInfo', elevatorInfo)
const getElevatorInfo = async () => {
  const { error, data } = await getElevatorInfoApi(options.value)
  if (error) {
    return
  }
  elevatorInfo.value = data
}

const workerList = ref([])
const getWorkerInfoList = async () => {
  const { elevatorNum } = options.value
  const { error, data } = await getThirdPartyUserApi({ elevatorNum })
  if (error) {
    return
  }
  workerList.value = data
}

const options = ref({})
onLoad(async (e) => {
  options.value = e
  getElevatorInfo()
  getWorkerInfoList()
})
</script>

<template>
  <view>
    <!-- 基本信息 -->
    <view my-20 px-40>
      <view text-40 text-bold mt-20>{{ elevatorInfo.elevatorName }}</view>
      <view f-s-c mt-8>
        <up-icon name="map-fill" :size="24" :color="`${'#579BF7'}`" />
        <text text-28 font-400 ml-4>{{ elevatorInfo.elevatorAddress }}</text>
      </view>
    </view>

    <!-- 常用应用 -->
    <AppGroupItem title="常用应用" :apps="usualApps" @itemHandler="click" />

    <!-- 任务 -->
    <AppGroupItem title="任务" :apps="taskApps" @itemHandler="click" />

    <!-- 实时 -->
    <AppGroupItem title="实时" :apps="realtimeApps" @itemHandler="click" />

    <!-- 历史 -->
    <AppGroupItem title="历史" :apps="historyApps" @itemHandler="click" />

    <!-- 其他 -->
    <AppGroupItem title="其他" :apps="otherApps" @itemHandler="click" />

    <!-- <view text-40 text-bold px-40 py-20 mt-20>某某某公司通讯录1</view> -->
    <template v-for="(value, index) in workerList" :key="index">
      <view text-40 text-bold px-40 py-20 mt-20>
        {{ value.tenementName || value.maintenanceName }}
      </view>
      <view px-20>
        <template
          v-for="(val, idx) in value.tenementList || value.maintenanceList"
          :key="idx"
        >
          <up-cell :title="val.name" :label="val.phone" @click="toCall(val)">
            <template #right-icon>
              <view bg="#579BF7" w-60 h-60 rounded-60 f-c-c>
                <up-icon name="phone-fill" :size="24" :color="`${'#FFFFFF'}`" />
              </view>
            </template>
          </up-cell>
        </template>
      </view>
    </template>

    <up-toast ref="uToastRef" />
  </view>
</template>

<style lang="scss">
.top-number {
  .u-grid {
    border-radius: 20rpx;
    background-color: #1296db;
    padding: 20rpx 0;
  }
  .u-grid-item {
    border-right: 1px solid #dbfbdb;
    &:last-child {
      border-right: none;
    }
  }
  .u-grid-item--hover-class {
    opacity: 1 !important;
  }
}
</style>
