<template>
  <view class="h-full flex flex-col">
    <view class="flex-shrink-0 w-full">
      <view :style="{ height: statusBarHeight }" class="bg-primary"></view>
      <view class="relative z-3 flex items-center px-15 py-12 bg-primary">
        <view class="flex-shrink-0 mr-10">
          <image class="logo" src="/static/logo-plain.png"></image>
        </view>
        <view class="w-0 flex-grow">
          <view class="text-lg font-semibold text-white">健康柚</view>
          <view class="leading-normal text-base text-white truncate">全周期健康管理伙伴</view>
        </view>
        <view v-if="menuButtonInfo && menuButtonInfo.width > 0" class="flex-shrink-0"
          :style="{ width: menuButtonInfo.width + 'px', height: menuButtonInfo.height + 'px' }">
        </view>
      </view>
    </view>
    <view class="flex-grow flex flex-col items-center justify-center bg-white">
      <empty-data :showText="false" />
      <!-- <view class="mb-10 text-lg text-dark font-semibold">暂无团队</view> -->
      <view class="text-lg text-dark font-semibold">微信扫一扫医生团队二维码</view>
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import emptyData from '@/components/empty-data.vue';

const statusBarHeight = ref('50px');
const menuButtonInfo = ref(null);

onMounted(() => {
  const win = uni.getWindowInfo();
  if (win && win.statusBarHeight > 0) {
    statusBarHeight.value = win.statusBarHeight + 'px';
  }
  menuButtonInfo.value = uni.getMenuButtonBoundingClientRect();
})
</script>
<style scoped>
.logo {
  width: 120rpx;
  height: 120rpx;
}
</style>