<template>
  <div class="container">
    <!-- 顶部搜素 -->
    <div class="searchhead">
      <div class="searchbox flexone">
        <div class="searchimg">
          <img src="../../../assets/search.png" alt />
        </div>

        <input
          type="text"
          placeholder="搜索你感兴趣的课程文章"
          class="searchtext"
        />
      </div>
    </div>
    <!-- 课程列表 -->
    <div class="courseitem flex">
      <div class="courseimg">
        <img src="../../../assets/courseimg.png" alt />
      </div>
      <div class="courseright">
        <div class="coursetitle">关于减肥，除了科学运动</div>
        <div class="zhibo flexone">
          <img src="../../../assets/zhibo.png" alt class="zhiimg" />
          <div class="zhiname">正在直播</div>
        </div>
        <div class="know flexone">
          <span class="morepeople">很多人不能正确理解减肥</span>
          <div class="knowmore">
            了解详情
            <img src="../../../assets/yourow.png" alt class="yourow" />
          </div>
        </div>
      </div>
    </div>
    <div class="courseitem flex">
      <div class="courseimg">
        <img src="../../../assets/courseimg.png" alt />
      </div>
      <div class="courseright">
        <div class="coursetitle">关于减肥，除了科学运动</div>
        <div class="zhibo flexone">
          <img src="../../../assets/ready.png" alt class="zhiimg" />
          <div class="zhiname">正在直播</div>
        </div>
        <div class="know flexone">
          <span class="morepeople">很多人不能正确理解减肥</span>
          <div class="knowmore">
            了解详情
            <img src="../../../assets/yourow.png" alt class="yourow" />
          </div>
        </div>
      </div>
    </div>

    <!-- 课程头部 -->
    <div class="coursenav flexone">
      <div
        class="coursenavleft"
        :class="selnav == 0 ? 'selactive' : ''"
        :data-id="0"
        @click="selectnav"
      >
        音频课程
      </div>
      <div
        class="coursenavleft"
        :class="selnav == 1 ? 'selactive' : ''"
        :data-id="1"
        @click="selectnav"
      >
        营养小知识
      </div>
    </div>
    <!-- 课程 -->
    <div v-if="selnav == 0">
      <div class="nodata" v-if="videolist.length == 0">暂无数据</div>
      <van-list
        class="courseboxk"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        v-else
      >
        <div class="courseboxitem" v-for="item in videolist" :key="item">
          <div class="coursenameimg">
            <img :src="item.image" alt />
          </div>
          <div class="coursetext">
            <div class="coursetitle">{{ item.title }}</div>
            <div class="coursename">{{ item.description }}</div>
            <div class="courseteacher">{{ item.user.nickname }}</div>
          </div>
        </div>
      </van-list>
    </div>

    <!-- 营养小知识 -->
    <div v-if="selnav == 1">
      <div class="nodata" v-if="yinglist.length == 0">暂无数据</div>
      <van-list
        class="courseboxk"
        v-model="loadingying"
        :finished="finishedying"
        finished-text="没有更多了"
        @load="onLoadyinyang"
        v-else
      >
        <div
          class="courseboxitem"
          v-for="item in yinglist"
          :key="item.id"
          @click="yingyangdetail(item.id)"
        >
          <div class="coursenameimg">
            <img :src="item.image" alt />
          </div>
          <div class="coursetext">
            <div class="coursename knowlagename" v-html="item.content"></div>
          </div>
        </div>
      </van-list>
    </div>
    <!-- 底部导航 -->

    <tabBar v-bind:active="0" />
  </div>
</template>

<script>
import Vue from "vue";
import tabBar from "@/components/views/tabBar.vue";
import { List } from "vant";
Vue.use(List);
export default {
  components: {
    tabBar
  },
  data() {
    return {
      selnav: 0,
      loading: false,
      finished: false,
      videolist: [],
      // 营养知识
      loadingying: false,
      finishedying: false,
      yinglist: [],
      videopage: 1,
      this_page: "",
      total_page: ""
    };
  },
  created() {
    this.getvideolist();
  },
  methods: {
    // 视频上拉加载
    onLoad() {
      let that = this;
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        console.log(3434);

        let newvideopage = that.videopage;
        newvideopage++;
        that.videopage = newvideopage;
        console.log(that.videopage);
        that.getvideolist();

        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (that.this_page == that.total_page) {
          this.finished = true;
        }
      }, 1000);
    },

    // 营养知识上拉加载
    onLoadyinyang() {
      let that = this;
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        console.log(3434);

        let newvideopage = that.videopage;
        newvideopage++;
        that.videopage = newvideopage;
        console.log(that.videopage);
        that.getyingyang();

        // 加载状态结束
        this.loadingying = false;
        // 数据全部加载完成
        if (that.this_page == that.total_page) {
          this.finishedying = true;
        }
      }, 1000);
    },

    // 获取视频
    getvideolist() {
      let that = this;
      var url = "/api/index/lesson_list";
      let param = {
        page: that.videopage
      };

      that.$axios
        .post(url, param, Headers)
        .then(res => {
          console.log(res, "列表");
          that.videolist = that.videolist.concat(res.data.lesson);
          that.total_page = res.data.total_page;
          that.this_page = res.data.this_page;
        })
        .catch(err => {
          console.log(err);

          // setTimeout(function () {
          //   that.$router.go(-1)
          // })
        });
    },
    // 获取营养知识
    getyingyang() {
      console.log(9999);
      let that = this;
      var url = "/api/index/knowledge_list";
      let param = {
        page: that.videopage
      };
      that.$axios
        .post(url, param)
        .then(res => {
          console.log(res, "列表");
          that.yinglist = that.yinglist.concat(res.data.knowledge);
          that.total_page = res.data.total_page;
          that.this_page = res.data.this_page;
        })
        .catch(err => {
          console.log(err);

          // setTimeout(function () {
          //   that.$router.go(-1)
          // })
        });
    },
    // 进入营养详情页面
    yingyangdetail(id) {
      this.$router.push({
        path: "/yingyangdetail",
        query: { id: id }
      });
    },
    selectnav(e) {
      let that = this;
      this.selnav = e.currentTarget.dataset.id;
      console.log(this.selnav);
      if (this.selnav == 0) {
        that.total_page = "";
        that.this_page = "";
        that.videopage = 1;
        that.videolist = [];
        this.getvideolist();
      } else if (this.selnav == 1) {
        that.total_page = "";
        that.this_page = "";
        this.yinglist = [];
        that.videopage = 1;
        this.getyingyang();
      }
    }
  }
};
</script>

<style scoped>
@import "../../../style/course.css";
</style>