<template>
  <div class="h-full flex flex-col overflow-hidden pb-50px box-border" v-loading="loading">
    <van-nav-bar title="个人中心"></van-nav-bar>
    <div class="p-20px flex-1 overflow-auto">
      <div class="relative my-30px">
        <div class="text-center">
          <div class="w-100px h-100px m-auto">
            <img class="w-full h-full rounded-50px" :src="user?.user_avatar" alt="" />
          </div>
          <div class="text-white mt-10px">{{user?.user_name}}</div>
        </div>
        <!-- <div class="absolute right-20px top-0">
          <img class="w-22px" :src="editImg" alt="" />
        </div> -->
      </div>
      <div class="flex items-center p-4px box-border bg-hex-1A1B22 rounded-12px text-14px">
        <div class="tab_item" :class="activeTab==index?'active':''" v-for="(item, index) in tabData" :key="index" @click="handleClick(index)">{{item}}</div>
      </div>
      <van-loading class="text-center py-30px" color="#ffffff" v-if="loading === true" size="24px">加载中...</van-loading>
      <div v-if="!loading" class="mt-20px flex">
        <div class="flex-1 mr-15px">
          <template v-if="activeTab==0">
            <template v-if="syData.length==0">
              <img class="w-full max-h-190px" :src="syImg" alt="" />
            </template>
            <template v-else>
              <div v-if="syData[0].axa_img" class="h-190px rounded-14px text-center">
                <img class="max-w-full max-h-full rounded-14px" :src="syData[0].axa_img" alt="图片" />
              </div>
              <img v-else class="w-full max-h-190px" :src="syImg" alt="" />
            </template>
          </template>
          <template v-else>
            <template v-if="xxData.length==0">
              <img class="w-full max-h-190px" :src="xxImg" alt="" />
            </template>
            <template v-else>
              <div v-if="xxData[0].axi_img" class="h-190px rounded-14px text-center">
                <img class="max-w-full max-h-full rounded-14px" :src="xxData[0].axi_img" alt="图片" />
              </div>
              <img v-else class="w-full max-h-190px" :src="xxImg" alt="" />
            </template>
          </template>
        </div>
        <div class="write-vertical-right rounded-5px text-white text-12px bg-white bg-opacity-10 w-30px flex items-center justify-center my-20px tracking-8px" @click="lookMore">查看更多</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import editImg from "~/assets/wode/edit.png";
import syImg from "~/assets/wode/sy.png";
import xxImg from "~/assets/wode/xx.png";
import { user } from '~/store/user'

const router = useRouter()

let loading = $ref(false);
const tabData = $ref(["我的声音", "我的形象"]);
let activeTab = $ref("");

let syData = $ref([]);
let xxData = $ref([]);

handleClick(0);
function handleClick(index) {
  activeTab = index;

  if(index == 0) 
    initSyData()
  else if(index == 1) 
    initXxData()
}

function lookMore() {
  let uri = "";
  if (activeTab == 0) {
    uri = "wdsy";
  } else if (activeTab == 1) {
    uri = "wdxx";
  }
  router.push({
    path: `/home/wode/${uri}`
  })
}

async function initSyData() {
  let obj = {
    page: "1",
    limit: "1",
    axa_sycj_shzt_v2: "1",
    create_user_id: user.value.user_id
  }
  loading = true;
  let { code, data } = await request({ url: '/aimooc/xnszr_audio/index', data: obj });
  if (code == 1) {
    syData = [...data.page_data];
    loading = false;
  }
}

async function initXxData() {
  let obj = {
    page: "1",
    limit: "1",
    axi_rxcj_shzt_v2: "1",
    create_user_id: user.value.user_id
  }
  loading = true;
  let { code, data } = await request({ url: '/aimooc/xnszr_img/index', data: obj });
  if (code == 1) {
    xxData = [...data.page_data];
    loading = false;
  }
}

</script>

<style lang="scss" scoped>
.tab_item {
  flex: 1;
  color: #808080;
  text-align: center;
  line-height: 40px;
  &.active {
    color: #fff;
    background: #db664d;
    border-radius: 8px;
  }
}
</style>