<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>  
            <div class=" absolute z-20 bottom-5 w-full justify-center  text-font-white">
                <div class=" px-5 py-1 w-32 mx-auto text-center bg-gradient-to-r from-app-orange to-app-purple rounded-full" @click="goDetail(officialList[0].id,true)">
                  立即领取
                </div>
            </div>
            <img src="@/assets/img/banner.png"  class="w-full z-0">
        </div>
        <div class="container-view w-11/12 mx-auto">

          <div v-if="ready">
            <app-scrollbar :list='categoryTypes' @tabChange='getDataByCategory'></app-scrollbar>
            <div class="list-scroll">
              <app-cardList :data='listData' v-if="listData.length" @itemOnclick='goDetail'></app-cardList>
              <van-empty  image="/img/empty.png" description="没有找到更多内容"  v-else/>
              <div class="h-12"></div>
            </div>
          </div>
          <div class="flex flex-col items-center w-full pt-16 justify-center" v-else>
             <breeding-rhombus-spinner
                    :animation-duration="2000"
                    :size="60"
                    :color="'#0078FF'"
              />
              <div class=" mt-6  text-font-white">loading...</div>
          </div>
        </div>
    </Layout-Main>
</template>

<script lang="ts">
import Vue from 'vue';
import { Badge } from 'vant';
import { Empty } from 'vant';
import {BreedingRhombusSpinner} from 'epic-spinners'

Vue.use(Empty);
Vue.use(Badge)
export default Vue.extend({
  data() {
    return{ 
      categoryTypes:[] as any[],
      currentCategory:1,
      currentPage:1,
      pagesize:100,
      officialList: {} ,
      listData:[] as any,
      ready:false,
    }
  },
  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'),
    'breeding-rhombus-spinner': BreedingRhombusSpinner
  }, 
  name: 'Home',
  async created(){
    this.categoryTypes = await this.$service.nftService.getCategory()
  },
  async mounted() {
      this.officialList= await this.$service.nftService.officialNFTList()
    
     this.listData = await this.$service.nftService.getList(this.currentPage,this.pagesize,this.currentCategory)
     this.ready = true
  },
  methods:{
    search(){
      console.log(11);
      
    },
    info(){
      console.log(222);
    },
    goDetail(id:any,officia?:string){ 
      console.log(id);
      this.$router.push({ name: 'Nftdetail', params: { id: id }, query:{officia:officia}})
    },
    async getDataByCategory(item:any){
      console.log(item);
      
      this.currentCategory = item.data.id
      this.listData =  await this.$service.nftService.getList(this.currentPage,this.pagesize,this.currentCategory)
    }
  }
});
</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>