<template>
  <j-nav-bar/>
  <div class="header">
    <div class="header-bj">
      <div class="header-head" :style="{'--bg-image': `url(${headerImage}) no-repeat`}"></div>
      <div class="header-text">{{ customerInfo.nickName }}</div>
    </div>
  </div>
  <div class="content">

    <div class="action">
      <van-cell title="我的资料" is-link to="userInfo" >
        <template #icon>
          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">
            <van-icon :name="getAssetsImages('my/my_info.png')" />
          </div>
        </template>
      </van-cell>
      <van-cell title="我的借款" is-link to="myLoan" >
        <template #icon>
          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">
            <van-icon :name="getAssetsImages('my/my_info1.png')" />
          </div>
        </template>
      </van-cell>
      <van-cell title="我的还款" is-link to="myRepayment" >
        <template #icon>
          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">
            <van-icon :name="getAssetsImages('my/my_info2.png')" />
          </div>
        </template>
      </van-cell>
<!--      <van-cell title="获取开户权限" is-link to="" >-->
<!--        <template #icon>-->
<!--          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">-->
<!--            <van-icon name="/src/assets/images/my/my_info3.png" />-->
<!--          </div>-->
<!--        </template>-->
<!--      </van-cell>-->
      <van-cell title="法律责任" is-link @click="go('/agreement', 'lawAgreement')" >
        <template #icon>
          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">
            <van-icon :name="getAssetsImages('my/my_info4.png')" />
          </div>
        </template>
      </van-cell>
<!--      <van-cell title="签名" is-link @click="go('/signature', null)" >-->
<!--        <template #icon>-->
<!--          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">-->
<!--            <van-icon name="invitation" />-->
<!--          </div>-->
<!--        </template>-->
<!--      </van-cell>-->
<!--      <van-cell title="我的合同" is-link @click="go('/contract', null)" >-->
<!--        <template #icon>-->
<!--          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">-->
<!--            <van-icon name="completed" />-->
<!--          </div>-->
<!--        </template>-->
<!--      </van-cell>-->
    </div>
    <div class="action">
      <van-cell title="修改密码" is-link to="uploadPassword" >
        <template #icon>
          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">
            <van-icon :name="getAssetsImages('my/my_info5.png')" />
          </div>
        </template>
      </van-cell>
      <van-cell title="退出登录" is-link @click="logout" >
        <template #icon>
          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">
            <van-icon :name="getAssetsImages('my/my_info66.png')" />
          </div>
        </template>
      </van-cell>
    </div>
  </div>
</template>

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

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

const headerImage = ref('https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg')

const logout = () => {

  showConfirmDialog({
    title: '提示',
    message: '您确定要退出登录吗',
    width: '500px'
  })
    .then(() => {
      userStore.logout().then(res => {
        router.push({
          path: '/login'
        })
      })
    })
    .catch(() => {
      // on cancel
    });
}

const go = (url, key) => {
  // agreement
  router.push({
    path: url,
    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)
  })
}

onMounted(() => {
  _getCustomerInfo()
})
</script>

<style scoped lang="scss">

.header {
  background: #151515;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: end;
  overflow: hidden;

  &-bj {
    background: url("../../../assets/images/my/user_card.png") no-repeat;
    background-size: 100% 100%;
    height: 330px;
    width: 666px;
    transform: translateY(80px);
    display: flex;
    align-items: center;
    flex-flow: column;
    .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%;
    }
    .header-text {
      font-size: 38px;
      font-weight: bold;
      color: #111a34;
      transform: translateY(-60px);
    }
  }
}

.content {

  .action {
    margin: 20px;
    border-radius: 20px;
    overflow: hidden;
    //
  }
}

</style>