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

<template>
  <view class="realname-page min-h-screen">
    <NavBar title-color="#333" />
    <template v-if="!realnameInfo">
      <view class="p-15 m-15 bg-white 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 class="py-15 text-14">
          <view class="flex items-center">
            <image src="@/static/images/page-sub/realname/realname-card.png" class="w-20 h-20" />
            <view class="ml-8">证件照片</view>
          </view>
          <view
            class="flex items-center justify-center mt-15 rounded-10 bg-#F1F9FC h-168 w-full"
            @click="onUploadZCardImage"
          >
            <view v-if="!zcardimage" class="text-center">
              <image src="@/static/images/page-sub/realname/upload-icon.png" class="w-40 h-40" />
              <view class="text-14 text-#999 mt-10">点击上传身份证正面</view>
            </view>
            <view v-else class="flex items-center">
              <image :src="zcardimage" class="w-315 h-168" mode="aspectFit" />
            </view>
          </view>
          <view
            class="flex items-center justify-center mt-15 rounded-10 bg-#F1F9FC h-168 w-full"
            @click="onUploadFCardImage"
          >
            <view v-if="!fcardimage" class="text-center">
              <image src="@/static/images/page-sub/realname/upload-icon.png" class="w-40 h-40" />
              <view class="text-14 text-#999 mt-10">点击上传身份证反面</view>
            </view>
            <view v-else class="flex items-center">
              <image :src="fcardimage" class="w-315 h-168" mode="aspectFit" />
            </view>
          </view>
        </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>

    <view v-else class="flex flex-col items-center">
      <template v-if="Number(realnameInfo.status) === 1">
        <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="userStore.logout"
        >
          退出登录
        </button>
      </template>
      <template v-else-if="Number(realnameInfo.status) === 2">
        <!-- <image
          src="@/static/images/page-sub/realname/realname-success.png"
          class="w-150 h-150 block"
          mode="aspectFit"
        /> -->
        <wd-status-tip image="comment" />
        <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="onGoHome">
          返回
        </button>
      </template>
      <template v-else>
        <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
          @click="() => (realnameInfo = null)"
          class="btn-gradient px-30 text-white rounded-full m-15 text-16"
        >
          重新提交
        </button>
      </template>
    </view>
  </view>
</template>

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

const userStore = useUserStore()

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

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

const onSubmit = mergeStep(async () => {
  if (!/^[\u4e00-\u9fa5·]{2,8}$/.test(form.value.realname)) {
    await showModal('姓名格式错误')
    return
  }

  if (!/^\d{17}[\d|x]$/i.test(form.value.cardnum)) {
    await showModal('身份证号格式错误')
    return
  }
  // if (!zcardimage.value || !fcardimage.value) {
  //   await showModal('请上传身份证照片')
  //   return
  // }
  const res = await realNameAuthAPI({
    ...form.value,
    // zcardimage: zcardimage.value,
    // fcardimage: fcardimage.value,
  })
  await showModal(res.msg ? res.msg : '提交成功,请耐心等待审核！')
  realnameInfo.value = await getRealNameAuthAPI().then((res) => {
    return res.data
  })
})

const onGoHome = () => {
  uni.reLaunch({
    url: '/',
  })
}

// const { data: zcardimage, run: onUploadZCardImage } = useUpload()
// const { data: fcardimage, run: onUploadFCardImage } = useUpload()

const realnameInfo = ref(null)
onLoad(async () => {
  realnameInfo.value = await getRealNameAuthAPI().then((res) => {
    return res.data
  })
})
</script>
<style lang="scss" scoped>
.realname-page {
  --wot-input-placeholder-color: #889bc6;
  --wot-cell-wrapper-padding: 0;
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: 200rpx;
  // background-repeat: no-repeat;
  // background-size: cover;
  background:
    url('@/static/images/brand-person.png') right 40rpx bottom / 60% no-repeat,
    linear-gradient(180deg, #fff3eb 0%, #ffffff 100%);
}
</style>
