<template>
  <view v-if="team" class="flex flex-col justify-center h-full bg-white">
    <view>
      <view class="text-dark text-lg font-semibold text-center mb-10">
        {{ team.name }}
      </view>
      <view class="mb-10 text-dark text-lg font-semibold text-center mb-10">
        成员邀请码
      </view>
      <view class="flex justify-center overflow-hidden">
        <uqrcode canvas-id="qrcode" :value="qrcode" :options="options"></uqrcode>
      </view>
      <view class="mt-10 px-15 text-base text-dark leading-normal text-center">
        微信扫一扫上面的二维码
      </view>
      <view class="mt-10 px-15 text-base text-dark leading-normal text-center">
        加入我的团队，协同开展患者管理服务
      </view>
    </view>
  </view>
</template>
<script setup>
import { computed, ref } from "vue";
import { storeToRefs } from "pinia";
import useGuard from "@/hooks/useGuard.js";
import useAccountStore from "@/store/account.js";
import api from '@/utils/api';
import { toast } from "@/utils/widget";

const env = __VITE_ENV__;
const inviteQrcode = env.MP_INVITE_TEAMMATE_QRCODE;

const options = { margin: 10 };
const team = ref(null);
const teamId = ref('');
const { useLoad, useShow } = useGuard();
const { account } = storeToRefs(useAccountStore());

const qrcode = computed(() => `${inviteQrcode}?type=inviteTeam&teamId=${teamId.value}`)

async function getTeam() {
  const res = await api('getTeamData', { teamId: teamId.value, corpId: account.value.corpId });
  if (res && res.data) {
    team.value = res.data;
  } else {
    toast(res?.message || '获取团队信息失败')
  }
}
useLoad(options => {
  teamId.value = options.teamId;
})

useShow(() => {
  getTeam()
});
</script>
<style></style>