<template>
  <div>
    <div ref="copy" class="btn" @click="onClick">
      立即邀请
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import { get } from "lodash";
import Clipboard from "clipboard";

const { mapActions } = createNamespacedHelpers("gain");

export default {
  name: "GainFooter",
  data() {
    return {
      isUnionType: false,
      shareUrl:
        "https://activity.yoho.cn/feature/5475.html?share_id=8169&title=新人礼遇&nodownload=1"
    };
  },
  mounted() {
    let vm = this;

    this.copyBtn = new Clipboard(this.$refs.copy, {
      text() {
        return vm.shareUrl + `&union_type=${vm.isUnionType}`;
      }
    });

    this.copyBtn.on("success", function() {
      if (vm.isUnionType) {
        vm.$createToast({
          txt: "邀请链接已复制，快去粘贴吧~",
          type: "txt"
        }).show();
      }
    });

    this.copyBtn.on("error", function() {});

    this.fetchUnionStatus().then(result => {
      this.isUnionType = get(result, "data.unionType", false);
    });
  },
  methods: {
    ...mapActions(["fetchUnionStatus"]),

    async onClick() {
      let vm = this;

      const user = await this.$sdk.getUser();

      if (!user.uid) {
        this.$sdk.goLogin();
        return;
      }

      if (!vm.isUnionType) {
        this.$yoho.goNewPage({
          url:
            'http://m.yohobuy.com/activity/have-gain/apply?title=有货有赚介绍&openby:yohobuy={"action":"go.h5","params":{"title":"有货有赚介绍","url":"http://m.yohobuy.com/activity/have-gain/apply"}}'
        });
        return;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.btn {
  font-size: 32px;
  width: 100%;
  height: 98px;
  line-height: 98px;
  color: white;
  text-align: center;
  background: #444;
}
</style>