<template>
  <div class="pt-14">
    <div id="qrCodeWrapper" class="qrcode mt-2 mb-4 relative w-75 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 top-40 left-0 right-0 mx-auto ">
        <vue-qr
          background-color="#4F62C1"
          :logo-src="require('@/assets/icons/txga.png')"
          :logo-margin="2"
          :text="text"
          :margin="4"
          :size="400"
        />
      </div>
      <p class=" text-white absolute top-82 left-0 right-0 mx-auto text-center text-sm"> 扫描二维码加入我们{{entInfo.name}}的团队</p>
    </div>
    <div class="px-4 flex items-center justify-center">
      <div class="btn flex flex-col items-center justify-center" @click="saveQrCode">
        <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 round type="secondary" class=" mt-4" @click="$router.push('/team/team-frame')">进入团队组织架构</c-button>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { downloadQrCode } from '@/util/DownloadQrcode'
import VueQr from 'vue-qr'

export default Vue.extend({
  props: {
    entInfo: Object,
    text: String,
    showBottom: Boolean
  },
  components: {
    VueQr,
    'c-button': () => import('@/components/common/c-button.vue'),
    'app-icon': () => import('@/components/common/Icon.vue')
  },
  methods: {
    async saveQrCode() {
      await downloadQrCode('qrCodeWrapper', '团队二维码')
    }
  }
})
</script>
