<template>
  <div class="container">
    <div class="flextwo sharetopk" @click="back">
      <div class="leftrow leftrowkimg">
        <img src="../../../assets/leftrow.png" alt />
      </div>
      <div class="sharemiddle">{{sort_name}}</div>
      <div class="sharebtn">
        <!-- <img src="../../../assets/sharebtn.png" alt /> -->
      </div>
    </div>
    <div>
      <van-list
        class="coursebox courseboxk flexone"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="courseboxitem"
          @click="videodetail(item)"
          v-for="(item, index) in sucailist"
          :key="index"
        >
          <div class="coursenameimg">
            <img :src="item.content" alt />
          </div>
          <div class="coursetext">
            <div class="coursename">{{ item.name }}</div>
            <div class="courseteacher">{{ item.tag.name }}</div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { List } from 'vant';

Vue.use(List);
export default {
  data() {
    return {
      sucailist: [],
      finished: false,
      loading: false,
      page: 1,
      this_page: "",
      total_page: "",
      sort_id: '',
      sort_name: ''
    }


  },
  created() {
    this.sort_id = this.$route.query.sort_id;
    document.title = "唐元集";
    this.sort_name = this.$route.query.sort_name;
    this.getsucai()
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    getsucai() {
      let that = this;
      var url = "/api/user/material";
      let param = {
        keyword: that.keyword,
        sort_id: that.sort_id,
        page: that.page
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.sucailist = that.sucailist.concat(res.data.material);
          that.this_page=res.data.this_page;
          that.total_page=res.data.total_page;
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    // 素材详情
    videodetail(item) {

      this.$router.push({
        path: "/picsucaidetail",
        query: {
          id: item.id
        }
      });

    },
    // 视频上拉加载
    onLoad() {
      let that = this;
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        console.log(3434);
        let newpage = that.page;
        newpage++;
        that.page = newpage;
        console.log(that.videopage);
        that.getsucai();
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (that.this_page == that.total_page) {
          this.finished = true;
        }
      }, 1000);
    },
  }
}
</script>

<style scoped>
@import "../../../style/usercenter.css";
.sucaicourse {
  margin-top: 2rem;
}
.courseboxitem {
  background: #fff;
}
.searchhead {
  padding: 0.2rem 0.32rem 0;
}
.coursenav {
  margin-top: 0.32rem;
}
.keywordk {
  padding: 0.32rem;
  box-sizing: border-box;
  margin-top: 0.8rem;
  background: #fff;
}
</style>