<template>
    <Layout-Child>
        <div class=" mt-10 px-4 h-screen pb-48 overflow-y-scroll" v-if="currentStep == 1 || currentStep == 2">
            <input type="file"  class="upload hidden" ref='localImgElem' @change="handleFileChange('localImgElem')"/>
            <input type="file"  capture="camera" class="upload hidden" ref='cameraElem' @change="handleFileChange('cameraElem')"/>
            <div class="certificationBG bg-opacity-20 rounded-xl pt-10 pb-10">
                <div class=" text-font-dark-blue text-center text-sm">完成实名认证，需要您上传身份证照片：</div>
                <div class=" w-4/5 mx-auto mt-6">
                    <div class=" h-44 rounded-xl p-3 idCardDefault" @click="initUpload('top')" v-if="!topImgUrl">
                        <img src="/img/idCardTop.png" alt=""  class=" w-full h-full rounded-xl">
                    </div>
                    <div class=" h-44  rounded-xl" @click="initUpload('top')" v-else>
                        <img :src="topImgUrl" alt=""  class=" w-full h-full rounded-xl">
                    </div>
                    <div class="text-white text-center mt-3 text-md">请上传人像面照片</div>
                </div>
                <div class=" w-4/5 mx-auto mt-6">
                    <div class=" h-44 rounded-xl p-3 idCardDefault" @click="initUpload('bottom')" v-if="!bottomImgUrl">
                        <img src="/img/idCardBottom.png" alt=""  class=" w-full h-full rounded-xl">
                    </div>
                    <div class=" h-44 rounded-xl" @click="initUpload('bottom')" v-else>
                        <img :src="bottomImgUrl" alt=""  class=" w-full h-full rounded-xl">
                    </div>
                    <div class="text-white text-center mt-3 text-md">请上传国徽面照片</div>
                </div>
            </div>
            <div class=" text-center text-font-red mt-5">实名信息提交后不可修改，请谨慎选择。</div>
            <app-btn
              :text="btnText"
              class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue"
              :disabled="btnDisabled"
              border="none"
              @btnClicked="nextStep()"
            ></app-btn>
            <van-action-sheet v-model="showSheet" :actions="actions" @select="onSelect" />
        </div>
        <div v-else-if="currentStep == 3" class="text-center mt-5 pt-36">
            <!-- 成功 -->
            <div class=" text-font-dark-blue" v-if="resultStatus == true">
                <div class="">
                    <img src="/img/certification.png" alt="" class=" w-1/6 mx-auto">
                </div>
                <div class=" text-font-red text-xl mt-5">已实名</div>
                <div class=" mt-10">姓名：<span>{{successInfo.name.substring(0,1)+(successInfo.name.length == 2?'*':'**')}}</span></div>
                <div class=" mt-2">身份证号：<span>{{successInfo.id.toString().slice(0,1)+'****************'+successInfo.id.toString().slice(-1)}}</span></div>
            </div>
            <!-- 失败 -->
            <div v-else class=" text-white">
                <div>
                    <img src="@/assets/img/earth.png" alt="" class=" w-3/6 mx-auto">
                </div>
                <div class="text-xl mt-16">很遗憾，您未通过人工审核</div>
                <div class=" w-2/6 bg mx-auto bg-font-blue bg-opacity-80 h-10 leading-10 rounded-3xl mt-16" @click="resetStep()">重新提交资料</div>
            </div>
        </div>
    </Layout-Child>
</template>

<script lang="ts">
import Vue from 'vue';
import { ActionSheet } from 'vant';

Vue.use(ActionSheet);
export default Vue.extend({
  data(){
      return {
          btnText:'确认',
          currentType:'top',
          currentStep: 1,
          showSheet: false,
          actions: [
            { name: '本地相册'},
            { name: '拍照'},    
          ],
          topImgUrl:'',
          topImg:'',
          bottomImgUrl:'',
          bottomImg:'',
          resultStatus: false,
          successInfo:{
              name:'',
              id:''
          }
      }
  },
  mounted(){
      const isAuth = localStorage.getItem('isCertificate')
      if(isAuth == 'true') {
          this.currentStep = 3
          this.resultStatus = true
          this.successInfo.name = JSON.parse(localStorage.getItem('authInfo') as string).name || ''
          this.successInfo.id = JSON.parse(localStorage.getItem('authInfo') as string).idCard || ''
      }
  },
  components:{
       'Layout-Child':()=>import('@/layout/Child.vue'),
       "app-btn": () => import("@/components/common/Btn.vue"),
  },
  computed:{
      btnDisabled():Boolean{
          if(!this.topImgUrl || !this.bottomImgUrl){
              return true
          }else if(this.currentStep == 2) {
              return true
          }else {
              return false
          }
      },
  },
  methods:{
      async nextStep(){
          this.currentStep ++
          this.btnText = '审核中'
          const res = await this.$service.nftService.certificateByIdcard(this.topImg as any,this.bottomImg as any)
          console.log('认证结果',res)
          if(res && res.result == 0){
              this.resultStatus = true
              this.successInfo.name = res.name
              this.successInfo.id = res.idCard
              localStorage.setItem('isCertificate','true')
              localStorage.setItem('authInfo',JSON.stringify(res))
          }else if (res && res.result != 0){
              this.$toast(res.describetion)
          }
          this.currentStep ++
          this.btnText = '确认'
      },
      initUpload(type:string){
          if(this.currentStep == 2) {
              return
          }
          this.showSheet = true
          this.currentType = type
      },
      onSelect(item:File){
        this.showSheet = false;
        let cEl =this.$refs.cameraElem as HTMLInputElement
        let fEl =this.$refs.localImgElem as HTMLInputElement
        switch(item.name){
            case '拍照':
                cEl.click();
              break;  
            case '本地相册':
                fEl.click();
              break;
        }
      },
    handleFileChange(ref:any) {
      const ele = this.$refs[ref] as HTMLInputElement;
      const files = ele.files as FileList;
      if(!files[0]) {
        return
      }
      //限制类型
      const type_name = files[0].name.substring(files[0].name.lastIndexOf('.'),files[0].name.length)
      if(['.png','.jpg','.jpeg','.PNG','.JPG','.JPEG'].indexOf(type_name) == -1) {
         this.$toast('请上传指定类型文件~')
         ele.value = ''
         return
      }
      if (files && files.length >= 1) {
          switch(this.currentType){
              case 'top':
                this.topImgUrl = window.URL.createObjectURL(files[0])
                this.topImg = files[0] as any
                ele.value = ''
                return
              case 'bottom':
                this.bottomImgUrl = window.URL.createObjectURL(files[0])
                this.bottomImg = files[0] as any
                ele.value = ''
                return 
              default:
                  return;
          }
      }
    },
    resetStep(){
        this.currentStep = 1
    }
  }
});
</script>

<style scoped>
.certificationBG {
    background-color:#152150;
}
.idCardDefault {
   background: #2B3661;
}
</style>

