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

<template>
  <view class="withdrawal-type-edit-page pb-100 min-h-screen">
    <template v-if="Number(userStore.userInfo?.member_certification) === 0">
      <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.credentials_name"
          />
        </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.credentials_number"
          />
        </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">
          提交
        </button>
      </view>
    </template>
    <template v-else-if="Number(userStore.userInfo?.member_certification) === 2">
      <image
        src="@/static/images/page-sub/realname/realname-checking.png"
        class="w-150 mx-auto h-150 block"
        mode="aspectFit"
      />
      <view class="text-center mt-15 text-14 text-#999">您的实名认证正在审核中，请耐心等待</view>
      <button class="btn-gradient px-30 text-white rounded-full m-15 text-16" @click="onBack">
        返回
      </button>
    </template>
    <template v-else-if="Number(userStore.userInfo?.member_certification) === 1">
      <view class="flex flex-col items-center" v-if="false">
        <image
          src="@/static/images/page-sub/realname/realname-success.png"
          class="w-150 h-150 block"
          mode="aspectFit"
        />
        <view class="text-center mt-15 text-14 text-#999">恭喜您，实名认证成功</view>
        <button class="btn-gradient px-30 text-white rounded-full m-15 text-16" @click="onBack">
          返回
        </button>
        <!--
        <image
          src="@/static/images/page-sub/realname/realname-checking.png"
          class="w-150 h-150 block"
          mode="aspectFit"
        />
        <view class="text-center mt-15 text-14 text-#999">您的实名认证审核未通过，请重新提交</view>
        <button class="btn-gradient px-30 text-white rounded-full m-15 text-16">重新提交</button> -->
      </view>
    </template>
  </view>
</template>

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

const userStore = useUserStore()
const notSubmit = ref(true)

const form = ref({
  credentials_name: '',
  credentials_number: '',
})

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

const onSubmit = async () => {
  if (!form.value.credentials_name || !form.value.credentials_number) {
    await showModal('请填写完整信息')
    return
  }
  await createAuthUser(form.value)
  notSubmit.value = false
}
</script>
<style lang="scss" scoped>
.withdrawal-type-edit-page {
  --wot-input-placeholder-color: #889bc6;
  --wot-cell-wrapper-padding: 0;
}
</style>
