<template>
  <div>
    <j-nav-bar v-if="!useEdit" />
    <van-signature v-if="!useEdit" @submit="onSubmit" @clear="onClear" />
    <div class="my-signature">{{ $t('app.my') + $t('app.signature') }}：</div>
    <van-image class="my-signature-image" v-if="userInfo.signature" :src="userInfo.signature" />
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref, onMounted} from 'vue';
import {showToast} from "vant";
import {useRouter} from "vue-router";
import {getBorrowPage, getUserInfo, updateCustomerCard} from "@/api";
import {resetData} from "@/utils/dataUtil";
const image = ref('');
const onSubmit = (data) => {
  userInfo.signature = data.image;
  saveUserInfoBtn()
};

const borrowPage = {
  pageNum: 0,
  pageSize: 3,
}
const useEdit = ref(true)
const _getBorrowPage = () => {
  getBorrowPage(borrowPage).then(res => {
    useEdit.value = res.length !== 0;
  })
}

const onClear = () => showToast('clear');

const userInfo = reactive({
  signature: ''
})
const router = useRouter()
const saveUserInfoBtn = () => {
  updateCustomerCard(userInfo).then(res => {
    console.log('')
    router.back()
  })
}
const _getUserInfo = () => {
  getUserInfo().then(res => {
    resetData(userInfo, res)
  })
}
onMounted(() => {
  _getUserInfo()
  _getBorrowPage()
})
</script>

<style lang="scss" scoped>
.my-signature {
  padding: 20px;
}
.my-signature-image {
  margin: 20px;
  background: #fff;
  border-radius: 10px;
}
</style>
