<template>
  <j-nav-bar color="#FFF" nav-bar-background="#ffffff00" :placeholder="false"/>
  <div class="content">
    <j-gap height="120" background="#F9BF3A" opacity="0"/>
    <van-cell-group inset>
      <van-cell :style="{ padding: px2vw(40) + ' ' + px2vw(35)}" title="我的资料" is-link to="userInfo1" :value="userInfo.cardFlag ? '完整' : '不完整'">
        <template #title>
          <div class="t">身份信息</div>
          <div class="t2">*让我们了解您的资料信息</div>
        </template>
        <template #icon>
          <div style="display: flex; justify-content: center; align-items: center; padding-right: 12px">
            <van-icon :name="getAssetsImages('my/uuuu1.png')"  size="45"/>
          </div>
        </template>
      </van-cell>

      <van-cell :style="{ padding: px2vw(40) + ' ' + px2vw(35)}" title="我的借款" is-link to="userInfo2" :value="userInfo.infoFlag ? '完整' : '不完整'">
        <template #title>
          <div class="t">资料信息</div>
          <div class="t2">*让我们了解您的资料信息</div>
        </template>
        <template #icon>
          <div style="display: flex; justify-content: center; align-items: center; padding-right: 12px">
            <van-icon :name="getAssetsImages('my/uuuu2.png')" size="45"/>
          </div>
        </template>
      </van-cell>

      <van-cell :style="{ padding: px2vw(40) + ' ' + px2vw(35)}" title="我的还款" is-link to="userInfo3" :value="userInfo.bankFlag ? '完整' : '不完整'">
        <template #title>
          <div class="t">收款银行卡</div>
          <div class="t2">*让我们了解您的资料信息</div>
        </template>
        <template #icon>
          <div style="display: flex; justify-content: center; align-items: center; padding-right: 12px">
            <van-icon :name="getAssetsImages('my/uuuu3.png')" size="45"/>
          </div>
        </template>
      </van-cell>
      <van-cell v-if="userInfo.allowSignature" :style="{ padding: px2vw(40) + ' ' + px2vw(35)}" title="我的借款" is-link to="signature" :value="userInfo.signatureFlag ? '完整' : '不完整'" >
        <template #title>
          <div class="t">签名信息</div>
          <div class="t2">*让我们了解您的资料信息</div>
        </template>
        <template #icon>
          <div style="display: flex; justify-content: center; align-items: center; padding-right: 12px">
            <van-icon :name="getAssetsImages('my/uuuu2.png')" size="45"/>
          </div>
        </template>
      </van-cell>
    </van-cell-group>


    <div style="padding: 60px 20px 60px">
      <van-button
        color="linear-gradient(to right, #D2A64C, #F9D88D)"
        round
        style="width: 100%; "
        @click.stop="goHome"
      >
        立即借款
      </van-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {getAssetsImages, px2vw} from "@/utils";
import {useRouter} from "vue-router";
import {getBorrowPage, getUserInfo} from "@/api";
import {resetData} from "@/utils/dataUtil";
import {onMounted, reactive} from "vue";

const router = useRouter()
const goHome = () => {
  router.push({
    path: '/home'
  })
}
const userInfo = reactive({
  cardFlag: false,
  infoFlag: false,
  bankFlag: false,
  signatureFlag: false,
  allowSignature: true
})
const _getUserInfo = () => {
  getUserInfo().then(res => {
    resetData(userInfo, res)
    userInfo.signatureFlag = !!res.signature
  })
}
const borrowPage = {
  pageNum: 0,
  pageSize: 100,
}
const borrowList = reactive([])
const _getBorrowPage = () => {
  getBorrowPage(borrowPage).then(res => {
    borrowList.newPush(res)
  })
}
onMounted(() => {
  _getUserInfo()
  _getBorrowPage()
})
</script>

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

  .t {
    font-size: 36px;
    font-weight: 600;
    color: #111a34;
    margin-bottom: 4px;
  }
  .t2 {
    margin-top: 4px;
    font-size: 24px;
    color: #858b9c;
  }

}



</style>
