<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">
        确认借款信息
      </view>
      <van-cell title="借款金额" title-style="color: #8997ae;" style="--van-cell-value-color: #000" :value="toRoundMark(loansInfo.totalLoanMoney)" />
      <van-cell title="借款期限" title-style="color: #8997ae;" style="--van-cell-value-color: #000" :value="loansInfo.totalMonth + '个月'" />
      <van-cell title="到账银行" title-style="color: #8997ae;" style="--van-cell-value-color: #000" :value="userInfo.bankType" />
      <van-cell title="收款账号" title-style="color: #8997ae;" style="--van-cell-value-color: #000" :value="backCardNumDesensitization(userInfo.backCardNum)" />
    </div>

    <div class="action">
      <view class="tt">
        借款用途
      </view>
      <van-field
        v-model="loansInfo.noteRemark"
        rows="5"
        autosize
        type="textarea"
        placeholder="请输入你的借款用途"
      />
    </div>
    <div class="xieyi">
      <van-checkbox v-model="checked" :icon-size="px2vw(28)" style="align-items: baseline" checked-color="linear-gradient(to right, #F9D88D, #D2A64C)">
        我已阅读并同意
        <span class="yellow_color1" @click.stop="go('loansAgreement')">《借款协议》</span>
      </van-checkbox>
    </div>


    <div style="padding: 0 20px 60px">
      <van-button
        color="linear-gradient(to right, #D2A64C, #F9D88D)"
        round
        style="width: 100%; "
        @click.stop="saveUserInfoBtn"
        :disabled="!checked"
      >
        提交申请
      </van-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {px2vw, toRoundMark} from "@/utils";
import {useUserStore} from "@/store/modules/user";
import {getUserInfo, startBorrow} from "@/api";
import {resetData} from "@/utils/dataUtil";
import {showConfirmDialog, showToast} from "vant";

const useUser = useUserStore()
const router = useRouter()
const route = useRoute()

const loansInfo = reactive({
  "customerId": useUser.getUserInfo.id,
  "noteRemark": "",
  "totalLoanMoney": 0,
  "totalMonth": 0
})

const checked = ref(false);
const go = (key) => {
  // agreement
  router.push({
    path: '/agreement',
    query: {
      key: key
    }
  })
}


const saveUserInfoBtn = () => {

  showConfirmDialog({
    title: '提示',
    message: '您确定要申请贷款吗',
    width: '500px'
  })
    .then(() => {
      startBorrow(loansInfo).then(res => {
        showToast('申请成功')
        router.push({
          path: '/serveList'
        })
      })
    })
    .catch(() => {
      // on cancel
    });
}
const userInfo = reactive({
  backCardNum: '',
  bankType: '',
  cardBackPicture: '',
  cardFrontPicture: '',
  cardNum: '',
  companyAddress: '',
  companyAddressInfo: '',
  companyName: '',
  companyPhone: '',
  companyTitle: '',
  companyYear: '',
  customerAddress: '',
  customerAddressInfo: '',
  customerId: 0,
  id: 0,
  kinsfolkName: '',
  kinsfolkPhone: '',
  kinsfolkRef: '',
  kinsfolkRefText: '',
  realName: ''
})
const _getUserInfo = () => {
  getUserInfo().then(res => {
    resetData(userInfo, res)
  })
}

// 收款账号脱敏
const backCardNumDesensitization = (backCardNum: string) => {
  const blen = backCardNum.length
  if (blen < 8) {
    return backCardNum
  }
  let str = ''
  for (let i = 0; i < blen - 7; i++) {
    str+='*'
  }

  return backCardNum.slice(0, 4) + str + backCardNum.slice(blen-3, blen)
}

onMounted(() => {
  loansInfo.totalLoanMoney = route.query.totalLoanMoney
  loansInfo.totalMonth = route.query.totalMonth
  _getUserInfo()
})

</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: center;
      text-align: center;
      background: #f6f9fd;
      color: #738aa4;
      padding: 20px 0;
    }
    //
  }

  .xieyi {
    padding: 30px 35px;
    font-size: 24px;
  }
}

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

</style>