<template>
  <div class="containerbox">
    <!-- 搜索 -->
    <div class="wordheadtop">
      <div class="flextwo sharetopkk" @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 searchheadkkk">
        <div class="searchbox flexone">
          <div class="searchimg">
            <img src="../../../assets/search.png" alt />
          </div>

          <input
            type="text"
            placeholder="搜索你想要的素材"
            class="searchtext"
            @focus="enterword"
            @keyup.enter="selsectword"
          />
        </div>
      </div>

      <div class="coursenav flexone" v-if="showkeyword == false">
        <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
          class="coursenavleft"
          :class="selnav == 2 ? 'selactive' : ''"
          :data-id="2"
          @click="selectnav"
        >文字素材</div>
      </div>
    </div>
    <div class="keywordk flexone" v-if="showkeyword" @click="hidekey">
      <div
        class="keyworditem"
        v-for="(item, index) in sort"
        :key="index"
        @click="selname(item.name)"
      >{{ item.name }}</div>
    </div>
    <div v-if="showkeyword == false">
      <div class="nodata" v-if="sucailist.length==0" style="margin-top:5.8rem">暂无数据</div>

      <div v-else>
        <van-list
          class="sucaiboxpage flexone"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="sucaiboxitempage"
            @click="gokind(item,index)"
            v-for="(item,index) in sucailist"
            :key="index"
          >
            <div class="sucaiimg">
              <img :src="item.icon" alt />
            </div>
            <div class="sucainame">{{item.name}}</div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selnav: 0,
      keyword: '',
      showkeyword: false,
      type: 1,
      finished: "",
      loading: false,
      page: 1,
      this_page: "",
      total_page: "",
      sucailist: [],
      sort: []
    };
  },
  created() {
    document.title = "唐元集公众号";
    this.getsucai();
    this.getlabellist();

  },
  methods: {
    // 选择标签名字
    selname(name) {
      this.keyword = name;
      this.page = 1;
      this.sucailist = [];
      this.getsucai();
    },

    entertext(e) {
      this.keyword = e.target.value;
      console.log(this.keyword);
    },
    selsectword(e) {
      console.log(438948998)
      this.page = 1;
      this.sucailist = [];
      this.keyword = e.target.value;
      this.showkeyword = false
      this.getsucai();
    },
    back() {
      this.$router.go(-1);
    },
    hidekey() {
      this.showkeyword = false;
    },
    // 去列表页面
    gokind(item, index) {
      if (this.selnav == 0) {
        this.$router.push({
          path: "/coursesucai",
          query: {
            sort_id: item.id,
            sort_name: item.name
          }
        });
      } else if (this.selnav == 1) {
        this.$router.push({
          path: "/picsucai",
          query: {
            sort_id: item.id,
            sort_name: item.name
          }
        });
      } else if (this.selnav == 2) {
        this.$router.push({
          path: "/wenzisucai",
          query: {
            sort_id: item.id,
            sort_name: item.name
          }
        });
      }

    },
    // 素材详情
    videodetail(id, item) {
      if (id == 1) {
        this.$router.push({
          path: "/videosucaidetail",
          query: {
            id: item.id
          }
        });
      } else if (id == 2) {
        this.$router.push({
          path: "/picsucaidetail",
          query: {
            id: item.id
          }
        });
      } else if (id == 3) {
        this.$router.push({
          path: "/wenansucaidetail",
          query: {
            id: item.id
          }
        });
      }
    },



    // 获取标签列表
    getlabellist() {
      let that = this;
      var url = "/api/user/tag";
      let param = {};

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.sort = res.data.sort;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 视频上拉加载
    onLoad() {
      let that = this;
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        console.log(3434);

        let newpage = that.page;
        newpage++;
        that.page = newpage;
        console.log(that.videopage);
        that.getsucai();

        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (that.this_page == that.total_page) {
          this.finished = true;
        }
      }, 1000);
    },
    getsucai() {
      let that = this;
      var url = "/api/user/material_sort";
      let param = {
        keyword: that.keyword,
        type: that.type,
        page: that.page
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.sucailist = that.sucailist.concat(res.data.sort);
          console.log(that.sucailist)
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    selectnav(e) {
      this.selnav = e.currentTarget.dataset.id;
      this.type = Number(this.selnav) + 1;
      console.log(this.type);
      this.page = 1;
      this.sucailist = [];
      this.getsucai();
    },
    enterword() {
      console.log(48834998);
      this.showkeyword = true;
    }
  }
};
</script>

<style scoped>
@import "../../../style/usercenter.css";
.sucaicourse {
  margin-top: 2rem;
}
.courseboxitem {
  background: #fff;
}
.searchhead {
  padding: 0.2rem 0.32rem 0;
}
.coursenav {
  margin-top: 1rem;
}
.keywordk {
  padding: 0.32rem;
  box-sizing: border-box;
  margin-top: 0.8rem;
  background: #fff;
}
.searchheadkkk {
  top: 0.8rem;
}
</style>