<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 placeholder="请输入搜索内容"></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="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="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 ListPagination from "@/components/comments-pagination";

export default {
  components: {
    ListPagination,
  },
  data() {
    return {
      answerList: [],
      sortType: 0, // 0：最新问题 1：最热问题
      listTotal: 0,
      pageSizes: [10, 20, 50],
      pageSize: 10,
      currentPage: 1,
    };
  },
  created() {
    this.getAnwerList();
  },
  methods: {
    getAnwerList() {
      this.answerList = [
        {
          id: 1,
          title: "平台的流程引擎怎么样", // 标题
          content: "我们想用流程引擎，不会用，求大神指点", // 内容
          created_by: "abc", // 发布人的userid
          created: "2020-10-21T14:28:10+08:00", // 发布时间
          updated: "2020-10-21T14:28:10+08:00", // 更新时间
          view: 0, // 浏览量
          answer_num: 2, // 回答数,
          user_name: "普通neo", // 发布人
          picture_path:
            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
        },
        {
          id: 2,
          title: "平台的流程引擎怎么样6666", // 标题
          content: "我们想用流程引擎，不会用，求大神指点", // 内容
          created_by: "abc", // 发布人的userid
          created: "2020-10-21T14:28:10+08:00", // 发布时间
          updated: "2020-10-21T14:28:10+08:00", // 更新时间
          view: 0, // 浏览量
          answer_num: 2, // 回答数,
          user_name: "普通neo", // 发布人
          picture_path:
            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
        },
        {
          id: 3,
          title: "平台的流程引擎怎么样23233333", // 标题
          content: "我们想用流程引擎，不会用，求大神指点", // 内容
          created_by: "abc", // 发布人的userid
          created: "2020-10-21T14:28:10+08:00", // 发布时间
          updated: "2020-10-21T14:28:10+08:00", // 更新时间
          view: 0, // 浏览量
          answer_num: 2, // 回答数,
          user_name: "普通neo", // 发布人
          picture_path:
            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
        },
        {
          id: 4,
          title: "平台的流程引擎怎么样23233333", // 标题
          content: "我们想用流程引擎，不会用，求大神指点", // 内容
          created_by: "abc", // 发布人的userid
          created: "2020-10-21T14:28:10+08:00", // 发布时间
          updated: "2020-10-21T14:28:10+08:00", // 更新时间
          view: 0, // 浏览量
          answer_num: 2, // 回答数,
          user_name: "普通neo", // 发布人
          picture_path:
            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
        },
        {
          id: 5,
          title: "平台的流程引擎怎么样23233333", // 标题
          content: "我们想用流程引擎，不会用，求大神指点", // 内容
          created_by: "abc", // 发布人的userid
          created: "2020-10-21T14:28:10+08:00", // 发布时间
          updated: "2020-10-21T14:28:10+08:00", // 更新时间
          view: 0, // 浏览量
          answer_num: 2, // 回答数,
          user_name: "普通neo", // 发布人
          picture_path:
            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
        },
        {
          id: 1,
          title: "平台的流程引擎怎么样", // 标题
          content: "我们想用流程引擎，不会用，求大神指点", // 内容
          created_by: "abc", // 发布人的userid
          created: "2020-10-21T14:28:10+08:00", // 发布时间
          updated: "2020-10-21T14:28:10+08:00", // 更新时间
          view: 0, // 浏览量
          answer_num: 2, // 回答数,
          user_name: "普通neo", // 发布人
          picture_path:
            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
        },
        {
          id: 2,
          title: "平台的流程引擎怎么样6666", // 标题
          content: "我们想用流程引擎，不会用，求大神指点", // 内容
          created_by: "abc", // 发布人的userid
          created: "2020-10-21T14:28:10+08:00", // 发布时间
          updated: "2020-10-21T14:28:10+08:00", // 更新时间
          view: 0, // 浏览量
          answer_num: 2, // 回答数,
          user_name: "普通neo", // 发布人
          picture_path:
            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
        },
        {
          id: 3,
          title: "平台的流程引擎怎么样23233333", // 标题
          content: "我们想用流程引擎，不会用，求大神指点", // 内容
          created_by: "abc", // 发布人的userid
          created: "2020-10-21T14:28:10+08:00", // 发布时间
          updated: "2020-10-21T14:28:10+08:00", // 更新时间
          view: 0, // 浏览量
          answer_num: 2, // 回答数,
          user_name: "普通neo", // 发布人
          picture_path:
            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
        },
        {
          id: 4,
          title: "平台的流程引擎怎么样23233333", // 标题
          content: "我们想用流程引擎，不会用，求大神指点", // 内容
          created_by: "abc", // 发布人的userid
          created: "2020-10-21T14:28:10+08:00", // 发布时间
          updated: "2020-10-21T14:28:10+08:00", // 更新时间
          view: 0, // 浏览量
          answer_num: 2, // 回答数,
          user_name: "普通neo", // 发布人
          picture_path:
            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
        },
        {
          id: 5,
          title: "平台的流程引擎怎么样23233333", // 标题
          content: "我们想用流程引擎，不会用，求大神指点", // 内容
          created_by: "abc", // 发布人的userid
          created: "2020-10-21T14:28:10+08:00", // 发布时间
          updated: "2020-10-21T14:28:10+08:00", // 更新时间
          view: 0, // 浏览量
          answer_num: 2, // 回答数,
          user_name: "普通neo", // 发布人
          picture_path:
            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
        },
      ];
      this.listTotal = 15;
    },
    selectSortType(type) {
      this.sortType = type;
      this.getAnwerList();
    },
    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");
    },
  },
};
</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>
