<template>
  <div class="hot-coin">
    <div class="coin-title pf600 fs18 fc121212">热门币种</div>
    <div class="coin-head">
      <div class="name">
        <div class="name-text pf400 fs12 fc666666">交易对</div>
        <div class="list-sort">
          <div class="sort-up">
            <img src="../../../assets/icon/index/Triangle.svg" alt="" />
          </div>
          <div class="sort-bottom">
            <img src="../../../assets/icon/index/Triangle 2.svg" alt="" />
          </div>
        </div>
      </div>
      <div class="name price">
        <div class="name-text pf400 fs12 fc666666">最新价</div>
        <div class="list-sort">
          <div class="sort-up">
            <img src="../../../assets/icon/index/Triangle.svg" alt="" />
          </div>
          <div class="sort-bottom">
            <img src="../../../assets/icon/index/Triangle 2.svg" alt="" />
          </div>
        </div>
      </div>
      <div class="name today">
        <div class="name-text pf400 fs12 fc666666">今日涨跌幅</div>
        <div class="list-sort">
          <div class="sort-up">
            <img src="../../../assets/icon/index/Triangle.svg" alt="" />
          </div>
          <div class="sort-bottom">
            <img src="../../../assets/icon/index/Triangle 2.svg" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="coin-body">
      <div class="body-item" v-for="(item, index) in coinList" :key="item.id || index">
        <div
          class="item-left"
          @click="
            router.push({
              path: '/marketDetails',
              query: { id: item.id, type: item.symbol.toLowerCase() },
            })
          ">
          <div class="coin-img">
            <img :src="item.logo" alt="" />
          </div>
          <div class="coin-name">
            <div class="upper-name pf500 fs14 fc2C3131">
              {{ formatSymbol(item.symbol) }}
            </div>
            <div class="letter-name pf400 fs10 fcA9A9A9">{{ item.name }}</div>
          </div>
          <div class="coin-echars"></div>
          <div class="coin-price">
            <div class="upper-price pf500 fs14 fc2C3131">
              {{ formatPrice(item.current_price) }}
            </div>
            <div class="letter-price pf400 fs10 fcA9A9A9">
              ≈ ${{ formatPrice(item.current_price) }}
            </div>
          </div>
        </div>
        <div class="item-right pf500 fs12 fcFFFFFF" :class="getChangeColor(item.trend)">
          {{ formatChange(item.trend) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { GetCoins } from "@/api/index.js";
  import { ref, onMounted, onUnmounted } from "vue";
  import { useRoute, useRouter } from "vue-router";

  const router = useRouter();

  const coinList = ref([]);
  let socket = null;
  let heartbeatTimer = null;
  let reconnectTimer = null;
  let isUnmounted = false;

  // --- 辅助函数 ---
  const formatSymbol = (symbol) => (symbol ? symbol.replace("USDT", "") : "");
  const formatPrice = (price) => (price ? parseFloat(price).toFixed(2) : "0.00");

  // 格式化涨跌幅
  const formatChange = (val) => {
    if (!val) return "+0.00%";
    const num = parseFloat(val);
    return (num > 0 ? "+" : "") + num.toFixed(2) + "%";
  };

  // 获取颜色
  const getChangeColor = (val) => {
    if (!val) return "bg-gray";
    return parseFloat(val) >= 0 ? "bg-green" : "bg-red";
  };

  // --- 1. WebSocket 核心逻辑 ---

  const initWebSocket = () => {
    if (socket) {
      socket.onclose = null;
      socket.close();
      socket = null;
    }

    if (coinList.value.length === 0) return;

    const symbolsParam = coinList.value
      .map((item) => item.symbol.toLowerCase())
      .join("/");

    const query = `?symbol=${symbolsParam}`;

    const wsUrl = `wss://test2.66linknow.com/ws/kline/${query}`;

    try {
      socket = new WebSocket(wsUrl);
    } catch (err) {
      reconnect();
      return;
    }

    socket.onopen = () => {
      startHeartbeat();
      if (reconnectTimer) clearTimeout(reconnectTimer);
    };

    socket.onmessage = (event) => {
      if (event.data === "pong" || event.data === "ping") return;
      try {
        const msg = JSON.parse(event.data);
        if (msg.data) {
          updateCoinData(msg.data);
        } else {
          updateCoinData(msg);
        }
      } catch (e) {}
    };

    socket.onerror = (err) => {
      console.error("❌ WS 报错");
    };

    socket.onclose = (e) => {
      if (e.code === 1000) return;
      socket = null;
      reconnect();
    };
  };

  // --- 2. 更新数据 (核心适配) ---
  const updateCoinData = (ticker) => {
    // WS 推送格式: { s: "XRPUSDT", c: "2.18", P: "9.01" }

    if (!ticker || !ticker.s) return;

    const targetCoin = coinList.value.find(
      (item) => item.symbol.toUpperCase() === ticker.s.toUpperCase()
    );

    if (targetCoin) {
      // 【修改点4】: WebSocket 更新时，赋值给新的字段名
      // c = current price -> 赋值给 current_price
      if (ticker.c) targetCoin.current_price = ticker.c;

      // P = percentage change -> 赋值给 trend
      if (ticker.P) {
        targetCoin.trend = ticker.P;
        targetCoin.p = ticker.P;
      }
    }
  };

  // --- 3. 自动重连 ---
  const reconnect = () => {
    if (isUnmounted) return;
    if (reconnectTimer) return;
    reconnectTimer = setTimeout(() => {
      reconnectTimer = null;
      initWebSocket();
    }, 3000);
  };

  // --- 4. 心跳保活 ---
  const startHeartbeat = () => {
    if (heartbeatTimer) clearInterval(heartbeatTimer);
    heartbeatTimer = setInterval(() => {
      if (socket && socket.readyState === WebSocket.OPEN) {
        socket.send("ping");
      }
    }, 10000);
  };

  // --- 生命周期 ---

  onMounted(async () => {
    try {
      const res = await GetCoins();
      // 注意：确保 res 已经是数组，或者取 res.data
      coinList.value = Array.isArray(res) ? res : res.data || [];

      if (coinList.value.length > 0) {
        initWebSocket();
      }
    } catch (error) {
      console.error("API 失败:", error);
    }
  });

  onUnmounted(() => {
    isUnmounted = true;
    if (heartbeatTimer) clearInterval(heartbeatTimer);
    if (reconnectTimer) clearTimeout(reconnectTimer);
    if (socket) {
      socket.onclose = null;
      socket.close();
      socket = null;
    }
  });
</script>

<style lang="less" scoped>
  /* 样式保持不变，省略以节省空间 */
  .hot-coin {
    margin-top: 20px;
    width: 346px;
    height: 333px;
    .coin-title {
      height: 24px;
      line-height: 24px;
    }

    .coin-head {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-top: 6px;
      width: 100%;
      height: 24px;

      .name {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 24px;

        .list-sort {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          margin-left: 4px;
          width: 8px;
          height: 16px;

          .sort-up,
          .sort-bottom {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 8px;
            height: 8px;

            img {
              width: 8px;
              height: 4px;
            }
          }
        }
      }

      .price {
        margin-left: 128px;
      }

      .today {
        margin-left: 47px;
      }
    }

    .coin-body {
      margin-top: 9px;
      width: 100%;

      .body-item {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-top: 23.5px;
        width: 100%;
        height: 38px;

        &:nth-child(1) {
          margin-top: 0;
        }

        .item-left {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          width: 276px;
          height: 100%;

          .coin-img {
            width: 32px;
            height: 32px;

            img {
              width: 32px;
              height: 32px;
            }
          }

          .coin-name {
            margin-left: 10px;
            width: 85px;
            height: 34px;

            .upper-name {
              height: 20px;
              line-height: 20px;
            }

            .letter-name {
              height: 14px;
              line-height: 14px;
            }
          }

          .coin-echars {
            width: 60px;
            height: 35px;
          }

          .coin-price {
            margin-left: 13px;
            width: 75px;
            height: 38px;

            .upper-price {
              height: 20px;
              line-height: 20px;
              text-align: right;
            }

            .letter-price {
              height: 16px;
              line-height: 16px;
              text-align: right;
            }
          }
        }

        .item-right {
          margin-left: 8px;
          width: 61px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          background: #45b26b;
          border-radius: 5px;
        }
      }
    }
  }

  /* 颜色配置 */
  .bg-green {
    background-color: #2ebd85 !important;
  }
  .bg-red {
    background-color: #f6465d !important;
  }
  .bg-gray {
    background-color: #c0c0c0;
  }
</style>
