<script setup>
import { useUniApi } from 'hooks/use-uni-api'
import { getElevatorListApi } from '@/api/elevator'
import { usePaging } from '@/composables/use-paging'
import { useUserStore } from '@/store/user'
const { userInfo } = useUserStore()

const mainFuncList = reactive([
  {
    name: 'plus-circle',
    title: '添加电梯',
    path: '/pages/views/elevator-update/index'
  },
  {
    name: 'question-circle',
    title: '使用帮助',
    path: '/pages/views/use-help/index'
  },
  {
    name: 'setting',
    title: '设置',
    path: '/pages/views/user-setting/index'
  }
])

const { navigateTo, previewImage, scanCode } = useUniApi()
const handleScan = () => {
  scanCode()
    .then((res) => {
      console.log('success =>', res)
    })
    .catch((err) => {
      console.log('fail =>', err)
    })
}

// 跳转电梯信息
const toElevatorInfo = ({ id, elevatorNum }) => {
  navigateTo(
    `/pages/views/elevator-info/index?id=${id}&elevatorNum=${elevatorNum}`
  )
}

const query = ref({
  elevatorName: ''
})
const { paging, dataList, queryHandler } = usePaging({
  apiFn: getElevatorListApi,
  query
})

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

<template>
  <view h-100vh flex-col bg="#F6F4F5">
    <view bg-blue w-full min-h-400 class="hold-table">
      <view mt-180 px-40 f-s-c>
        <UserAvatar :size="60" @tap="previewImage(userInfo.avatar)" />
        <view ml-40>
          <view f-s-c text-white>
            <view>{{ userInfo.nickName }}</view>
            <view ml-12 text-24>{{ userInfo.phonenumber }}</view>
          </view>
          <view text-white mt-8>{{ userInfo.deptName }}</view>
        </view>
        <view f-c-c w-40 h-40 ml-auto>
          <up-icon
            name="scan"
            :color="`${'#FFFFFF'}`"
            :size="40"
            @tap="handleScan"
          />
        </view>
      </view>
    </view>

    <!-- 主要功能 -->
    <view w-650 mx-auto mt--70 rounded-12 bg-white relative z-2 min-h-150 py-30>
      <up-grid>
        <up-grid-item
          v-for="(item, index) in mainFuncList"
          :key="index"
          @tap="navigateTo(item.path)"
        >
          <up-icon :name="item.name" :size="32" :color="`${'#6C6C6C'}`" />
          <view text="#6C6C6C" mt-8>{{ item.title }}</view>
        </up-grid-item>
      </up-grid>
    </view>

    <!-- 列表 -->
    <view w-650 mx-auto mt-24 flex-auto overflow-hidden rounded-12 bg-white>
      <z-paging
        ref="paging"
        v-model="dataList"
        :fixed="false"
        @query="queryHandler"
      >
        <up-cell-group>
          <up-cell
            v-for="(item, index) in dataList"
            :key="index"
            :title="item.elevatorName"
            :label="item.elevatorAddress"
            @tap="toElevatorInfo(item)"
          />
        </up-cell-group>
      </z-paging>
    </view>
  </view>
</template>
