<template>
  <div class="latest-order">
    <div class="order-header pf400 fs12 fc666666">
      <div class="header-buy">时间</div>
      <div class="header-number">方向</div>
      <div class="header-price">价格(AVAX)</div>
      <div class="header-number2">数量(AVAX)</div>
    </div>
    <div class="order-body">
      <div class="order-item" v-for="(item, index) in transactions" :key="index">
        <div class="item-buy fs400 fs12 fcA8A8A8">{{ timestampToTime(item.T) }}</div>
        <div
          class="item-number fs400 fs12"
          :class="item.m == true ? 'fcDF384C' : 'fc45B26B'">
          {{ item.m == true ? "卖出" : "买入" }}
        </div>
        <div class="item-price fs400 fs12">
          <div class="fc444444">{{ Number(item.p).toFixed(2) }}</div>
        </div>
        <div class="item-number2 fs400 fs12 fc444444">{{ item.q }}</div>
      </div>
    </div>
<!--    <div class="buy-sell pf500 fs16 fcFFFFFF">-->
<!--      <div class="buy-btn">买入(做多)</div>-->
<!--      <div class="sell-btn">卖出(做空)</div>-->
<!--    </div>-->
  </div>
</template>
<script setup>
  import { toRef, watch, defineProps, ref } from "vue";
  import { timestampToTime } from "../../../utils/time";

  const props = defineProps({
    latestTransactionData: {
      type: [Object, Array],
      default: () => [],
    },
  });

  const transactions = ref([]);

  // 处理最新交易数据，始终保留20条
  watch(
    () => props.latestTransactionData,
    (newVal) => {
      if (Array.isArray(newVal)) {
        // 如果是数组，直接取最后20条
        transactions.value = newVal.slice(-20);
      } else if (newVal && typeof newVal === "object") {
        // 如果是单条对象
        transactions.value.push(newVal);
        if (transactions.value.length > 20) {
          transactions.value.shift();
        }
      }
    },
    { immediate: true, deep: true }
  );
</script>
<style lang="less" scoped>
  .latest-order {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;

    .order-header {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-top: 6px;
      width: 345px;
      height: 24px;

      .header-buy {
        width: 25%;
        height: 24px;
        line-height: 24px;
        text-align: left;
      }

      .header-number {
        width: 25%;
        height: 24px;
        line-height: 24px;
        text-align: left;
      }

      .header-price {
        width: 25%;
        height: 24px;
        line-height: 24px;
        text-align: left;
      }

      .header-number2 {
        width: 25%;
        height: 24px;
        line-height: 24px;
        text-align: right;
      }
    }

    .order-body {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      width: 345px;

      .order-item {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;

        .item-buy {
          width: 25%;
          height: 21px;
          line-height: 21px;
          text-align: left;
        }

        .item-number {
          width: 25%;
          height: 21px;
          line-height: 21px;
          text-align: left;
        }

        .item-price {
          width: 25%;
          height: 21px;
          text-align: left;
        }

        .item-number2 {
          width: 25%;
          height: 21px;
          line-height: 21px;
          text-align: right;
        }
      }
    }

    .buy-sell {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 15px;
      width: 345px;
      height: 38px;

      .buy-btn {
        width: 164px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        background: #45b26b;
        border-radius: 6px;
      }

      .sell-btn {
        width: 164px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        background: #df384c;
        border-radius: 6px;
      }
    }
  }
</style>
