<template>
   
  <div id="Child" class="bg-font-black ">
    <van-overlay :show="CodeData.show"  class='z-50'>
      <div class="code-confirm flex flex-row item-center content-center justify-center text-font-white h-full" @click.stop>
        <div class="self-center  rounded-lg" :class="!CodeData.onAction?'bg-font-light-black':''">
            <div class=" flex flex-col  text-font-white  p-6 px-10" v-if="!CodeData.onAction">
               <div class=' text-font-dark-blue flex justify-between'>
                 <div class="flex-1 text-center">安全验证</div>
                  <app-icon name="icon-shanchu"  size="8px" @click.native="closeOverlay"></app-icon>
               </div>
               <div class='text-xs my-1 mt-5'>验证码已发送到您绑定的手机</div>
               <input type="number"  class=" bg-font-black py-2 px-2 w-48 mb-3 rounded-md text-sm" v-model="codeValue" placeholder="请输入验证码">
               <div class=' text-font-dark-blue text-xs self-end'> <span v-if="!CodeData.resend"> {{CodeData.count}}秒后,重新发送</span> <span v-else class='text-font-blue' @click="resendCode"> 重新发送</span></div>
            </div>
            <div class="flex flex-col items-center w-full  justify-center" v-else>
              <breeding-rhombus-spinner
                      :animation-duration="2000"
                      :size="60"
                      :color="'#0078FF'"
                />
                <div class=" mt-6  text-font-dark-blue">NFT正在转出，请耐心等待...</div>
            </div>
        </div>
      </div>
    </van-overlay>
    <div class="fixed top-0 left-0 w-full bg-font-black bg-opacity-75  z-40">
      <NavHeader></NavHeader>
    </div>
    
    <div class=" pt-7">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import NavHeader from './NavHeader.vue'
import {BreedingRhombusSpinner} from 'epic-spinners'
export default Vue.extend({
  data(){
    return{
      codeValue:null
    }
  },
  watch:{
    async codeValue(newV,oldV){
      console.log(newV.length);
      if(newV.length==4){
        const {nftid,count,receiveWallet} =this.formData
        const data = {
          id:Number(nftid),
          count:Number(count),
          receiveWallet,
          code:Number(newV),
          codeType:'sms'
        }
        // console.log(data,this.formData);
        const req = await this.$store.dispatch('codeConfirmer/doTransfer',data)
        // console.log(req);
        if(req&&!req.message){
          this.$router.push({name:'Home'})
          this.$toast.success('NFT已经成功转出')
        }else{
          // this.$store.dispatch('codeConfirmer/codeError')
          // this.$toast.fail((req && req.data) || '发送失败')
          // console.log('//////',this.CodeData.onAction)
        }
      }else if(newV.length>4){
        this.codeValue = oldV
      }
    }
  },
  computed:{
    CodeData:function(){
      return this.$store.state.codeConfirmer
    },
    formData:function(){
      return this.$store.state.transfer
    },

  },
  name: 'layout_child',
  methods:{
    async resendCode(){
      const req = await this.$store.dispatch('codeConfirmer/getVertiryCode')
      console.log(req);
    },
    closeOverlay(){
      if(this.$store.state.codeConfirmer.show){
          this.$store.commit('codeConfirmer/ToggleCode')
      }
    }
  },
  components:{
    NavHeader,
    'app-icon':()=>import('@/components/common/Icon.vue'),
     'breeding-rhombus-spinner': BreedingRhombusSpinner
    // 'app-btn':()=>import('@/components/common/Btn.vue')
  }
});
</script>
