<template>
  <vanPopup vanPopup
    v-model:show="show"
    position="bottom"
    round
    :style="{ maxHeight: '80%' }"
    teleport="body"
    class="account-popup"
  >
    <div class="popup-content">
      <div class="drag-handle"></div>

      <div class="main-title">我的</div>

      <div class="section">
        <div class="row main-row">
          <span class="label-main">账户总权益</span>
          <span class="value-main">85020 <span class="unit">USDT</span></span>
        </div>
        <div class="row sub-row">
          <span class="label-sub">Market Value</span>
          <span class="value-sub">85020 <span class="unit">USDT</span></span>
        </div>
        <div class="row sub-row">
          <span class="label-sub">保证金余额</span>
          <span class="value-sub">85020 <span class="unit">USDT</span></span>
        </div>
      </div>

      <div class="divider"></div>

      <div class="section">
        <div class="row main-row">
          <span class="label-main">可用保证金</span>
          <span class="value-main">85020 <span class="unit">USDT</span></span>
        </div>
        <div class="row sub-row">
          <span class="label-sub">下单冻结</span>
          <span class="value-sub">0.20 <span class="unit">USDT</span></span>
        </div>
        <div class="row sub-row">
          <span class="label-sub">维持保证金</span>
          <span class="value-sub">85020 <span class="unit">USDT</span></span>
        </div>
      </div>

      <div class="divider"></div>

      <div class="section single-row-section">
        <div class="row main-row">
          <span class="label-main">盈亏分析</span>
          <span class="link-action" @click="handleCheckAnalysis">
            查看 <vanIcon :style="{ color: '#191616' }" name="arrow" />
          </span>
        </div>
      </div>

      <div class="divider"></div>

      <div class="section">
        <div class="section-title">账户风险参数(希腊值)</div>

        <div class="row sub-row">
          <span class="label-sub">Delta</span>
          <span class="value-sub">0.20 <span class="unit">USDT</span></span>
        </div>
        <div class="row sub-row">
          <span class="label-sub">Gamma</span>
          <span class="value-sub">85020 <span class="unit">USDT</span></span>
        </div>
        <div class="row sub-row">
          <span class="label-sub">Theta</span>
          <span class="value-sub">0.20 <span class="unit">USDT</span></span>
        </div>
        <div class="row sub-row">
          <span class="label-sub">Vega</span>
          <span class="value-sub">85020 <span class="unit">USDT</span></span>
        </div>
      </div>

      <div class="safe-area-bottom"></div>
    </div>
  </vanPopup>
</template>

<script setup>
import { computed } from 'vue';
// 如果没有全局引入 vant，需要在这里 import { Popup, Icon } from 'vant';
import { Popup as vanPopup, Icon as vanIcon } from 'vant';
import { useRouter } from 'vue-router'; // 引入路由钩子


const router = useRouter();

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:visible']);

// 双向绑定处理
const show = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
});

const handleCheckAnalysis = () => {
  console.log('点击了查看盈亏分析');
  router.push('/PnLAnalysis')
};
</script>

<style scoped>
.popup-content {
  padding: 0 16px 20px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  color: #333;
}

/* 顶部拖拽条 */
.drag-handle {
  width: 36px;
  height: 4px;
  background: #E5E6EB;
  border-radius: 2px;
  margin: 10px auto 20px; /* 居中 */
}

/* 大标题 "我的" */
.main-title {
  font-size: 20px;
  font-weight: 600;
  color: #1D2129;
  margin-bottom: 20px;
}

/* 通用行布局 */
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.row:last-child {
  margin-bottom: 0;
}

/* 区块间距 */
.section {
  padding: 16px 0;
}
.single-row-section {
  padding: 16px 0;
}

/* 字体样式分级 */
/* 1. 主标签 (如：账户总权益) */
.label-main {
  font-size: 15px;
  font-weight: 500;
  color: #1D2129;
}

/* 2. 主数值 (黑色加粗) */
.value-main {
  font-size: 15px;
  font-weight: 600;
  color: #1D2129;
}

/* 3. 副标签 (灰色) */
.label-sub {
  font-size: 14px;
  color: #86909C;
}

/* 4. 副数值 (灰色) */
.value-sub {
  font-size: 14px;
  color: #86909C; /* 或者用 #4E5969 */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* 数字字体 */
}

/* 5. 单位小字 */
.unit {
  font-size: 12px;
  font-weight: normal;
  margin-left: 2px;
}

/* 6. 查看链接 (红色) */
.link-action {
  display: flex;
  align-items: center;
  color: #f33333; /* 红色 */
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* 7. 风险参数标题 */
.section-title {
  font-size: 14px;
  color: #1D2129;
  font-weight: 500;
  margin-bottom: 12px;
}

/* 分割线 */
.divider {
  height: 1px;
  background-color: #F2F3F5;
  width: 100%;
}

.safe-area-bottom {
  height: 20px; /* 适配底部安全区 */
}
</style>