<template>
  <common-layout>
    <view class="content"
      :style="{ backgroundColor: themeStore.theme.account.bgColor, height: appStore.windowInfo.screenHeight + 'px' }">
      <view :style="{
        height: appStore.headerStyle.statusBarHeight + 'px',
        backgroundColor: themeStore.theme.account.navBgColor,
      }"></view>
      <view class="nav-bar" :style="{
        'background-color': themeStore.theme.account.navBgColor,
      }">
        <view class="nav-bar-content">
          <text class="nav-bar-title">{{ $t('account.config.profile') }}</text>
        </view>
      </view>
      <view class="account-header" :style="{ backgroundColor: themeStore.theme.account.lightBgColor }">
        <view class="account-header-user-info">
          <view class="avatar relative" @click="handleEditProfile">
            <theme-image src="@/static/icon-avatar.png" class="user-image-size"></theme-image>
            <theme-image src="@/static/user_edit.png" class="icon-user-edit pos-absolute" mode="aspectFit" />
          </view>
          <view class="user-info-content">
            <view class="user-phone-vip" :style="{ color: themeStore.theme.account.text.menuColor }">
              <view class="user-phone">{{ userStore.userInfo.nikeName }} (ID: {{ userStore.userInfo.id }})</view>
              <!-- <view class="user-vip flex-acenter flex-scenter" @click.stop="handleVipClick">
                <view>{{ userStore.vipInfo.vipLevel }}</view>
              </view> -->
              <!-- <vip-sign style="margin-left: 26rpx;" /> -->
              <theme-image :src="`@/static/vip_level/jb_vip${userStore.vipInfo.currentVipConfig.level}.png`"
                class="icon-vip-level"></theme-image>
            </view>
            <view class="mt8" style="display: inline-block">
              <view class="user-money flex flex-center flex-acenter" :style="{
                'background-color': themeStore.theme.themeLightBgColor,
              }">
                <!-- <view class="user-money-icon flex-acenter flex-scenter ft12"
                  :style="{ color: themeStore.theme.coin.text, 'background-image': themeStore.imageCssUrl.iconCoin }">
                  <view>{{ appStore.currencySign }} </view>
                </view> -->
                <view :style="{ color: themeStore.theme.text.theme }">
                  ₹{{ formatFloat(userStore.userInfo.totalAssets, 2) }}
                </view>
                <!-- <theme-image class="user-money-refresh-icon" src="@/static/home/icon-refresh.png" mode="aspectFit"
                  @click.stop="refresh" /> -->
              </view>
            </view>
          </view>
          <view class="flex flex-end flex-acenter flex-1">
            <view class="flex-column flex-acenter" @click.stop="handleDepositClick">
              <theme-image class="user-right-icon" src="@/static/icon-deposit.png" mode="aspectFit" />
              <view class="user-right-text" :style="{ 'color': themeStore.theme.text.normal }">
                {{ $t('home.deposit') }}
              </view>
            </view>
            <view class="flex-column flex-acenter ml-1_5" @click.stop="handleWithdrawClick">
              <theme-image class="user-right-icon" src="@/static/icon-withdraw.png" mode="aspectFit" />
              <view class="user-right-text" :style="{ 'color': themeStore.theme.text.normal }">
                {{ $t('home.withdraw') }}
              </view>
            </view>
          </view>
        </view>
        <!-- <view class="account-header-menu">
          <view class="account-header-menu-item" v-for="(item, index) in Menu" :key="index"
            @click="menuNavigator(item.router)">
            <theme-image class="account-header-menu-item-image" :src="item.icon"></theme-image>
            <text class="account-header-menu-item-name" :style="{ color: themeStore.theme.account.text.normal }">{{
              item.name }}</text>
          </view>
        </view> -->
      </view>
      <view class="vip-box">
        <vip-item :vip-info="userStore.vipInfo.currentVipConfig" can-navigate />
      </view>
      <view class="account-body" :style="{ background: themeStore.theme.account.linearBgColor }">
        <template v-for="(item, index) in AccountHelp" :key="index">
          <!-- <view class="account-body-title" :style="{ color: themeStore.theme.account.text.titleColor }"
            v-if="item.type === 0">{{ item.name }}</view> -->
          <view class="account-body-item" @click="helpMenuNavigator(item)">
            <view class="account-body-item-left">
              <theme-image class="account-body-item-left-iamge" :src="item.icon" mode="aspectFit"></theme-image>
              <text class="account-body-item-left-text" :style="{ color: themeStore.theme.account.text.label }">{{
                item.name }}</text>
              <text class="account-body-item-left-version"
                :style="{ color: themeStore.theme.account.text.rightTextColor }" v-if="item.type === 3">V{{
                  appStore.systemInfo.appVersion }}</text>
            </view>
            <view class="account-body-item-right">
              <text class="account-body-item-right-text"
                :style="{ color: themeStore.theme.account.text.rightTextColor }" v-if="
                  item.type === 2 && item.name == t('account.config.feedback')
                ">
                {{ $t("account.feedBack.upto") }}
                {{ appStore.appConfig.feedbackAward }}
                {{ $t("account.feedBack.bonus") }}
              </text>
              <text class="account-body-item-right-text-phone"
                :style="{ color: themeStore.theme.account.text.rightTextColor }" v-if="
                  item.type === 2 &&
                  item.name == t('account.config.phoneBinding')
                ">
                {{
                  userStore.userInfo.mobile != null &&
                    userStore.userInfo.mobile != ""
                    ? encipherAccountPhone(userStore.userInfo.mobile)
                    : ""
                }}
              </text>
              <theme-image class="account-body-item-right-iamge" v-if="
                item.type != 3 &&
                !(
                  item.typeName === 'phoneBinding' &&
                  userStore.userInfo.mobile
                )
              " src="@/static/arrow-rt.png"></theme-image>
            </view>
          </view>
        </template>
        <view class="flex-acenter flex-scenter mt-8">
          <view class="switch-account flex flex-center" :style="{
            background: themeStore.theme.account.button.background,
            'border-color': themeStore.theme.account.button.borderColor
          }" @click.stop="switchAccount">
            {{ $t("account.button.switchAccount") }}
          </view>
        </view>
        <!-- <button @click="handleService">Self-Service</button> -->
        <view class="w-full" style="height: 240rpx;"></view>
      </view>
    </view>
    <custom-tabbar :selected="4" />
    <BindPhonePop ref="bindPhone" />
  </common-layout>
</template>

<script setup>
import { Menu, AccountHelp } from "./constants/index.js";
import { reactive, onMounted, ref } from "vue";
import { requestAppEventUpload } from "@/api/app.js";
import { useAppStore } from "@/store/useAppStore";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { useI18n } from "vue-i18n";
import { encipherAccountPhone } from "@/module/utils/encipherPhone.js";
import { useThemeStore } from "@/store/useThemeStore";
import { useUserStore } from "@/store/useUserStore.js";
import { formatFloat } from "@/module/formatter/data-formatter.js";
import Toast from "@/module/toast/toast.js";
import { openUrl } from "@/module/utils/openUrl.js";
import TipsPopup from '@/components/popup/TipsPopup.vue'
import VipSign from "@/components/vipSign/VipSign.vue";
import VipItem from "./components/VipItem/VipItem.vue";
import BindPhonePop from "@/components/popup/BindPhonePop.vue";

const { t } = useI18n();
const themeStore = useThemeStore();
const appStore = useAppStore();
const userStore = useUserStore();
const bindPhone = ref(null);

const handleService = () => {
  uni.navigateTo({
    url: '/pages/account/CustomService'
  })
}
const handleDepositClick = () => {
  uni.navigateTo({
    url: '/pages/wallet/Deposit'
  })
}

const handleWithdrawClick = () => {
  if(!userStore.userInfo?.mobile){
    bindPhone.value?.open()
    return
  }
  uni.navigateTo({
    url: '/pages/wallet/Withdraw'
  })
}
const handleEditProfile = () => {
  uni.navigateTo({
    url: '/pages/account/Profile/Profile'
  })
}
/**
 * 刷新个人中心页面
 */
const refresh = () => {
  loadData();
};
/**
 * 个人中心顶部路由跳转
 * @param router
 */
const menuNavigator = (router) => {
  uni.navigateTo({
    url: router,
  });
};
/**
 * 个人中心单项跳转
 */
const helpMenuNavigator = (item) => {
  if (item.routerType === 'FAQ') {
    // openUrl(appStore.FAQ)
    uni.navigateTo({
      url: '/pages/account/CustomService'
    })
    return
  }
  if (item.name == "Phone Binding") {
    if (!userStore.userInfo.mobile) {
      bindPhone.value.open();
      return;
    }
  }
  if (item.name == "Withdraw Account") {
    uni.navigateTo({
      url: item.router,
      success: function (res) {
        res.eventChannel.emit("isAccountRouter", 0);
      },
    });
    return;
  }

  if (item.router != "" && item.router != undefined) {
    uni.navigateTo({
      url: item.router,
    });
  }
};
/**
 * 切换用户
 */
const switchAccount = () => {
  // uni.navigateTo({
  //   url: "/pages/Login/LoginV2",
  // });
  uni.navigateTo({
    url: "/pages/Login/Login",
  });
};

const reportBurialPoint = async (logType) => {
  await requestAppEventUpload({
    logParam: "",
    logType: logType,
  });
};



const loadData = async () => {
  userStore.getUserTotalInfo()
};
onLoad(() => {
  uni.hideTabBar()
})
onShow(() => {
  loadData();
});

onMounted(() => {
  reportBurialPoint(1007);
  reportBurialPoint(1003);
});
</script>

<style lang="scss" scoped>
.content {
  width: 100vw;
  //#ifdef H5
  height: calc(100vh - 50px);
  //#endif
  //#ifdef APP-PLUS
  height: 100%;

  //#endif
  // background: #410505;
  .nav-bar {
    width: 750rpx;
    height: 84rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Roboto, Roboto;
    font-weight: 500;
    font-size: 35rpx;
    color: #FFFFFF;
  }

  .account-header {
    width: 100%;
    box-sizing: border-box;
    padding: 38rpx 0rpx;

    .account-header-user-info {
      width: 100%;
      box-sizing: border-box;
      padding: 0rpx 30rpx;
      display: flex;
      align-items: center;

      .avatar {
        width: 92rpx;
        height: 92rpx;

        .user-image-size {
          width: 92rpx;
          height: 92rpx;
          border: 1px solid #FEBF05;
          border-radius: 50%;
        }

        .icon-user-edit {
          width: 30rpx;
          height: 30rpx;
          right: -5rpx;
          bottom: -5rpx;
        }
      }

      .user-info-content {
        margin-left: 24rpx;
        box-sizing: border-box;

        .user-phone-vip {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-weight: 500;

          .user-phone {
            font-size: 28rpx;
          }

          .icon-vip-level {
            width: 95rpx;
            height: 28rpx;
            margin-left: 12rpx;
          }

          .user-vip {
            height: 32rpx;
            min-width: 80rpx;
            padding: 2rpx 16rpx;
            font-size: 24rpx;
            border-radius: 16rpx;
            background-color: #E79928;
            color: #ffffff;
            text-align: center;
            margin-left: 20rpx;
            // line-height: 32rpx;
          }
        }

        .user-money {
          border-radius: 23rpx;
          padding: 2rpx 8rpx;
          color: #FEBF05;
          font-size: 27rpx;
          font-weight: bold;
          min-width: 167rpx;
          height: 38rpx;
          background: #3F0202;
          box-shadow: 0rpx 2rpx 0rpx 0rpx #681820;
          padding: 0 16rpx;

          .user-money-icon {
            width: 36rpx;
            height: 36rpx;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }

          .user-money-refresh-icon {
            width: 24rpx;
            height: 24rpx;
            margin-right: 4rpx;
          }
        }
      }

      .user-right-icon {
        width: 60rpx;
        height: 60rpx;
      }

      .user-right-text {
        font-size: 20rpx;
        margin-top: 8rpx;
        color: #ffffff;
      }
    }

    .account-header-menu {
      width: 100%;
      margin-top: 56rpx;
      height: 82rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .account-header-menu-item {
        width: 25%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;

        .account-header-menu-item-image {
          width: 60rpx;
          height: 60rpx;
        }

        .account-header-menu-item-name {
          margin-top: 12rpx;
          font-size: 20rpx;
        }
      }
    }
  }

  .vip-box {
    padding: 0 30rpx;
  }

  .account-body {
    width: 100%;
    // height: calc(100% - 307rpx);
    background: linear-gradient(157deg, #410B0E 0%, #5D0207 100%);
    // margin-top: 9rpx;
    box-sizing: border-box;
    padding: 20rpx 30rpx;
    padding-bottom: 100rpx;
    border-radius: 16rpx 16rpx 0;

    .account-body-title {
      width: 100%;
      height: 82rpx;
      line-height: 82rpx;
      // color: #fff;
      font-size: 28rpx;
    }

    .account-body-item {
      width: 100%;
      height: 104rpx;
      // background: #7d1616;
      // border-radius: 19rpx;
      // margin-bottom: 9rpx;
      box-sizing: border-box;
      padding-left: 15rpx;
      // padding-right: 28rpx;
      display: flex;
      justify-content: space-between;
      position: relative;

      &::after {
        position: absolute;
        left: 0;
        bottom: 0;
        content: "";
        width: 692rpx;
        height: 1rpx;
        background: #6A151B;
        opacity: 0.6;
      }

      .account-body-item-left {
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .account-body-item-left-iamge {
          width: 58rpx;
          height: 58rpx;
          flex-shrink: 0;
        }

        .account-body-item-left-text {
          margin-left: 23rpx;
          font-weight: 400;
          font-size: 27rpx;
          color: #E9CD9C;
          white-space: nowrap;
        }

        .account-body-item-left-version {
          margin-left: 18rpx;
          font-size: 24rpx;
          // color: #ffde01;
        }
      }

      .account-body-item-right {
        width: 50%;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .account-body-item-right-iamge {
          width: 27rpx;
          height: 27rpx;
          flex-shrink: 0;
        }

        .account-body-item-right-text {
          margin-right: 13rpx;
          font-size: 19rpx;
          // color: #ffde01;
        }

        .account-body-item-right-text-phone {
          margin-right: 13rpx;
          font-size: 22rpx;
          // color: #ffde01;
        }
      }
    }

    .switch-account {
      width: 692rpx;
      height: 85rpx;
      background: linear-gradient(180deg, #870C19 0%, #5F020B 100%);
      box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.25);
      border-radius: 19rpx;
      font-weight: bold;
      font-size: 27rpx;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}
</style>
