<template>
  <smart-tabs
        :tabs="tabs" 
        :initial-index="current"
        :scrollEnable="true"
        :activeColor="'#19c324'"
        @change="handleTabChange"
      >
    </smart-tabs>
  <!-- 视频列表 -->
  <view class="video-container">
      <image-grid-simple
          :imageList="list"
          :columns="2"
          :height="'80vh'"
          @image-click="handlerClick"
        >
          
        <template #empty>
          <view class="custom-empty">
            <image src="/static/images/no-videos.png" />
            <text>没有找到视频内容</text>
          </view>
        </template>
      </image-grid-simple> 
  </view>
</template>

<script>
  export default {
    data() {
      return {
        current:0,
        tabs:[],
        list:[
          {
            
            "id":1,
            "title":"1",
            "src":"../../static/images/default.png"
          },
          {
            "id":2,
            "title":2,
            "src":"../../static/images/default.png"
          },
          {
            "id":3,
            "title":3,
            "src":"../../static/images/default.png"
          },
          {
            "id":9,
            "title":9,
            "src":"../../static/images/default.png"
          },
          {
            "id":4,
            "title":4,
            "src":"../../static/images/default.png"
          },
          {
            "id":5,
            "title":5,
            "src":"../../static/images/default.png"
          },
          {
            "id":6,
            "title":6,
            "src":"../../static/images/default.png"
          },
          {
            "id":7,
            "title":7,
            "src":"../../static/images/default.png"
          },
          {
            "id":8,
            "title":8,
            "src":"../../static/images/default.png"
          }
        ]
      }
    },
    onLoad() {
      this.getCategory()
    },
    methods: {
      getCategory() {
        // 获取分类
        this.tabs = [
          {label:"拉布布",value:"labubu"},
          {label:"科幻",value:"kh"},
          {label:"酷炫汽车1",value:"car1"},
          {label:"酷炫汽车2",value:"car2"},
          {label:"酷炫汽车3",value:"car3"},
          {label:"酷炫汽车4",value:"car4"},
          {label:"酷炫汽车5",value:"car5"},
          {label:"雏田",value:"ct"}
        ]
      },
      handleTabChange(idx) {
        this.current = idx;
        console.log(this.tabs[idx])
      }
    }
  }
</script>

<style>

</style>
