<template>
  <Layout class="author-follow-page">
    <LayoutHeader slot='header' :hide="noHeader" theme="white" class="author-page-header" :title="titleName">
      <template v-slot:suctionTop>
        <TabBlock @on-change-tab="onChangeTab"></TabBlock>
      </template>
    </LayoutHeader>
    <UserList ref="userList" type="follow" :on-fetch="onFetch">
      <template v-if="activeType == 0" #item="{ data }">
        <TopicItem :data="data"></TopicItem>
      </template>
      <template v-slot:empty>
        <div class="empty-block">
          <div class="empty-content">
            暂无关注的{{activeType ? '用户' : '话题'}}
          </div>
        </div>
      </template>
    </UserList>
  </Layout>
</template>

<script>
import UserList from './components/user-list';
import TabBlock from './components/follow-tab-block';
import TopicItem from './components/follow-topic-item';
import {createNamespacedHelpers, mapState} from 'vuex';
const {mapActions: userMapActions} = createNamespacedHelpers('user');

export default {
  name: 'authorFollow',
  data() {
    return {
      isMine: false,
      activeType: 1,
      titleName: ''
    };
  },
  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(['authorAttentionList', 'authorMineAttentionList']),
    init(params) {
      this.isMine = !params.id;

      this.titleName = this.isMine ? '我的关注' : 'TA的关注';

      if (!this.isMine) {
        this._baseParams.authorUid = params.id;
      }
    },
    onChangeTab({type}) {
      this.activeType = type;
      this.$refs.userList.init();
    },
    onFetch({page, lastedTime}) {
      let params = Object.assign({page, lastedTime, type: this.activeType}, this._baseParams);

      return this.isMine ? this.authorMineAttentionList(params) : this.authorAttentionList(params);
    }
  },
  components: {
    UserList,
    TabBlock,
    TopicItem
  }
};
</script>

<style lang="scss" scoped>
.author-page-header /deep/ {
  .layout-header {
    border-bottom: none !important;
  }

  .suction-top-block {
    position: relative;
  }

  .tab-block {
    border-bottom: 1px solid #e8e8e8;
  }
}

.empty-block {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;

  .empty-content {
    width: 100%;
    position: absolute;
    top: 30%;
    color: #b7b7b7;
    text-align: center;
    font-weight: 300;

    &:before {
      content: "";
      display: block;
      width: 196px;
      height: 196px;
      background-image: url("~statics/image/userpage/follow-empty.png");
      background-size: 100% 100%;
      margin: 0 auto 34px;
    }
  }
}
</style>