<template>
  <div class="pt-14">
    <div v-if="dataUrl && isIOSMobile()" class="qrcode mt-2 mb-4 relative w-72 h-113.5 mx-auto">
      <img :src="dataUrl" alt="">
      <div class="text-center text-sm text-text-secondary">长按保存二维码</div>
    </div>
    <div v-show="!dataUrl" id="qrCodeWrapper" class="qrcode mt-2 relative w-72 h-113.5 mx-auto">
      <p class=" text-white absolute top-24 text-base left-0 right-0 mx-auto text-center">{{ entInfo.name }}</p>
      <p class=" text-white absolute top-32 text-sm left-0 right-0 mx-auto text-center">团队号：{{ entInfo.id }}</p>
      <img ref="wrapper" src="@/assets/qrbackground.png" alt="" class="">
      <div class="absolute w-36 mt-2 top-40 left-0 right-0 mx-auto ">
        <vue-qr
          :logo-src="require('@/assets/icons/txga.png')"
          :logo-margin="4"
          :logo-scale="0.15"
          :text="text"
          :margin="8"
          :size="400"
          background-color="#fff"
        />
      </div>
      <p class=" text-white absolute top-82 left-0 right-0 mx-auto text-center text-sm"> 扫描二维码加入我们{{ entInfo.name }}的团队</p>
    </div>
    <div v-show="!dataUrl" class="px-4 flex items-center justify-center">
      <div @click.stop="saveQrCode" class="btn flex flex-col items-center justify-center">
        <app-icon
          icon-name="y-download"
          class-name="w-9 h-9"
        />
        <div class="text-sm text-color-primary">保存</div>
      </div>
    </div>
    <div v-if="showBottom" class="mx-4 pb-6">
      <c-button @click="$router.push('/team/team-frame')" round type="secondary" class=" mt-4">进入团队组织架构</c-button>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { downloadQrCode } from '@/util/DownloadQrcode'
import { isIOSMobile } from '@/util/Common'
import VueQr from 'vue-qr'

export default Vue.extend({
  components: {
    VueQr,
    'c-button': () => import('@/components/common/c-button.vue'),
    'app-icon': () => import('@/components/common/Icon.vue')
  },
  props: {
    entInfo: Object,
    text: String,
    showBottom: Boolean
  },
  data() {
    return {
      dataUrl: ''
    }
  },
  methods: {
    isIOSMobile,
    async saveQrCode() {
      if (this.isIOSMobile()) {
        this.dataUrl = await downloadQrCode('qrCodeWrapper', '团队二维码', this.entInfo.id) as string
        console.log('获取图片地址')
        return
      }
      await downloadQrCode('qrCodeWrapper', '团队二维码', this.entInfo.id)
    }
  }
})
</script>
