<template>
    <Layout-Main> 
        <div class='user-info w-11/12 mx-auto flex text-font-white items-center py-5'>
            <div class='w-3/12 pr-5'>
                <img src="@/assets/img/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'>名字</div>
                    <div class=' text-sm flex items-center'>
                        <div>个人中心</div>
                        <app-icon name="icon-xiayibu"></app-icon>
                    </div>
                </div>
                <div class='tags flex py-2'>
                    <app-tag text='编剧'></app-tag>
                </div>
                <div class='intro text-2xs line-clamp-1 text-font-gray'>
                    我是一个热爱编剧事业的帅哥，我的理想,真jb不要脸dsfakjsdhfkljshda;fkljsdklfjlskadjf;lksdajf;lksajdf;lksjdadflkjsd;flkjsd;lkfjs;ldk
                </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'>
                30
                <app-icon name="icon-xiayibu"></app-icon>
            </div>
        </div>
        <div class='cells w-11/12 mx-auto text-font-white'>
                <app-cell text='收藏' icon='icon-xiaoxi' @onClick='cellClick'></app-cell>
        </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
        }
    },
  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);
      
    },
    cellClick(){
        console.log(111);
    }
  }
});
</script>
