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

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

const { navigateTo, previewImage } = useUniApi()

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>
    </view>

    <!-- 主要功能 -->
    <view w-650 mx-auto mt--70 rounded-12 bg-white relative z-2 min-h-150 py-30>
      <up-grid col="2">
        <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>
</template>
