<template>
  <view class="dashboard-wrapper">
    <!-- 1. 顶部用户信息 -->
    <view class="user-profile">
	  <img :src="userimg" width="32" />
      <view class="user-info">
        <view class="username">{{ user.account }}</view>
      </view>
    </view>

    <!-- 2. 总资产卡片 -->
    <view class="total-asset-card">
      <view class="card-header">
		<view class="heroGlow"></view>
        <span>{{ $t("base.d6") }}</span>
        <!-- 点击眼睛切换 isVisible 状态 -->
        <!-- <i class="el-icon-view eye-icon" :class="{ 'is-hidden': !isVisible }"></i> -->
		<view @click="toggleVisibility">
			<image src="@/assets/img/view.png" class="eye-icon" v-if="isVisible==false"></image>
			<image src="@/assets/img/hide.png" class="eye-icon" v-else></image>
		</view>
      </view>
      <view class="total-amount">
        <!-- 动态显示金额或星号 -->
        <span class="number">{{ formatMoney(account.total_assets_usd,false) }}</span>
        <span class="currency">{{coin_name}}</span>
      </view>
	  <view style="color: #ffffff;">≈ {{ formatMoney(account.total_assets_btc,true) }} BTC</view>
    </view>

    <!-- 3. 四宫格：子账户资产 -->
    <view class="sub-assets-grid">
      <!-- 资金账户 -->
      <view class="sub-card">
        <view class="sub-title text-yellow"><span style="font-size: 18px;height: 18px;line-height: 18px;margin-right: 18rpx;">$</span> {{ $t("homeNewText.hh20") }}</view>
        <view class="sub-amount">{{ formatMoney(account.funds_account_usd,false) }}</view>
        <view class="sub-currency">{{coin_name}}</view>
      </view>
      <!-- 现货账户 -->
      <view class="sub-card">
        <view class="sub-title text-green"><img src="@/assets/img/home/home28.png" style="width: 18px;margin-right: 18rpx;" /> {{ $t("homeNewText.hh21") }}</view>
        <view class="sub-amount">{{ formatMoney(account.total_assets_btc,true) }}</view>
        <view class="sub-currency">BTC</view>
      </view>
      <!-- 合约资产 -->
      <view class="sub-card">
        <view class="sub-title text-blue"><i class="el-icon-document" style="font-size: 18px;margin-right: 18rpx;"></i> {{ $t("homeNewText.hh22") }}</view>
        <view class="sub-amount">{{ formatMoney(account.contract_account_usd) }}</view>
        <view class="sub-currency">{{coin_name}}</view>
      </view>
      <!-- 信用额度 -->
      <view class="sub-card">
        <view class="sub-title text-lightblue"><i class="el-icon-bank-card" style="font-size: 18px;margin-right: 18rpx;"></i> {{ $t("homeNewText.hh4") }}</view>
        <view class="sub-amount">{{ formatMoney(assets.credit) }}</view>
        <view class="sub-currency">{{coin_name}}</view>
      </view>
    </view>

    <!-- 4. 快捷操作区 (使用 v-for 循环渲染) -->
    <view class="action-panel">
      <view class="action-grid">
		  
        <view class="action-item">
			<v-link class="tolink" tag="view" :to="ProfileDetail.primary_status!=1?'/pages/auth/index':'/pages/assets/recharge'">
				<view class="icon-box">
				  <img v-if="theme == 'light'" src="../../assets/img/home/home34.png" width="22" />
				  <img v-else src="../../assets/img/home/home35.png" width="22" />
				</view>
				<view class="action-name">{{ $t("homeNewText.hh0") }}</view>
			</v-link>
        </view>
		<view class="action-item">
			<v-link class="tolink" tag="view" :to="ProfileDetail.status==1?'/pages/auth/index':(ProfileDetail.status==2?'/pages/assets/draw':'/pages/auth/senior')">
				<view class="icon-box">
				  <img v-if="theme == 'light'"  src="../../assets/img/home/home29.png" width="22" />
				  <img v-else src="../../assets/img/home/home36.png" width="22" />
				</view>
				<view class="action-name">{{ $t("homeNewText.hh1") }}</view>
			</v-link>
		</view>
		<view class="action-item">
			<v-link class="tolink" tag="view" to="/pages/transfer/index">
				<view class="icon-box">
				  <img v-if="theme == 'light'"  src="../../assets/img/home/home30.png" width="22" />
				  <img v-else src="../../assets/img/home/home37.png" width="22" />
				</view>
				<view class="action-name">{{ $t("base.d8") }}</view>
			</v-link>
		</view>
		<view class="action-item">
			<v-link class="tolink" tag="view" to="/pages/mineview/billview">
				<view class="icon-box">
				  <img v-if="theme == 'light'"  src="../../assets/img/home/home31.png" width="22" />
				  <img v-else src="../../assets/img/home/home38.png" width="22" />
				</view>
				<view class="action-name">{{ $t("homeNewText.hh23") }}</view>
			</v-link>
		</view>
		<view class="action-item">
			<v-link class="tolink" tag="view" to="/pages/exchange/exchangeHis">
				<view class="icon-box">
				  <img v-if="theme == 'light'"  src="../../assets/img/home/home32.png" width="22" />
				  <img v-else src="../../assets/img/home/home39.png" width="22" />
				</view>
				<view class="action-name">{{ $t("homeNewText.hh24") }}</view>
			</v-link>
		</view>
		<view class="action-item">
			<v-link class="tolink" tag="view" to="/pages/mineview/flashswap">
				<view class="icon-box">
				  <img v-if="theme == 'light'"  src="../../assets/img/home/home33.png" width="30" />
				  <img v-else src="../../assets/img/home/home40.png" width="30" />
				</view>
				<view class="action-name">{{ $t("homeNewText.hh25") }}</view>
			</v-link>
		</view>
		
      </view>
    </view>

    <!-- 5. 底部信息卡片 -->
    <view class="footer-card">
      <view class="footer-title">Want to be part of it? Let's talk.</view>
      <a href="mailto:support@bondsmaxinst.com" class="footer-email">support@bondsmaxinst.com</a>
      <view class="footer-desc">
        <p>© 2024 bonds.com, LLC. All rights reserved</p>
        <p>Securities offered through bonds.com, LLC. Member: FINRA/SIPC.</p>
      </view>
    </view>
  </view>
</template>

<script>
import {mapState} from "vuex";
import Wallet from "@/api/wallet";
import math from "@/utils/class/math.js";
import Profile from "@/api/profile";
import Contract from "@/api/contract.js";

export default {
  name: 'AssetDashboard',
  data() {
    return {
      // 核心控制变量：是否显示金额明文
      isVisible: false,
      coin_name:"USDT",
      // 资产数据源 (保持原始数据结构不变，只在渲染时进行格式化)
      assets: {
        total: '1,000,794.92',
        funding: '1,000,001.00',
        spot: '332.06',
        contract: '356.22',
        credit: '0.00'
      },
	  user: {},
	  avatarList: [
	    require('@/assets/img/home/home24.png'),
	    require('@/assets/img/home/home25.png'),
	    require('@/assets/img/home/home26.png'),
	    require('@/assets/img/home/home27.png')
	  ],
	  userimg:'',
	  account: {},
	  ProfileDetail: {},
	  user_auth_level: 0,
    };
  },
  computed: {
  	...mapState({
  		theme: "theme",
  	}),
  },
  props: {
  	isShow: {
  		default: true,
  		type: Boolean,
  		required: false,
  	}
  },
  watch: {
  	isShow(n, o) {
  		if (n) {
  			this.personalAssets();
  			this.getAuthInfo();
  		}
  	}
  },
  created() {
	this.user = JSON.parse(localStorage.getItem('user'))
	if(this.user){
		const randomIndex = Math.floor(Math.random() * this.avatarList.length); //Math.random() 生成一个 0 到 1 之间的随机数
		this.userimg = this.avatarList[randomIndex];
	}
  	this.personalAssets();
  	this.getAuthInfo();
  },
  methods: {
	omitTo: math.omitTo,
    // 切换眼睛的可见状态
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    },
    
    // 金额格式化函数（核心逻辑在此）
    formatMoney(value,type) {
	  if (this.isVisible) return "******";
	  let num = this.omitTo(value, type ? 8 : 2);
	  if (isNaN(num) || num === null || num === '') return '0.00';
	  
	  let parts = num.toString().split('.');
	  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
	  return parts.join('.');
    },
	personalAssets() {
		Wallet.personalAssets().then((res) => {
			this.account = res.data;
		});
	},
	getAuthInfo() {
		Profile.getAuthInfo().then(res => {
			this.ProfileDetail = res.data;
			this.user_auth_level = res.data.primary_status
			// console.log(this.ProfileDetail, 11111);
		})
	},
  }
};
</script>

<style scoped>
.dashboard-wrapper {
  width: 100%;
  box-sizing: border-box; 
  padding: 32rpx;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--light);
  background: var(--col10); /* 确保背景纯白 */
}

/* ================= 1. 用户信息 ================= */
.user-profile {
  display: flex;
  align-items: center;
  gap: 24rpx;
  margin-bottom: 48rpx;
}
.user-info .username {
  width: 520rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: var(--text-col);
}
.user-info .uid {
  font-size: 26rpx;
  color: #6b7280;
  margin-top: 8rpx;
}

/* ================= 2. 总资产卡片 ================= */
.total-asset-card {
  background: var(--col6);
  border-radius: 24rpx;
  padding: 40rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
}
.total-asset-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #6b7280;
  font-size: 28rpx;
  margin-bottom: 24rpx;
  position: relative;
}

.heroGlow{
	width: 140px;
	height: 140px;
	right: -50px;
	top: -50px;
	position: absolute;
	background: radial-gradient(circle, rgba(251, 191, 36, .22) 0%, rgba(251, 191, 36, 0) 72%);
}

/* 眼睛图标样式和交互 (移动端使用 active 代替 hover) */
.eye-icon {
  top: -5px;
  z-index: 2;
  right: -5px;
  width: 20px;
  height: 20px;
  padding: 5px;
  display: flex;
  font-size: 24rpx;
  position: absolute;
  border-radius: 50%;
  align-items: center;
  transition: all 0.3s;
  background: #ffffff1f;
  justify-content: center;
}
.eye-icon:active { 
  color: #ffffff; 
  opacity: 0.8;
}
/* .eye-icon.is-hidden { opacity: 0.5; } */

.total-amount {
  display: flex;
  align-items: baseline;
  gap: 16rpx;
}
.total-amount .number {
  font-size: 56rpx;
  font-weight: 700;
  /* color: #111827; */
  color: #ffffff;
}
.total-amount .currency {
  font-size: 28rpx;
  /* color: #6b7280; */
  color: #ffffff;
  font-weight: normal;
}

/* ================= 3. 子资产四宫格 ================= */
.sub-assets-grid {
  padding: 32rpx;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24rpx;
  margin-bottom: 24rpx;
  background-color: var(--col11);
  border-radius: 24rpx;
  border: 1px solid rgba(148, 163, 184, .14);
  box-shadow: 0 .373333rem .853333rem rgba(15, 23, 42, .06);
}
.sub-card {
  background-color: var(--col12);
  border-radius: 24rpx;
  padding: 32rpx;
}
.sub-title {
  height: 80rpx;
  font-size: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  /* gap: 12rpx; */
}
.sub-amount {
  font-size: 36rpx;
  font-weight: bold;
  color: #111827;
  margin-bottom: 8rpx;
  min-height: 50rpx;
}
.sub-currency {
  font-size: 24rpx;
  color: #9ca3af;
}

/* 颜色变量保持不变 */
.text-yellow { color: #f59e0b; }
.text-green { color: #10b981; }
.text-blue { color: #3b82f6; }
.text-lightblue { color: #0ea5e9; }

/* ================= 4. 操作区面板 ================= */
.action-panel {
  /* background-color: #f3f4f6; */
  /* background-color: var(--col7); */
  background-color: var(--col11);
  border: 1px solid rgba(148, 163, 184, .14);
  box-shadow: 0 .373333rem .853333rem rgba(15, 23, 42, .06);
  border-radius: 24rpx;
  padding: 48rpx 32rpx;
  margin-bottom: 48rpx;
}
.action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40rpx 20rpx;
}
.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  /* gap: 16rpx; */
}
.tolink{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.icon-box {
  width: 88rpx;
  height: 88rpx;
  background-color: var(--col13);
  border-radius: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40rpx;
  color: #374151;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
  transition: transform 0.2s;
}
/* 移动端点击反馈 */
.action-item:active .icon-box {
  transform: scale(0.95);
  /* background-color: #fafafa; */
}
.navigator-hover{
	background-color: transparent;
}
.action-name {
  font-size: 24rpx;
  color: var(--col9);
  text-align: center;
  margin-top: 15rpx;
}

/* ================= 5. 底部卡片 ================= */
.footer-card {
  background-color: #f6efe3;
  border-radius: 24rpx;
  padding: 40rpx;
}
.footer-title {
  font-weight: bold;
  font-size: 32rpx;
  color: #1f2937;
  margin-bottom: 16rpx;
}
.footer-email {
  color: #d97706;
  font-weight: bold;
  font-size: 28rpx;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 32rpx;
}
.footer-desc {
  font-size: 24rpx;
  color: #6b7280;
  line-height: 1.6; /* 行高比例无需转换 */
}
</style>