<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 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/456`)" :key="i" class=" relative h-40 mb-5 bg-font-light-black bg-opacity-70 rounded pt-4 pb-4 pr-10 pl-12">
            <div class=" flex">
                <div class=" w-2/6 h-32 mr-4">
                  <img src="/img/cover.png" alt="" class="bg-img rounded">
                </div>
                <div class="flex-1">
                    <div class=" text-white text-lg">大标题</div>
                    <div class="flex h-8">
                        <div class=" mr-4 text-gray-400">类型</div>
                        <div>插画</div>
                    </div>
                    <div class="flex h-8">
                        <div class=" mr-4 text-gray-400">状态</div>
                        <div>已完成</div>
                    </div>
                    <div class="flex h-8">
                        <div class=" mr-4 text-gray-400">时间</div>
                        <div>2021-08-17</div>
                    </div>
                </div>
            </div>
            <img src="@/assets/img/transferOut.png" alt="" class=" absolute top-0 left-0 w-10">
            <img src="@/assets/img/transferInter.png" alt="" class=" absolute top-0 left-0 w-10">
        </div>
    </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:10
        }
    },
    components:{
        'Layout-Child':()=>import('@/layout/Child.vue'),
    },
    methods:{
        tabChange(item:any){
            console.log(item)
        }
    }
})
</script>

<style lang="less" scoped>
.bg-img {
    max-width: 100%;
    max-height: 100%
}

</style>