<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '实名认证',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<template>
  <view class="withdrawal-type-edit-page pb-100 min-h-screen">
    <view class="p-15 m-15 shadow-[0_0_10px_rgba(10,68,245,0.1)] rounded-10">
      <view class="flex items-center py-15 text-14">
        <image src="@/static/images/page-sub/realname/realname-type.png" class="w-20 h-20" />
        <view class="ml-8">证件类型</view>
        <view class="flex-1 text-right text-14">身份证</view>
      </view>
      <view class="flex items-center py-15 text-14">
        <image src="@/static/images/page-sub/realname/realname-name.png" class="w-20 h-20" />
        <view class="ml-8">真实姓名</view>
        <input
          class="flex-1 text-right text-14"
          placeholder-class=" text-#889BC6 text-right"
          type="text"
          placeholder="请输入真实姓名"
          v-model="form.realname"
        />
      </view>
      <view class="flex items-center py-15 text-14">
        <image src="@/static/images/page-sub/realname/realname-number.png" class="w-20 h-20" />
        <view class="ml-8">身份证号</view>
        <input
          class="flex-1 text-right text-14"
          placeholder-class=" text-#889BC6 text-right"
          type="text"
          placeholder="请输入身份证号"
          v-model="form.cardnum"
        />
      </view>
    </view>
    <view class="fixed bottom-0 left-0 right-0 pb-safe">
      <button class="btn-gradient text-white rounded-full m-15 text-16" @click="onSubmit">
        {{ realnameInfo ? '修改' : '提交' }}
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { editRealNameAuthAPI, getRealNameAuthAPI, realNameAuthAPI } from '@/service'
import { useUserStore } from '@/store'
import { showModal } from '@/utils'
import { ref } from 'vue'

const form = ref({
  id: '',
  realname: '',
  cardnum: '',
})

const onBack = () => {
  uni.navigateBack()
}

const realnameInfo = ref(null)
const loadRealnameInfo = async () => {
  realnameInfo.value = await getRealNameAuthAPI().then((res) => {
    return res.data
  })
  if (realnameInfo.value) {
    form.value.realname = realnameInfo.value.realname
    form.value.cardnum = realnameInfo.value.cardnum
    form.value.id = realnameInfo.value.id
  }
}

const onSubmit = async () => {
  if (!form.value.realname || !form.value.cardnum) {
    await showModal('请填写完整信息')
    return
  }
  if (!/^\d{17}[\d|x]$/i.test(form.value.cardnum)) {
    await showModal('身份证号格式错误')
    return
  }
  if (form.value.id) {
    await editRealNameAuthAPI(form.value)
    await showModal('修改成功')
  } else {
    await realNameAuthAPI(form.value)
    await showModal('实名认证成功')
  }
  loadRealnameInfo()
}

onLoad(loadRealnameInfo)
</script>
<style lang="scss" scoped>
.withdrawal-type-edit-page {
  --wot-input-placeholder-color: #889bc6;
  --wot-cell-wrapper-padding: 0;
}
</style>
