<template>
  <div id="app" class="bg-font-black">
    <van-overlay :show="is_neizhi" class="weixin_qq_jump">
      <div class="jump_img_box w-full h-full">
        <img class="jump_img" src="@/assets/img/nft_ly_jump.png" alt="">
      </div>
    </van-overlay>
    <van-overlay :show="appState.overlay.show" class="">
      <div class="overlay  items-start flex flex-col text-font-white w-full px-6 relative">
        <div class="text-xl py-12 pt-28">
          <div>发行NFT</div>
          <div>使版权更具价值</div>
        </div>
        <div class="bot w-11/12 mx-auto">
          <div class="grid grid-cols-4 w-full gap-4">
             <div class="flex flex-col items-center content-center" @click="goNTF({url:'createNft',id:'1'})">
              <app-icon name="icon-juben" size="26px" class='icon-box bg-app-red rounded-full mx-auto'></app-icon>
              <div class=" text-xs py-3">剧本</div>
            </div>
            <div class="flex flex-col items-center content-center" @click="goNTF({url:'createNft',id:'2'})">
              <app-icon name="icon-xiaoshipin" size="26px" class='icon-box bg-app-red rounded-full mx-auto'></app-icon>
              <div class=" text-xs py-3">视频</div>
            </div>
             <div class="flex flex-col items-center content-center">
              <app-icon name="icon-dianying" size="26px" class='icon-box bg-icon-bg rounded-full mx-auto'></app-icon>
              <div class=" text-xs py-3">电影</div>
            </div>
             <div class="flex flex-col items-center content-center">
              <app-icon name="icon-yinle" size="26px" class='icon-box bg-icon-bg rounded-full mx-auto'></app-icon>
              <div class=" text-xs py-3">音频</div>
            </div>
            <div class="flex flex-col items-center content-center" @click="goNTF({url:'createNft',id:'5'})">
              <app-icon name="icon-a-tupian" size="26px" class='icon-box bg-app-red rounded-full mx-auto'></app-icon>
              <div class=" text-xs py-3">图片</div>
            </div>
             <div class="flex flex-col items-center content-center">
              <app-icon name="icon-zhoubian" size="26px" class='icon-box bg-icon-bg rounded-full mx-auto'></app-icon>
                 <div class=" text-xs py-3">衍生品</div>
            </div>
             <div class="flex flex-col items-center content-center">
              <app-icon name="icon-qita" size="26px" class='icon-box bg-icon-bg rounded-full mx-auto'></app-icon>
                 <div class=" text-xs py-3">其他</div>
            </div>
          </div>
          <div class='flex justify-center my-12'>
            <div @click="closeNFT">
              <app-icon name="icon-shanchu" size="18px"></app-icon>
            </div>
          </div>
        </div>
      </div>
      <van-popup v-model="showGoSafe" class=" bg-font-light-black pt-3 pb-10 rounded-lg text-white w-3/4">
          <div class=" text-font-dark-blue pl-5 pr-5 h-10 border-b border-table-light-blue flex items-center justify-between">
            <div>温馨提示</div>
            <div>
              <img class=" w-7" src="/img/closeBtn.2ecdb438.svg" alt="" @click="showGoSafe=false">
            </div>
          </div>
          <div class=" text-sm mt-5 pl-5 pr-5">您需要通过实名认证后才能发行NFT哦！</div>
          <div class=" w-20 h-8 leading-8 rounded-full mx-auto bg-font-blue text-center mt-5" @click="gotoSafe()">去认证</div>
      </van-popup>
    </van-overlay>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Overlay,Popup } from "vant";
import { token } from '@/util/userInfoUtils'
Vue.use(Overlay);
Vue.use(Popup);
export default Vue.extend({
  components: {
    "app-icon": () => import("./components/common/Icon.vue"),
  },
  data(){
    return {
      showGoSafe:false
    }
  },

  name: "App",
  mounted() {
    this.routerController();
  },
  methods: {
    routerController() {
      if (this.$route.name !== "Home") {
        // this.$router.push("Home");
      }
    },
    closeNFT(){
      this.$store.commit('app/TOGGLE_OVERLAY')
    },
    goNTF(obj:{url:string,id:string} ){
      /**
       * 判断是否登录
       */
      if(!token.getToken()){
        this.$router.push('/auth/login')
        this.closeNFT()
        return 
      }
      /**
       * 这里还需要判断是否实名，已实名才能发行NFT
       */
      const isCertificate = localStorage.getItem('isCertificate')
      if(!isCertificate || isCertificate !== 'true') {
        this.showGoSafe = true
        // this.$toast('对不起，请先进行实名认证~')
        return 
      }

      this.$router.push({
        name:obj.url,
        query:{
          id:obj.id
        }
      })
      this.closeNFT()
    },
    gotoSafe(){
      this.showGoSafe = false
      this.closeNFT()
      this.$router.push('/safe')
    }
  },
  computed: {
    appState: function () {
      return this.$store.state.app;
    },
    is_neizhi(){
      const ua = navigator.userAgent.toLowerCase() as any;
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
          return "weixin";
      } else if (ua.match(/QQ/i) == "qq") {
          return "QQ";
      }
      return false;
    }
  },
});
</script>

<style lang="less">
#app {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  .weixin_qq_jump {
    position: relative;
    .jump_img_box {
      .jump_img {
        height: calc(100vh);
        width: calc(100vw);
      }
    }
  }
}
.overlay{
  height: 100vh;
  width: 100vw;
  // overflow-y: scroll;
  .bot{
    position: absolute;
    bottom:100px;
    left: 5%;
    // padding-bottom: 100px;
  }
}
.icon-box{
  padding: 15px;
}
</style>
