<template>
  <div>
    <div class="has-background-light px-5 pt-4 pb-2">
      <Caption v-bind="{ title: 'Thông tin cộng tác viên' }"></Caption>
      <div class="columns is-multiline mx-0">
        <div class="column is-2">
          <div class="field">
            <label class="label">Mã số</label>
            <div class="control fs-16">
              {{ `CT${reginfo.user}` }}
            </div>
          </div>
        </div>
        <div class="column is-5">
          <div class="field">
            <label class="label">Link</label>
            <div class="control fs-16">
              <a @click="openLink()">{{ reginfo.link }}</a>
              <p class="mt-2 hyperlink has-text-primary">
                <span class="material-symbols-outlined" @click="copyContent()">content_copy</span>
              </p>
            </div>
          </div>
        </div>
        <div class="column is-3">
          <label class="label">QR code</label>
          <div class="field is-grouped">
            <div class="control">
              <img style="width: 80px" :src="`${$path()}static/files/${reginfo.qrcode}`" />
            </div>
            <div class="control">
              <p class="hyperlink has-text-primary">
                <span class="material-symbols-outlined" @click="download()">download</span>
              </p>
            </div>
          </div>
        </div>
        <div class="column is-2">
          <div class="field">
            <label class="label">Số dư</label>
            <div class="control fs-16">
              <span class="has-text-danger">{{ $numtoString(reginfo.balance) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-5" v-if="reginfo.status__code === 'wait'">
      <p class="fs-16 has-text-primary">
        Bạn đã đăng ký thành công. Vui lòng chờ phản hồi từ {{ company.name }}. Xin cảm ơn.
      </p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      company: this.$companyInfo(),
    };
  },
  props: ['reginfo'],

  methods: {
    copyContent() {
      this.$copyToClipboard(this.reginfo.link);
    },
    openLink() {
      window.location.href = this.reginfo.link;
    },
    async download() {
      let ulr = `${this.$path()}download?type=file&name=${this.reginfo.qrcode}`;
      let response = await fetch(ulr);
      const blob = await response.blob();
      const urlDownload = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = urlDownload;
      link.setAttribute('download', this.reginfo.qrcode);
      link.click();
      link.remove();
    },
  },
};
</script>
