<template>
  <uni-popup ref="popup" type="bottom" :mask-click="false">
    <view class="bg-white rounded overflow-hidden">
      <view class="flex items-center justify-between px-15 py-12 border-b">
        <view class="text-lg font-semibold text-dark">全周期管理</view>
        <uni-icons type="closeempty" :size="24" color="#999" @click="close"></uni-icons>
      </view>
      <scroll-view scroll-y="true" class="popup-content-scroll">
        <view class="px-15 py-12">
          <view v-for="team in teams" :key="team.teamId" class="flex items-center p-10 mb-10 rounded-sm bg-gray"
            @click="enterTeam(team)">
            <view class="flex-grow w-0 mr-5 text-base leading-normal text-dark">
              {{ team.name }}
            </view>
            <view class="flex-shrink-0 text-base text-primary">进入</view>
          </view>
        </view>
      </scroll-view>

    </view>
  </uni-popup>

</template>

<script setup>
import { ref, watch } from 'vue';
import { storeToRefs } from "pinia";
import useAccount from "@/store/account";
import api from "@/utils/api";
import { set } from "@/utils/cache";
import { toast } from "@/utils/widget";

const emits = defineEmits(['close', 'confirm'])
const props = defineProps({
  teams: {
    type: Array,
    default: () => []
  },
  visible: {
    type: Boolean,
    default: false
  }
})
const env = __VITE_ENV__;
const appid = env.MP_WX_APP_ID;
const popup = ref()
const { account } = storeToRefs(useAccount());


function close() {
  emits('close')
}

async function enterTeam(team) {
  const res = await api('bindWxappWithTeam', { appid, corpId: team.corpId, teamId: team.teamId, openid: account.value.openid });
  if (!res || !res.success) {
    return toast("关联团队失败");
  }
  set('home-invite-team-info', {
    teamId: team.teamId,
    corpId: team.corpId,
  });
  uni.switchTab({
    url: "/pages/home/home",
  });
  // uni.navigateTo({ url: `/pages/team/team-detail?corpId=${team.corpId}&teamId=${team.teamId}` })
  // close()
}

watch(() => props.visible, n => {
  if (n) {
    popup.value && popup.value.open();
  } else {
    popup.value && popup.value.close()
  }
})
</script>

<style lang="scss" scoped>
.min-w-60 {
  min-width: 120rpx;
}

.check-icon {
  width: 48rpx;
  height: 48rpx;
}

.popup-content-scroll {
  max-height: 50vh;
}
</style>