<template>
  <div class="trans-data">
    <div class="data-first">
      <div class="pf600 fs16 fc333333">合约持仓量</div>
    </div>
    <div class="data-first">
      <div class="first-title">
        <div class="first-left pf600 fs16 fc333333" @click="kongbi1Flag = true">
          大户多空比
          <img src="../../../assets/icon/market/question.svg" alt="" />
        </div>
        <div class="first-right pf400 fs14 fc333333">
          5分钟
          <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
        </div>
      </div>
    </div>
    <div class="data-first">
      <div class="first-title">
        <div class="first-left pf600 fs16 fc333333" @click="kongbi2Flag = true">
          大户多空比
          <img src="../../../assets/icon/market/question.svg" alt="" />
        </div>
        <div class="first-right pf400 fs14 fc333333">
          5分钟
          <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
        </div>
      </div>
    </div>
    <div class="data-first">
      <div class="first-title">
        <div class="first-left pf600 fs16 fc333333" @click="bizhiFlag = true">
          多空人数比值
          <img src="../../../assets/icon/market/question.svg" alt="" />
        </div>
        <div class="first-right pf400 fs14 fc333333">
          5分钟
          <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
        </div>
      </div>
    </div>
    <div class="data-first">
      <div class="first-title">
        <div class="first-left pf600 fs16 fc333333" @click="buySellFlag = true">
          合约主动买卖量
          <img src="../../../assets/icon/market/question.svg" alt="" />
        </div>
        <div class="first-right pf400 fs14 fc333333">
          5分钟
          <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
        </div>
      </div>
    </div>
    <div class="data-first">
      <div class="first-title" @click="jichaFlag = true">
        <div class="first-left pf600 fs16 fc333333">
          基差
          <img src="../../../assets/icon/market/question.svg" alt="" />
        </div>
        <div class="first-right pf400 fs14 fc333333">
          5分钟
          <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
        </div>
      </div>
    </div>
    <div class="buy-sell pf500 fs16 fcFFFFFF">
      <div class="buy-btn">买入(做多)</div>
      <div class="sell-btn">卖出(做空)</div>
    </div>
  </div>
  <Kongbi1 v-show="kongbi1Flag" @kongbi1Close="kongbi1Close"></Kongbi1>
  <Kongbi2 v-show="kongbi2Flag" @kongbi2Close="kongbi2Close"></Kongbi2>
  <Bizhi v-show="bizhiFlag" @bizhiClose="bizhiClose"></Bizhi>
  <BuySellNumber v-show="buySellFlag" @buySellClose="buySellClose"></BuySellNumber>
  <Jicha v-show="jichaFlag" @jichaClose="jichaClose"></Jicha>
</template>
<script setup>
  import { ref } from "vue";
  import Kongbi1 from "../dialog/Kongbi1.vue";
  import Kongbi2 from "../dialog/Kongbi2.vue";
  import Bizhi from "../dialog/Bizhi.vue";
  import BuySellNumber from "../dialog/BuySellNumber.vue";
  import Jicha from "../dialog/Jicha.vue";

  const kongbi1Flag = ref(false);
  const kongbi1Close = () => {
    kongbi1Flag.value = false;
  };

  const kongbi2Flag = ref(false);
  const kongbi2Close = () => {
    kongbi2Flag.value = false;
  };

  const bizhiFlag = ref(false);
  const bizhiClose = () => {
    bizhiFlag.value = false;
  };

  const buySellFlag = ref(false);
  const buySellClose = () => {
    buySellFlag.value = false;
  };

  const jichaFlag = ref(false);
  const jichaClose = () => {
    jichaFlag.value = false;
  };
</script>
<style lang="less" scoped>
  .trans-data {
    width: 349px;

    .data-first {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      margin-top: 20px;
      width: 100%;
      height: 216px;

      .first-title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 22px;

        .first-left {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;

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

        .first-right {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;

          img {
            margin-left: 4px;
            width: 7px;
            height: 3.5px;
          }
        }
      }
    }

    .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>
