<template>
  <div id="app" class="bg-font-black">
    <!-- 发行NFT的选项弹窗 -->
    <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" @click="goNTF({url:'createNft',id:'3'})">
              <app-icon name="icon-dianying" 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:'4'})">
              <app-icon name="icon-yinle" 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:'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" @click="goNTF({url:'createNft',id:'6'})">
              <app-icon name="icon-zhoubian" 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:'7'})">
              <app-icon name="icon-qita" size="26px" class='icon-box bg-app-red 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-cha" 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>
    <!-- 封面弹窗 -->
    <van-overlay :show="showDialog" class="weixin_qq_jump">
      <div class=" relative jump_img_box w-full h-full">
        <!-- <img v-if="is_neizhi"  class="jump_img" src="@/assets/img/nft_ly_jump.png" alt="">
        <img v-if="!is_neizhi" class="jump_img" src="@/assets/img/nft_ly_nojump.png" alt="">
        <div v-if="!is_neizhi" class="absolute z-30 top-5 right-5 text-white ">倒计时 ( {{countdownNum}} ) s</div> -->
        <img class="jump_img" src="@/assets/img/nft_ly_jump.png" alt="">
        <div class="absolute z-30 top-5 right-5 text-white ">倒计时 ( {{countdownNum}} ) s</div>
      </div>
    </van-overlay>
    <!-- 主要界面 -->
    <router-view></router-view>

    <!-- <van-overlay :show="showDialog" class="weixin_qq_jump">
      <div class=" relative jump_img_box w-full h-full">
        <div class="toast" v-if="showToast">
          请到默认浏览器中打开
        </div>
        <img class="jump_img" src="@/assets/img/nft_ly_nojump.png" alt="">
        <div v-if="!is_neizhi" class="absolute z-30 top-5 right-5 text-white ">倒计时 ( {{countdownNum}} ) s</div>
        <div class="dowload_box">
          <div class="download_btn" @click="downloadApple">
            <app-icon name="icon-pingguo" color="#3E47D0" size="28px" class='phone_icon'></app-icon>
            Iphone版下载
          </div>
          <div class="download_btn" @click="downloadAnzhuo">
            <app-icon name="icon-anzhuo" color="#3E47D0" size="28px" class='phone_icon'></app-icon>
            Andriod版下载
          </div>
        </div>
      </div>
    </van-overlay> -->
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Overlay,Popup } from "vant";
import { token } from '@/util/userInfoUtils'
import { is_neizhi } from "@/util/common"
Vue.use(Overlay);
Vue.use(Popup);
export default Vue.extend({
  components: {
    "app-icon": () => import("./components/common/Icon.vue"),
  },
  data(){
    return {
      // showDialog: this.$store.state.app.showOverImg,
      showGoSafe: false,
      countdownNum: 3,
      countdownFun: null as any,
      showToast: false,
      is_neizhi: is_neizhi()
    }
  },

  name: "App",
  mounted() {
    this.dialogStatus()
    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
        return 
      }

      this.$router.push({
        name:obj.url,
        query:{
          id:obj.id
        }
      })
      this.closeNFT()
    },
    gotoSafe(){
      this.showGoSafe = false
      this.closeNFT()
      this.$router.push('/safe')
    },
    dialogStatus(){
      // if(!is_neizhi()) {
        this.countdownFun = setInterval(()=>{
          this.countdownNum = this.countdownNum-1
          if(this.countdownNum <= 0) {
            this.$store.commit('app/SET_SHOWOVERIMG', false)
            clearInterval(this.countdownFun)
          }
        }, 1000)
      // } 
    },
    downloadAnzhuo(){
      if(is_neizhi()) {
        this.showToast = true
      }else {
        this.showToast = true
      }
      
    },
    downloadApple(){
      this.$toast('正在开发中...')
    }
  },
  computed: {
    appState: function () {
      return this.$store.state.app;
    },
    showDialog(){
      return this.$store.state.app.showOverImg
    },
    // is_neizhi(): any{
    //   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 {
      .toast {
        position: fixed;
        bottom: 0;
        left: 0;
        top: 0;
        right: 0;
        z-index: 200;
        text-align: center;
        padding-top: 40px;
        background-color: #000;
        opacity: 0.8;
        color: #fff;
        font-size: 18px;
      }
      .jump_img {
        height: calc(100vh);
        width: calc(100vw);
      }
      .dowload_box {
        position: fixed;
        bottom: 5%;
        left: 50%;
        z-index: 100;
        transform: translateX(-50%);
        .download_btn {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 20px;
          background-color: #fff;
          color: #3E47D0;
          text-align: center;
          font-size: 18px;
          border-radius: 40px;
          height: 40px;
          line-height: 40px;
          margin-bottom: 23px;
          .phone_icon {
            margin-right: 10px;
          }

        }
      }
    }
  }
}
.overlay{
  height: 100vh;
  width: 100vw;
  // overflow-y: scroll;
  .bot{
    position: absolute;
    bottom:100px;
    left: 5%;
    // padding-bottom: 100px;
  }
}
.icon-box{
  padding: 15px;
}
</style>
