<template>
  <j-nav-bar color="#FFF" nav-bar-background="#F9BF3A" />
  <div class="content">
    <view class="bg-1">
      <view class="bg-1-1">
        <div class="header-head" :style="{'--bg-image': `url(${headerImage}) no-repeat`}"></div>
        <view class="bg-1-1-text">我的贷款：{{toRoundMark(customerInfo.borrowAccount)}}</view>
      </view>

      <view class="accountBalance" style="border-bottom: 1px #fff dashed;">
        <view class="yellow_color">账户余额（元）</view>
        <view class="money">{{ toRoundMark(customerInfo.account) }}</view>
      </view>

      <view class="accountBalance">
        <view class="yellow_color">待还款金额（元）</view>
        <view class="money">{{ toRoundMark(customerInfo.repaymentAccount) }}</view>
      </view>

      <view class="btn">

        <van-button
          color="#fff"
          round
          style="color: #e6a600;width: 80%"
          @click.stop="withdrawalBtn"
        >
          立即提现
        </van-button>
      </view>
    </view>

    <view class="footer">
      <view class="footer-t gray_color ">
        <van-icon :name="getAssetsImages('common/yhd.png')" size="18"/>
        账户资金安全由银行保障
      </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>
    </view>
  </div>
  <van-dialog :width="px2vw(650)" v-model:show="withdrawalShow" title="提现" show-cancel-button @confirm="saveUserInfoBtn">
    <van-field v-model="withdrawAmount" type="number" label="提现金额" placeholder="请输入你的提现金额"/>
  </van-dialog>
</template>

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


const router = useRouter()
const userStore = useUserStore()

const withdrawalShow = ref(false);
const withdrawAmount = ref(0);
const active = ref(0);
const headerImage = ref('https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg')


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


const customerInfo = reactive({
  "account": 0,
  "borrowAccount": 0,
  "id": 0,
  "lastLoginIp": "",
  "lastLoginTime": "",
  "loansFlag": 0,
  "nickName": "",
  "phoneNumber": "",
  "realNameAuth": 0,
  "repaymentAccount": 0,
  "status": 0,
  "updateTime": "",
  "withdrawFlag": 0
})
const _getCustomerInfo = () => {
  getCustomerInfo().then(res => {
    resetData(customerInfo, res)
  })
}

const stepBorrow = reactive({
  "borrowNameStyle": "",
  "borrowRemark": "",
  "borrowStep": [
    {
      "name": "提交成功",
      "over": true
    },
    {
      "name": "银行卡异常",
      "over": true
    },
    {
      "name": "到账成功",
      "over": false
    }
  ]
})
const _getStepBorrow = () => {
  getStepBorrow().then(res => {
    resetData(stepBorrow, res)
    stepBorrow.borrowStep.forEach((sb, index) => {
      if (sb.over) {
        active.value = index
      }
    })
  })
}

const withdrawalBtn = () => {

  withdrawalShow.value = true
  withdrawAmount.value = customerInfo.account
  // router.push({
  //   path: '/loansInfo1',
  //   query: {
  //     account: customerInfo.account
  //   }
  // })
}

const saveUserInfoBtn = () => {

  // showConfirmDialog({
  //   title: '提示',
  //   message: '您确定要提现吗',
  //   width: '500px'
  // })
  //   .then(() => {
      getBorrowWithdraw({withdrawAmount: withdrawAmount.value}).then(res => {
        showToast('提现成功')
        router.push({
          path: '/serveList'
        })
      })
    // })
    // .catch(() => {
    //   // on cancel
    // });
}


onMounted(() => {
  _getCustomerInfo()
  _getStepBorrow()
})

</script>

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

  .bg-1 {
    display: block;
    background: url("../../../assets/images/common/bg_wallet.png") no-repeat;
    background-size: 100% 100%;
    padding-top: 100px;
    width: 692px;
    height: 680px;
    margin: 0 auto;

    &-1 {
      display: flex;
      &-text {
        color: #111a34;
        font-weight: 600;
        font-size: 30px;
      }

      .header-head {
        height: 180px;
        width: 180px;
        border: 10px solid #f9c947;
        border-radius: 100px;
        background: #f9c947;
        transform: translateY(-90px);
        background: var(--bg-image);
        background-size: 100% 100%;
        margin-left: 45px;
        margin-right: 30px;
      }
    }
    .accountBalance {
      display: flex;
      flex-flow: column;
      align-items: start;
      padding-left: 80px;
      padding-top: 30px;
      padding-bottom: 30px;
      margin: 0 20px;
      transform: translateY(-70px);
      font-size: 40px;
      font-weight: bold;


      .yellow_color {
        color: #b25700;
      }
      .money {
        padding-top: 10px;
        font-size: 56px;
        color: #5c2d00;
      }

    }
    .btn {
      //padding-top: 100px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translateY(-70px);
    }

  }

  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
    flex-flow: column;
    &-t {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 15px;
      padding-bottom: 30px;
    }
    &-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;
        justify-content: space-between;
        padding: 20px;
        &-tit {
          display: block;
          width: 220px;
          margin-right: 30px;
        }
        &-content {
          display: block;
        }
      }
    }
  }
}

</style>
