<template>
    <Layout-Main> 
        <div class="banner w-full  relative">
            <div class=" absolute w-full flex py-5 px-5 justify-between">
                <div @click="search"><app-icon name="icon-xingzhuang" size="24px"></app-icon></div>
                <div @click="info">
                 <van-badge :content="5" >
                       <app-icon name="icon-xiaoxi" size="24px"></app-icon>
                 </van-badge>
                 </div>
            </div>  
            <img src="@/assets/img/banner.png"  class="w-full z-0">
        </div>
        <div class="container-view w-11/12 mx-auto">
          <app-scrollbar :list='categoryTypes' @tabChange='getDataByCategory'></app-scrollbar>
          <div class="list-scroll">
            <app-cardList :data='mokeData'></app-cardList>
          </div>
        </div>
    </Layout-Main>
</template>

<script lang="ts">
import Vue from 'vue';
import { Badge } from 'vant';
const mokeData= [
  {
    cover:'/img/cover.png',
    text:'dslfjl'
  },
    {
    cover:'/img/cover.png',
    text:'123213'
  },
    {
    cover:'/img/cover.png',
    text:'kkk'
  },
    {
    cover:'/img/cover.png',
    text:'ertfr'
  },
      {
    cover:'/img/cover.png',
    text:'ertfr'
  },
      {
    cover:'/img/cover.png',
    text:'ertfr'
  },
      {
    cover:'/img/cover.png',
    text:'ertfr'
  },
      {
    cover:'/img/cover.png',
    text:'ertfr'
  },
      {
    cover:'/img/cover.png',
    text:'ertfr'
  },
]
Vue.use(Badge)
export default Vue.extend({
  data() {
    return{ 
      mokeData,
      categoryTypes:[] as any[]
    }
  },
  components:{ 
    'Layout-Main':()=>import('@/layout/Main.vue'),
    'app-icon':()=>import('@/components/common/Icon.vue'),
    'app-scrollbar':()=>import('@/components/common/ScrollBar.vue'),
    'app-cardList':()=>import('@/components/CardList.vue')
  }, 
  name: 'Home',
  async created(){
    this.categoryTypes = await this.$service.nftService.getCategory()
    console.log(this.categoryTypes);
    
  },
  methods:{
    search(){
      console.log(11);
      
    },
    info(){
      console.log(222);
    },
    getDataByCategory(item:any){
      console.log(item);
    }
  }
});
</script>

<style lang="less" scoped>
.trangel{
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid #1C2654;
    border-bottom: 10px solid #1C2654;
    border-left: 10px solid transparent
}
.retangle{
  height: 20px;
  background-color: #1C2654;
}

</style>