<script lang="ts" setup>
/**
 * 排班管理弹窗（薄壳）
 * 仅负责弹窗与传参，核心面板逻辑在 SchedulePanel（同时被诊所设置页 tab 复用）。
 * 入口：诊所管理行操作「排班管理」（全店视角）/ 医生管理行操作「排班日历」（锁定医生）。
 * 锁定医生且关联多店时（平台管理员视角）顶部提供门店切换，切店后面板自动重载。
 */
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { Select } from 'ant-design-vue';

import SchedulePanel from './SchedulePanel.vue';

/** 弹窗传参（setData 注入） */
const storeId = ref<number>(0);
const storeName = ref<string>('');
const lockedDoctorId = ref<number>(0);
const lockedDoctorName = ref<string>('');
/** 锁定医生关联的门店列表（多店时展示切换下拉） */
const storeOptions = ref<Array<{ id: number; name: string }>>([]);
/** 面板重建 key：同店重复打开时也强制重新初始化（防止上次的选择/视图残留） */
const panelKey = ref<number>(0);

/** 切换门店：同步门店名（Panel 内部 watch storeId 自动整体重载） */
function onStoreChange(val: any) {
  const hit = storeOptions.value.find((s) => s.id === Number(val));
  storeName.value = hit?.name || '';
}

const [Modal, ModalApi] = useVbenModal({
  footer: false,
  fullscreenButton: true,
  class: 'w-[1080px]',
  onOpenChange(isOpen) {
    if (isOpen) {
      const data = ModalApi.getData() || {};
      storeId.value = Number(data.storeId || 0);
      storeName.value = String(data.storeName || '');
      lockedDoctorId.value = Number(data.lockedDoctorId || 0);
      lockedDoctorName.value = String(data.lockedDoctorName || '');
      storeOptions.value = Array.isArray(data.storeOptions) ? data.storeOptions : [];
      // 未显式传店但有门店列表时默认第一个（医生管理入口场景）
      if (!storeId.value && storeOptions.value.length > 0) {
        storeId.value = storeOptions.value[0]!.id;
        storeName.value = storeOptions.value[0]!.name;
      }
      panelKey.value = Date.now();
    }
  },
});

defineExpose({ ModalApi });
</script>

<template>
  <Modal :title="storeName ? `排班管理 - ${storeName}` : '排班管理'">
    <!-- 锁定医生关联多店：顶部门店切换（模板按店隔离，排班行记录来源门店） -->
    <div v-if="storeOptions.length > 1" class="sched-shell__store">
      <span class="sched-shell__store-label">所在门店：</span>
      <Select
        v-model:value="storeId"
        :field-names="{ label: 'name', value: 'id' }"
        :options="storeOptions"
        style="width: 220px"
        @change="onStoreChange"
      />
    </div>
    <SchedulePanel
      v-if="storeId > 0"
      :key="panelKey"
      :locked-doctor-id="lockedDoctorId"
      :locked-doctor-name="lockedDoctorName"
      :store-id="storeId"
      :store-name="storeName"
    />
  </Modal>
</template>

<style scoped>
.sched-shell__store {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}

.sched-shell__store-label {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}
</style>
