<template>
  <div class="pb_content">
    <div class="pb_head">
      <span>劳动教育平台</span>
    </div>
    <div class="pb_content_body">
      <div class="swiper-area">
        <van-swipe :autoplay="2000">
          <van-swipe-item v-for="item in bannerList" :key="item.id" @click="goTo('/class?cid=' + item.url, item.url)">
            <!-- <img v-lazy="item.poster" width="100%" alt="" srcset="" /> -->
            <el-image
              style="width: 100%; height: 7rem"
              :src="item.poster"
              fit="fill"
            ></el-image>
          </van-swipe-item>
          <template #indicator>
            <div></div>
          </template>
        </van-swipe>
      </div>
      <div class="recommend-class-box">
        <div class="recommend-class-title">
          <span
            :class="{ active: item.id == active }"
            @click="getZoneClass(item.id, $event)"
            v-for="item in zoneList"
            :key="item.id"
            >{{ item.name }}</span
          >
        </div>
        <van-pull-refresh
          style="padding-top: 0.5rem"
          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="100%"
                      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-ellipsis 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,
      bannerList: [],
      bannerP: [],
      zoneList: [],
      active: "",
      page: 1,
      isShow: false,
    };
  },
  methods: {
    goTo(path, 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);
        });
    },
    //获取专区
    getZone() {
      this.ajax
        .get(this.$store.state.api + "getZone", "")
        .then((res) => {
          this.active = this.active || res.data[0][0].id;
          console.log(res.data[0]);
          this.zoneList = res.data[0];
          this.getZoneClass();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //获取专区下的课程
    getZoneClass(groupid, e) {
      if (groupid) {
        this.page = 1;
        var e = e.target;
        if (e.className == "active") {
          return;
        }
        document.getElementsByClassName("active")[0].className = "";
        e.className = "active";
        this.active = groupid;
      }
      this.loading = true;
      let params = {
        bid: this.active,
        jid: this.$store.state.userInfo.classid,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getZoneCourse", 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;
          this.bannerP = res.data[0];
          this.bannerP.filter((element) => {
            element.imgUrl = JSON.parse(element.chapters).poster;
            return element;
          });
          console.log(this.bannerP);
        })
        .catch((err) => {
          this.loading = false;
          this.refreshing = false;
          console.error(err);
        });
    },
    onRefresh() {
      this.page = 1;
      this.getZoneClass();
    },
    onLoad() {
      var _this = this;
      let params = {
        bid: _this.active,
        jid: _this.$store.state.userInfo.classid,
        page: _this.page,
      };
      _this.ajax
        .get(_this.$store.state.api + "getZoneCourse", params)
        .then((res) => {
          // this.page++;
          _this.loading = false;
          _this.refreshing = false;
          res.data[0].filter((element) => {
            element.imgUrl = JSON.parse(element.chapters).poster;
            return element;
          });
          _this.bannerP = _this.bannerP.concat(res.data[0]);

          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;
          }
          console.log(_this.bannerP);
        })
        .catch((err) => {
          _this.loading = false;
          _this.refreshing = false;
          console.error(err);
        });
    },
    //获取banner
    getBanner() {
      this.ajax
        .get(this.$store.state.api + "getBanner", "")
        .then((res) => {
          this.bannerList = res.data[0];
          console.log(this.bannerList);
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  activated() {
    this.page = 1;
    this.getZone();
    this.getBanner();
  },
};
</script>

<style scoped>
.custom-image >>> .van-empty__image {
  width: 4.5rem;
  height: auto;
  /* height: 6.4rem; */
}
.swiper-area {
  clear: both;
  max-height: 7rem;
  overflow: hidden;
}

.recommend-class-box {
  background: #fff;
  margin: 0.7rem 0 0 0;
  padding: 0.2rem;
}
.recommend-class-title {
  margin: 0rem auto;
  /* display: inline-block; */
  width: 96%;
  white-space: nowrap;
  overflow-x: auto;
  height: 2.4rem;
}
.recommend-class-title::-webkit-scrollbar {
  width: 0;
}
.recommend-class-title span:nth-child(1) {
  margin-left: 0;
}
.recommend-class-title span {
  margin-left: 1rem;
}
.recommend-class-title .active {
  color: #000;
  border-bottom: 4px solid rgb(129, 236, 157);
}

.recommend-class-title span {
  font-size: 0.85rem;
  color: #8a8a8a;
  /* font-weight: bold; */
}

.recommend-box {
  margin-bottom: 0.4rem;
}
.img-box {
  border-radius: 5px;
  overflow: hidden;
  width: 9.3rem;
  height: 5rem;
  margin: 0 auto;
  box-shadow: #c8c8c8 0px 0px 10px 4px;
}

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

.class-view {
  font-size: 0.6rem;
  color: #b4b4b4;
  width: 9.3rem;
  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%;
  /* margin-top: 1px; */
  line-height: 1rem;
  vertical-align: text-top;
  background-repeat: no-repeat;
}

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