<template>
  <!-- <smart-tabs
        :tabs="tabs" 
        :initial-index="current"
        :scrollEnable="true"
        :activeColor="'#19c324'"
        @change="handleTabChange"
      >
    </smart-tabs> -->
    <uni-data-select v-model="categoryParam.id" :localdata="categoryList" @change="categoryChanged"></uni-data-select>
    <uni-data-select v-model="subCategoryParam.id" :localdata="subCategoryList" @change="subCategoryChanged"></uni-data-select>
  <!-- 视频列表 -->
  <view class="video-container">
      <image-grid-simple
          :imageList="list"
          :columns="2"
          :height="'80vh'"
          @image-click="handlerClick"
          @load-more-action = "queryList"
        >
          
        <!-- <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 {
        categoryParam:{
          target:'all',
          id:0
        },
        categoryList:[
          {
            text:'全部',
            value:0
          }
        ],
        subCategoryParam:{
          id:0
        },
        subCategoryList:[
          {
            text:'全部',
            value:0
          }
        ],
        list:[],
        pageInfo:{
          index:1,
          size:10,
          isEnd:false,
        }
      }
    },
    onLoad() {
      this.getCategory();
      this.queryList();
    },
    methods: {
      getCategory() {
        // 获取分类
        let param = {
          index:1,
          size:1000,
          target:'parent'
        }
        try {
          this.$http.get('/category/list',param).then((resp)=>{
            this.categoryList = [
              {
                text:'全部',
                value:0
              }
            ];
            resp.data?.list.forEach((item,idx)=>{
              this.categoryList.push({
                value:item?.id,
                text:item?.name,
              });
            });
          })
        } catch(err){
          console.log("query category error",err)
        }
      },
      getSubCategory() {
        // 获取分类
        let param = {
          index:1,
          size:1000,
        }
        if (this.categoryParam.id === 0) {
          param.target = 'sub'
        } else {
          param.parent_id = this.categoryParam.id
        }
        try {
          this.$http.get('/category/list',param).then((resp)=>{
            this.subCategoryList = [
              {
                text:'全部',
                value:0
              }
            ];
            resp.data?.list.forEach((item,idx)=>{
              this.subCategoryList.push({
                value:item?.id,
                text:item?.name,
              });
            });
          })
        } catch(err){
          console.log("query category error",err)
        }
      },
      categoryChanged(e) {
        // 一级分类变更
        this.getSubCategory();
        this.queryList();
      },
      subCategoryChanged(e) {
        // 一级分类变更
        this.queryList();
      },
      queryList() {
        if (this.pageInfo.isEnd) {
          uni.showToast({
            title: '没有更多数据了哦!^v^',
            icon: 'none',
            complete: () => {
              console.log("no more data")
            }
          });
          return
        }
        let param = {
          ...this.pageInfo
        }
        
        if (this.categoryParam.id === 0) {
          param.target = 'all'
        } else {
          param.category_id = this.categoryParam.id
        }
        
        if (this.subCategoryParam.id !== 0) {
          param.sub_category_id = this.subCategoryParam.id
        }
         
        try {
          uni.$http.get('/resource/list',param).then((resp) => {
            console.log("resp data",resp.data);
            resp.data?.list.forEach((item,idx)=>{
              this.list.push({
                id:item?.id,
                name:item?.name,
                src:item?.thumb_src,
                android_src:item?.android_src,
              });
            });
            console.log("length:",this.list.length,resp.data.page.rows,resp.data.page)
            if (this.list.length >= resp.data.page.rows) {
              this.pageInfo.isEnd = true
            } else {
              this.pageInfo.isEnd = false
              this.pageInfo.index++
            }
          })
        }catch(err) {
          console.log("catch query list err:",err)
        }
      }
      
    }
  }
</script>

<style>

</style>
