<template>
    <Layout-Main class='page-scroll'> 
        <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'>
                <img src="/img/mokeImg/avatar.png" class='rounded-full w-18 object-fill' >
            </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'>
                    <app-tag text='编剧' :id='1' class=" bg-font-red" :clickable='false'></app-tag>
                </div>
                <div class='intro text-2xs line-clamp-1 text-font-gray'>
                   {{getUserInfo.intro?getUserInfo.intro:'这个人很懒，什么也没留下'}}
                </div>
            </div>
        </div>
        <div class='app-icons w-11/12 mx-auto grid grid-cols-4 gap-4 my-3'>
            <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>
                    </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-app-red 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' @onClick='cellClick("Collection")'></app-cell>
            <app-cell text='安全中心' boxType='border' labelIcon='icon-anquanzhongxin89' icon='icon-xiayibu' @onClick='cellClick'></app-cell>
            <app-cell text='联系我们' boxType='border' labelIcon='icon-lianxiwomen' icon='icon-xiayibu' @onClick='cellClick'></app-cell>
            <app-cell text='设置' boxType='border' labelIcon='icon-setting' icon='icon-xiayibu' @onClick='cellClick'></app-cell>
            <div class='h-16'></div>
        </div>
    </Layout-Main>
</template>

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

Vue.use(Badge)

const apps=[
    {
        text:'版权授权',
        icon:'icon-anquanzhongxin89'
    },
    {
        text:'区块链浏览器',
        icon:'icon-chakan'
    },
        {
        text:'制片管理',
        icon:'icon-a-tupian'
    },
        {
        text:'我的投资',
        icon:'icon-BOSS-yingyeting-chushi'
    },
]

export default Vue.extend({
    data() {
        return{
            apps,
            userData:{},
        }
    },
    async mounted() {
       this.userData = await this.$service.nftService.getMyList()
       console.log(this.userData);
       
    },
  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(){
        this.$router.push('/User')
    }
  },
  computed:{
      getUserInfo(){
         return this.$util.userMsg.getUserMsg()     
      }
  }
});
</script>
