<template>
  <div class="entrusting-order">
    <div class="order-header pf400 fs12 fc666666">
      <div class="header-buy">买盘</div>
      <div class="header-number">数量(AVAX)</div>
      <div class="header-price">价格(AVAX)</div>
      <div class="header-number2">数量(AVAX)</div>
      <div class="header-sell">卖盘</div>
    </div>
    <div class="order-body">
      <!-- ⭐ 正确循环 newOrderPlacement -->
      <div class="order-item" v-for="(item, index) in newOrderPlacement" :key="index">
        <div class="item-buy fs400 fs12 fcA8A8A8">{{ index + 1 }}</div>
        <!-- 买价 -->
        <div class="item-number fs400 fs12 fc444444">
          {{ Number(item[0][0]).toFixed(2) }}
        </div>
        <div class="item-price fs400 fs12">
          <div class="fc45B26B">{{ Number(item[0][1]).toFixed(2) }}</div>
          <div class="price-second fcFF7171">{{ Number(item[1][1]).toFixed(2) }}</div>
        </div>
        <!-- 卖价 -->
        <div class="item-number2 fs400 fs12 fc444444">
          {{ Number(item[1][0]).toFixed(2) }}
        </div>
        <div class="item-sell fs400 fs12 fcA8A8A8">{{ index + 1 }}</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";

  const props = defineProps({
    orderPlacement: {
      type: [String, Number, Object, Array, Boolean],
      default: null,
    },
  });

  const valueFromParent = toRef(props, "orderPlacement");

  // ⭐ 作为展示用的新数组
  const newOrderPlacement = ref([]);

  // ⭐ 监听父组件传来的 orderPlacement，自动转换
  watch(
    valueFromParent,
    (newVal) => {
      if (!newVal || !newVal.bids || !newVal.asks) return;

      // ⭐ 正确转换 bids + asks → newOrderPlacement
      newOrderPlacement.value = newVal.bids.map((bid, index) => {
        return [bid, newVal.asks[index]];
      });
    },
    { immediate: true }
  );
</script>
<style lang="less" scoped>
  .entrusting-order {
    width: 100%;
    padding: 0 15px;

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

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

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

      .header-price {
        width: 133px;
        height: 24px;
        line-height: 24px;
        text-align: center;
      }

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

      .header-sell {
        width: 40px;
        height: 24px;
        line-height: 24px;
        text-align: right;
      }
    }

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

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

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

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

        .item-price {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          width: 163px;
          height: 21px;
          text-align: center;

          .price-second {
            margin-left: 9px;
          }
        }

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

        .item-sell {
          width: 40px;
          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>
