<template>
  <div class="trade-container">
    <!-- 1. 顶部导航栏 -->
    <header class="header">
      <div class="header-row top-row">
        <div class="menu-left">
          <div style="line-height: 0">
            <svg
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink">
              <rect width="16" height="16" fill="url(#pattern0_15_459)" />
              <defs>
                <pattern
                  id="pattern0_15_459"
                  patternContentUnits="objectBoundingBox"
                  width="1"
                  height="1">
                  <use xlink:href="#image0_15_459" transform="scale(0.005)" />
                </pattern>
                <image
                  id="image0_15_459"
                  width="200"
                  height="200"
                  preserveAspectRatio="none"
                  xlink:href="data:image/png;base64,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" />
              </defs>
            </svg>
          </div>

          <div class="pf600 fs18 fc121212">BTCUSDT</div>
        </div>
        <div class="menu-right fc333333">
          <svg
            @click="router.push({ name: 'calculator' })"
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink">
            <rect width="20" height="20" fill="url(#pattern0_70_4059)" />
            <defs>
              <pattern
                id="pattern0_70_4059"
                patternContentUnits="objectBoundingBox"
                width="1"
                height="1">
                <use xlink:href="#image0_70_4059" transform="scale(0.005)" />
              </pattern>
              <image
                id="image0_70_4059"
                width="200"
                height="200"
                preserveAspectRatio="none"
                xlink:href="data:image/png;base64,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" />
            </defs>
          </svg>
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink">
            <rect width="16" height="16" fill="url(#pattern0_15_462)" />
            <defs>
              <pattern
                id="pattern0_15_462"
                patternContentUnits="objectBoundingBox"
                width="1"
                height="1">
                <use xlink:href="#image0_15_462" transform="scale(0.005)" />
              </pattern>
              <image
                id="image0_15_462"
                width="200"
                height="200"
                preserveAspectRatio="none"
                xlink:href="data:image/png;base64, " />
            </defs>
          </svg>
          <svg
            @click="showFunctions = true"
            width="18"
            height="4"
            viewBox="0 0 18 4"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M8 2C8 2.55228 8.44772 3 9 3C9.55228 3 10 2.55228 10 2C10 1.44772 9.55228 1 9 1C8.44772 1 8 1.44772 8 2Z"
              stroke="#333333"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round" />
            <path
              d="M1 2C1 2.55228 1.44772 3 2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2Z"
              stroke="#333333"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round" />
            <path
              d="M15 2C15 2.55228 15.4477 3 16 3C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1C15.4477 1 15 1.44772 15 2Z"
              stroke="#333333"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round" />
          </svg>
        </div>
      </div>

      <div class="header-row bottom-row">
        <div class="change-tag" :class="priceChangeClass">
          {{ priceChangePercent }}
        </div>
        <div class="funding-info">
          <span class="funding-label">资金费率/倒计时</span>
          <span class="funding-value">0.003%/1:57:32</span>
        </div>
      </div>
    </header>

    <!-- 2. 主体内容区 -->
    <main class="main-content">
      <!-- === 左栏：订单簿 === -->
      <div class="col-left">
        <div class="order-header">
          <span class="text-left">价格</span>
          <span class="text-right">数量(USDT)</span>
        </div>

        <!-- 卖盘 (Asks) -->
        <div class="order-list text-sell">
          <div
            v-for="(ask, i) in asksData"
            :key="ask.price + '_' + i"
            class="order-item"
            @click="handlePriceClick(ask.price)">
            <span class="price-text">{{ formatPrice(ask.price) }}</span>
            <span class="amount-text">{{ formatAmount(ask.amount) }}</span>
            <!--
              性能优化关键点：
              1. 使用 transform: scaleX() 代替 width
              2. depth 值假定为 0-100 的百分比，除以 100 转换为 0-1 的缩放比例
            -->
            <div
              class="depth-bar bg-sell"
              :style="{ transform: `scaleX(${ask.depth / 100})` }"></div>
          </div>
        </div>

        <!-- 中间当前价格 -->
        <div class="ticker-display" :class="priceChangeClass">
          <span class="current-price">{{ formatPrice(currentPrice) }}</span>
          <span class="fiat-price">≈ ${{ formatFiatPrice(currentPrice) }}</span>
        </div>

        <!-- 买盘 (Bids) -->
        <div class="order-list text-buy">
          <div
            v-for="(bid, i) in bidsData"
            :key="bid.price + '_' + i"
            class="order-item"
            @click="handlePriceClick(bid.price)">
            <span class="price-text">{{ formatPrice(bid.price) }}</span>
            <span class="amount-text">{{ formatAmount(bid.amount) }}</span>
            <!-- 性能优化关键点：使用 transform: scaleX() -->
            <div
              class="depth-bar bg-buy"
              :style="{ transform: `scaleX(${bid.depth / 100})` }"></div>
          </div>
        </div>

        <!-- ... 深度选择器 (保持不变) ... -->
        <div class="depth-selector">
          <div class="depth-btn">
            <span>深度1</span>
            <img src="@/assets/icon/bitcoin/shendul.svg" alt="" />
            <!--            <span class="arrow-down">▼</span>-->
          </div>
          <svg
            class="icon-settings"
            width="18"
            height="18"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="1.5"
            fill="none">
            <rect x="3" y="3" width="18" height="18" rx="2" />
            <line x1="3" y1="9" x2="21" y2="9" />
            <line x1="9" y1="21" x2="9" y2="9" />
          </svg>
        </div>
      </div>

      <!-- === 右栏：交易表单 (保持不变) === -->
      <div class="col-right">
        <!-- ... 表单内容 ... -->
        <div class="form-row">
          <div class="type-select-btn">
            <div class="btn-left-content">
              <svg
                class="icon-help"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2">
                <circle cx="12" cy="12" r="10" />
                <text
                  x="12"
                  y="16"
                  font-size="12"
                  font-weight="bold"
                  text-anchor="middle"
                  fill="currentColor"
                  stroke="none">
                  ?
                </text>
              </svg>
              <span class="btn-text">市价</span>
            </div>
            <div @click="showModal2 = true" style="font-size: 12px; margin-right: 0px">
              <VanIcon
                :style="{ fontWeight: 'bold' }"
                :name="showModal2 ? 'arrow-up' : 'arrow-down'" />
            </div>
          </div>
        </div>
        <div class="input-group">
          <input type="text" placeholder="数量" class="input-field" />
          <span class="unit-label">BTC</span>
        </div>
        <div class="info-row">
          <span class="label">可用</span>
          <div class="balance-wrap">
            <span class="val">0 USDT</span>
            <svg
              width="14"
              height="14"
              viewBox="0 0 14 14"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M11.7891 0C12.6029 0 13.2627 0.659763 13.2627 1.47363V3.15332C13.6974 3.41119 13.9999 3.8757 14 4.4209V8.8418C14 9.38706 13.6974 9.85148 13.2627 10.1094V11.7891C13.2627 12.603 12.603 13.2627 11.7891 13.2627H1.47363C0.659763 13.2627 0 12.6029 0 11.7891V1.47363C2.77545e-05 0.663147 0.655779 2.78135e-05 1.47363 0H11.7891ZM1.47363 11.7891H11.7891V10.3154H7.36816C6.55439 10.3153 5.89453 9.6556 5.89453 8.8418V4.4209C5.89461 3.60716 6.55444 2.94741 7.36816 2.94727H11.7891V1.47363H1.47363V11.7891ZM7.36816 8.8418H12.5264V4.4209H7.36816V8.8418ZM9.5791 5.52637C10.1895 5.52645 10.6846 6.02147 10.6846 6.63184C10.6844 7.24209 10.1894 7.73722 9.5791 7.7373C8.96877 7.7373 8.47377 7.24214 8.47363 6.63184C8.47363 6.02142 8.96868 5.52637 9.5791 5.52637Z"
                fill="black" />
              <mask
                id="mask0_13_524"
                style="mask-type: luminance"
                maskUnits="userSpaceOnUse"
                x="0"
                y="0"
                width="14"
                height="14">
                <path
                  d="M11.7891 0C12.6029 0 13.2627 0.659763 13.2627 1.47363V3.15332C13.6974 3.41119 13.9999 3.8757 14 4.4209V8.8418C14 9.38706 13.6974 9.85148 13.2627 10.1094V11.7891C13.2627 12.603 12.603 13.2627 11.7891 13.2627H1.47363C0.659763 13.2627 0 12.6029 0 11.7891V1.47363C2.77545e-05 0.663147 0.655779 2.78135e-05 1.47363 0H11.7891ZM1.47363 11.7891H11.7891V10.3154H7.36816C6.55439 10.3153 5.89453 9.6556 5.89453 8.8418V4.4209C5.89461 3.60716 6.55444 2.94741 7.36816 2.94727H11.7891V1.47363H1.47363V11.7891ZM7.36816 8.8418H12.5264V4.4209H7.36816V8.8418ZM9.5791 5.52637C10.1895 5.52645 10.6846 6.02147 10.6846 6.63184C10.6844 7.24209 10.1894 7.73722 9.5791 7.7373C8.96877 7.7373 8.47377 7.24214 8.47363 6.63184C8.47363 6.02142 8.96868 5.52637 9.5791 5.52637Z"
                  fill="white" />
              </mask>
              <g mask="url(#mask0_13_524)">
                <rect width="14" height="14" fill="#F6465D" />
              </g>
            </svg>
          </div>
        </div>
        <div class="info-row leverage-row">
          <span class="label">倍数</span>
          <div class="leverage-val-group">
            <span class="leverage-val">100X</span>
            <span class="link-more">更多</span>
          </div>
        </div>
        <div class="input-group">
          <input type="text" placeholder="金额" class="input-field" />
          <span class="unit-label">USDT</span>
        </div>
        <div class="action-buttons">
          <button class="btn btn-buy">
            <span>买入</span>
          </button>
          <button class="btn btn-sell">
            <span>卖出</span>
          </button>
        </div>
      </div>
    </main>

    <div>
      <UserAssetsPanel></UserAssetsPanel>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, onUnmounted, computed, defineAsyncComponent } from "vue";
  const UserAssetsPanel = defineAsyncComponent(() =>
    import("@/views/bitcoin/lever/components/UserAssetsPanel.vue")
  );

  import { useRouter } from "vue-router"; // 【新增】 引入路由

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

  // 定义 Props，接收外部数据
  const props = defineProps({
    pairName: {
      type: String,
      default: "BTCUSDT",
    },
    initialPrice: {
      type: Number,
      default: 5678.0,
    },
    // 期望的数据格式: Array<{ price: number, amount: number, depth: number (0-100) }>
    initialAsks: {
      type: Array,
      default: () => [
        { price: 40166.82, amount: 37.8, depth: 15 },
        { price: 39962.74, amount: 37.8, depth: 40 },
        { price: 39928.36, amount: 37.8, depth: 20 },
        { price: 39887.52, amount: 37.8, depth: 50 },
      ],
    },
    initialBids: {
      type: Array,
      default: () => [
        { price: 39788.92, amount: 37.8, depth: 60 },
        { price: 39788.92, amount: 37.8, depth: 25 },
        { price: 39788.92, amount: 37.8, depth: 45 },
        { price: 39788.92, amount: 37.8, depth: 10 },
      ],
    },
  });

  // 使用 ref 管理内部状态，但也允许外部通过 props 初始化
  const currentPrice = ref(props.initialPrice);
  const asksData = ref(props.initialAsks);
  const bidsData = ref(props.initialBids);
  const priceChangePercent = ref("+2.18%");

  // 计算属性：根据涨跌决定颜色 Class
  const priceChangeClass = computed(() => {
    if (priceChangePercent.value.startsWith("+")) return "text-buy";
    if (priceChangePercent.value.startsWith("-")) return "text-sell";
    return "";
  });

  // 格式化函数 (生产环境中建议使用专门的库如 decimal.js 处理高精度)
  const formatPrice = (p) => p.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  const formatAmount = (a) => a.toFixed(2) + "K";
  // 简化的法币估值计算
  const formatFiatPrice = (p) => (p * 1).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");

  const handlePriceClick = (price) => {
    console.log("Price clicked:", price);
    // 在真实应用中，这里会 emit 一个事件通知父组件更新价格输入框
    // emit('update:price', price);
  };

  let intervalId = null;

  onMounted(() => {
    // 模拟数据流 (仅用于演示)
    intervalId = setInterval(() => {
      // 微调价格
      const diff = (Math.random() - 0.5) * 2;
      currentPrice.value = Math.max(0, currentPrice.value + diff);

      // 随机更新涨跌幅显示
      priceChangePercent.value = Math.random() > 0.5 ? "+2.18%" : "-1.25%";

      // 微调深度数据，触发动画
      if (Math.random() > 0.3) {
        // 随机选择一行进行更新
        const askIndex = Math.floor(Math.random() * asksData.value.length);
        asksData.value[askIndex].depth = Math.max(
          5,
          Math.min(100, asksData.value[askIndex].depth + (Math.random() - 0.5) * 30)
        );

        const bidIndex = Math.floor(Math.random() * bidsData.value.length);
        bidsData.value[bidIndex].depth = Math.max(
          5,
          Math.min(100, bidsData.value[bidIndex].depth + (Math.random() - 0.5) * 30)
        );
      }
    }, 1000); // 1秒更新一次，对于 scale 动画来说非常轻松
  });

  // 重要：组件卸载时清除定时器，防止内存泄漏
  onUnmounted(() => {
    if (intervalId) clearInterval(intervalId);
  });
</script>

<style lang="less" scoped>
  /* ========== Reset & Global ========== */
  * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }
  .trade-container {
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    background-color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto,
      Helvetica, Arial, sans-serif;
    color: #1e2329;
    min-height: 100vh;
    user-select: none;
    padding-top: 50px;
    padding-bottom: 60px;
  }
  /* Colors */
  .text-sell {
    color: #f6465d;
  }
  .text-buy {
    color: #0ecb81;
  }
  .bg-sell {
    background-color: rgba(255, 94, 108, 0.12);
  }
  .bg-buy {
    background-color: rgba(14, 203, 129, 0.12);
  }

  /* Fonts */
  .price-text,
  .amount-text,
  .current-price,
  .leverage-val,
  .val,
  .funding-value {
    font-family: "DIN", "Roboto", Helvetica, Arial, sans-serif;
  }

  /* ========== Header ========== */
  .header {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
    gap: 8px;
  }
  .header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .menu-left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 5px;

      img {
        margin: 0px 10px 0 0;
      }
    }

    .menu-right {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      .icon1 {
        width: 20px;
        height: 20px;
      }
      .icon2 {
        width: 16px;
        height: 16px;
      }
      .icon3 {
        width: 18px;
        height: 4px;
      }
    }
  }
  .top-row {
    height: 28px;
  }
  .header-left,
  .header-right {
    display: flex;
    align-items: center;
  }
  .header-left {
    gap: 10px;
  }
  .header-right {
    gap: 14px;
    color: #76808f;
  }
  .menu-icon {
    color: #1e2329;
  }
  .pair-info {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .pair-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #1e2329;
  }
  .dropdown-arrow {
    font-size: 12px;
    color: #76808f;
    transform: scale(0.8);
  }
  .bottom-row {
    height: 25px;
    width: 100%;
  }
  .change-tag {
    font-size: 11px;
    font-weight: 500;
    color: white;
    padding: 2px 6px;
    border-radius: 2px;
    line-height: 1.2;
    background-color: #0ecb81; /* 默认绿 */
    width: 50px;
  }
  .change-tag.text-sell {
    background-color: #f6465d;
  }

  .funding-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .funding-label {
    font-size: 10px;
    color: #9ca3af;
    transform: scale(0.9);
    transform-origin: right;
    line-height: 1;
    margin-bottom: 2px;
  }
  .funding-value {
    font-size: 10px;
    color: #1e2329;
    transform: scale(0.9);
    transform-origin: right;
    line-height: 1;
  }

  /* ========== Main Layout ========== */
  .main-content {
    display: flex;
    padding-top: 14px;
  }
  .col-left {
    width: 42%;
    padding-left: 16px;
    padding-right: 6px;
  }
  .order-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #848e9c;
    margin-bottom: 10px;
  }
  .order-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .order-item {
    position: relative;
    height: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
  }

  /* ===== 性能优化核心 CSS =====
  1. width: 100%: 初始占满容器。
  2. left: 0: 靠左对齐。
  3. transform-origin: left: 设置缩放基点为左侧，实现"从左往右"的动画效果。
  4. transition: transform ...: 只对 transform 属性应用过渡动画。
  5. will-change: transform: 告知浏览器该元素将进行变换，启用 GPU 加速优化。
*/
  .depth-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    transform-origin: left;
    transition: transform 0.3s ease-out;
    z-index: 0;
    will-change: transform;
    pointer-events: none; /* 确保不阻挡点击事件 */
  }

  .price-text {
    font-size: 13px;
    font-weight: 500;
    z-index: 1;
    letter-spacing: -0.5px;
    position: relative;
  }
  .amount-text {
    font-size: 12px;
    color: #848e9c;
    z-index: 1;
    letter-spacing: -0.5px;
    position: relative;
  }

  /* 继承父级颜色 */
  .text-sell .price-text {
    color: inherit;
  }
  .text-buy .price-text {
    color: inherit;
  }

  .ticker-display {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 50px;
  }
  .current-price {
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 4px;
  }
  .fiat-price {
    font-size: 12px;
    color: #848e9c;
    font-weight: 400;
  }

  /* ... 其他样式保持不变 ... */
  .depth-selector {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .depth-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    padding: 4px 10px;
    background: #fcfcfc;
  }
  .depth-btn span {
    font-size: 11px;
    color: #1e2329;
  }
  .depth-btn .arrow-down {
    font-size: 8px;
    color: #848e9c;
  }
  .icon-settings {
    color: #848e9c;
  }
  .col-right {
    width: 58%;
    padding-right: 16px;
    padding-left: 8px;
    display: flex;
    flex-direction: column;
  }
  .form-row {
    margin-bottom: 10px;
  }
  .type-select-btn {
    width: 100%;
    height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f5f5f5;
    border: none;
    border-radius: 4px;
    padding: 0 10px;
    color: #1e2329;
  }
  .btn-left-content {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .icon-help {
    width: 14px;
    height: 14px;
    color: #848e9c;
  }
  .btn-text {
    font-size: 13px;
    font-weight: 500;
  }
  .arrow-down {
    font-size: 10px;
    color: #848e9c;
  }
  .input-group {
    height: 36px;
    background-color: #f5f5f5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 8px;
    position: relative;
  }
  .input-field {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 13px;
    text-align: left;
    color: #1e2329;
    font-weight: 500;
    outline: none;
    width: 100%;
    height: 100%;
  }
  .input-field::placeholder {
    color: #b0b8c3;
  }
  .unit-label {
    font-size: 12px;
    color: #848e9c;
    position: absolute;
    right: 10px;
  }
  .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 11px;
  }
  .label {
    color: #848e9c;
  }
  .balance-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .val {
    color: #1e2329;
    font-weight: 500;
  }
  .icon-wallet {
    color: #f6465d;
  }
  .leverage-row {
    margin-bottom: 12px;
  }
  .leverage-val-group {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .leverage-val {
    font-size: 12px;
    color: #1e2329;
    font-weight: 500;
  }
  .link-more {
    font-size: 11px;
    color: #f6465d;
  }
  .action-buttons {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .btn {
    width: 100%;
    height: 38px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn-buy {
    background-color: #0ecb81;
  }
  .btn-sell {
    background-color: #f6465d;
  }
  .footer-section {
    margin-top: 10px;
    padding: 0 16px;
  }
  .tabs {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
  }
  .tab-item {
    font-size: 13px;
    color: #848e9c;
    position: relative;
    font-weight: 500;
  }
  .tab-item.active {
    color: #1e2329;
    font-weight: 600;
  }
  .active-bar {
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 16px;
    height: 3px;
    background-color: #0ecb81;
    border-radius: 2px;
  }
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
  }
  .empty-text {
    font-size: 12px;
    color: #848e9c;
    margin-top: 10px;
  }
</style>
