<template>
  <Layout-Child>

     <div class='w-3/6 mt-6'>
        <van-tabs :value="activeTransferType" class='w-11/12'  swipeable  @click="tabChange" lazy-render>
            <van-tab v-for='i in transferTypeList' :key="i.id" :title='i.title' :id='i.id'>
            </van-tab>
        </van-tabs> 
     </div>

    <div v-if="transferList.length > 0" class=" pl-5 pr-5 text-font-dark-blue overflow-y-scroll h-screen pb-48">
        <div v-for="i in transferList" @click="$router.push(`/TransferDetail/${i.id}`)" :key="i.id" class=" relative h-40 mb-5 bg-font-light-black bg-opacity-70 rounded pt-4 pb-4 pr-8 pl-12">
            <div class=" flex">
                <div class=" w-2/6 h-32 mr-4 bg-imgbox">
                  <img  v-if="i.cover" :src="i.cover" alt="" class="bg-img rounded">  
                  <img v-else src="/img/cover.png" alt="" class="bg-img rounded">
                </div>
                <div class="flex-1 ">
                    <div class=" text-white text-sm">{{i.nftName || 'NFT名称'}}</div>
                    <div class="flex h-8 text-xs mt-3">
                        <div class=" mr-3 text-gray-400">类型</div>
                        <div>{{i.category}}</div>
                    </div>
                    <div class="flex h-8 text-xs">
                        <div class=" mr-3 text-gray-400">状态</div>
                        <div>已完成</div>
                    </div>
                    <div class="flex h-8 text-xs">
                        <div class=" mr-3 text-gray-400">时间</div>
                        <div class="">{{i.createDate.substring(0,16)}}</div>
                    </div>
                </div>
            </div>
            <img v-if="i.transferType == 1" src="@/assets/img/transferOut.png" alt="" class=" absolute top-0 left-0 w-10">
            <img v-else-if="i.transferType == 2" src="@/assets/img/transferInter.png" alt="" class=" absolute top-0 left-0 w-10">
        </div>
    </div>
    <div v-else class=" text-center text-gray-500">
        暂无数据
    </div>

  </Layout-Child>
</template>

<script lang="ts">
import Vue from "vue"
import { Tab, Tabs } from 'vant';
Vue.use(Tab)
Vue.use(Tabs)
export default Vue.extend({
    data(){
        return {
            transferTypeList:[
                {
                    id:'0',
                    title:'全部',
                    value:'0'
                },
                {
                    id:'1',
                    title:'转出',
                    value:'1'
                },
                 {
                    id:'2',
                    title:'接收',
                    value:'2'
                },
            ],
            activeTransferType:'0',
            transferList:[]
        }
    },
    components:{
        'Layout-Child':()=>import('@/layout/Child.vue'),
    },
    methods:{
        async tabChange(type:any){
            await this.getTransferList(type)
        },
        async getTransferList(type:string){
            const res = await this.$service.nftService.getTransferList(type)
            this.transferList = res
        }
    },
    async mounted(){
        await this.getTransferList('0')
    }
})
</script>

<style lang="less" scoped>
.bg-imgbox {
    position: relative
}
.bg-img {
    max-width: 100%;
    max-height: 100%;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

</style>