<template>
  <div class="help">
    <m-header v-if="headerStatus" />
    <m-search
      @onSearch="onSearch"
      placeholder="搜索"
      background="#F3F0F8"
      class="search"
    />
    <!-- <van-collapse  v-model="activeNames" accordion>
      <van-collapse-item
        v-for="(item, index) in dataList"
        :key="index"
        title-class="van-ellipsis"
        :title="item.title"
        :name="index"
        ><div class="quillWrap" v-html="item.content"></div
      ></van-collapse-item>
    </van-collapse> -->
    <div v-if="dataStatus">
      <van-cell
        v-for="(item, index) in dataList"
        :key="index"
        :title="item.title"
        is-link
        @click="gotoDetali(item)"
      />
    </div>
    <m-empty class="empty" v-else key="data" />
    <van-image-preview
      v-model="show"
      :images="images"
      :showIndex="false"
    ></van-image-preview>
  </div>
</template>
<script>
/* eslint-disable */
import MHeader from "@/components/MHeader";
import MEmpty from "@/components/MEmpty";
import { browser, calcMinute } from "@/common/common";
import { helpCenterCatalogList, helpCenterContentList } from "@/api/app";
import MSearch from "@/components/MSearch";
export default {
  name: "courseApply",
  components: { MHeader, MEmpty, MSearch },
  data() {
    return {
      headerStatus: true,
      activeNames: [0],
      dataStatus: true,
      dataList: [],
      show: false,
      images: [],
      params: { title: null },
    };
  },
  mounted() {
    let params = this.$route.query;
    if (params.Authorization) {
      localStorage.setItem("Authorization", decodeURI(params.Authorization));
      localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }

    document.title = "帮助中心";
    if (browser().android || browser().iPhone) {
      this.headerStatus = false;
    }

    this.__init();
    window.showImg = (e) => {
      if (e.src) {
        this.images = [e.src];
        this.show = true;
      }
    };
    // document.querySelectorAll(".quillWrap").addEventListerner('click',this.showImg)
  },
  methods: {
    async __init() {
      let loadingStatus = true;
      this.$toast.loading({
        duration: 0,
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
      });
      let catalogResult = [];
      await helpCenterCatalogList().then((res) => {
        let result = res.data;
        if (result.code == 200) {
          catalogResult = result.data;
        } else {
          this.$toast(result.msg);
          loadingStatus = false;
        }
      });
      if (catalogResult.length > 0) {
        await helpCenterContentList({
          catalogIds: catalogResult[0].id,
          title: this.params.title,
          page: 1,
          rows: 100,
        }).then((res) => {
          let result = res.data;
          loadingStatus = false;
          if (result.code == 200) {
            this.dataList = result.data.rows ? result.data.rows : [];
            this.dataList = this.dataList.map((item) => {
              item.content = item.content.replace(
                /<img/gi,
                '<img onClick="showImg(this)" style="width: 100% !important;"'
              );
              return item;
            });
            if (this.dataList.length > 0) {
              this.dataStatus = true;
            } else {
              this.dataStatus = false;
            }
          } else {
            this.$toast(result.msg);
          }
        });
      } else {
        loadingStatus = false;
      }

      if (!loadingStatus) {
        this.$toast.clear();
      }
    },
    onSearch(val) {
      this.params.title = val;
      this.params.page = 1;
      this.dataList = [];
      this.dataShow = true;
      this.loading = true;
      this.finished = false;
      this.__init();
    },
    gotoDetali(item) {
        this.$router.push({path:'/HelpCenterDetail', query:{item:JSON.stringify(item)} })
    },
  },
  destroyed() {
    this.$toast.clear();
  },
};
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");
.help {
  min-height: 100vh;
}
/deep/.van-collapse {
  margin: 0.15rem 0;
  /deep/.van-cell {
    color: #1a1a1a;
    font-size: 0.17rem;
    padding: 0.15rem 0.16rem;
  }
  /deep/.van-collapse-item__content {
    font-size: 0.14rem;
    color: #808080;
  }
}
/deep/.quillWrap {
  img {
    width: 100%;
  }
}
.search {
  border-top: 1px solid #f7f8fa;
}
</style>