<template>
  <!-- 热门理财 -->
  <div class="hot-financial">
    <div class="financial-title pf600 fs18 fc121212">热门理财</div>
    <div class="financial-main">
      <div
        class="financial-item"
        v-for="(item, index) in WealthProductsData"
        :key="index"
        @click="financialBuy(item.id)">
        <div class="item-name pf400 fs12 fc2C3131">
          <img :src="item.icon" alt="" />
          {{ item.title }}
        </div>
        <div class="item-info">
          <div class="info-left">
            <div class="pf400 fs10 fcDF384C">
              {{ Number(item.details[0].daily_rate * 100).toFixed(2) }}%
            </div>
            <div class="margin-top2 pf400 fs10 fcA8A8A8">收益率</div>
          </div>
          <div class="info-right">
            <div class="pf400 fs10 fcDF384C">{{ item.details[0].duration_days }}</div>
            <div class="margin-top2 pf400 fs10 fcA8A8A8">理财周期</div>
          </div>
        </div>
        <div class="item-line"></div>
        <div class="item-shouyi pf400 fs10 fcA8A8A8">
          <div>预估每日收益</div>
          <div>
            <!-- 总数 / 天数 * 日利率 -->
            {{
              Number(
                (item.details[0].amount / item.details[0].duration_days) *
                  item.details[0].daily_rate
              ).toFixed(4)
            }}/天
          </div>
        </div>
        <div class="item-buy pf500 fs10 fcFFFFFF">立即购买</div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref, onMounted } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { GetWealthProducts } from "@/api/index";

  const router = useRouter();

  const WealthProductsData = ref();

  const getWealthProductsData = async () => {
    // 是否首页
    const params = {
      is_visible: true,
    };
    const data = await GetWealthProducts(params);
    if (data) {
      WealthProductsData.value = data.list;
    }
  };

  const financialBuy = (id) => {
    router.push({ name: "financialBuy", params: { id: id } });
  };

  onMounted(() => {
    getWealthProductsData();
  });
</script>
<style lang="less" scoped>
  .hot-financial {
    margin-top: 30px;
    width: 100%;
    padding-bottom: 80px;

    .financial-title {
      margin-left: 16px;
      height: 24px;
      line-height: 24px;
    }

    .financial-main {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-top: 10px;
      width: 100%;

      .financial-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-left: 16px;
        width: 148px;
        height: 138px;
        border-radius: 5px;
        border: 1px solid #ebebeb;

        .item-name {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          margin-top: 7px;
          width: 130px;
          height: 27px;

          img {
            margin-right: 3px;
            width: 27px;
            height: 27px;
          }
        }

        .item-info {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-top: 10px;
          width: 130px;

          .margin-top2 {
            margin-top: 2px;
          }

          .info-left {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
          }

          .info-right {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-end;
          }
        }

        .item-line {
          margin-top: 5px;
          width: 125px;
          height: 1px;
          background: #00000019;
        }

        .item-shouyi {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin-top: 3px;
          width: 130px;
          height: 18px;
        }

        .item-buy {
          margin-top: 6px;
          width: 130px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          border-radius: 5px;
          background: #df384c;
        }
      }
    }
  }
</style>
