<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue';

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

import { DeleteOutlined, EyeOutlined, HolderOutlined } from '@ant-design/icons-vue';
import {
  Avatar,
  Button,
  Card,
  Empty,
  Image,
  ImagePreviewGroup,
  InputNumber,
  message,
  Modal,
  notification,
  Popconfirm,
  RadioButton,
  RadioGroup,
  Spin,
  Tag,
} from 'ant-design-vue';
// eslint-disable-next-line n/no-extraneous-import
import html2canvas from 'html2canvas';

import DoctorQrCodePreview from '#/components/modal/DoctorQrCodePreview.vue';
import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
import StoreVipMemberCard from '#/components/vip/StoreVipMemberCard.vue';
import DoctorCardModal from '#/views/doctor/doctor/components/DoctorCardModal.vue';
import { getStoreRegisterSettingApi } from '#/views/doctor/doctor/api/schedule';
import SchedulePanel from '#/views/doctor/doctor/components/schedule-calendar/SchedulePanel.vue';
import {
  deleteNavApi,
  getStoreInfoApi,
  saveZSalePercentApi,
  updateNavSortApi,
  updateClinicTypeApi,
} from '#/views/business/store/settings/api';

import UploadModal from './components/uploadModal.vue';
import SalespersonCard from "#/views/business/store/settings/components/SalespersonCard.vue";

// 定义类型
interface TabBarItem {
  value: number;
  label: string;
}

interface StoreInfo {
  name: string;
  type: number; // 0=诊所, 1=药店
  clinic_type?: number; // 1=西医诊所, 2=中医诊所
  star?: any;
  title: { name: string };
  contact: string;
  mobile: string;
  created_at: string;
  start_time: string;
  end_time: string;
  province: { name: string };
  city: { name: string };
  position: string;
  inquiry_count: number;
  doctor_count: number;
  inquiry_rate: string;
  z_sale_percent: number;
  qr_code: string;
  doctor_list: any[];
  nav: { id: number; pic: string }[];
  /** 门店 VIP：等级徽标 + 期限丝带 */
  vip?: Record<string, any> | null;
}

const [DoctorQrCodePreviewModal, DoctorQrCodePreviewModalApi] = useVbenModal({
  connectedComponent: DoctorQrCodePreview,
});

const [DoctorCardModals, DoctorCardModalApi] = useVbenModal({
  connectedComponent: DoctorCardModal,
});

const [UploadModals, UploadModalApi] = useVbenModal({
  connectedComponent: UploadModal,
});

const openUpload = () => {
  UploadModalApi.setData({
    // doctorId,
    getMyInfo,
  });
  UploadModalApi.open();
};

const openDoctorQrCode = (doctorId: number, isNotQr = false) => {
  if (isNotQr) return message.error('该医生暂时没有二维码！');
  DoctorQrCodePreviewModalApi.setData({
    values: {
      doctor_id: doctorId,
    },
  });
  DoctorQrCodePreviewModalApi.open();
};

/** 打开医生档案卡片（诊所团队场景隐藏关联诊所 Tab） */
const openDoctorCard = (doctor: any) => {
  DoctorCardModalApi.setData({
    id: doctor.doctor?.id,
    su_id: doctor.doctor?.su_id,
    hideStoresTab: true,
  });
  DoctorCardModalApi.open();
};

// 诊所/药店数据
const data = ref<null | StoreInfo>(null);

// Tab状态持久化
const TAB_STORAGE_KEY = 'xk_store_settings_tab';
const savedTab = localStorage.getItem(TAB_STORAGE_KEY);
const activeTabBar = ref(savedTab ? Number(savedTab) : 1);

// 判断是否是药店 (type=1为药店, type=0为诊所)
const isPharmacy = computed(() => data.value?.type === 1);

// 根据类型动态生成tab选项
const tabBar = computed<TabBarItem[]>(() => {
  if (isPharmacy.value) {
    // 药店只显示：药店资料、药店二维码、轮播图、推广员
    return [
      { value: 1, label: '药店资料' },
      { value: 3, label: '药店二维码' },
      { value: 5, label: '轮播图' },
      { value: 6, label: '推广员' },
    ];
  }
  // 诊所显示全部：诊所资料、商品价格、诊所二维码、我的医生团队、轮播图、推广员、排班管理
  return [
    { value: 1, label: '诊所资料' },
    { value: 2, label: '商品价格' },
    { value: 3, label: '诊所二维码' },
    { value: 4, label: '我的医生团队' },
    { value: 5, label: '轮播图' },
    { value: 6, label: '推广员' },
    { value: 7, label: '排班管理' },
  ];
});

/**
 * 排班管理 tab 的本店 ID：诊所管理员通过挂号设置接口自动解析本店
 * 懒加载：首次切到该 tab 才请求，避免影响其他 tab 的加载速度。
 * 必须有加载中/失败两个状态：接口失败或解析出 0 时若无提示，tab 会永久空白且用户无法自救
 */
const scheduleStoreId = ref(0);
const scheduleLoading = ref(false);
const scheduleLoadFailed = ref(false);
const loadScheduleStoreId = () => {
  if (scheduleStoreId.value > 0 || scheduleLoading.value) return;
  scheduleLoading.value = true;
  scheduleLoadFailed.value = false;
  getStoreRegisterSettingApi()
    .then((res: any) => {
      scheduleStoreId.value = Number(res?.store_id || 0);
      // 解析出 0 也视为失败：面板依赖 storeId，0 渲染不出任何内容
      scheduleLoadFailed.value = scheduleStoreId.value <= 0;
    })
    .catch(() => {
      scheduleLoadFailed.value = true;
    })
    .finally(() => {
      scheduleLoading.value = false;
    });
};
watch(activeTabBar, (val) => {
  if (val === 7) loadScheduleStoreId();
}, { immediate: true });

// 监听tabBar变化，验证当前tab是否有效（药店和诊所tab选项不同）
watch(tabBar, (newTabBar) => {
  const validValues = newTabBar.map(item => item.value);
  if (!validValues.includes(activeTabBar.value)) {
    // 如果当前tab不在可用列表中，切换到第一个tab
    activeTabBar.value = validValues[0] || 1;
    localStorage.setItem(TAB_STORAGE_KEY, String(activeTabBar.value));
  }
}, { immediate: true });

// 格式化日期
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString();
};

/**
 * 获取当前登录诊所信息
 */
const getMyInfo = () => {
  getStoreInfoApi({}).then((res: any) => {
    data.value = res as StoreInfo;
  });
};

/**
 * Tab切换处理
 */
const tabBarChange = () => {
  // 保存当前tab到localStorage
  localStorage.setItem(TAB_STORAGE_KEY, String(activeTabBar.value));
  
  switch (activeTabBar.value) {
    case 1: {
      getMyInfo();
      break;
    }
    case 2: {
      break;
    }
  }
};
// 初始化时加载基础数据（所有tab都需要data）
onMounted(() => {
  getMyInfo();
});

const qrCodeUrl = ref<HTMLElement | null>(null);
const htmlToImage = ref<HTMLElement | null>(null);

/**
 * 下载二维码
 * @param name
 * @param isQr
 */
const downloadQRCode = async (name: string, isQr = false) => {
  if (!data.value) return;

  const element = isQr ? qrCodeUrl.value : htmlToImage.value;
  if (!element) return;

  html2canvas(element, {
    useCORS: true,
    allowTaint: true,
    logging: false,
  }).then((canvas) => {
    const link = document.createElement('a');
    link.href = canvas.toDataURL();
    link.setAttribute('download', `${data.value!.name}${name}.png`);
    link.style.display = 'none';
    document.body.append(link);
    link.click();
  });
};

const saveZSalePercent = () => {
  if (!data.value) return;

  saveZSalePercentApi(data.value.z_sale_percent).then(() => {
    notification.success({
      message: '任务开始执行',
      duration: 2,
    });
  });
};

// 删除轮播图项
const deleteNavItem = (id: number) => {
  if (data.value) {
    deleteNavApi({
      id,
    }).then(() => {
      notification.success({
        message: '删除成功',
        duration: 2,
      });
      getMyInfo();
    });
  }
};

// 拖拽排序相关
const draggedIndex = ref(-1);
const dragOverIndex = ref(-1);

const onDragStart = (event: DragEvent, index: number) => {
  draggedIndex.value = index;
  dragOverIndex.value = -1;
  if (event.dataTransfer) {
    event.dataTransfer.effectAllowed = 'move';
  }
};

const onDragEnter = (index: number) => {
  if (draggedIndex.value !== -1 && draggedIndex.value !== index) {
    dragOverIndex.value = index;
  }
};

const onDragOver = (event: DragEvent) => {
  event.preventDefault();
  if (event.dataTransfer) {
    event.dataTransfer.dropEffect = 'move';
  }
};

const onDrop = (event: DragEvent, targetIndex: number) => {
  event.preventDefault();
  if (!data.value || draggedIndex.value === -1 || draggedIndex.value === targetIndex) {
    draggedIndex.value = -1;
    dragOverIndex.value = -1;
    return;
  }

  const list = [...data.value.nav];
  const itemToMove = list[draggedIndex.value];
  list.splice(draggedIndex.value, 1);

  let finalIndex = targetIndex;
  if (draggedIndex.value < targetIndex) {
    finalIndex = targetIndex - 1;
  }
  list.splice(finalIndex, 0, itemToMove);

  data.value.nav = list;
  draggedIndex.value = -1;
  dragOverIndex.value = -1;

  // 保存排序到后端
  saveNavSort();
};

const onDragEnd = () => {
  draggedIndex.value = -1;
  dragOverIndex.value = -1;
};

// 保存轮播图排序
const saveNavSort = () => {
  if (!data.value) return;
  const ids = data.value.nav.map((item) => item.id);
  updateNavSortApi(ids).then(() => {
    notification.success({
      message: '排序保存成功',
      duration: 2,
    });
  });
};

// 图片预览相关
const previewVisible = ref(false);
const previewCurrent = ref(0);

const openPreview = (index: number) => {
  previewCurrent.value = index;
  previewVisible.value = true;
};

/**
 * 切换诊所类型
 */
const handleSwitchClinicType = () => {
  if (!data.value) return;
  
  const currentType = data.value.clinic_type || 2; // 默认为中医诊所
  const newType = currentType === 1 ? 2 : 1;
  const currentTypeText = currentType === 1 ? '西医诊所' : '中医诊所';
  const newTypeText = newType === 1 ? '西医诊所' : '中医诊所';
  
  Modal.confirm({
    title: '确认切换诊所类型',
    content: `确定要将诊所类型从【${currentTypeText}】切换为【${newTypeText}】吗？`,
    okText: '确定',
    cancelText: '取消',
    onOk: async () => {
      try {
        await updateClinicTypeApi({ clinic_type: newType });
        notification.success({
          message: '切换成功',
          description: `诊所类型已切换为【${newTypeText}】`,
          duration: 2,
        });
        // 刷新诊所信息
        getMyInfo();
      } catch (error) {
        console.error('切换诊所类型失败:', error);
        notification.error({
          message: '切换失败',
          description: '请稍后重试',
          duration: 2,
        });
      }
    }
  });
};
</script>

<template>
  <Page v-if="data" :title="`${data.name}的配置中心`" auto-content-height>
    <DoctorQrCodePreviewModal />
    <DoctorCardModals />
    <UploadModals />
    <div class="pb-2">
      <RadioGroup
        v-model:value="activeTabBar"
        button-style="solid"
        @change="tabBarChange"
      >
        <RadioButton
          v-for="item in tabBar"
          :key="item.value"
          :value="item.value"
        >
          {{ item.label }}
        </RadioButton>
      </RadioGroup>
    </div>
    <Card v-if="activeTabBar === 1" :title="isPharmacy ? '药店资料' : '诊所资料'">
      <!-- 门店 VIP 会员卡：大尺寸徽标 + 期限丝带 -->
      <StoreVipMemberCard :vip="data.vip" />
      <!-- 头部信息 -->
      <div class="mb-8 flex flex-col gap-6 md:flex-row md:gap-8">
        <div class="flex-1">
          <div class="mb-3 flex items-center gap-4">
            <h1 class="text-2xl font-bold md:text-3xl">
              {{ data.name }}
              <span
                v-if="data.star"
                class="ml-2 rounded-full bg-amber-100 px-3 py-1 text-sm text-amber-700"
              >
                {{ data.title.name }}
              </span>
            </h1>
            <p class="flex items-center gap-2">
              {{ data.contact }}
            </p>
            <p class="flex items-center gap-2">
              <SensitiveText :record="data" field="mobile" />
            </p>
            <p class="flex items-center gap-2">
              入驻时间：{{ formatDate(data.created_at) }}
            </p>
          </div>
        </div>
      </div>

      <!-- 主要内容 -->
      <div class="grid gap-8 md:grid-cols-2">
        <!-- 左侧内容 -->
        <div class="space-y-6">
          <h3 class="border-l-4 border-blue-500 pl-3 text-lg font-semibold">
            营业时间
          </h3>
          <EllipsisText :line="3" :tooltip="false" expand>
            <p>
              早：
              <Tag color="#455cda">{{ data.start_time }}</Tag>
            </p>
            <p class="mt-3">
              晚：
              <Tag color="#455cda">{{ data.end_time }}</Tag>
            </p>
          </EllipsisText>
          <h3 class="border-l-4 border-blue-500 pl-3 text-lg font-semibold">
            详细地址
          </h3>
          <EllipsisText :line="3" :tooltip="false" expand>
            <div style="text-indent: 2em">
              {{ data.province.name }}{{ data.city.name }}{{ data.position }}
            </div>
          </EllipsisText>
        </div>

        <!-- 右侧数据 -->
        <div class="space-y-6">
          <h3 class="border-l-4 border-blue-500 pl-3 text-lg font-semibold">
            执业数据
          </h3>

          <div class="flex flex-wrap space-y-4">
            <div
              class="flex w-1/2 items-center justify-between rounded-lg bg-gray-50 p-4 dark:bg-[#020817]"
            >
              <span class="">问诊量</span>
              <span
                class="font-semibold text-blue-600"
                style="font-weight: bold"
                >{{ data.inquiry_count || 0 }}</span>
            </div>

            <div
              class="flex w-1/2 items-center justify-between rounded-lg bg-gray-50 p-4 dark:bg-[#020817]"
              style="margin-top: 0"
            >
              <span class="">医生数量</span>
              <span
                class="font-semibold text-blue-600"
                style="font-weight: bold"
                >{{ data.doctor_count || 0 }}</span>
            </div>
          </div>
          <div class="space-y-2 rounded-lg bg-gray-50 p-4 dark:bg-[#020817]">
            <div class="flex justify-between text-sm">
              <span>接诊率{{ parseFloat(data.inquiry_rate) }}</span>
              <span class="font-medium">{{ parseFloat(data.inquiry_rate) }}%</span>
            </div>
            <div class="h-2 overflow-hidden rounded-full bg-gray-200">
              <div
                :style="{ width: `${parseFloat(data.inquiry_rate)}%` }"
                class="h-full bg-green-500 transition-all duration-500"
              ></div>
            </div>
          </div>
          
          <!-- 诊所类型 -->
          <div v-if="!isPharmacy" class="mt-6 rounded-lg bg-gray-50 p-4 dark:bg-[#020817]">
            <div class="flex items-center justify-between">
              <span class="text-sm font-medium">诊所类型</span>
              <div class="flex items-center gap-2">
                <Tag 
                  :color="data.clinic_type === 1 ? 'blue' : 'green'"
                  class="clinic-type-tag cursor-pointer"
                  @click="handleSwitchClinicType"
                >
                  {{ data.clinic_type === 1 ? '西医诊所' : data.clinic_type === 2 ? '中医诊所' : '未设置' }}
                </Tag>
                <Button type="link" size="small" @click="handleSwitchClinicType">
                  切换
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Card>
    <Card v-else-if="activeTabBar === 2" title="设置商品价格">
      中药销售比例
      <InputNumber
        v-model:value="data.z_sale_percent"
        style="min-width: 100px"
        @keydown.enter="saveZSalePercent"
      >
        <template #addonAfter> %</template>
      </InputNumber>
      <Button type="primary" @click="saveZSalePercent">保存</Button>
    </Card>
    <Card v-else-if="activeTabBar === 3" :title="isPharmacy ? '药店二维码' : '诊所二维码'">
      <template #extra>
        <Button
          style="margin: 20px auto"
          type="link"
          @click="downloadQRCode('二维码卡片下载')"
        >
          二维码卡片下载
        </Button>
        <Button
          style="margin: 20px auto 20px 20px"
          type="link"
          @click="downloadQRCode('二维码下载', true)"
        >
          二维码下载
        </Button>
      </template>
      <div class="qrBox" style="text-align: center">
        <div ref="htmlToImage" class="qrModal">
          <div id="qrcode" ref="qrCodeUrl" class="qrcode">
            <div class="qrTitle">{{ data.name }}</div>
            <Image
              :preview="false"
              :src="data.qr_code"
              height="30"
              width="30"
            />
            <div class="qrAddress">
              <span class="addressTitle">{{ isPharmacy ? '药店地址：' : '诊所地址：' }}</span>{{ data.province.name
              }}{{ data.city.name }}{{ data.position }}
            </div>
          </div>
        </div>
      </div>
    </Card>
    <Card v-else-if="activeTabBar === 4" title="我的医生团队">
      <div
        class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
      >
        <Card v-for="(doctor, index) in data.doctor_list" :key="index">
          <!-- 医生头像和信息 -->
          <div class="mb-4 flex items-center">
            <Avatar
              :alt="doctor.doctor.name"
              :class="{
                'border-green-500': doctor.is_online,
                'border-gray-300': !doctor.is_online,
              }"
              :src="doctor.doctor?.avatar"
              class="h-16 w-16 rounded-full border-2 object-cover"
            />
            <div class="ml-4">
              <h3 class="text-lg font-semibold">
                <Button type="link" class="!p-0 !h-auto text-lg font-semibold" @click="openDoctorCard(doctor)">
                  {{ doctor.doctor?.name || '未知医生' }}
                </Button>
                <span
                  :class="doctor.is_online ? 'text-green-500' : 'text-gray-500'"
                  class="ml-2 text-sm"
                >
                  ●
                </span>
              </h3>
              <p class="text-sm text-gray-500">
                最后登录:
                <span>{{
                  new Date(doctor.last_login_time * 1000).toLocaleString()
                }}</span>
              </p>
              <p class="text-sm text-gray-500">
                手机号:
                <SensitiveText :record="doctor.doctor" field="mobile" />
              </p>
              <p class="text-sm text-gray-500">
                专业:
                <span
                  :class="
                    doctor.doctor?.identity === 1
                      ? 'bg-green-100 text-green-700'
                      : 'bg-gray-100 text-gray-700'
                  "
                  class="rounded px-2 py-1"
                >
                  {{ doctor.doctor?.identity === 1 ? '中医' : '西医' }}
                </span>
              </p>
            </div>
          </div>

          <!-- 二维码 -->
          <div
            class="border-t pt-4"
            @click="openDoctorQrCode(doctor.doctor.su_id, !doctor.qr_code)"
          >
            <p class="mb-2 text-sm text-gray-600">联系二维码:</p>
            <template v-if="doctor.qr_code">
              <img
                :src="doctor.qr_code"
                class="h-32 w-full rounded bg-gray-100 object-contain"
              />
            </template>
            <template v-else-if="!doctor.qr_code">
              <div
                class="flex h-32 items-center justify-center rounded bg-gray-100 text-gray-400"
              >
                暂无二维码
              </div>
            </template>
          </div>

          <!-- 状态标签 -->
          <div class="mt-4 flex justify-between text-sm">
            <span
              :class="
                doctor.is_online
                  ? 'bg-green-100 text-green-700'
                  : 'bg-gray-100 text-gray-700'
              "
              class="rounded px-2 py-1"
            >
              {{ doctor.is_online ? '在线' : '离线' }}
            </span>
            <span
              :class="
                doctor.is_delete
                  ? 'bg-red-100 text-red-700'
                  : 'bg-blue-100 text-blue-700'
              "
              class="rounded px-2 py-1"
            >
              {{ doctor.is_delete ? '已删除' : '正常' }}
            </span>
          </div>
        </Card>
      </div>
    </Card>
    <Card v-else-if="activeTabBar === 5" title="轮播图">
      <div class="mb-4 flex items-center justify-between">
        <div>
          <span>最多可添加5张轮播图</span>
          <span class="ml-4 text-gray-400 text-sm">提示：拖拽卡片可调整排序</span>
        </div>
        <Button v-if="data.nav.length < 5" type="primary" @click="openUpload">
          上传新图片
        </Button>
      </div>

      <!-- 图片预览组 -->
      <ImagePreviewGroup
        :preview="{
          visible: previewVisible,
          current: previewCurrent,
          onVisibleChange: (vis: boolean) => { previewVisible = vis; },
        }"
      >
        <div class="mt-4 flex flex-wrap gap-4">
          <template v-for="(item, index) in data.nav" :key="item.id">
            <!-- 拖拽占位符 -->
            <div
              v-if="dragOverIndex === index && draggedIndex !== -1 && draggedIndex !== index"
              class="relative rounded-lg border-2 border-dashed border-blue-500 bg-blue-50/50 dark:bg-blue-900/30"
              style="width: 240px; height: 200px"
              @dragenter="onDragEnter(index)"
              @dragover="onDragOver"
              @drop="onDrop($event, index)"
            >
              <div class="flex h-full items-center justify-center text-blue-500">
                释放以插入此处
              </div>
            </div>

            <!-- 轮播图卡片 -->
            <Card
              :class="[
                'relative cursor-move transition-all duration-300',
                {
                  'opacity-30': draggedIndex === index,
                  'translate-y-1': dragOverIndex === index && draggedIndex !== -1 && draggedIndex !== index,
                }
              ]"
              style="width: 240px"
              draggable="true"
              @dragstart="onDragStart($event, index)"
              @dragenter="onDragEnter(index)"
              @dragover="onDragOver"
              @drop="onDrop($event, index)"
              @dragend="onDragEnd"
            >
              <!-- 序号标识 -->
              <div class="absolute left-2 top-2 z-10 flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 text-xs text-white">
                {{ index + 1 }}
              </div>
              <!-- 拖拽手柄 -->
              <div class="absolute right-2 top-2 z-10 flex h-6 w-6 items-center justify-center rounded bg-gray-800/50 text-white">
                <HolderOutlined />
              </div>

              <div class="group relative">
                <Image
                  :src="item.pic"
                  :preview="false"
                  class="h-40 w-full rounded object-cover pointer-events-none"
                />
                <div
                  class="absolute inset-0 flex items-center justify-center gap-3 bg-black bg-opacity-50 opacity-0 transition-opacity group-hover:opacity-100"
                >
                  <!-- 预览按钮 -->
                  <Button
                    class="shadow-lg"
                    shape="circle"
                    size="large"
                    type="primary"
                    @click.stop="openPreview(index)"
                  >
                    <EyeOutlined />
                  </Button>
                  <!-- 删除按钮（带确认框） -->
                  <Popconfirm
                    title="确定要删除这张轮播图吗？"
                    ok-text="确定"
                    cancel-text="取消"
                    @confirm="deleteNavItem(item.id)"
                  >
                    <Button
                      class="shadow-lg"
                      danger
                      shape="circle"
                      size="large"
                      type="primary"
                      @click.stop
                    >
                      <DeleteOutlined />
                    </Button>
                  </Popconfirm>
                </div>
                <!-- 隐藏的Image用于预览组 -->
                <Image :src="item.pic" class="hidden" />
              </div>
              <div class="mt-2 text-center text-sm text-gray-500">拖拽排序 | 悬停操作</div>
            </Card>
          </template>
        </div>
      </ImagePreviewGroup>
    </Card>

    <Card
      v-else-if="activeTabBar === 6"
      title="推广员管理"
    >
      <template #extra>
        <span class="text-sm text-gray-500"
          >西药固定金额需配置各药品每件佣金；中药按处方单分成</span
        >
      </template>
      <SalespersonCard />
    </Card>

    <Card v-else-if="activeTabBar === 7" title="排班管理">
      <template #extra>
        <span class="text-sm text-gray-500"
          >按日期给医生排班（套班次模板/休诊），未单独排班的日期按医生默认规则放号</span
        >
      </template>
      <!-- 本店 id 解析完成后再渲染面板（面板依赖 storeId 拉医生/模板/日历） -->
      <SchedulePanel
        v-if="scheduleStoreId > 0"
        :store-id="scheduleStoreId"
        :store-name="data.name"
      />
      <!-- 加载中 / 失败态：失败给重试按钮，避免 tab 永久空白无法自救 -->
      <div v-else-if="scheduleLoading" class="schedule-tab-state">
        <Spin tip="正在解析本店排班信息…" />
      </div>
      <Empty v-else-if="scheduleLoadFailed" description="排班信息加载失败">
        <Button type="primary" @click="loadScheduleStoreId">重试</Button>
      </Empty>
    </Card>
  </Page>
</template>
<style lang="scss" scoped>
/* 优化行高 */
.prose {
  @apply leading-relaxed;
}

/* 悬停动画 */
.hover-animate {
  @apply transition-transform duration-300 hover:scale-[1.02];
}

.qrModal {
  // 宽度适应文本长度
  margin: 0 auto;
  text-align: center;
  background: radial-gradient(
    circle at center,
    rgba(173, 216, 230, 0.8),
    rgba(135, 206, 235, 0.8),
    rgba(100, 149, 237, 0.8)
  );
  padding: 20px 30px;

  .qrTitle {
    font-size: 20px;
    margin-bottom: 30px;
    color: #333;
    font-weight: bold;
  }

  .qrAddress {
    font-size: 12px;
    margin-top: 30px;
    color: #333;
    font-weight: bold;
  }

  .addressTitle {
    color: #3a8ee6;
  }

  .qrcode {
    width: fit-content;
    //width: 50%;
    margin: 0 auto;
    text-align: center;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 20px;
  }
}

/* 轮播图卡片样式 */
.card-wrapper {
  transition: all 0.3s ease;
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
}

/* 诊所类型标签样式 */
.clinic-type-tag {
  transition: all 0.2s ease;
  user-select: none;
  
  &:hover {
    opacity: 0.8;
    transform: scale(1.05);
  }
  
  &:active {
    transform: scale(0.95);
  }
}

/* 排班 tab 加载态：居中占位，避免 Spin 贴左上角 */
.schedule-tab-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
}
</style>
