<template>
  <div class="container">
    <div class="flextwo sharetopk" @click="back">
      <div class="leftrow leftrowkimg">
        <img src="../../../assets/leftrow.png" alt />
      </div>
      <div class="sharemiddle">搜索</div>
      <div class="sharebtn">
        <!-- <img src="../../../assets/sharebtn.png" alt /> -->
      </div>
    </div>
    <!-- 顶部搜素 -->
    <div class="searchhead">
      <div class="searchbox flexone">
        <div class="searchimg">
          <img src="../../../assets/search.png" alt />
        </div>

        <input type="text" placeholder="搜索你感兴趣的课程文章" class="searchtext" @keyup.enter="selsectword" />
      </div>
    </div>
    <div class="courseboxbox">
      <!-- 课程 -->
      <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, index) in videolist"
            :key="index"
            @click="coursedetail(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.title"></div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import tabBar from "@/components/views/tabBar.vue";
import { List } from "vant";
Vue.use(List);
export default {
  data() {
    return {
      selnav: 0,
      loading: false,
      finished: false,
      videolist: [],
      // 营养知识
      loadingying: false,
      finishedying: false,
      yinglist: [],
      videopage: 1,
      this_page: "",
      total_page: "",
      now: "",
      next: "",
      keyword: ""
    };
  },
  created() {
    document.title = "唐元集公众号";
    this.selnav = this.$route.query.selnav;
    if (this.selnav == 0) {
      this.getvideolist();
    } else if (this.selnav == 1) {
      this.getyingyang();
    }
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    selsectword(e) {
      console.log(e);
      this.keyword = e.target.value;
      this.videolist = [];
      this.videopage = 1;
      this.yinglist = [];
      if (this.selnav == 0) {
        this.getvideolist();
      } else if (this.selnav == 1) {
        this.getyingyang();
      }
    },
    // 获取首页接口
    getindex() {
      let that = this;
      var url = "/api/index/index";
      let param = {};

      that.$axios
        .get(url, param)
        .then(function (res) {
          console.log(res);
          that.now = res.data.now;
          that.next = res.data.next;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 视频上拉加载
    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 = {
        keyword: that.keyword,
        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 = {
        keyword: that.keyword,
        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 }
      });
    },
    // 录播详情
    coursedetail(item) {
      this.$router.push({
        path: "/lubodetail",
        query: {
          id: item.id
        }
      });
    }
  }
};
</script>

<style scoped>
@import "../../../style/course.css";
.coursetitlek {
  color: #02170b;
  font-size: 0.32rem;
  margin-bottom: 0.12rem;
}
.searchhead {
  margin-top: 0.8rem;
}
.courseboxbox {
  margin-top: 2rem;
}
</style>