<template>
  <!-- 我的-贷款 -->
  <HeaderNav headerText="我的贷款"></HeaderNav>
  <div class="user-loan-index">
    <div class="loan-money-text pf400 fs16 fc1F2937">
      贷款金额(USDT)
      <img src="../../../assets/icon/user/Eye.svg" alt="" />
    </div>
    <div class="loan-money-number pf600 fs32 fc1F2937">1,125,158.00</div>
    <div class="loan-money-about pf500 fs16 fcDF384C">≈35,458.00</div>
    <div class="repayment">
      <div class="repayment-left">
        <div class="title pf400 fs12 fc6A7187">已还款(USDT)</div>
        <div class="number pf500 fs16 fc061237">5,678.00</div>
      </div>
      <div class="repayment-right">
        <div class="title pf400 fs12 fc6A7187">已还款(USDT)</div>
        <div class="number pf500 fs16 fc061237">5,678.00</div>
      </div>
    </div>
    <img src="../../../assets/img/user/guanggao.svg" class="guanggao" alt="" />
    <div class="notifi-classifi">
      <div class="pf600 fs18 fc121212" @click="messageChange('repaymenting')">还款中</div>
      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('repaid')">
        已还款
      </div>
    </div>
    <component :is="currentComponent" />
  </div>
</template>
<script setup>
  import HeaderNav from "../../index/components/HeaderNav.vue";
  import Repaid from "./Repaid.vue";
  import Repaymenting from "./Repaymenting.vue";
  import { ref, computed } from "vue";

  const current = ref("repaymenting");
  const componentsMap = {
    repaid: Repaid,
    repaymenting: Repaymenting,
  };
  const currentComponent = computed(() => componentsMap[current.value]);

  const messageChange = (key) => {
    current.value = key;
  };
</script>
<style lang="less" scoped>
  .user-loan-index {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;

    .loan-money-text {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-top: calc(48px + 12px);
      width: 345px;
      height: 22px;
      line-height: 22px;

      img {
        margin-left: 5px;
        width: 16px;
        height: 16px;
      }
    }

    .loan-money-number {
      margin-top: 3px;
      width: 345px;
      height: 44px;
      line-height: 44px;
    }

    .loan-money-about {
      margin-top: 1px;
      width: 345px;
      height: 22px;
      line-height: 22px;
    }

    .repayment {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 6px;
      width: 345px;
      height: 47px;

      .repayment-left {
        height: 47px;

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

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

      .repayment-right {
        height: 47px;

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

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

    .guanggao {
      margin-top: 10px;
      width: 345px;
      height: 85px;
    }

    .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;
      }
    }
  }
</style>
