<template>
  <div class="pb_content">
    <div class="pb_head">
      <span>发现</span>
    </div>
    <div class="pb_content_body">
      <div class="find_head" v-if="false">
        <div class="find_tabs">
          <div :class="{ active: show }" @click="show = true">发现</div>
          <div :class="{ active: !show }" @click="show = false">作品推荐</div>
        </div>
      </div>
      <div class="find_content">
        <div v-if="show">
          <van-pull-refresh
            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"
              />
              <div
                class="hs_content_body van-hairline--top"
                v-for="(item, index) in res2"
                :key="index"
                @click="goTo('/find/findDetail?id=' + item.id)"
              >
                <div class="hs_title">
                  <div class="van-ellipsis">
                    <span>{{ item.title }}</span>
                  </div>
                  <div class="van-multi-ellipsis--l2">
                    <span v-html="snippet(item.content)"></span>
                  </div>
                </div>
                <div class="img-box" v-if="item.poster">
                  <van-image
                    width="100%"
                    height="5rem"
                    fit="cover"
                    :src="item.poster"
                  >
                    <template v-slot:loading>
                      <van-loading type="spinner" size="20" />
                    </template>
                    <template v-slot:error>加载失败</template>
                  </van-image>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
        <div class="myw_work_body" v-else>
          <van-pull-refresh
            style="padding-top:.5rem"
            v-model="refreshing1"
            @refresh="onRefresh1"
            looing-text="释放刷新"
            pulling-text="下拉刷新"
          >
            <van-list
              v-model="loading1"
              :finished="finished1"
              finished-text="没有更多啦"
              offset="10"
              :immediate-check="false"
              @load="onLoad1"
            >
              <van-empty
                class="custom-image"
                :image="require('../../assets/icon/custom-empty-image.png')"
                description="暂无数据"
                v-if="isShow1"
              />
              <div
                class="myw_work_contentBox van-hairline--top"
                v-for="(res, index) in res"
                :key="index"
               @click="goTo('/class/classWork?id='+res.id)"
              >
                <div class="myw_work_content">
                  <div class="myw_work_head">
                    <div class="myw_work_title">
                      <span>{{ res.workName }}</span
                      ><span>{{ res.time }}</span>
                    </div>
                    <div class="myw_work_rate">
                      <van-rate
                        :value="res.rrate"
                        void-icon="star"
                        void-color="#e6e6e6"
                        color="#ff6823"
                        readonly
                      />
                    </div>
                  </div>
                </div>
                <div class="myw_work_imgbox">
                  <div class="myw_work_img">
                    <!-- <img :src="res.imgUrl" alt="" /> -->
                             <van-image
                    width="100%"
                    height="6rem"
                    fit="cover"
                    :src="res.imgUrl"
                  >
                    <template v-slot:loading>
                      <van-loading type="spinner" size="20" />
                    </template>
                    <template v-slot:error>加载失败</template>
                  </van-image>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:"main-keep-alive",
  data() {
    return {
      show: true,
      res2: [],
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
      loading1: false,
      finished1: false,
      refreshing1: false,
      page1: 1,
      isShow: true,
      isShow1: true,
      res: [],
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    //在method里面写方法
    snippet(value) {
      return value.replace(/<[^>]*>/g, "");
    },
    tabClick(index) {},

     //查询作品推荐
    getWorkI() {
      this.loading1 = true;
      let params = { page: this.page1 };
      this.ajax
        .get(this.$store.state.api + "getWrokI", params)
        .then((res) => {
          if (res.data[0].length == 0) {
            this.isShow1 = true;
          } else {
            this.isShow1 = false;
          }
          this.page1++;
          this.loading1 = false;
          this.refreshing1 = false;
          this.finished1 = false;
          res.data[0].filter((element) => {
            element.imgUrl = JSON.parse(element.content).photo.split(",")[0];

            var el = JSON.parse(element.chapters).homework;
            for (var i = 0; i < el.length; i++) {
              if (el[i].hid == element.homeworkid) {
                element.workName = el[i].name + "-" + element.name;
              }
            }
            if (element.rate) {
              var rate = JSON.parse(element.rate);
              element.rrate = Math.round(
                (rate.ca + rate.sia + rate.eta + rate.pia + rate.lra) / 5
              );
            } else {
              element.rrate = 0;
            }
            return element;
          });
          this.res = res.data[0];
          console.log(this.res2);
        })
        .catch((err) => {
          this.loading1 = false;
          this.refreshing1 = false;
          console.error(err);
        });
    },
    onRefresh1() {
      this.page1 = 1;
      this.getWorkI();
    },
    onLoad1() {
      let params = { page: this.page1 };
      this.ajax
        .get(this.$store.state.api + "getWrokI", params)
        .then((res) => {
          this.page1++;
          this.loading1 = false;
          this.refreshing1 = false;
          res.data[0].filter((element) => {
            element.imgUrl = JSON.parse(element.content).photo.split(",")[0];

            var el = JSON.parse(element.chapters).homework;
            for (var i = 0; i < el.length; i++) {
              if (el[i].hid == element.homeworkid) {
                element.workName = el[i].name + "-" + element.name;
              }
            }
            if (element.rate) {
              var rate = JSON.parse(element.rate);
              element.rrate = Math.round(
                (rate.ca + rate.sia + rate.eta + rate.pia + rate.lra) / 5
              );
            } else {
              element.rrate = 0;
            }
            return element;
          });
          this.res = this.res.concat(res.data[0]);
          var num = this.res.length ? this.res[0].num : 0;
          if (this.res.length < num) {
            this.page++;
            this.loading1 = false;
          } else {
            this.finished1 = true;
            this.loading1 = true;
          }
        })
        .catch((err) => {
          this.loading1 = false;
          this.refreshing1 = false;
          console.error(err);
        });
    },

    //查询发现
    getFind() {
      this.loading = true;
      let params = { page: this.page };
      this.ajax
        .get(this.$store.state.api + "getFind", 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.res2 = res.data[0];
          console.log(this.res2);
        })
        .catch((err) => {
          this.loading = false;
          this.refreshing = false;
          console.error(err);
        });
    },
    onRefresh() {
      this.page = 1;
      this.getFind();
    },
    onLoad() {
      let params = { page: this.page };
      this.ajax
        .get(this.$store.state.api + "getFind", params)
        .then((res) => {
          this.page++;
          this.loading = false;
          this.refreshing = false;
          this.res2 = this.res2.concat(res.data[0]);
          var num = this.res2.length ? this.res2[0].num : 0;
          if (this.res2.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);
        });
    },

  },
  activated() {
    this.page = 1;
    this.getFind();
    // this.page1 = 1;
    // this.getWorkI();
  },
};
</script>

<style scoped>
.custom-image >>> .van-empty__image {
  width: 4.5rem;
  height: auto;
  /* height: 6.4rem; */
}
.van-hairline--top::after {
  border-top-width: 2px;
}
.van-hairline--top:nth-child(1)::after {
  border-top-width: 0px;
}
.img-box {
  border-radius: 3px;
  overflow: hidden;
  width: 5rem;
  height: 3.8rem;
  /* margin: 0 auto; */
  /* box-shadow: #c8c8c8 0px 0px 10px 4px; */
  flex-grow: 1;
}

.hs_content {
  margin-top: 1rem;
}
.hs_content_body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 95%;
  margin: 0 auto;
  padding: 0.8rem 0;
}
.hs_title {
  flex-grow: 2;
  width: 60%;
}
.hs_title div:nth-child(1) {
  font-size: 0.8rem;
  font-weight: 600;
}
.hs_title div:nth-child(2) {
  font-size: 0.68rem;
  margin-top: 0.5rem;
  color: #4c4c4c;
}
.pb_content_body {
  background: #fff;
}
.find_head {
  padding: 1rem 0 0;
  /* position: sticky;
  top: 3rem;background: #fff;
  z-index: 999; */
}
.find_tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.73rem;
  border-radius: 5px;
  height: 1.8rem;
  background: rgb(208, 208, 208);
  margin: 0rem auto 0.5rem;
  width: 50%;
  text-align: center;
  color: #fff;
  overflow: hidden;
  line-height: 1.8rem;
}
.find_tabs div {
  width: 50%;
  height: 100%;
}

.active {
  background: rgb(81, 201, 154);
}

.find_content {
}

.myw_work_body {
  background: #fff;
}
.myw_work_contentBox {
  padding: 0.5rem 0;
  width: 95%;
  margin: 0 auto;
}
.myw_work_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.myw_work_head {
}
.myw_work_title {
}
.myw_work_title span:nth-child(1) {
  font-size: 0.8rem;
}
.myw_work_title span:nth-child(2) {
  font-size: 0.65rem;
  margin-left: 0.5rem;
  color: #7e7e7e;
}
.myw_work_rate {
}
/* .myw_work_button {
}
.myw_work_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.4rem;
  font-size: 0.7rem;
  line-height: 1.4rem;
  background: rgb(81, 201, 154);
  padding: 0 1rem;
} */
.myw_work_imgbox {
  margin: 0.3rem 0 0 0;
}
.myw_work_img {
  border-radius: 5px;
  overflow: hidden;
  min-width: 8rem;
  width: 10rem;
  height: 6rem;
  box-shadow: #c8c8c8 0px 0px 10px 4px;
}
.myw_work_img img {
  width: inherit;
  height: inherit;
}
</style>
