<template>
  <div class="global">
    <aside-header
      :author="author"
      :billboard="billboard"
      :follow-status="followStatus"
      :follow-loading="followLoading"
      :can-opera="canOpera"
      @follow="follow"
      @unFollow="unFollow"
    />
    <div
      v-show="threeEssenceThread.length > 0"
      v-loading="loading"
      class="recommend block"
    >
      <div class="title">{{ $t("topic.recommend") }}</div>
      <div
        v-for="(item, index) in threeEssenceThread"
        :key="index"
        class="container-post"
      >
        <div
          v-if="item.title && item.firstPost.summaryText"
          class="content-html"
          @click="goToPage(item)"
        >
          {{ item.title || item.firstPost.summaryText }}
        </div>
        <div
          v-else
          class="content-html"
          @click="goToPage(item)"
          v-html="$xss(item.firstPost.summary)"
        />
        <span
          class="view-count"
        >{{ item.viewCount }} {{ $t("topic.readAlready") }}</span>
      </div>
    </div>
    <advertising style="margin-top: 15px;margin-bottom:3px;" />
    <copyright />
  </div>
</template>

<script>
import handleError from '@/mixin/handleError';

export default {
  name: 'TopicAside',
  mixins: [handleError],
  props: {
    author: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      threeEssenceThread: [],
      EssenceThread: [],
      followStatus: 0,
      followLoading: false,
      loading: true,
      billboard: [
        { key: 'threadCount', count: '', text: this.$t('home.thread') },
        { key: 'questionCount', count: '', text: this.$t('profile.question') },
        { key: 'likedCount', count: '', text: this.$t('topic.getLike') },
        { key: 'followCount', count: '', text: this.$t('home.followed') },
        { key: 'fansCount', count: '', text: this.$t('profile.followers') }
      ]
    };
  },
  computed: {
    canOpera() {
      const userId = this.$store.getters['session/get']('userId');
      if (this.author.id && this.author.id > 0) {
        // 作者 = 当前用户 && 不是匿名用户
        return parseInt(userId) > 0 && userId !== this.author.id.toString();
      }
      return false;
    }
  },
  watch: {
    author: {
      handler(val) {
        if (Object.keys(val).length === 0) return;
        this.followStatus = val.follow;
        this.billboard.forEach(item => {
          item.count = val[item.key];
        });
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.getEssenceThread();
  },
  methods: {
    getEssenceThread() {
      this.loading = true;
      return this.$store
        .dispatch('jv/get', [
          `threads`,
          {
            params: {
              'filter[isApproved]': 1,
              'filter[isEssence]': 'yes',
              'filter[isDeleted]': 'no'
            }
          }
        ])
        .then(
          data => {
            this.EssenceThread = [...data];
            if (this.EssenceThread.length === 0) return;
            const limit
              = this.EssenceThread.length > 3 ? 3 : this.EssenceThread.length;
            while (this.threeEssenceThread.length < limit) {
              const index = this.getRandom(this.EssenceThread.length);
              this.threeEssenceThread.push(this.EssenceThread[index]);
              this.EssenceThread.splice(index, 1); // 在原数据中除掉已进入推荐的，避免重复
            }
          },
          e => this.handleError(e)
        )
        .finally(() => {
          this.loading = false;
        });
    },
    getRandom(length) {
      return Math.floor(Math.random() * length);
    },
    follow() {
      if (this.followLoading) return;
      this.followLoading = true;
      const params = {
        _jv: { type: `follow` },
        to_user_id: this.author.id.toString()
      };
      return this.$store.dispatch('jv/post', params).then(
        res => {
          this.followLoading = false;
          this.followStatus = res.is_mutual === 0 ? 1 : 2;
        },
        e => this.handleError(e)
      );
    },
    unFollow() {
      if (this.followLoading) return;
      this.followLoading = true;
      this.$store
        .dispatch('jv/delete', `follow/${this.author.id}/1`)
        .then(() => {
          this.followLoading = false;
          this.followStatus = 0;
        });
    },
    goToPage(item) {
      process.client && window.open(`/thread/${item._jv.id}`);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variable/color.scss";

.global {
  width: 300px;
  margin-left: 15px;
  background: transparent;

  > .recommend {
    border-radius: 3px;
    margin-top: 15px;
    background: #fff;
    padding: 20px;
    min-height: 100px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.03);
    > .title {
      font-size: 16px;
      color: #6d6d6d;
      margin-bottom: 20px;
    }
    > .no-data {
      color: #6d6d6d;
    }
    > .container-post {
      padding-bottom: 20px;
      border-bottom: 1px solid $border-color-base;

      &:last-child {
        padding-bottom: 0;
        border-bottom: none;
      }

      > .content-html {
        word-break: break-all;
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: $color-blue-base;
        }
      }

      > .view-count {
        margin-top: 10px;
        color: $font-color-grey;
        font-size: 12px;
      }
    }
  }
}

@media screen and (max-width: 1005px) {
  .global {
    width: 220px;
  }
}
</style>
