<template>
  <!-- 我的理财 -->
  <HeaderNav headerText="我的理财"></HeaderNav>
  <div class="my-financial" v-if="WealthOrderListLength > 0">
    <div class="coin-item" v-for="(item, index) in WealthOrderList" :key="index">
      <div class="item-name">
        <img src="@/assets/icon/coin/bnb.svg" alt="" />
        <div class="item-info">
          <div class="info-top pf600 fs14 fc1F2937">
            <div>{{ item.wealth_title }}</div>
            <div class="pf400 fs12">申购数量</div>
          </div>
          <div class="info-bottom">
            <div class="pf400 fs10 fcA9A9A9">定期</div>
            <div class="pf600 fs14 fc1F2937">
              {{ Number(item.amount).toFixed(4) }}
            </div>
          </div>
        </div>
      </div>
      <div class="item-line"></div>
      <div class="item-use pf500 fs12 margin-top10">
        <div class="fcA8A8A8">理财周期</div>
        <div class="fcDF384C">{{ item.duration_days }} 天</div>
      </div>
      <div class="item-use pf500 fs12 margin-top4">
        <div class="fcA8A8A8">预估每日收益</div>
        <div class="fc767676">
          {{ Number((item.amount / item.duration_days) * item.daily_rate).toFixed(4) }}
          USDT/天
        </div>
      </div>
      <div class="item-use pf500 fs12 margin-top4">
        <div class="fcA8A8A8">预估总收益</div>
        <!-- amount * 天数 * 日利率 -->
        <div class="fc767676">
          {{ Number(item.amount * item.duration_days * item.daily_rate).toFixed(2) }} USDT
        </div>
      </div>
      <div class="item-use pf500 fs12 margin-top4">
        <div class="fcA8A8A8">收益率</div>
        <div class="fc767676">{{ Number(item.daily_rate * 100).toFixed(2) }}%</div>
      </div>
      <div
        class="conduct-btn pf600 fs14 fcFFFFFF"
        :class="item.status == 1 ? '' : 'conduct-finish'">
        {{ item.status == 1 ? "进行中" : "已结束" }}
      </div>
    </div>
  </div>
  <div class="financial-null" v-else>
    <img src="@/assets/img/index/Cryptocurrency_hedge_funds_2_.png" alt="" />
    <div class="order-null pf500 fs14 fc1F2937">暂无订单</div>
    <div class="pf400 fs12 fcA9A9A9">快去理财创造收益吧</div>
  </div>
</template>
<script setup>
  import HeaderNav from "../components/HeaderNav.vue";
  import { GetWealthOrderList } from "@/api/index";
  import { ref, onMounted } from "vue";

  const WealthOrderList = ref();
  const WealthOrderListLength = ref(0);

  const GetWealthOrderListData = async () => {
    const data = await GetWealthOrderList();
    if (data) {
      WealthOrderList.value = data;
      WealthOrderListLength.value = WealthOrderList.value.length;
    }
  };

  onMounted(() => {
    GetWealthOrderListData();
  });
</script>
<style lang="less" scoped>
  .my-financial {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 48px;
    width: 100%;

    .coin-item {
      padding-left: 19px;
      padding-right: 11px;
      margin-top: 10px;
      width: 345px;
      height: 209px;
      border-radius: 8px;
      border: 1px solid #ebebeb;
      box-sizing: border-box;

      .item-name {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 12.5px;
        width: 100%;
        height: 34px;

        img {
          width: 32px;
          height: 32px;
        }

        .item-info {
          width: calc(345px - 40px - 30px);
          height: 34px;

          .info-top {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 20px;
          }

          .info-bottom {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 14px;
          }
        }
      }

      .item-line {
        margin-top: 10px;
        width: 100%;
        height: 1px;
        background: #e9e9e9;
      }

      .margin-top10 {
        margin-top: 10px;
      }

      .margin-top4 {
        margin-top: 4px;
      }

      .item-use {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 18px;
      }

      .conduct-finish {
        background: #a8a8a8 !important;
      }

      .conduct-btn {
        margin-top: 8px;
        width: 311px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 100px;
        background: #df384c;
        letter-spacing: 0.2px;
      }
    }
  }

  .financial-null {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 48px;
    width: 100%;

    img {
      margin-top: 130px;
      width: 142px;
      height: 95px;
    }

    .order-null {
      margin-top: 10px;
      height: 22px;
      line-height: 22px;
    }
  }
</style>
