<template>
  <div class="market-conditions">
    <div class="market-price">
      <div class="price-left">
        <div class="left-price pf400 fs14 fc333333">
          实时价格
          <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
        </div>
        <div class="left-number pf600 fs20 fc1F2937">1,125,158.00</div>
        <div class="left-appro pf500 fs14 fcA8A8A8">
          ≈35,458.00
          <div class="appro pf500 fs14 fc45B26B">+1.42%</div>
        </div>
      </div>
      <div class="price-right">
        <div class="right-number-top">
          <div class="right-number-top-price">
            <div class="pf400 fs10 fcA8A8A8">24h 最高价</div>
            <div class="pf400 fs10 fc2C3131">78,776.76</div>
          </div>
          <div class="right-number-top-number">
            <div class="pf400 fs10 fcA8A8A8">24h 成交量 (BTC)</div>
            <div class="pf400 fs10 fc2C3131">78,776.76</div>
          </div>
        </div>
        <div class="right-number-bottom">
          <div class="right-number-top-price">
            <div class="pf400 fs10 fcA8A8A8">24h 最高价</div>
            <div class="pf400 fs10 fc2C3131">78,776.76</div>
          </div>
          <div class="right-number-top-number">
            <div class="pf400 fs10 fcA8A8A8">24h 成交量 (BTC)</div>
            <div class="pf400 fs10 fc2C3131">78,776.76</div>
          </div>
        </div>
      </div>
    </div>
    <div class="k-line-main"></div>
    <div class="notifi-classifi">
      <div class="pf600 fs14 fc121212" @click="messageChange('entrustingOrder')">
        委托挂单
      </div>
      <div
        class="sys-notifi pf600 fs14 fcA8A8A8"
        @click="messageChange('latestTransactions')">
        最新成交
      </div>
    </div>
    <component :is="currentComponent" />
  </div>
</template>
<script setup>
  import EntrustingOrder from "./EntrustingOrder.vue";
  import LatestTransactions from "./LatestTransactions.vue";
  import { ref, computed } from "vue";

  const current = ref("entrustingOrder");
  const componentsMap = {
    entrustingOrder: EntrustingOrder,
    latestTransactions: LatestTransactions,
  };
  const currentComponent = computed(() => componentsMap[current.value]);

  const messageChange = (key) => {
    current.value = key;
  };
</script>
<style lang="less" scoped>
  .market-conditions {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 349px;

    .market-price {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 8px;
      width: 100%;
      height: 73px;

      .price-left {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 144px;
        height: 69px;

        .left-price {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          height: 18px;

          img {
            margin-left: 5px;
            width: 8px;
            height: 4px;
          }
        }

        .left-number {
          margin-top: 5px;
        }

        .left-appro {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          margin-top: 3px;

          .appro {
            margin-left: 9px;
          }
        }
      }

      .price-right {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 100%;

        .right-number-top {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          width: 189px;
          height: 32px;

          .right-number-top-price {
            width: 93px;
            height: 32px;

            div {
              height: 16px;
              line-height: 16px;
              text-align: end;
            }
          }

          .right-number-top-number {
            width: 93px;
            height: 32px;

            div {
              height: 16px;
              line-height: 16px;
              text-align: end;
            }
          }
        }

        .right-number-bottom {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          margin-top: 9px;
          width: 189px;
          height: 32px;

          .right-number-top-price {
            width: 93px;
            height: 32px;

            div {
              height: 16px;
              line-height: 16px;
              text-align: end;
            }
          }

          .right-number-top-number {
            width: 93px;
            height: 32px;

            div {
              height: 16px;
              line-height: 16px;
              text-align: end;
            }
          }
        }
      }
    }

    .k-line-main {
      margin-top: 15px;
      width: 100%;
      height: 283px;
      background: pink;
    }

    .notifi-classifi {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-end;
      margin-top: 15px;
      width: 349px;
      height: 24px;

      .sys-notifi {
        margin-left: 47px;
      }
    }
  }
</style>
