<template>
  <div id="app" class="bg-font-black">
    <van-overlay :show="appState.overlay.show">
      <div class="overlay flex flex-col items-start 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('create')">
              <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">
              <app-icon name="icon-xiaoshipin" 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-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">
              <app-icon name="icon-a-tupian" 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-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-overlay>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Overlay } from "vant";

Vue.use(Overlay);
export default Vue.extend({
  components: {
    "app-icon": () => import("./components/common/Icon.vue"),
  },

  name: "App",
  mounted() {
    this.routerController();
  },
  methods: {
    routerController() {
      if (this.$route.name !== "Home") {
        // this.$router.push("Home");
      }
    },
    closeNFT(){
      this.$store.commit('app/TOGGLE_OVERLAY')
    },
    goNTF(routes:string){
      this.$router.push(`/Nft/${routes}`)
      this.closeNFT()
    }
  },
  computed: {
    appState: function () {
      return this.$store.state.app;
    },
 
  },
});
</script>

<style lang="less">
#app {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}
.overlay{
  height: 100vh;
  width: 100vw;
  .bot{
    position: absolute;
    top:55%;
    left: 5%;

  }
}
.icon-box{
  padding: 15px;
}
</style>
