<template>
  <div class="my-page relative" style="min-height: 100vh;">
    <div class="my-bg absolute left-0 top-0 right-0 bottom-0" />
    <div class="my-info text-center pt120 relative">
      <van-image class="imgsize-160X160" :src="avatar_img" round />
      <p class="font-36 mt30">{{user_name}}</p>
    </div>
    <div class="my-menu inner20 box-shadow-darkGray ulib-r20 ml30 mr30 mt100 overflowhidden">
      <template v-for="(item,index) in list" :key="index">
        <van-cell v-if="item.type==1" :title="item.title" is-link :to="item.url" />
        <van-cell v-if="item.type==2" :title="item.title" is-link @click="handlePhoneCall(item)" />
      </template>
    </div>
    <SideMenu />
  </div>
</template>

<script setup>
const handlePhoneCall = (item) => {
  // 唤起打电话功能，item.url应为电话号码
  if (item.url) {
    window.location.href = `tel:${item.url}`;
  }
};

import { ref } from 'vue'
import SideMenu from '@/components/SideMenu.vue' // 导入SideMenu组件
import { onMounted } from 'vue'
import api from '@/utils/api'
import WechatUtils,{ WechatShare } from '@/utils/wechat'

// 声明组件名称（可选，用于devtools）
defineOptions({ name: 'My' })

// 声明响应式数据（Vue 3使用ref/reactive替代data选项）
const avatar_img = ref('')
const user_name = ref('')
const list = ref([])

const userInfo = ref({})
const loading = ref(true)

async function getUserInfo() {
  try {
    // const res = await api.getUserInfo()
    const  res  = await api.get('/auto/ucenter');
    if(res.code){
      userInfo.value = res.data.user_info
      avatar_img.value = userInfo.value.avatar
      user_name.value = userInfo.value.username
      list.value = res.data.menu_list
    }
  } finally {
    loading.value = false
  }
}

onMounted(async () => {
  let appid = localStorage.getItem('app_id')
  if(appid) {
    await WechatUtils.init(appid);
    // 隐藏分享
    await WechatShare.hideAllNonBaseMenuItem();
  }
  getUserInfo()
})
</script>

<style>
.my-bg{
  width: 100vw;
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url('/src/assets/my-bg.jpg')
}
</style>