<template>
  <smart-tabs
        :tabs="tabs" 
        :initial-index="current"
        :scrollEnable="true"
        :activeColor="'#19c324'"
        @change="handleTabChange"
      >
    </smart-tabs>
  <!-- 视频列表 -->
  <view class="video-container">
      <view class="video-grid">
        <view 
          v-for="(video, index) in list" 
          :key="index" 
          class="video-item"
        >
          <view class="video-card">
            <video 
              :src="video.url" 
              :poster="video.poster"
              class="video-player"
              :controls="false"
              :show-center-play-btn="true"
              :autoplay="true"
              :loop="true"
              @play="handlePlay(index)"
            ></video>
            
          </view>
        </view>
      </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        current:0,
        tabs:[]
      }
    },
    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>
