<template>
  <!-- 理财购买 -->
  <HeaderNav headerText="理财"></HeaderNav>
  <div class="financial-buy">
    <div class="item-name">
      <img :src="productDataList.icon" alt="" />
      <div class="coin-name">
        <div class="first pf500 fs14 fc1F2937">{{ productDataList.title }}</div>
        <div class="second pf400 fs10 fcA9A9A9">定期</div>
      </div>
    </div>
    <div class="product">
      <div
        class="product-item pf500 fcFFFFFF"
        v-for="(item, index) in productDataList.details"
        :key="index"
        @click="getProductDetails(index)">
        <div class="rate fs14">{{ Number(item.daily_rate * 100).toFixed(2) }}%</div>
        <div class="date fs12">{{ item.duration_days }}天</div>
      </div>
    </div>
    <div class="number">
      <div class="number-left pf400 fs14 fc333333">数量</div>
      <div class="number-right pf400 fs12 fc333333">
        <input type="checkbox" class="checkbox" v-model="autoBuyFlag" />自动申购
      </div>
    </div>
    <div class="number-input">
      <input type="text" class="input pf400 fs14 fc333333" placeholder="最少1000.00" />
      <div class="all pf400 fs14 fc333333">USDT <span class="fcDF384C">全部</span></div>
    </div>
    <div class="use-number pf400 fs12 fc333333">
      可用&nbsp; {{ usdtBalance }} USDT
      <img src="@/assets/icon/bitcoin/qianbao1.svg" alt="" class="qianbao" />
    </div>
    <div class="message margin-top20 pf500 fs14 fc666666">
      <div>理财周期</div>
      <div>{{ productDetails.duration_days }}天</div>
    </div>
    <div class="message margin-top28 pf500 fs14 fc666666">
      <div>预估每日收益</div>
      <div>
        {{
          Number(
            (productDetails.amount / productDetails.duration_days) *
              productDetails.daily_rate
          ).toFixed(4)
        }}
        USDT
      </div>
    </div>
    <div class="message margin-top28 pf500 fs14 fc666666">
      <div>预估总收益</div>
      <div>{{ Number(productDetails.amount).toFixed(4) }} USDT</div>
    </div>
    <div class="message margin-top28 pf500 fs14 fc666666">
      <div>收益率</div>
      <div>{{ Number(productDetails.daily_rate * 100).toFixed(2) }}%</div>
    </div>
    <div class="profit-statement">
      <div class="title pf500 fs14 fc333333">收益说明</div>
      <div class="desc pf400 fs12 fc999999">
        定期理财为固定利率方式计息，计息开始时间为申购日次日 <br />
        到期后本息自动发放到账户余额
      </div>
    </div>
    <div class="submit pf600 fs14 fcFFFFFF" @click="submitOrder()">立即购买</div>
  </div>
</template>
<script setup>
  import HeaderNav from "../components/HeaderNav.vue";
  import CheckBox from "../../../components/ui/CheckBox.vue";
  import { ref, onMounted } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import {
    GetWealthProductsDetails,
    GetUsdtBalance,
    wealthSubmitOrder,
  } from "@/api/index";
  import { showToast, showFailToast } from "vant";

  const route = useRoute();
  const router = useRouter();

  const autoBuyFlag = ref(true);
  const productDataList = ref([]);
  const productDetails = ref([]);
  const usdtBalance = ref(0);
  const productIndex = ref(0);

  const GetWealthProductsDetailsData = async (id) => {
    const params = {
      id: id,
    };
    const data = await GetWealthProductsDetails(params);
    if (data) {
      productDataList.value = data.list[0];
    }
  };

  const GetUsdtBalanceData = async () => {
    const data = await GetUsdtBalance();
    console.log(1, data);
    if (data) {
      usdtBalance.value = data;
    }
  };

  const getProductDetails = (index) => {
    if (index) {
      productIndex.value = index;
      productDetails.value = productDataList.value.details[index];
    } else {
      productIndex.value = 0;
      productDetails.value = productDataList.value.details[0];
    }
  };

  const submitOrder = async () => {
    const params = {
      detail_id: productDataList.value.details[productIndex.value].id,
    };
    const data = await wealthSubmitOrder(params);
    if (data) {
      router.push("/financialIndex");
    } else {
      showFailToast("余额不足请充币");
    }
  };

  onMounted(async () => {
    await GetWealthProductsDetailsData(route.params.id);
    await GetUsdtBalanceData();
    getProductDetails();
  });
</script>
<style lang="less" scoped>
  .financial-buy {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 48px;
    width: 100%;

    .margin-top20 {
      margin-top: 20px;
    }

    .margin-top28 {
      margin-top: 28px;
    }

    .item-name {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      width: 345px;
      height: 34px;

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

      .coin-name {
        margin-left: 10px;
        height: 34px;

        .first {
          height: 20px;
          line-height: 20px;
        }

        .second {
          height: 14px;
          line-height: 14px;
        }
      }
    }

    .product {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 0 11px;
      margin-top: 24.5px;
      width: 345px;
      height: 70px;
      box-sizing: border-box;

      .product-item {
        width: 95px;
        height: 100%;

        .rate {
          width: 100%;
          height: 41px;
          line-height: 41px;
          text-align: center;
          border-radius: 6px 6px 0 0;
          background: #df384c;
          letter-spacing: 0.53px;
        }

        .date {
          width: 100%;
          height: 29px;
          line-height: 29px;
          text-align: center;
          background: #ff8282cc;
          border-radius: 0 0 6px 6px;
          letter-spacing: 0.53px;
        }
      }
    }

    .number {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 19px;
      width: 345px;
      height: 24px;

      .number-left {
        height: 24px;
        line-height: 24px;
      }

      .number-right {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 24px;

        .checkbox {
          margin-right: 6px;
          width: 16px;
          height: 16px;
          border-radius: 4px;
          background: #ffffff;
          border: 1px solid #a8a8a8;
          appearance: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          cursor: pointer;
          position: relative;
        }

        .checkbox:checked::after {
          content: "✓";
          font-size: 12px;
          color: black; /* 默认对号颜色 */
          position: absolute;
          left: 2.5px;
          top: 0.6px;
        }
      }
    }

    .number-input {
      position: relative;
      margin-top: 5px;
      width: 345px;
      height: 45px;

      .input {
        padding-left: 11px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border-radius: 6px;
        border: none;
        outline: none;
        background: #f5f5f5;
      }

      .all {
        position: absolute;
        top: 13px;
        right: 11px;
      }
    }

    .use-number {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-top: 7px;
      width: 345px;
      height: 18px;

      .qianbao {
        margin-left: 8px;
        width: 14px;
        height: 14px;
      }
    }

    .message {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 345px;
      height: 18px;
    }

    .profit-statement {
      margin-top: 36px;
      width: 345px;

      .title {
        height: 24px;
        line-height: 24px;
      }

      .desc {
        line-height: 20px;
      }
    }

    .submit {
      margin-top: 72px;
      width: 311px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 100px;
      background: #df384c;
      letter-spacing: 0.2px;
    }
  }
</style>
