<style lang="less">
.component-follow-btn {
  width: 100%;
  height: 100%;
}
</style>

<template>
  <block v-if="followed !== null">
    <block v-if="followed">
      <slot name="followed-content"></slot>
    </block>
    <slot name="un-followed-content" v-else v-on:click="toFollow"></slot>
  </block>
</template>

<script>
import wepy from '@wepy/core';
import store from '@/store';
import { mapState } from '@wepy/x';
import { getUserHasFollowed } from '@/api/home';
wepy.component({
  store,
  mame: 'FollowBtn',
  data: {
    followed: null,
    linkUrl: ''
  },
  options: {
    multipleSlots: true
  },
  props: {},
  created() {
    if (this.token) {
      this.getData();
    }
  },
  computed: {
    ...mapState({ token: state => state.user.token })
  },
  watch: {
    token(curVal, oldVal) {
      if (curVal && !oldVal) {
        this.getData();
      }
    }
  },
  methods: {
    getData() {
      getUserHasFollowed().then(res => {
        let result = res.data || {};
        this.followed = result.subscribe;
        this.linkUrl = result.publicWechatUrl;
      });
    },
    toFollow() {
      wx.navigateTo({
        url: `/h5/pages/external-view/h5?url=${encodeURIComponent(
          this.linkUrl
        )}`
      });
    }
  }
});
</script>