<template>
  <j-nav-bar color="#FFF" nav-bar-background="#f9bf3a" :placeholder="false"/>
  <div class="content">
    <j-gap height="120" background="#F9BF3A" opacity="0"/>
    <div class="action">
      <view class="tt">申请时间 {{ new Date(borrowInfo.createTime).format('yyyy-MM-dd hh:mm:ss') }}</view>


      <view class="footer-content">
        <view class="footer-content-1">
          <van-steps active-icon="success" active-color="#07c160" :active="active">
            <van-step v-for="(item, index) in stepBorrow.borrowStep" :key="index">{{ item.name }}</van-step>
          </van-steps>
        </view>
        <view class="footer-content-2">
          <view class="footer-content-2-tit gray_color">温馨提示</view>
          <view class="footer-content-2-content" :style="{color: stepBorrow.borrowNameStyle || '#e84a10'}">
            {{ stepBorrow.borrowRemark }}
          </view>
        </view>
      </view>
    </div>

    <div class="action">
      <view class="tt">
        <view>贷款详情</view>
      </view>
      <van-cell title="贷款编号" title-style="color: #8997ae;" style="--van-cell-value-color: #000" :value="borrowInfo.tradeNo" />
      <van-cell title="借款金额" title-style="color: #8997ae;" style="--van-cell-value-color: #000" :value="toRoundMark(borrowInfo.totalLoanMoney)" />
<!--      <van-cell title="借款期限" title-style="color: #8997ae;" style="&#45;&#45;van-cell-value-color: #000" :value="borrowInfo.totalMonth + '个月'" />-->
      <van-cell title="贷款周期" title-style="color: #8997ae;" style="--van-cell-value-color: #000" :value="borrowInfo.totalMonth + '个月'" />
      <van-cell title="提现银行" title-style="color: #8997ae;" style="--van-cell-value-color: #000" :value="borrowInfo.bankType" />
      <van-cell title="每期还款" title-style="color: #8997ae;" style="--van-cell-value-color: #000" :value="toRoundMark(borrowInfo.avgRepayment)" />
      <van-cell title="描述" title-style="color: #8997ae;" style="--van-cell-value-color: #000" :value="borrowInfo.noteRemark" />



    </div>
  </div>

</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {getBorrowInfo, getUserInfo} from "@/api";
import {resetData} from "@/utils/dataUtil";
import {useRoute} from "vue-router";
import {toRoundMark} from "@/utils";

const route = useRoute()
const active = ref(0);

const stepBorrow = reactive({
  "borrowNameStyle": "",
  "borrowRemark": "",
  "borrowStep": [
    {
      "name": "提交成功",
      "over": true
    },
    {
      "name": "银行卡异常",
      "over": true
    },
    {
      "name": "到账成功",
      "over": false
    }
  ]
})
const borrowInfo = reactive({
  "auditFlag": true,
  "avgRepayment": 0,
  "backCardNum": "",
  "bankType": "",
  "borrowName": "",
  "borrowNameStyle": "",
  "borrowRemark": "",
  "cardBackPicture": "",
  "cardFrontPicture": "",
  "cardNum": "",
  "companyAddress": "",
  "companyAddressInfo": "",
  "companyName": "",
  "companyPhone": "",
  "companyTitle": "",
  "companyYear": "",
  "createTime": "",
  "customerAddress": "",
  "customerAddressInfo": "",
  "customerId": 0,
  "dueDate": 0,
  "firstBackCardNum": "",
  "firstBankType": "",
  "firstRepayment": 0,
  "id": 0,
  "infoJson": "",
  "kinsfolkName": "",
  "kinsfolkPhone": "",
  "kinsfolkRef": "",
  "loanMonthRate": 0,
  "loanProcessResp": {
    "borrowNameStyle": "",
    "borrowRemark": "",
    "borrowStep": [
      {
        "name": "",
        "over": false
      }
    ]
  },
  "loanYearRate": 0,
  "noteRemark": "",
  "realName": "",
  "remitFlag": 0,
  "repayRemark": "",
  "totalInterest": 0,
  "totalLoanMoney": 0,
  "totalMonth": 0,
  "totalRepayment": 0,
  "tradeNo": "",
  "updateBackNum": 0,
  "updateTime": ""
})
const _getBorrowInfo = () => {
  getBorrowInfo({tradeNo: route.query.tradeNo}).then(res => {
    resetData(borrowInfo, res)
    resetData(stepBorrow, borrowInfo.loanProcessResp)
    stepBorrow.borrowStep.forEach((sb, index) => {
      if (sb.over) {
        active.value = index
      }
    })

  })
}



onMounted(() => {
  _getBorrowInfo()
})

</script>

<style lang="scss" scoped>
.content {
  background-image: linear-gradient(to bottom, #f9bf3a, #ffffff) !important;
  padding-bottom: 30px;
  height: 100vh;


  .action {
    margin: 20px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-flow: column;
    box-shadow: 0 0 1vw 0px #e0e0e0;
    &-content {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      padding: 20px 20px;
      box-shadow: 0 0 1vw 0px #e0e0e0;

      &-item {
        margin: 20px 0;
      }

      .id-card-box {
        border-radius: 10px;
        box-shadow: 0 0 1vw 0px #e0e0e0;
        width: 500px;
        height: 300px;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
      }
    }

    .tt {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: start;
      background: #f6f9fd;
      color: #000;
      font-size: 30px;
      font-weight: bold;
      padding: 20px 20px;
    }
    //
  }

}

.font-22 {
  font-size: 22px;
}


.footer-content {
  width: 100%;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 1vw 0px #e0e0e0;

  &-1 {
    padding: 20px 80px;
    //background: #f9fafb;
  }
  &-2 {
    display: flex;
    padding: 20px;
    &-tit {
      display: block;
      width: 220px;
      margin-right: 30px;
    }
    &-content {
      display: block;
    }
  }
}
</style>