<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 bg-font-light-black rounded-lg">
            <div class=" flex flex-col  text-font-white  p-6 ">
               <div class=' text-font-dark-blue'>安全验证</div>
               <div class='text-xs my-1'>验证码已发送到您绑定的手机</div>
               <input type="number"  class=" bg-font-black py-2 px-1 w-48 my-3" 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'> 重新发送</span></div>
            </div>
            <!-- <div class='flex w-10/12 mx-auto justify-between'>
              <app-btn text="取消" class=" text-font-gray"></app-btn>
              <app-btn text="确认" class=' text-font-blue'></app-btn>
            </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'
export default Vue.extend({
  data(){
    return{
      codeValue:null
    }
  },
  watch:{
    codeValue(newV,oldV){
      console.log(newV.length);
      if(newV.length==4){
        console.log('send'); 
      }else if(newV.length>4){
        this.codeValue = oldV
      }
    }
  },
  computed:{
    CodeData:function(){
      return this.$store.state.codeConfirmer
    }
  },
  name: 'layout_child',
  components:{
    NavHeader,
    // 'app-btn':()=>import('@/components/common/Btn.vue')
  }
});
</script>
