<template>
  <div v-show="!isSubscribed" class="lofty-btn ml-auto" @click="beginSubscribe">Subscribe to the report</div>
  <div v-show="isSubscribed" class="lofty-btn is-subscribed ml-auto">
    <span>Already subscribed to the report</span>
    <i class="lofty_iconfont lofty-icon-checked"></i>
  </div>
</template>

<script setup>
import checkLogin from "@/common/sign-log/index.js";
import SubscribePop from "./subscribePop.vue";
import util from "@/util/index.js";

const { reportId, leadSubscribeStatus, submitJs, name } = defineProps({
  submitJs: String,
  reportId: [String, Number],
  leadSubscribeStatus: Boolean,
  name: String
})
const isSubscribed = ref(leadSubscribeStatus)
function beginSubscribe() {
  checkLogin(async ()=>{
    const div = document.createElement('div')
    document.body.appendChild(div)
    createApp(SubscribePop, {
      reportId,
      name,
      onSubmit: () => {
        isSubscribed.value = true
        util.toast('Subscribe Successful!')
        util.executeSubmitJS(submitJs)
      }
    }).mount(div)
  })
}

</script>
<style lang="scss">
.is-subscribed {
  background: #20C472;
  gap: 10px;
  cursor: default;
}
</style>