<template>
        <div class='flex items-center justify-around pb-6 pt-3 bg-white text-font-white text-2xs shadow' >
            <div class='flex flex-col items-center' @click="setNav('Home')">
                <app-icon name='icon-shouye' size='22px' :color='actived==="Home"?"#707070":"#cdcdcd"'></app-icon>
                <!-- <div class='mt-2' :class='actived==="Home"?" text-font-blue":" text-white"'>大厅</div> -->
            </div>
            <div class='flex flex-col items-center relative' @click="goNFT">
                <app-icon name='icon-fahangnft' size='33px' color="#2b446c"></app-icon>
                <!-- <div class=' absolute -top-12 rounded-full p-5  bg-app-red mx-auto  shadow-nav text-center'>
                    <app-icon name='icon-NFTfahang' size='28px' color='#fff' ></app-icon>
                </div>
                <div class='mt-8 text-font-red'>发行NFT</div> -->
            </div>
            <div class='flex flex-col items-center' @click="setNav('Mine')">
                <app-icon name='icon-wode' size='22px' :color='actived==="Mine"?"#707070":"#cdcdcd"'></app-icon>
                <!-- <div class='mt-2' :class='actived==="Mine"?" text-font-blue":" text-white"'>我的</div> -->
            </div>
            <van-popup v-model="show" class=" w-4/6 text-center text-zx-blue-light rounded-md py-2">
                <div class=" leading-5 mt-3 text-base">缓存提示</div>
                <div class=" w-10/12 mx-auto mt-3 leading-5">检测到缓存数据，是否使用缓存数据?</div>
                <div class="flex justify-around">
                  <app-btn text="不使用缓存" border="none" class=" text-font-white bg-zx-blue-light" @btnClicked="deleteTemp()"></app-btn>
                  <app-btn text="使用缓存" border="none" class=" text-font-white bg-zx-blue-light" @btnClicked="useTemp()"></app-btn>
                </div>
            </van-popup>
        </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { token } from '@/util/userInfoUtils'
import { Popup } from 'vant'

Vue.use(Popup)
export default Vue.extend({
  name: 'layout_one',
  data(){
      return{
          actived:this.$route.name,
          show: false,
          temp: {} as any 
      }
  },
  components:{
      'app-icon':()=>import('@/components/common/Icon.vue'),
      "app-btn": () => import("@/components/common/Btn.vue"),
  },
  methods:{
      async goNFT(){
        if(!token.getToken()){
          this.$router.push('/auth/login')
          return 
        }
        this.temp = await this.$service.nftService.getTemp()
        if(this.temp){
            this.show = true
        }else {
            this.goCreateNFT()
        }
      },
      async deleteTemp(){
        await this.$service.nftService.deleteTemp()
        this.show = false
        this.goCreateNFT()
      },
      useTemp(){
        this.show = false
        this.$store.commit("create/SET_STATE", {
            tempData: this.temp || {}
        });
        this.goCreateNFT()
      },
      setNav(item:any){
          if(this.$route.name != item){
              this.actived = item
              this.$router.push(`/${item}`)
          }
      },
      goCreateNFT(){
        this.$router.push({
            name:'createNft',
            query:{
              id:'1'
            }
        })         
      }
  }
});
</script>

<style lang="less">

</style>
