<template>
  <div class="facilities-and-services-container">
    <!-- 根据用户业务类型判断使用哪个组件 -->
    <ServiceManagement v-if="activeComponent === 'service'" />
    <FacilityManagement v-else-if="activeComponent === 'facility'" />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { localGet } from "@/utils";
import ServiceManagement from "./components/ServiceManagement.vue";
import FacilityManagement from "./components/FacilityManagement.vue";

// 根据用户业务类型判断使用哪个组件（与商家端 facilityOrService 一致）
// 运动健身 -> FacilityManagement (设施管理，动态区域)
// 洗浴汗蒸 -> ServiceManagement (服务管理)
const activeComponent = computed<"service" | "facility">(() => {
  const geekerUser = localGet("geeker-user");
  const userInfo: any = geekerUser?.userInfo || {};
  const businessSection = userInfo.businessSection || "";

  // 如果是"运动健身"，显示设施管理
  if (businessSection == "17") {
    return "facility";
  }
  // 如果是"洗浴汗蒸"，显示服务管理
  if (businessSection == "15") {
    return "service";
  }
  // 默认显示服务管理
  return "facility";
});
</script>

<style scoped lang="scss">
.facilities-and-services-container {
  min-height: 100%;
  padding: 20px;
  background-color: white;
}
</style>
