<template>
  <div class="answer_list_container">
    <div class="apass_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/technical_support">
          技术支持
        </el-breadcrumb-item>
        <el-breadcrumb-item to="/technical_support/answer_center">
          问答中心
        </el-breadcrumb-item>
        <el-breadcrumb-item> 问答列表 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="main_container">
      <div class="action_list apaas_button">
        <span>
          <el-button
            :type="sortType === 0 ? 'warning' : 'defalut'"
            @click="selectSortType(0)"
          >
            最热问题
          </el-button>
          <el-button
            :type="sortType === 1 ? 'warning' : 'defalut'"
            @click="selectSortType(1)"
          >
            最新问题
          </el-button>
        </span>
        <span>
          <el-input
            v-model="searchText"
            placeholder="请输入搜索内容"
            @input="searchInput"
          ></el-input>
        </span>
        <span>
          <el-button type="primary" @click="intoAnswerPage">
            <img
              :src="require('../../../assets/imgs/jszc_ic_fabu.png')"
              style="margin-right: 5px; vertical-align: middle"
            />
            发帖提问
          </el-button>
        </span>
      </div>
      <ul class="answer_list">
        <li
          v-for="(item, index) in answerList"
          :key="'answer_' + index"
          @click="viewItem(item)"
        >
          <h3 class="answer_title" v-text="item.title"></h3>
          <p class="answer_content" v-text="getContentText(item.content)"></p>
          <p class="answer_info">
            <span>
              <img class="user_img" :src="item.picture_path" />
              <span class="user_name" v-text="item.user_name"></span>
              <span class="user_text">发布于</span>
              <span class="user_time" v-text="getTimeText(item.created)"></span>
            </span>
            <span>
              <span class="num_answer" v-text="item.answer_num"></span>
              <span class="num_view" v-text="item.view"></span>
            </span>
          </p>
        </li>
      </ul>

      <list-pagination
        class="answer_pagination"
        :total="listTotal"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      ></list-pagination>
    </div>
  </div>
</template>

<script>
import helper from "@/services/helper.js";
import ListPagination from "@/components/comments-pagination";

export default {
  components: {
    ListPagination,
  },
  data() {
    return {
      answerList: [],
      listTotal: 0,
      pageSizes: [10, 20, 50],
      pageSize: 10,
      currentPage: 1,
      sortType: 0, // 0：最新问题 1：最热问题
      searchText: "",
      inputTimer: null,
    };
  },
  created() {
    this.getAnwerList();
  },
  methods: {
    getAnwerList() {
      this.$http
        .get("/apaas/support/qa/question/list", {
          params: {
            style: 1,
            order: this.sortType === 0 ? "" : "created",
            search: this.searchText,
            limit: this.pageSize,
            page: this.currentPage,
          },
        })
        .then(({ data }) => {
          if (data.success) {
            this.answerList = data.data || [];
            this.listTotal = data.total;
          }
        });
    },
    selectSortType(type) {
      /* if (this.sortType === type) {
        return;
      } */

      this.currentPage = 1;
      this.sortType = type;
      this.getAnwerList();
    },
    searchInput() {
      if (this.inputTimer) {
        clearTimeout(this.inputTimer);
      }

      this.inputTimer = setTimeout(() => {
        console.log(this.searchText);
        this.currentPage = 1;
        this.getAnwerList();
      }, 200);
    },
    changePageSize(value) {
      this.pageSize = value;
      this.currentPage = 1;
      this.getAnwerList();
    },
    changeCurrentPage(value) {
      this.currentPage = value;
      this.getAnwerList();
    },
    viewItem(item) {
      this.$router.push(`/technical_support/answer_center/detail/${item.id}`);
    },
    intoAnswerPage() {
      this.$router.push("/technical_support/answer_center/edit");
    },
    getTimeText(time) {
      return helper.dateStringTransform(time || "");
    },
    getContentText(content) {
      let text = content.replace(/<img[^>]+>/g, "【图片】");

      text = text.replace(/<iframe(([\s\S])*?)<\/iframe>/g, "【视频】");
      text = text.replace(/<pre(([\s\S])*?)<\/pre>/g, "【代码】");
      text = text.replace(/<\/?.+?>/g, "");

      return text;
    },
  },
};
</script>

<style scoped>
.apass_breadcrumb > .el-breadcrumb {
  padding: 12px 0 11px;
}
.main_container {
  min-height: calc(100% - 66px);
  padding: 0 15px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.action_list {
  padding: 15px 0;
  border-bottom: 1px solid #f4f7fc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.action_list .el-input {
  width: 380px;
}
.answer_list {
  flex-grow: 1;
}
.answer_list > li {
  padding: 30px 10px 15px;
  border-bottom: 1px solid #f4f7fc;
  cursor: pointer;
}
.answer_list > li:hover {
  background-color: #fafafa;
}
.answer_title {
  font-size: 16px;
  line-height: 25px;
  color: #242c43;
}
.answer_content {
  font-size: 14px;
  line-height: 25px;
  color: #8890a7;
  margin-top: 5px;
}
.answer_info {
  font-size: 14px;
  line-height: 25px;
  color: #58617a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}
.answer_info > span {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.answer_info > span:nth-child(1) > * {
  margin-left: 10px;
}
.user_img {
  height: 20px;
  border-radius: 10px;
}
.user_text {
  color: #a9aec0;
}
.answer_info > span:nth-child(2) > span {
  padding-left: 25px;
  background-repeat: no-repeat;
  background-position: left center;
  margin-right: 30px;
}
.num_answer {
  background-image: url("../../../assets/imgs/jszc_ic_huida.png");
}
.num_view {
  background-image: url("../../../assets/imgs/jszc_ic_liulan.png");
}
.answer_pagination {
  margin: 25px 0 10px;
}
</style>
