<template>
  <div class="createteam">
    <main-page
      left-arrow
      @click-left="handleClickLeft"
    >
      <!-- 二维码部分 -->
      <qrcode
        :ent-info="entInfo"
        :text="qrCodeText"
        :show-bottom="true"
      ></qrcode>
      <!-- <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/js.png')"
              :text="qrCodeText"
              :margin="2"
              :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 class="mx-4 pb-6">
          <c-button round type="secondary" class=" mt-4" @click="$router.push('/team/team-frame')">进入团队组织架构</c-button>
        </div>
      </div> -->
    </main-page>
  </div>
</template>

<script lang="ts">
import { LocalStoreEnt } from '@/Interface'
import { downloadQrCode } from '@/util/DownloadQrcode'
import { close } from '@/util/Bridge'
import Vue from 'vue'
import VueQr from 'vue-qr'

export default Vue.extend({
  name: 'TeamQRcode',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'c-button': () => import('@/components/common/c-button.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'qrcode': () => import('@/views/team/components/qrcode.vue'),
    VueQr
  },
  data() {
    return {
      qrCodeText: '',
      entId: '',
      entInfo: {} as LocalStoreEnt
    }
  },
  created() {
    this.entId = this.$route.query.entId as string
    let url = ''
    if (process.env.NODE_ENV === 'development') {
      url = window.location.origin + '/team/join-team'
    } else {
      url = process.env.VUE_APP_QRCODE_URL + '/team/join-team'
    }
    console.log(process.env.VUE_APP_QRCODE_URL, url, 'url')
    this.qrCodeText = `${url}?entId=${encodeURIComponent(this.entId)}`
    console.log(this.qrCodeText, 'qrCode team')
    this.getEntInfo()
  },
  methods: {
    // 获取企业信息
    getEntInfo() {
      return this.$service.enterprise.getEnterpriseInfo({
        id: this.entId
      }).then((res: any) => {
        const { data } = res
        if (data.code === this.$global.success) {
          localStorage.setItem('ENT_INFO', JSON.stringify(data.data))
          this.entInfo = data.data
        } else {
          this.$toast(data.msg)
        }
      })
    },
    handleClickLeft() {
    // console.log('click left')
      close()
    },
    async saveQrCode() {
      await downloadQrCode('qrCodeWrapper', '团队二维码', this.entId)
    }
  }
})
</script>

<style>

</style>
