<script setup>
import { isEealNameAuthentication } from "@/utils/userInfoCheck";
import request from "@/utils/request";
import { ref, onMounted } from "vue";
import pnga22 from "@/static/user/22.png";
import pnga23 from "@/static/user/23.png";
import pnga24 from "@/static/user/24.png";
import pnga25 from "@/static/user/25.png";
import pnga26 from "@/static/user/26.png";
import pnga27 from "@/static/user/27.png";
import pnga28 from "@/static/user/28.png";
import pnga29 from "@/static/user/29.png";
import { useRouter } from "vue-router";
import handleCopy from "@/utils/handleCopy";
import { Dialog } from "@varlet/ui";
const kfurl = sessionStorage.getItem("kfurl" || "https://www.baidu.com");
const appdownload = sessionStorage.getItem("appdownload" || "https://www.baidu.com");
const router = useRouter();
// 导入图片
const MENU_ITEMS = [
  // { name: "实名认证", icon: pnga22, path: "/user/shiming" },
  { name: "资金明细", icon: pnga23, path: "/user/zjmx" },
  // { name: "邀请奖励", icon: pnga24, path: "/user/invite" },
  { name: "官方群聊", icon: pnga25, path: "/user/group" },
  { name: "邀请好友", icon: pnga26, path: "/user/invite", tips: '提现进度' },
  { name: "绑定银行卡", icon: pnga27, path: "/user/mybankCard" },
  { name: "我的团队", icon: pnga28, path: "/user/myteam" },
  { name: "APP下载", icon: pnga29, path: appdownload },

];
const items = ref(MENU_ITEMS);
const userData = ref({});
const loading = ref(true);
const activeCard = ref(null);
const sysUser = ref({});

// 处理点击事件
const handleClick = (item) => {
  if (item.name === "在线客服") {
    window.location.href = kfurl;
  } else if (item.name === "APP下载") {
    window.location.href = appdownload;
  } else {
    activeCard.value = item.name;
    router.push(item.path);
  }
};
const signIn = () => {
  if (!isEealNameAuthentication()) {
    return
  }
  router.push('/user/signIn');
};
const gotx = (balance, type, title) => {
  if (balance && balance > 0) {
    if (!isEealNameAuthentication()) {
      return
    }
    router.push(`/user/tixian?balance=${balance}&type=${type}&title=${title}`);
  } else {
    showFailToast("余额不足");
  }
};

const gomx = (tab) => {
  if (!isEealNameAuthentication()) {
    return
  }
  router.push(`/user/withdraw?tab=${tab}`);
};
const fetchData = async () => {
  try {
    loading.value = true;
    const res = await request.get("/business/businessWallet/getInfo");
    userData.value = res.result;
    sysUser.value = res.result.sysUser;

  } catch (error) {
    console.error("请求失败:", error);
    showFailToast("获取用户信息失败");
  } finally {
    loading.value = false;
  }
};
const routerTo = (path) => {
  if (!isEealNameAuthentication()) {
    return
  }
  router.push(path)
}

const actions = {
  confirm: () => {
    sessionStorage.clear();
    router.push("/login");
  },
  cancel: () => { },
  close: () => { },
}
const logout = async () => {
  actions[await Dialog({
    title: "您确定要退出登录吗?",
  })]()
};
const handleInvite = () => {
  router.push('/user/invite')
}
onMounted(fetchData);
</script>
<template>
  <div class="user-center">
    <div class="warpinfo">
      <div class="user-info">
        <div class="avatar">
          <img src="@/static/user/user.png" alt="avatar" />
        </div>
        <div class="info">
          <div class="name">{{ sysUser?.realname || "用户名" }}</div>
          <div class="phone">{{ sysUser?.username?.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</div>
          <div class="invite-code">
            邀请码：{{ sysUser?.yqm || '000000' }}
            <span class="copy" @click="handleCopy(sysUser?.yqm)">复制</span>
          </div>
        </div>
        <div class="sign-in" style="visibility: hidden;" @click="signIn">
          <img src="@/static/user/4.png" alt="sign" />
          <span>每日签到</span>
        </div>
      </div>
    </div>
    <div class="amoutcard">
      <div class="item">
        <div class="title">钱包余额</div>
        <div class="balance">￥{{ userData?.q2 || 0.00 }}</div>
        <div class="btn" @click="gotx(userData?.q2, 'q2', '现金余额')">提现</div>
      </div>
      <div class="item">
        <div class="title">币数量</div>
        <div class="balance">￥{{ userData?.q1 || 0.00 }}</div>
        <div class="btn" @click="routerTo('/gbjy')">抛售</div>
      </div>
      <div class="item">
        <div class="title">零钱余额</div>
        <div class="balance">￥{{ userData?.q3 || 0.00 }}</div>
        <div class="btn" @click="gotx(userData?.q3, 'q3', '现金余额')">提现</div>
      </div>
    </div>
    <div class="warp">
      <img src="@/static/gbjy/5.png" alt="">
      <span @click="handleInvite">立即邀请</span>
    </div>
    <!-- 九宫格菜单 -->
    <div class="menu-grid">
      <van-cell @click="handleClick(item)" v-for="item in items" :key="item.name" is-link>
        <template #title>
          <div class="item">
            <img :src="item.icon" :alt="item.name" />
            <span class="custom-title">{{ item.name }}</span>
          </div>
        </template>
      </van-cell>
    </div>

    <!-- 退出按钮 -->
    <div class="logout-btn" @click="logout">
      <img src="@/static/user/out.png" alt="">
    </div>
  </div>
</template>
<style lang="scss" scoped>
.user-center {
  font-family: 'Microsoft YaHei', sans-serif;
  background: url('@/static/home/2.png') no-repeat;
  background-size: 100% 100%;
  overflow-y: auto;
}

.warp {
  width: calc(100% - 30px);
  position: relative;
  margin: 0 auto;
  box-sizing: border-box;

  img {
    width: 100%;
  }

  span {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 50%;
    height: 20px;
    background: #fff000;
    border-radius: 10px;
    color: #000;
    font-weight: 700;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
  }
}

.user-info {
  padding: 15px;
  padding-top: 40px;
  display: flex;
  align-items: center;
  color: #fff;

  .avatar {
    width: 50px;
    height: 50px;
    margin-right: 12px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 25px;
    }
  }

  .info {
    flex: 1;

    .name {
      font-size: 16px;
      margin-bottom: 5px;
    }

    .phone {
      font-size: 14px;
      opacity: 0.8;
      margin-bottom: 5px;
    }

    .invite-code {
      font-size: 14px;
      opacity: 0.8;

      .copy {
        padding: 2px 8px;
        border-radius: 10px;
        margin-left: 8px;
        border: 1px solid #fff;
      }
    }
  }

  .sign-in {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img {
      width: 36px;
      height: 36px;
      margin-bottom: 8px;
    }

    span {
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 10px;
      border: 1px solid #fff;
      color: #fff;
    }
  }
}

.amoutcard {
  background: url('@/static/user/2.png') no-repeat;
  background-size: 100% 100%;
  padding: 20px 20px;
  margin: 0px 13px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000;

  .item {
    flex: 1;
    text-align: center;

    .balance {
      margin: 5px 0 10px;
      font-size: 20px;
      font-weight: 500;
    }

    .btn {
      width: 60%;
      margin: 0 auto;
      background: #e62129;
      color: #fff;
      padding: 4px 5px;
      border-radius: 15px;
      font-size: 12px;
    }
  }

  .item:nth-child(2) {
    border-left: 1px solid #dfdede;
    border-right: 1px solid #dfdede;
  }
}

.menu-grid {
  margin: 10px;
  border-radius: 10px;
  background: url('@/static/smtx/fbg.png') no-repeat;
  background-size: 100% 100%;
  padding-bottom: 10px;

  :deep(.van-cell) {
    background: transparent;
  }

  .item {
    display: flex;
    align-items: center;

    img {
      width: 18px;
      height: 18px;
      margin-right: 10px;
    }
  }

}

.logout-btn {
  width: 60%;
  margin: 20px auto;

  img {
    width: 100%;
  }
}
</style>