<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"
          @click="entersearch"
        />
      </div>
    </div>
    <!-- 课程列表 -->
    <div class="courseitemk">
      <div class="courseitem flex" v-if="now != null" @click="zhibodetail(now)">
        <div class="courseimg">
          <img :src="now.image" alt />
        </div>
        <div class="courseright">
          <div class="coursetitlek">{{ now.title }}</div>
          <div class="zhibok flexone">
            <img src="../../../assets/zhibo.png" alt class="zhiimg" />
            <div class="zhiname">正在直播</div>
          </div>
          <div class="know flexone">
            <span class="morepeople">{{ now.description }}</span>
            <div class="knowmore">
              了解详情
              <img src="../../../assets/yourow.png" alt class="yourow" />
            </div>
          </div>
        </div>
      </div>
      <div
        class="courseitem flex"
        v-if="next != null"
        @click="zhibodetail(next)"
      >
        <div class="courseimg">
          <img :src="next.image" alt />
        </div>
        <div class="courseright">
          <div class="coursetitlek">{{ next.title }}</div>
          <div class="zhibok flexone">
            <img src="../../../assets/ready.png" alt class="zhiimg" />
            <div class="zhiname">{{ next.start_time }}准时开课</div>
          </div>
          <div class="know flexone">
            <span class="morepeople">{{ next.description }}</span>
            <div class="knowmore">
              了解详情
              <img src="../../../assets/yourow.png" alt class="yourow" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 课程头部 -->
    <div class="coursenavkkk 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 class="coursetop" v-if="selnav == 0">
      <div class="coursenavleftkk flexone">
        <div
          class="coursenavleftk"
          :class="navindex == index ? 'selactive' : ''"
          @click="selectnavsec(item.id, index)"
          v-for="(item, index) in cursekindlist"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <!-- <img src="../../../assets/youhua.png" class="youhua" alt /> -->

    <!-- 课程 -->
    <div v-if="selnav == 0">
      <div class="nodata" v-if="videolist.length == 0">暂无数据</div>
      <van-list
        class="courseboxkkk"
        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="coursetitlek">{{ 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">{{ item.title }}</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, Toast } 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: "",
      now: "",
      next: "",
      cursekindlist: [],
      navindex: 0,
      sort_id: ''
    };
  },
  created() {
    let that = this;
    document.title = "唐元集课堂";
    let selnav = localStorage.getItem("selnav");
    console.log(selnav)
    if (selnav) {
      this.selnav = selnav;
      if (this.selnav == 0) {
        that.total_page = "";
        that.this_page = "";
        that.videopage = 1;
        that.videolist = [];
        this.getvideolist();
        localStorage.setItem("selnav", "")
      } else if (this.selnav == 1) {
          that.total_page = "";
          that.this_page = "";
          this.yinglist = [];
          that.videopage = 1;
          this.getyingyang();
      }
    } else {
      this.getcourselist()
    }

    this.getindex();
    this.getintence();

  },
  methods: {
    // 进入搜索页
    entersearch() {
      this.$router.push({
        path: "/searchcourse",
        query: {
          selnav: this.selnav
        }
      });
    },
    selectnavsec(id, index) {
      let that = this;

      this.navindex = index;
      this.sort_id = id;
      that.videopage = 1;
      that.videolist = [];
      that.getvideolist();
    },
    // 获取课程分类
    getcourselist() {
      let that = this;
      let url = '/api/index/sort'
      let param = {

      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.cursekindlist = res.data;
          that.sort_id = res.data[0].id
          that.getvideolist();
        })
        .catch(function (err) {
          console.log(err);

        });
    },

    getintence() {
      let that = this
      console.log(99999)
      var result = ""

      var url = "/api/user/intended";
      let param = {};
      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          result = res.data
          localStorage.setItem("intended", JSON.stringify(res.data.intended))
        })
        .catch(function (err) {
          console.log(err);
        });

    },
    // 获取首页接口
    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);
        });
    },
    // 进入直播详情
    zhibodetail(item) {
      
      // this.$router.push({
      //   path: '/userzhibo',
      //   query: {
      //     id: item.id
      //   }
      // })
      localStorage.setItem("coursename",item.title)
      if (item.allow_join != undefined) {
        if (item.allow_join == 1) {
          this.$router.push({
            path: '/userzhibo',
            query: {
              id: item.id
            }
          })
        } else {
          Toast("还没开课,请耐心等待")
        }

      } else {
        this.$router.push({
          path: '/userzhibo',
          query: {
            id: item.id
          }
        })
      }

    },
    // 视频上拉加载
    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;
        // 数据全部加载完成
        console.log(that.this_page)
        console.log(that.total_page)
        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 = {
        sort_id: that.sort_id,
        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 }
      });
    },
    // 录播详情
    coursedetail(item) {
      this.$router.push({
        path: "/lubodetail",
        query: {
          id: item.id,
         
        }
      });
    },

    selectnav(e) {
      let that = this;
      this.selnav = e.currentTarget.dataset.id;
      localStorage.setItem("selnav", this.selnav)
      console.log(this.selnav);
      if (this.selnav == 0) {
        that.total_page = "";
        that.this_page = "";
        that.videopage = 1;
        that.videolist = [];

        this.getcourselist()
      } 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";
.coursetop {
  width: 100%;
  background: #fff;
}
.coursetitlek {
  color: #02170b;
  font-size: 0.32rem;
  margin-bottom: 0.12rem;
}
.coursenavleftk {
  color: #b5bfba;
  font-size: 0.28rem;
  text-align: center;
  flex: 0 0 auto;
  margin-right: 0.52rem;
}
.coursenavleftkk {
  width: 6.86rem;
  padding: 0.24rem 0;
  box-sizing: border-box;
  margin: 0 auto;
  overflow-x: scroll;
}
.selactive {
  position: relative;
  color: #599158;
}

.selactive::after {
  display: block;
  content: "";
  width: 0.4rem;
  height: 0.02rem;
  background: #599158;
  position: absolute;
  bottom: -0.2rem;
  left: 50%;
  transform: translateX(-50%);
}
</style>