<template>
  <Layout class="author-fans-page">
    <LayoutHeader slot='header' :hide="noHeader" theme="white" class="author-page-header" :title="(isMine ? '我' : 'TA') + '的粉丝'"></LayoutHeader>
    <UserList ref="userList" :follow-name="isMine ? '回粉' : '关注'" :on-fetch="onFetch"></UserList>
  </Layout>
</template>

<script>
import UserList from './components/user-list';
import {createNamespacedHelpers, mapState} from 'vuex';
const {mapActions: userMapActions} = createNamespacedHelpers('user');

export default {
  name: 'authorFans',
  data() {
    return {
      isMine: false
    };
  },
  created() {
    this._baseParams = {
      authorType: this.$route.params.type || 1,
      limit: 20,
    };
  },
  activated() {
    this.init(this.$route.params);
    this.$refs.userList.init();
  },
  beforeRouteUpdate(to, from, next) {
    this.init(to.params);
    this.$refs.userList.init();
    next();
  },
  computed: {
    ...mapState(['yoho']),
    noHeader() {
      return this.yoho.context.env.isChat;
    },
  },
  methods: {
    ...userMapActions(['authorFansList', 'authorMineFansList']),
    init(params) {
      this.isMine = !params.id;

      if (!this.isMine) {
        this._baseParams.authorUid = params.id;
      }
    },
    onFetch({page, lastedTime}) {
      let params = Object.assign({page, lastedTime}, this._baseParams);

      return this.isMine ? this.authorMineFansList(params) : this.authorFansList(params);
    }
  },
  components: {
    UserList
  }
};
</script>