<template>
  <div class="panel-container">
    <div class="tabs-header">
      <div class="tabs-left">
        <div
          class="tab-item"
          :class="{ active: activeTab === 'assets' }"
          @click="activeTab = 'assets'">
          币种资产
        </div>
        <div
          class="tab-item"
          :class="{ active: activeTab === 'positions' }"
          @click="activeTab = 'positions'">
          <!-- 持有仓位({{ positionsList.length }}) -->
          持有仓位
        </div>
        <div
          class="tab-item"
          :class="{ active: activeTab === 'orders' }"
          @click="activeTab = 'orders'">
          <!-- 当前委托({{ ordersList.length }}) -->
          当前委托
        </div>
      </div>
      <div class="tabs-right" @click="router.push('/historyIndex')">
        <span class="history-icon">
          <svg
            width="18"
            height="18"
            viewBox="0 0 18 18"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M17.025 10.125L15.5254 8.625L14.025 10.125M15.75 9C15.75 12.7279 12.7279 15.75 9 15.75C5.27208 15.75 2.25 12.7279 2.25 9C2.25 5.27208 5.27208 2.25 9 2.25C11.4764 2.25 13.6414 3.5836 14.8159 5.57182M9 5.25V9L11.25 10.5"
              stroke="#A8A8A8"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round" />
          </svg>
        </span>
        全部
      </div>
    </div>

    <div class="panel-content">
      <div v-if="activeTab === 'assets'" class="list-container">
        <!-- <div v-for="(item, index) in assetsList" :key="index" class="card asset-card">
          <div class="card-header">
            <div class="coin-info">
              <div class="coin-icon icon-btc">₿</div>
              <div class="coin-name">
                <span class="symbol">{{ item.symbol }}</span>
                <span class="name-cn">{{ item.nameCn }}</span>
              </div>
            </div>
            <div class="asset-total">
              <div class="main-val">{{ item.totalValue }}</div>
              <div class="sub-val">≈ ¥ {{ item.cnyValue }}</div>
            </div>
          </div>
          <div class="divider"></div>
          <div class="card-row">
            <span class="label">可用</span>
            <span class="value">{{ item.available }}</span>
          </div>
          <div class="card-row">
            <span class="label">冻结</span>
            <span class="value red-text">{{ item.frozen }}</span>
          </div>
        </div> -->
      </div>

      <div v-else-if="activeTab === 'positions'" class="list-container">
        <!-- <div v-for="(item, index) in positionsList" :key="index" class="card position-card">
          <div class="card-header">
            <div class="coin-info">
              <div class="coin-icon icon-btc">₿</div>
              <div class="coin-name-block">
                <span class="symbol">{{ item.pair }}</span>
                <div class="tags-row">
                  <span class="tag" :class="item.type === 'buy' ? 'tag-green' : 'tag-red'">
                    {{ item.type === 'buy' ? '买入' : '卖出' }}
                  </span>
                  <span class="tag tag-grey">{{ item.leverage }}X</span>
                  <span class="tag tag-grey">市价</span>
                </div>
              </div>
            </div>
            <div class="header-right-time">
              {{ item.time }} <br> 下单时间
            </div>
          </div>
          <div class="divider"></div>
          <div class="data-grid">
            <div class="data-col">
              <div class="label">倍数</div>
              <div class="val">{{ item.leverage }}X</div>
            </div>
            <div class="data-col center">
              <div class="label">数量</div>
              <div class="val">{{ item.amount }} {{ item.unit }}</div>
            </div>
            <div class="data-col right">
              <div class="label">价格</div>
              <div class="val">{{ item.price }} {{ item.unit }}</div>
            </div>
          </div>
          <button class="btn-block-red">平仓</button>
        </div> -->
      </div>

      <div v-else-if="activeTab === 'orders'" class="list-container">
        <!-- <div v-for="(item, index) in ordersList" :key="index" class="card order-card">
          <div class="card-header">
            <div class="coin-info">
              <div class="coin-icon icon-btc">₿</div>
              <div class="coin-name-block">
                <span class="symbol">{{ item.pair }}</span>
                <div class="tags-row">
                  <span class="tag" :class="item.type === 'buy' ? 'tag-green' : 'tag-red'">
                    {{ item.type === 'buy' ? '买入' : '卖出' }}
                  </span>
                  <span class="tag tag-grey">{{ item.leverage }}X</span>
                  <span class="tag tag-grey">市价</span>
                </div>
              </div>
            </div>
            <button class="btn-small-red">撤单</button>
          </div>
          <div class="divider"></div>
          <div class="data-grid">
            <div class="data-col">
              <div class="label">数量</div>
              <div class="val">{{ item.amount }} {{ item.unit }}</div>
            </div>
            <div class="data-col center">
              <div class="label">下单时间</div>
              <div class="val">{{ item.time }}</div>
            </div>
            <div class="data-col right">
              <div class="label">价格</div>
              <div class="val">{{ item.price }} {{ item.unit }}</div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from "vue";
  import { useRouter } from "vue-router"; // 【新增】 引入路由

  const router = useRouter(); // 【新增】 实例化路由

  // 当前选中的 Tab：'assets', 'positions', 'orders'
  const activeTab = ref("orders");

  // 模拟数据 - 委托
  const ordersList = ref([
    {
      pair: "BTC/USDT",
      type: "buy",
      leverage: 20,
      amount: "0.215",
      unit: "USDT",
      price: "0.215",
      time: "2025-11-04, 16:30",
    },
    {
      pair: "BTC/USDT",
      type: "sell",
      leverage: 20,
      amount: "0.215",
      unit: "USDT",
      price: "0.215",
      time: "2025-11-04, 16:30",
    },
  ]);

  // 模拟数据 - 仓位
  const positionsList = ref([
    {
      pair: "BTC/USDT",
      type: "buy",
      leverage: 200,
      amount: "0.215",
      unit: "USDT",
      price: "0.215",
      time: "2025-11-04, 16:30",
    },
    {
      pair: "ETH/USDT",
      type: "sell",
      leverage: 50,
      amount: "1.5",
      unit: "USDT",
      price: "1800.00",
      time: "2025-11-04, 14:20",
    },
  ]);

  // 模拟数据 - 资产
  const assetsList = ref([
    {
      symbol: "BTC",
      nameCn: "比特币",
      totalValue: "1,125,158.00",
      cnyValue: "2150508",
      available: "18802.0850",
      frozen: "151.2050",
    },
    {
      symbol: "BTC", // 重复模拟图3效果
      nameCn: "比特币",
      totalValue: "1,125,158.00",
      cnyValue: "2150508",
      available: "18802.0850",
      frozen: "151.2050",
    },
  ]);
</script>

<style scoped lang="scss">
  /* 基础变量 */
  $c-bg: #fff;
  $c-white: #ffffff;
  $c-text-main: #333333;
  $c-text-sub: #969799;
  $c-green: #00b86b; /* 买入绿 */
  $c-red: #dc3545; /* 卖出/撤单红 */
  $c-line: #f5f5f5;
  $c-orange: #f7931a; /* BTC颜色 */

  .panel-container {
    width: 100%;
    background-color: $c-bg;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI,
      Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei",
      sans-serif;
    padding-bottom: 20px;
  }

  /* Tab 头部样式 */
  .tabs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: $c-white;
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .tabs-left {
    display: flex;
    gap: 20px;
  }

  .tab-item {
    font-size: 15px;
    color: $c-text-sub;
    font-weight: 400;
    position: relative;
    cursor: pointer;
    padding-bottom: 4px;
    transition: all 0.2s;

    &.active {
      color: $c-text-main;
      font-weight: 600;
      font-size: 16px;

      &::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 3px;
        background-color: #000;
        border-radius: 2px;
      }
    }
  }

  .tabs-right {
    font-size: 13px;
    color: $c-text-sub;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-top: 2px;
  }

  /* 列表容器 */
  .list-container {
    padding: 10px 16px;
  }

  /* 卡片通用样式 */
  .card {
    background: $c-white;
    border-radius: 8px;
    padding: 12px 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    border: 1px solid #ebedf0;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
  }

  .coin-info {
    display: flex;
    align-items: flex-start;
  }

  .coin-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: $c-orange;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    margin-right: 10px;
  }

  .coin-name-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .symbol {
    font-size: 16px;
    font-weight: 600;
    color: $c-text-main;
  }

  /* 标签样式 */
  .tags-row {
    display: flex;
    gap: 4px;
  }

  .tag {
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    line-height: 1.4;
  }

  .tag-green {
    background: $c-green;
  }
  .tag-red {
    background: $c-red;
  }
  .tag-grey {
    background: #c8c9cc;
    color: #fff;
  }

  /* 分割线 */
  .divider {
    height: 1px;
    background: $c-line;
    margin: 0 0 12px 0;
  }

  /* 数据网格 (三列) */
  .data-grid {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .data-col {
    text-align: left;

    &.center {
      text-align: center;
      width: 50%;
    }
    &.right {
      text-align: right;
    }

    .label {
      font-size: 12px;
      color: $c-text-sub;
      margin-bottom: 4px;
    }
    .val {
      font-size: 14px;
      color: $c-text-main;
      font-weight: 500;
    }
  }

  /* 按钮样式 */
  .btn-small-red {
    background: $c-red;
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 13px;
  }

  .btn-block-red {
    width: 100%;
    background: $c-red;
    color: #fff;
    border: none;
    padding: 10px 0;
    border-radius: 20px; /* 圆角按钮 */
    font-size: 15px;
    margin-top: 8px;
    font-weight: 500;
  }

  /* 特殊样式：Position 页面的时间 */
  .header-right-time {
    text-align: right;
    font-size: 12px;
    color: $c-text-sub;
    line-height: 1.4;
  }

  /* 特殊样式：Asset 页面 */
  .asset-card {
    .card-header {
      align-items: center;
    }
    .coin-name {
      display: flex;
      flex-direction: column;
      .name-cn {
        font-size: 12px;
        color: $c-text-sub;
      }
    }
    .asset-total {
      text-align: right;
      .main-val {
        font-size: 18px;
        font-weight: bold;
        color: $c-text-main;
      }
      .sub-val {
        font-size: 12px;
        color: $c-text-sub;
        margin-top: 2px;
      }
    }
    .card-row {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      margin-bottom: 6px;
      &:last-child {
        margin-bottom: 0;
      }

      .label {
        color: $c-text-sub;
      }
      .value {
        color: $c-text-sub;
        font-family: sans-serif;
      }
      .red-text {
        color: $c-red;
        font-weight: 500;
      }
    }
  }
</style>
