<template>
  <div class="pb_content">
    <div class="pb_head">
      <span>学习中心</span>
    </div>
    <div class="pb_content_body">
      <div class="li_search">
        <van-search
          v-model="searchValue"
          placeholder="想学什么..."
          @input="onSearch"
          background=" rgba(243, 243, 243)"
          class="search_input"
        />
      </div>
      <div class="li_head" @click="goTo('/my/myClass')">
        <div class="li_head_portal">
          <img
            v-lazy="
              smailheadportrait
                ? smailheadportrait
                : require('../../assets/icon/portal.png')
            "
            alt=""
          />
        </div>
        <div class="li_head_body">
          <div class="li_myClass">我的课程</div>
          <div class="li_count">
            目前共有<span>{{ Num }}</span
            >个课程在实践
          </div>
        </div>
        <van-icon name="share" color="#46bb65" class="li_share" />
      </div>
      <div class="recommend-class-box">
        <div class="recommend-class-title" refs="titleBtn">
          <!-- <button @click="getCourse('111', $event)">学科融合智慧创</button>
          <button @click="getCourse('111', $event)">农耕劳动研中学</button>
          <button @click="getCourse('111', $event)">Ai劳动创意show</button>
          <button @click="getCourse('111', $event)">家校劳动幸福约</button>
          <button @click="getCourse('111', $event)">劳模精神认真学</button>
          <button @click="getCourse('111', $event)">基地劳动实践行</button>
          <button @click="getCourse('111', $event)">职业体验快乐做</button>
          <button @click="getCourse('111', $event)">小小义工志愿行</button> -->
          <button
            v-for="item in groupList"
            :key="item.id"
            @click="getCourse(item.id, $event)"
          >
            {{ item.name }}
          </button>
        </div>
        <div class="recommend-class-button" v-if="groupid">
          <button :class="{ active: classX == '' }" @click="onSearch1('')">
            所有年级
          </button>
          <button
            v-for="item in classListX"
            :key="item.id"
            :class="{ active: classX == item.id }"
            @click="onSearch1(item.id)"
          >
            {{ item.name }}
          </button>
        </div>
        <van-pull-refresh
          style="padding-top: 1rem"
          v-model="refreshing"
          @refresh="onRefresh"
          looing-text="释放刷新"
          pulling-text="下拉刷新"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多啦"
            offset="10"
            :immediate-check="false"
            @load="onLoad"
          >
            <van-empty
              class="custom-image"
              :image="require('../../assets/icon/custom-empty-image.png')"
              description="暂无数据"
              v-if="isShow"
            />
            <van-row type="flex" v-else>
              <van-col
                span="12"
                v-for="(banner, index) in bannerP"
                :key="index"
                @click="goTo('/class?cid=' + banner.courseId, banner.courseId)"
              >
                <div class="recommend-box">
                  <div class="img-box">
                    <van-image
                      width="100%"
                      height="5rem"
                      fit="cover"
                      :src="banner.imgUrl"
                    >
                      <template v-slot:loading>
                        <van-loading type="spinner" size="20" />
                      </template>
                      <template v-slot:error>加载失败</template>
                    </van-image>
                  </div>
                  <div class="van-multi-ellipsis--l2 class-title">
                    {{ banner.title }}
                  </div>
                  <div class="class-view">
                    <i></i>
                    <span>{{ banner.vcount }}</span>
                  </div>
                </div>
              </van-col>
            </van-row>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "main-keep-alive",
  data() {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      searchValue: "",
      // isActive: false,
      page: 1,
      groupid: "",
      isShow: false,
      groupList: [],
      Num: 0,
      smailheadportrait: this.$store.state.userInfo.smailheadportrait,
      bannerP: [],
      classX: "",
      classListX: "",
    };
  },
  methods: {
    onSearch() {
      this.page = 1;
      this.getCourse();
    },
    onSearch1(id) {
      this.page = 1;
      this.classX = id
      this.getCourse();
    },
    goTo(path, cid) {
      if (cid) {
        let params = [{ cid: cid }];
        this.ajax
          .post(this.$store.state.api + "addCourseCount", params)
          .then((res) => {
            this.$router.push(path);
          })
          .catch((err) => {
            console.error(err);
          });
      } else {
        this.$router.push(path);
      }
    },
    //获取在学课程数量
    getNum() {
      let params = { uid: this.$store.state.userInfo.userid };
      this.ajax
        .get(this.$store.state.api + "getNum", params)
        .then((res) => {
          this.Num = res.data[0][0].courseNum;
          console.log(res.data[0][0]);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //获取课程
    getCourse(groupid, e) {
      if (groupid) {
        this.page = 1;
        var e = e.target;
        if (document.querySelector(".Tactive") && e.className == "") {
          document.querySelector(".Tactive").className = "";
          e.className = "Tactive";
          this.groupid = groupid;
        } else if (e.className != "") {
          e.className = "";
          this.groupid = "";
        } else if (e.className == "") {
          e.className = "Tactive";
          this.groupid = groupid;
        }
        this.getGPop();
      }
      this.loading = true;
      let params = {
        jid: this.$store.state.userInfo.classid,
        gid: this.groupid,
        class: this.classX,
        cn: this.searchValue,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getCourse", params)
        .then((res) => {
          if (res.data[0].length == 0) {
            this.isShow = true;
          } else {
            this.isShow = false;
          }
          this.page++;
          this.loading = false;
          this.refreshing = false;
          this.finished = false;
          // res.data[0].forEach((element) => {
          //   element.imgUrl = require("../../assets/tu8.png");
          // });
          var resA = [];
          if (res.data[0].length > 0) {
            resA = res.data[0].filter((element) => {
              element.imgUrl = JSON.parse(element.chapters).poster;
              return element;
            });
          }
          this.bannerP = resA;
          // this.bannerP = this.bannerP.concat(res.data[0]);
        })
        .catch((err) => {
          this.loading = false;
          this.refreshing = false;
          console.error(err);
        });
    },
    onRefresh() {
      this.page = 1;
      this.getCourse();
    },
    //获取分组分类
    getGroup() {
      let params = {};
      this.ajax
        .get(this.$store.state.api + "getGroup", params)
        .then((res) => {
          this.groupList = res.data[0];
          console.log(this.groupList);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    onLoad() {
      let params = {
        jid: this.$store.state.userInfo.classid,
        gid: this.groupid,
        class: this.classX,
        cn: this.searchValue,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getCourse", params)
        .then((res) => {
          this.loading = false;
          this.refreshing = false;
          console.log(res.data[0][0]);
          res.data[0].forEach((element) => {
            element.imgUrl = require("../../assets/tu8.png");
          });
          var resA = [];
          if (res.data[0].length > 0) {
            resA = res.data[0].filter((element) => {
              element.imgUrl = JSON.parse(element.chapters).poster;
              return element;
            });
          }
          this.bannerP = this.bannerP.concat(resA);
          var num = this.bannerP.length ? this.bannerP[0].num : 0;
          if (this.bannerP.length < num) {
            this.page++;
            this.loading = false;
          } else {
            this.finished = true;
            this.loading = true;
          }
        })
        .catch((err) => {
          this.loading = false;
          this.refreshing = false;
          console.error(err);
        });
    },
    getGPop() {
      if (this.groupid) {
        this.classX = "";
        let params = { pid: this.groupid };
        this.ajax
          .get(this.$store.state.api + "getGroupGrade", params)
          .then((res) => {
            this.classListX = res.data[0];
          })
          .catch((err) => {
            console.error(err);
          });
      } else {
        this.classX = "";
        this.classListX = "";
      }
    },
  },
  activated() {
    this.page = 1;
    this.getCourse();
    this.getGroup();
    this.getNum();
  },
};
</script>

<style scoped>
.li_search {
}
.custom-image >>> .van-empty__image {
  width: 4.5rem;
  height: auto;
  /* height: 6.4rem; */
}
.van-search__content {
  background: #fff !important;
}
.li_head {
  background: #fff;
  margin-bottom: 1rem;
  display: flex;
  justify-content: start;
  padding: 1rem 0;
  position: relative;
}
.li_head_portal {
  height: 3rem;
  width: 3rem;
  overflow: hidden;
  border-radius: 10rem;
  margin: 0 0 0 1rem;
}
.li_head_portal img {
  width: inherit;
  height: inherit;
}
.li_head_body {
  margin-left: 0.5rem;
}
.li_myClass {
  font-size: 0.8rem;
  margin: 0.3rem 0 0 0;
  /* font-weight: 600; */
}
.li_count {
  font-size: 0.7rem;
  color: #a0a0a0;
  margin: 0.3rem 0 0 0;
}
.li_count span {
  color: #ff6823;
}
.li_share {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translate(0, -50%);
}
.recommend-class-box {
  background: #fff;
  margin: 0.4rem 0 0 0;
  padding: 0.3rem 0 0 0;
  position: relative;
}
.recommend-class-title {
  display: flex;
  /* justify-content: center; */
  width: 95%;
  margin: 0 auto;
  overflow-x: auto;
  height: 5.8rem;
  flex-direction: column;
  flex-wrap: wrap;
  padding-bottom: 0rem;
}
.recommend-class-title .Tactive {
  background: rgb(30, 105, 52) !important;
}

.recommend-class-title::-webkit-scrollbar {
  width: 0;
}
.recommend-class-title button {
  color: white;
  border: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  transition: opacity 0.2s;
  height: 2rem;
  /* width: 6rem; */
  font-size: 0.75rem;
  line-height: 2rem;
  padding: 0 0.5rem;
  margin: 0.3rem 0.2rem 0;
  background: rgb(70, 181, 101);
}

.recommend-class-button {
  display: flex;
  /* justify-content: center; */
  width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  height: 2.5rem;
  align-items: center;
  /* flex-direction: column; */
  /* flex-wrap: wrap; */
  flex-direction: row;
  flex-wrap: nowrap;
  background: #eaeaea;
  align-items: center;
  white-space: nowrap;
}
.recommend-class-button button {
  /* color: white; */
  border: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  transition: opacity 0.2s;
  height: 1.5rem;
  /* width: 6rem; */
  font-size: 0.75rem;
  line-height: 1.5rem;
  padding: 0 0.5rem;
  margin: 0rem 0.2rem 0;
  background: #eaeaea;
  border: 1px solid rgb(26, 130, 228);
  color: rgb(26, 130, 228);
}
.recommend-class-button .active {
  background: rgb(26, 130, 228);
  color: white;
}

.recommend-class-title button:nth-child(1) {
  background: rgb(70, 187, 101);
}
.recommend-class-title button:nth-child(2) {
  background: rgb(149, 200, 249);
}
.recommend-class-title button:nth-child(3) {
  background: rgb(232, 207, 132);
}
.recommend-class-title button:nth-child(4) {
  background: rgb(244, 155, 181);
}
.recommend-class-title button:nth-child(5) {
  background: rgb(255, 164, 123);
}
.recommend-class-title button:nth-child(6) {
  background: rgb(151, 223, 194);
}
.recommend-class-title button:nth-child(7) {
  background: #f58383;
}
.recommend-class-title button:nth-child(8) {
  background: #ccacf8;
}
.recommend-class-title button:nth-child(9) {
  background: #b1e884;
}
.recommend-class-title button:nth-child(10) {
  background: #95c8f9;
}
.recommend-box {
  margin-bottom: 0.4rem;
}
.img-box {
  border-radius: 5px;
  overflow: hidden;
  width: 9rem;
  height: 5rem;
  margin: 0 auto;
  box-shadow: #c8c8c8 0px 0px 10px 4px;
}

.class-title {
  font-size: 0.72rem;
  width: 9rem;
  margin: 0.2rem auto 0;
}

.class-view {
  font-size: 0.6rem;
  color: #b4b4b4;
  width: 9rem;
  margin: 0.2rem auto 0;
  display: flex;
  align-items: center;
}

.class-view i {
  background-image: url("../../assets/icon/liulan.png");
  width: 1rem;
  height: 1rem;
  background-size: 100% 100%;
  display: inline-block;
  float: left;
  /* margin-top: 1px; */
  line-height: 1rem;
  vertical-align: text-top;
  background-repeat: no-repeat;
}

.class-view span {
  height: 1rem;
  line-height: 1rem;
}
</style>
