<template>
  <div class="answer_container">
    <router-view class="left_content" />
    <div
      class="right_content"
      v-if="$route.path !== '/technical_support/answer_center/edit'"
    >
      <div class="user_info" v-if="userInfo">
        <div class="user_img">
          <img :src="userInfo.picture_path || head_pic" />
        </div>
        <p class="user_name">{{ userInfo.user_name }}</p>
        <p class="user_level">{{ userInfo.role }}</p>
        <ul class="user_other">
          <li style="cursor: pointer;" @click="intoListPage(0)">
            <p>{{ userInfo.question_num }}</p>
            <p>我的提问</p>
          </li>
          <li style="cursor: pointer;" @click="intoListPage(1)">
            <p>{{ userInfo.answer_num }}</p>
            <p>我的回答</p>
          </li>
          <li>
            <p>{{ userInfo.view_num }}</p>
            <p>浏览数</p>
          </li>
        </ul>
      </div>
      <div class="contributor_info" v-if="contributorAnswerList">
        <h3 class="contributor_title">
          <span>本月回答贡献榜</span>
        </h3>
        <ul class="contributor_list">
          <li
            v-for="(item, index) in contributorAnswerList"
            :key="'answer_' + index"
          >
            <span class="list_index" v-text="index + 1"></span>
            <img class="list_img" :src="item.picture_path || head_pic" />
            <span class="list_text text_clip" v-text="item.item"></span>
            <span class="list_count" v-text="item.num"></span>
          </li>
        </ul>
      </div>
      <div class="contributor_info" v-if="contributorQuizList">
        <h3 class="contributor_title">
          <span>本月提问贡献榜</span>
        </h3>
        <ul class="contributor_list">
          <li
            v-for="(item, index) in contributorQuizList"
            :key="'quiz_' + index"
          >
            <span class="list_index" v-text="index + 1"></span>
            <img class="list_img" :src="item.picture_path || head_pic" />
            <span class="list_text text_clip" v-text="item.item"></span>
            <span class="list_count" v-text="item.num"></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      userInfo: null,
      contributorAnswerList: null,
      contributorQuizList: null,
      head_pic: require("../../../assets/imgs/img_head.png"),
    };
  },
  created() {
    this.getUserInfo();
    this.getAnwerList();
  },
  methods: {
    getUserInfo() {
      this.$http.get("/apaas/support/qa/info").then(({ data }) => {
        if (data.success) {
          this.userInfo = data.data;
        }
      });
    },
    getAnwerList() {
      this.$http
        .get("/apaas/support/qa/question/contribution")
        .then(({ data }) => {
          if (data.success) {
            this.contributorAnswerList = data.data || [];
          }
        });

      this.$http
        .get("/apaas/support/qa/answer/contribution")
        .then(({ data }) => {
          if (data.success) {
            this.contributorQuizList = data.data || [];
          }
        });
    },
    intoListPage(type) {
      if (type === 0) {
        this.$router.push("/qa/questions");
      } else {
        this.$router.push("/qa/answers");
      }
    },
  },
};
</script>

<style scoped>
.answer_container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.left_content {
  flex-grow: 1;
}
.right_content {
  width: 328px;
  flex-shrink: 0;
  margin-left: 20px;
  margin-top: 46px;
}
.right_content > div {
  background-color: #fff;
  border-radius: 10px;
}
.right_content > div + div {
  margin-top: 20px;
}
.user_info {
  padding: 20px;
  text-align: center;
}
.user_img {
  font-size: 0;
}
.user_img > img {
  width: 104px;
  border-radius: 50%;
  border: 2px solid #e3e5ef;
}
.user_name {
  font-size: 22px;
  line-height: 45px;
  color: #1d1e20;
  margin-top: 10px;
}
.user_level {
  font-size: 14px;
  line-height: 24px;
  color: #8890a7;
}
.user_other {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
}
.user_other > li {
  flex-grow: 1;
}
.user_other > li + li {
  border-left: 1px solid #e3e5ef;
}
.user_other > li {
  font-size: 22px;
  line-height: 1;
}
.user_other > li > p:nth-child(2) {
  font-size: 14px;
  color: #58617a;
  margin-top: 15px;
}
.user_other > li:nth-child(1) {
  color: #ef9433;
}
.user_other > li:nth-child(2) {
  color: #25bdb1;
}
.user_other > li:nth-child(3) {
  color: #38aef9;
}
.contributor_info {
  padding: 0 15px 15px;
}
.contributor_title {
  padding: 5px 0;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contributor_title > span:nth-child(1) {
  font-size: 18px;
  font-weight: bold;
  line-height: 40px;
  color: #58617a;
  position: relative;
  padding-left: 15px;
}
.contributor_title > span:nth-child(1)::before {
  content: "";
  width: 4px;
  height: 18px;
  background-color: #515fe7;
  border-radius: 2px;
  position: absolute;
  top: 10px;
  left: 0;
}
.contributor_list > li {
  height: 42px;
  padding: 0 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  color: #58617a;
}
.contributor_list > li:nth-child(1) > .list_index {
  color: #e15260;
}
.contributor_list > li:nth-child(2) > .list_index {
  color: #ff7800;
}
.contributor_list > li:nth-child(3) > .list_index {
  color: #e15260;
}
.contributor_list > li > * + * {
  margin-left: 10px;
}
.list_index {
  flex-shrink: 0;
  width: 20px;
  text-align: right;
}
.list_img {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}
.list_text {
  flex-grow: 1;
  margin-left: 15px !important;
}
.list_count {
  flex-shrink: 0;
  width: 50px;
  text-align: center;
}
</style>
