<template>
    <Layout-Main class='page-scroll pb-20'> 
        <div class='user-info w-11/12 mx-auto flex text-font-white  items-center py-8 overflow-y-scroll'>
            <div class='w-3/12 pr-5'>
                <van-image
                width="80"
                height="80"
                lazy-load
                show-loading
                show-error
                round
                fit="cover"
                :src='getUserInfo.avatar?getUserInfo.avatar:"/img/mokeImg/avatar.png"'
                />
            </div>
            <div class='w-9/12 info flex-grow'>
                <div class='name-box flex justify-between'>
                    <div class=' text-lg'>{{getUserInfo.nickname?getUserInfo.nickname:getUserInfo.telephone}}</div>
                    <div class=' text-sm flex items-center'>
                        <div @click='goUserSet'>个人中心</div>
                        <app-icon name="icon-xiayibu"></app-icon>
                    </div>
                </div>
                <div class='tags flex py-2' v-if="hadToken">
                    <!-- <app-tag text='编剧' :id='1' class="bg-app-red " :clickable='false'></app-tag> -->
                </div>
                <div class='intro text-2xs line-clamp-1 text-font-gray'>
                   {{getUserInfo.signature?getUserInfo.signature:'这个人很懒，什么也没留下'}}
                </div>
            </div>
        </div>
        <div class='app-icons w-11/12 mx-auto grid grid-cols-4 gap-4'>
            <div v-for="(i,index) in apps" :key="index" class="flex justify-center">
                <div class="flex flex-col items-center gap-y-2">
                    <div class="flex  content-center">
                        <!-- <app-icon :name="i.icon" size='24px' class='p-5 bg-table-light-blue shadow-md rounded-full'></app-icon> -->
                        <img :src="i.icon" alt="">
                    </div>
                    <div class='text-xs text-font-white'>
                        {{i.text}}
                    </div>
                </div>
            </div>
        </div>
        <div class='amount-card w-11/12 mx-auto rounded-t-lg  bg-cardBG bg-cover bg-no-repeat  h-36 py-3 px-2 text-font-white mt-8'>
            <div class='flex justify-between'>
                <div>我的NFT</div>
                <div>数量（个）</div>
            </div>
            <div class='pt-8  pb-4 text-2xl flex items-center content-end justify-end'  @click="navigateTo('/Nft/MyList')">
                    {{userData.size}}
                <app-icon name="icon-xiayibu"></app-icon>
            </div>
        </div>
        <div class='cells w-11/12 mx-auto text-font-white mt-3'>
            <app-cell text='收藏' boxType='border' labelIcon='icon-heart' icon='icon-xiayibu' @click.native='cellClick("Collection")'></app-cell>
            <app-cell text='安全中心' boxType='border' labelIcon='icon-anquanzhongxin89' icon='icon-xiayibu' @click.native='$router.push({name:"Deving"})'></app-cell>
            <app-cell text='联系我们' boxType='border' labelIcon='icon-lianxiwomen' icon='icon-xiayibu' @click.native='$router.push({name:"Contact"})'></app-cell>
            <app-cell text='设置' boxType='border' labelIcon='icon-setting' icon='icon-xiayibu' @click.native='$router.push({name:"Deving"})'></app-cell>
            <div class='h-16'></div>
        </div>
    </Layout-Main>
</template>

<script lang="ts">
import Vue from 'vue';
import { Badge } from 'vant';
import { token } from '@/util/userInfoUtils'
import anquanzhongxin89 from "../../assets/img/img-anquanzhongxin89.png"
import chakan from "../../assets/img/img-chakan.png"
import atupian from "../../assets/img/img-a-tupian.png"
import bossyingyetingchushi from "../../assets/img/img-BOSS-yingyeting-chushi.png"

Vue.use(Badge)
const apps=[
    {
        text:'版权授权',
        icon: anquanzhongxin89
    },
    {
        text:'区块链浏览器',
        icon: chakan
    },
        {
        text:'制片管理',
        icon: atupian
    },
        {
        text:'我的投资',
        icon: bossyingyetingchushi
    },
]

export default Vue.extend({
    data() {
        return{
            apps,
            userData:{},
        }
    },
    async mounted() {
       if(!token.getToken()) return 
       this.userData = await this.$service.nftService.getMyList()
       
    },
  components:{ 
    'Layout-Main':()=>import('@/layout/Main.vue'),
    'app-icon':()=>import('@/components/common/Icon.vue'),
    // 'app-tag':()=>import('@/components/common/Tag.vue'),
    'app-cell':()=>import('@/components/common/Cell.vue')
  }, 
  name: 'Mine',
  methods:{
    search(){
      console.log(11);
      
    },
    info(){
      console.log(222);
      
    },
    navigateTo(url:string){
        this.$router.push(url)
    },
    cellClick(item:string){
       this.$router.push(item)
    },
    goUserSet(){
        if(!token.getToken()) {
            this.$router.push('/auth/Login')
            return 
        }
        this.$router.push('/User')
    }
  },
  computed:{
      getUserInfo(){
         return this.$util.userMsg.getUserMsg()     
      },
      hadToken(){
          return token.getToken()
      },
  }
});
</script>
