<template>
  <!-- 中签结果 -->
  <div class="lottery-result">
    <div class="notifi-classifi">
      <div class="pf600 fs14 fc121212">认购</div>
      <div class="sys-notifi pf600 fs14 fcA8A8A8">配售</div>
    </div>
    <div class="subscription-head pf400 fs12 fc666666">
      <div class="head-flag">状态</div>
      <div class="head-name">名称</div>
      <div class="head-price">中签/认缴</div>
      <div class="head-operate">认购时间</div>
    </div>
    <div class="subscription-body">
      <div class="subscription-item" v-for="(item, index) in 6" :key="index">
        <div class="item-flag pf500 fs12 fc2C3131">已完成</div>
        <div class="item-name pf400 fs12 fc2C3131">Bitcoin</div>
        <div class="item-price pf400 fs12 fc2C3131">0/0</div>
        <div class="item-operate pf400 fs12 fc2C3131">2025-11-04 14:25:06</div>
      </div>
    </div>
    <Subscribed v-show="subscribedFlag"></Subscribed>
  </div>
</template>
<script setup>
  import Subscribed from "../dialog/Subscribed.vue";
  import { ref } from "vue";

  const subscribedFlag = ref(false);
  const subscribedClose = () => {
    subscribedFlag.value = false;
  };
</script>
<style lang="less" scoped>
  .lottery-result {
    width: 349px;

    .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: 42px;
      }
    }

    .subscription-head {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-top: 14px;
      width: 100%;
      height: 24px;

      .head-flag {
        width: 40px;
        height: 24px;
        line-height: 24px;
        text-align: left;
        letter-spacing: 0.17px;
      }

      .head-name {
        width: 106px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        letter-spacing: 0.17px;
      }

      .head-price {
        width: 107px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        letter-spacing: 0.17px;
      }

      .head-operate {
        width: 96px;
        height: 24px;
        line-height: 24px;
        text-align: right;
        letter-spacing: 0.17px;
      }
    }

    .subscription-body {
      width: 100%;

      .subscription-item {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        margin-top: 13px;
        padding-bottom: 13px;
        width: 100%;
        border-bottom: 1px solid #f5f5f5;

        .item-flag {
          width: 40px;
          height: 24px;
          line-height: 24px;
          text-align: left;
          letter-spacing: 0.17px;
        }

        .item-name {
          width: 106px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          letter-spacing: 0.17px;
        }

        .item-price {
          width: 107px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          letter-spacing: 0.17px;
        }

        .item-operate {
          width: 96px;
          height: 24px;
          text-align: right;
        }
      }
    }
  }
</style>
