<template>
<div>
<Layout-Child v-show="showTransfer" class="page-scroll">
    <div class='mt-6 w-11/12 mx-auto  break-all pb-60' @click="pageOnclick">
       <div class="flex flex-col  mb-6 text-font-dark-blue">
           <div class="label">
               NFT名称
           </div>
           <div class="value-container h-11 leading-10 bg-font-light-black px-3 mt-2 rounded">
               {{this.$route.query.nftName}}
           </div>
        </div> 
        <div class="flex flex-col  text-font-dark-blue">
           <div class="label">
               转出地址
           </div>
           <div class="value-container h-24  flex flex-row items-center  bg-font-light-black px-3 mt-2 rounded">
               <div>
                    <van-image
                        width="45"
                        height="45"
                        lazy-load
                        show-loading
                        show-error
                        round
                        fit="cover"
                        :src='this.$route.query.avatar?this.$route.query.avatar:"/img/mokeImg/avatar.png"'
                    />
               </div>
               <div class="pl-3 pr-8">
                   <div>{{this.$route.query.ownerName}}</div>
                   <div class=" text-xs">{{this.$route.query.from}}</div>
               </div>
           </div>
        </div> 

        <div class="flex flex-col  text-font-dark-blue mt-6">
           <div class="label">
               收款地址
           </div>
           <div class="value-container h-24  flex flex-row items-center relative  bg-font-light-black px-3  mt-2 rounded " :class='receiveOnfocus?"border border-font-blue":""' @click='inputOnclick' >
               <div >
                    <div class=" absolute right-3 top-10">
                        <app-icon name="icon-a-saoma1" size='24px' @click.native="goScalePage"></app-icon>
                    </div>
                    <van-image
                        width="45"
                        height="45"
                        lazy-load
                        show-loading
                        show-error
                        round
                        fit="cover"
                        :src='this.receiver.avatar?this.receiver.avatar:"/img/mokeImg/avatar.png"'
                    />
               </div>
               <div class=" pl-3 pr-8 w-10/12 ">
                    <input class="text-base bg-transparent bg-opacity-0 text-font-white w-6/12"  placeholder='接收人' :value="receiver.name" disabled/>
                   <input v-model="receiver.addr" class=" text-xs bg-transparent bg-opacity-0 text-font-white w-full" placeholder='请输入接收人地址'  ref="addrInput" @blur="searchUser"/>
               </div>
           </div>
        </div> 

        <div class=" text-font-dark-blue my-3">
            <div>转让须知</div>
            <ol class=" text-xs">
                <li class="my-1">1. 由持有人发起NFT转让，不涉及线上现金交易 </li>
                <li class="my-1">2. NFT成功转让后，无法撤销</li>
            </ol>
        </div>
    </div>
    <div class="fixed bottom-3 w-full left-0 z-30">
          <app-btn
            @click.native="submitTransfer"
            :disabled='validateUser'
            text="下一步"
            class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue"
            border="none"
          ></app-btn>
    </div>
</Layout-Child>
<camera v-if="showCamera" @ondata="getData" @onerror="getError"/>
</div>
</template>

<script lang="ts">

import Vue from 'vue';

export default Vue.extend({
    data(){
        return{
            receiveOnfocus:false,
            receiver:{
                name:'',
                addr:'',
                avatar:''
            },
            showTransfer: true,
            showCamera: false,
            codeData:''
        }
    },
 
  components:{
       'Layout-Child':()=>import('@/layout/Child.vue'),
       'app-icon':()=>import('@/components/common/Icon.vue'),
       'app-btn':()=>import('@/components/common/Btn.vue'),
       "camera":()=>import('./camera.vue')
  },
  methods:{
      inputOnclick(e:Event){
          e.preventDefault();
          e.stopPropagation();
          const input = this.$refs.addrInput as HTMLInputElement;
          if(!this.receiveOnfocus){
                this.receiveOnfocus = true;
                input.focus()
          }
      },
      pageOnclick(){
           const input = this.$refs.addrInput as HTMLInputElement;
          if(this.receiveOnfocus){
               this.receiveOnfocus = false;
              input.blur()
          }
      },
      goScalePage(e:Event){
          e.stopPropagation();
          this.showTransfer = false
          this.showCamera = true
      },
      getData(codeData:any){
          this.showTransfer = true
          this.showCamera = false
          const objCodeData = JSON.parse(codeData)
          console.log('原始数据',codeData)
          console.log('转化后数据',objCodeData )
          this.receiver.addr = objCodeData.wallet?objCodeData.wallet:''
          this.searchUser()
      },
      getError(errorMes:any){
          this.showTransfer = true
          this.showCamera = false
          this.$toast(errorMes)
        //   this.showCamera = false
      },
    submitTransfer(){
        if(this.validateUser) return
        const input = this.$refs.addrInput as HTMLInputElement;
        if(  this.receiveOnfocus){
            this.receiveOnfocus = false;
            input.blur()
        }else{
            let data = {
                count:1,
                receiveWallet:this.receiver.addr,
                receiveName:this.receiver.name,
                nftid:Number(this.$route.query.nftId),
                nftname:this.$route.query.nftName, 
                senderWallet:this.$route.query.from,
            }
            this.$store.commit('transfer/SET_STATE',data)
            console.log(this.$store.state.transfer);
            this.$router.push({ name:'NftTransfer_confirm'})
        }
      },
      async searchUser(){
            const {addr} = this.receiver
            if(addr.length>30){
                const req = await this.$service.userService.getUserInfoByAddr(addr) 
                console.log(req);
                if(req.wallet){
                    this.receiver.name = req.nickname?req.nickname:req.telephone
                    this.receiver.avatar = req.avatar
                }else{
                    this.$toast.fail('没有找到该用户')
                }
            }else{
                this.$toast.fail('请输入合法地址')
            }
      }
  },
  computed:{
      getUserInfo():any{
         return this.$util.userMsg.getUserMsg()     
      },
      validateUser(){
          const { addr,name} = this.receiver
          if(addr.length>30 && name.length>1){
              return false
          }else{
              return true
          }
      }
  }
});
</script>
