<template>
  <full-page :customScroll="list.length === 0">
    <view v-if="list.length === 0" class="w-full h-full flex flex-col justify-center items-center">
      <empty-data text="暂无团队" />
    </view>
    <view v-for="(i, idx) in list" :key="idx" class="p-15 mb-10 flex items-center bg-white shadow-lg">
      <view class="mr-10 w-0 flex-grow" @click="toDetail(i)">
        <view class="flex items-center">
          <view class="team-name text-lg font-semibold truncate mr-5">
            {{ i.name }}
          </view>
          <view v-if="doctorInfo && i.creator === doctorInfo.userid" class="flex-shrink-0 text-base text-primary">(我创建的)
          </view>
          <view v-else class="flex-shrink-0 text-base text-warning">(我加入的)</view>
          <!-- <image v-if="doctorInfo && i.creator === doctorInfo.userid" class="flex-shrink-0 role-tag"
            src="/static/icon-owner.svg" />
          <image v-else class="flex-shrink-0 role-tag" src="/static/teammate.svg" /> -->
        </view>
        <view class="mt-10 flex">
          <view class="min-w-120 text-base text-dark">
            成员: {{ i.memberList && i.memberList.length ? i.memberList.length : 0 }}
          </view>
          <view class="min-w-120 text-base text-dark">
            患者: {{ i.customerCount }}
          </view>
        </view>
      </view>
      <view class="flex-shrink-0 flex flex-col items-center justify-center" @click.stop="invite(i)">
        <image class="mb-5 qrcode" src="/static/work/qrcode.svg" />
        <view class="w-full text-sm text-dark text-center">邀请成员</view>
      </view>
      <view v-if="doctorInfo && i.creator === doctorInfo.userid"
        class="setting-btn flex-shrink-0 flex flex-col items-center justify-center" @click.stop="showSetting(i)">
        <image class="mb-5 qrcode" src="/static/setting.svg" />
        <view class="w-full text-sm text-dark text-center">设置</view>
      </view>
    </view>
    <template #footer>
      <button-footer confirmText="创建团队" :showCancel="false" @confirm="toCreate()" />
    </template>
  </full-page>
  <notice-popup :visible="visible" @close="visible = false" />
  <setting-popup :visible="settingVisible" @close="settingVisible = false" :teamId="current.teamId" />
</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.js";

import buttonFooter from '@/components/button-footer.vue';
import emptyData from "@/components/empty-data.vue";
import fullPage from '@/components/full-page.vue';
import noticePopup from './notice-popup.vue';
import settingPopup from './setting-popup.vue';

const { useLoad, useShow } = useGuard();
const { doctorInfo, account } = storeToRefs(useAccountStore());
const list = ref([]);
const visible = ref(false);
const settingVisible = ref(false);
const current = ref({});

function invite(team) {
  uni.navigateTo({ url: `/pages/work/team/invite/invite-teammate?teamId=${team.teamId || ''}` })
  // uni.navigateTo({ url: `/pages/work/team/invite/invite-patient?teamId=${team.teamId || ''}` })
}

function showSetting(team) {
  current.value = team;
  settingVisible.value = true;
}

function toCreate() {
  uni.navigateTo({ url: '/pages/work/team/edit/team-edit' })
}

function toDetail(team) {
  uni.navigateTo({ url: `/pages/work/team/detail/team-detail?teamId=${team.teamId || ''}` })
}

async function getTeams() {
  const res = await api('getJoinedTeams', { corpId: account.value?.corpId, mateId: doctorInfo.value?.userid, countCustomer: 'YES' });
  const arr = res && Array.isArray(res.data) ? res.data.map(i => ({
    id: i._id,
    teamId: i.teamId,
    name: i.name,
    memberList: i.memberList,
    creator: i.creator,
    customerCount: i.customerCount > 0 ? i.customerCount : 0
  })) : [];
  list.value = arr;
}

useLoad(() => {
  setTimeout(() => {
    visible.value = true;
  }, 1000);
})

useShow(() => {
  getTeams();
})

</script>
<style>
.min-w-120 {
  min-width: 240rpx;
}

.team-name {
  max-width: 60%;
}

.qrcode {
  width: 42rpx;
  height: 42rpx;
}

.role-tag {
  width: 36rpx;
  height: 36rpx;
}

.setting-btn {
  flex-shrink: 0;
  padding-left: 20rpx;
}

.icon-setting {
  width: 36rpx;
  height: 36rpx;
}
</style>