<template>
  <div class="business-hours-container">
    <h2 class="page-title">营业时间</h2>

    <p class="main-tip">特殊营业时间适用于特殊日期(如:春节/国庆/其他指定日期)，设置成功后会在指定日期调整前台营业时间时显示</p>

    <div v-if="displayList.length > 0" class="hours-card-list">
      <div v-for="row in displayList" :key="row.key" class="hours-card">
        <div class="hours-card-header">
          <div class="hours-card-title">
            <span v-if="row.businessType === 1" class="tag-year">全年</span>
            <span class="title-text">{{ row.title }}</span>
          </div>
          <el-tag :type="row.businessType === 1 ? 'success' : 'danger'" size="small">
            {{ row.businessType === 1 ? "正常" : "特殊" }}
          </el-tag>
        </div>
        <div class="hours-card-time">
          {{ row.timeText }}
        </div>
        <div class="hours-card-actions">
          <el-button type="primary" link @click="handleEditRow(row)"> 编辑 </el-button>
          <el-button v-if="row.businessType === 2" type="danger" link @click="handleDeleteRow(row)"> 删除 </el-button>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂未添加营业时间" :image-size="100" />

    <div class="footer">
      <el-button type="primary" @click="openAddSpecialDialog"> 添加特殊营业时间 </el-button>
      <el-button type="primary" @click="openAddNormalDialog"> 添加正常营业时间 </el-button>
      <el-button type="primary" size="large" :loading="saveLoading" @click="handleSave"> 保存 </el-button>
    </div>

    <!-- 正常营业时间 -->
    <el-dialog v-model="normalDialogVisible" :title="normalDialogTitle" width="600px" @close="resetNormalForm">
      <el-form :model="normalForm" label-width="140px">
        <el-form-item label="请选择营业日">
          <div class="day-buttons">
            <el-button
              v-for="day in weekDays"
              :key="day.value"
              :type="normalForm.selectedDays.includes(day.value) ? 'primary' : 'default'"
              @click="toggleDay(day.value)"
            >
              {{ day.label }}
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="请选择营业时间段">
          <el-radio-group v-model="normalForm.timeType">
            <el-radio :value="'custom'"> 自定义 </el-radio>
            <el-radio :value="'24hours'"> 24小时 </el-radio>
          </el-radio-group>
          <div v-if="normalForm.timeType === 'custom'" class="time-picker-group">
            <el-time-picker
              v-model="normalForm.startTime"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="开始时间"
              style="width: 150px"
            />
            <span class="time-separator">至</span>
            <el-time-picker
              v-model="normalForm.endTime"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="结束时间"
              style="width: 150px"
            />
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="normalDialogVisible = false"> 取消 </el-button>
          <el-button type="primary" @click="confirmNormalHours"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 特殊营业时间（与商家端 addBody：多选节日 = 多条记录，每条一个 businessDate + holidayId） -->
    <el-dialog v-model="specialDialogVisible" :title="specialDialogTitle" width="600px" @close="resetSpecialForm">
      <el-form :model="specialForm" label-width="140px">
        <el-form-item label="请选择特殊日期">
          <div class="holiday-buttons">
            <el-button
              v-for="holiday in holidays"
              :key="holiday.value + '-' + holiday.id"
              :type="specialForm.selectedHolidays.includes(holiday.value) ? 'primary' : 'default'"
              class="holiday-btn"
              @click="toggleHoliday(holiday.value)"
            >
              <span class="holiday-btn-label">{{ holiday.label }}</span>
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="请选择营业时间段">
          <el-radio-group v-model="specialForm.timeType">
            <el-radio :value="'custom'"> 自定义 </el-radio>
            <el-radio :value="'24hours'"> 24小时 </el-radio>
          </el-radio-group>
          <div v-if="specialForm.timeType === 'custom'" class="time-picker-group">
            <el-time-picker
              v-model="specialForm.startTime"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="开始时间"
              style="width: 150px"
            />
            <span class="time-separator">至</span>
            <el-time-picker
              v-model="specialForm.endTime"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="结束时间"
              style="width: 150px"
            />
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer dialog-footer-special">
          <el-button @click="resetSpecialFormFields"> 重置 </el-button>
          <div class="dialog-footer-right">
            <el-button @click="specialDialogVisible = false"> 取消 </el-button>
            <el-button type="primary" @click="confirmSpecialHours"> 确定 </el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { getStoreInfoBusinessHours, addOrEditBusinessTime, getHolidayList } from "@/api/modules/storeDecoration";
import { localGet } from "@/utils";

const weekDays = [
  { label: "周一", value: 1 },
  { label: "周二", value: 2 },
  { label: "周三", value: 3 },
  { label: "周四", value: 4 },
  { label: "周五", value: 5 },
  { label: "周六", value: 6 },
  { label: "周日", value: 7 }
];

/** 与商家端 addBody getHolidayList：name/value/id + festivalDate、specialEndTime 展示 */
const holidays = ref<{ label: string; value: string; id: number; festivalDate?: string; specialEndTime?: string }[]>([]);

const loadHolidays = async () => {
  try {
    const res: any = await getHolidayList({
      holidayName: "",
      openFlag: 1,
      year: new Date().getFullYear(),
      page: 1,
      size: 500
    });
    const records = res?.data?.records ?? res?.records ?? res?.data ?? [];
    const list = Array.isArray(records) ? records : [];
    holidays.value = list
      .map((record: any) => ({
        label: record.festivalName ?? record.holidayName ?? record.name ?? "",
        value: record.festivalName ?? record.holidayName ?? record.name ?? "",
        id: record.id != null ? Number(record.id) : 0,
        festivalDate: record.festivalDate != null ? String(record.festivalDate) : "",
        specialEndTime: record.endTime != null ? String(record.endTime) : ""
      }))
      .filter((item: { label: string; value: string }) => item.value);
  } catch {
    holidays.value = [];
  }
};

interface NormalHoursItem {
  id?: number | null;
  days: number[];
  timeType: "custom" | "24hours";
  startTime?: string;
  endTime?: string;
}

interface SpecialHoursItem {
  id?: number | null;
  holidays: string[];
  timeType: "custom" | "24hours";
  startTime?: string;
  endTime?: string;
  festivalName?: string;
  holidayId?: number;
  essentialId?: number | string;
}

const normalHours = ref<NormalHoursItem[]>([]);
const specialHours = ref<SpecialHoursItem[]>([]);
const saveLoading = ref(false);

/** 与商家端一致：00:00 且结束为 00:00 / 23:59 / 02:00 视为全天 */
function isAllDayTimes(start?: string, end?: string) {
  if (start !== "00:00") return false;
  return end === "00:00" || end === "23:59" || end === "02:00";
}

/** 与 1.vue compareTime 一致：用于展示跨天 */
function compareTime(time1: string, time2: string): 1 | -1 | 0 | null {
  const timeRegex = /^([01]\d|2[0-3]):([0-5]\d)$/;
  if (!timeRegex.test(time1) || !timeRegex.test(time2)) return null;
  const [h1, m1] = time1.split(":").map(Number);
  const [h2, m2] = time2.split(":").map(Number);
  const t1 = h1 * 60 + m1;
  const t2 = h2 * 60 + m2;
  if (t1 > t2) return 1;
  if (t1 < t2) return -1;
  return 0;
}

function getTimeLineText(start?: string, end?: string, is24?: boolean) {
  if (is24) return "24小时";
  if (!start || !end) return "—";
  const c = compareTime(end, start);
  if (c === 1) return `${start}-次日${end}`;
  if (c === -1) return `${start}-${end}`;
  if (c === 0) return `${start}-次日${end}`;
  return `${start}-${end}`;
}

function getListTitle(item: NormalHoursItem | SpecialHoursItem, type: 1 | 2) {
  if (type === 1) {
    const n = item as NormalHoursItem;
    const sorted = [...n.days].sort((a, b) => a - b);
    return sorted
      .map(d => weekDays.find(w => w.value === d)?.label)
      .filter(Boolean)
      .join("、");
  }
  const s = item as SpecialHoursItem;
  return s.festivalName || s.holidays.join("、");
}

const displayList = computed(() => {
  const list: {
    key: string;
    title: string;
    businessType: 1 | 2;
    timeText: string;
    source: "normal" | "special";
    index: number;
  }[] = [];
  normalHours.value.forEach((item, i) => {
    list.push({
      key: `n-${i}`,
      title: getListTitle(item, 1),
      businessType: 1,
      timeText: getTimeLineText(item.startTime, item.endTime, item.timeType === "24hours"),
      source: "normal",
      index: i
    });
  });
  specialHours.value.forEach((item, i) => {
    list.push({
      key: `s-${i}`,
      title: getListTitle(item, 2),
      businessType: 2,
      timeText: getTimeLineText(item.startTime, item.endTime, item.timeType === "24hours"),
      source: "special",
      index: i
    });
  });
  return list;
});

const normalDialogVisible = ref(false);
const normalEditIndex = ref<number | null>(null);
const normalDialogTitle = computed(() => "正常营业时间");

const normalForm = reactive({
  selectedDays: [] as number[],
  timeType: "custom" as "custom" | "24hours",
  startTime: "",
  endTime: ""
});

const specialDialogVisible = ref(false);
const specialEditIndex = ref<number | null>(null);
const specialDialogTitle = computed(() => "营业时间");

const specialForm = reactive({
  selectedHolidays: [] as string[],
  timeType: "custom" as "custom" | "24hours",
  /** 与商家端 addBody 默认：自定义 + 00:00 */
  startTime: "00:00",
  endTime: "00:00"
});

function getStoreId(): number | string | null {
  return localGet("geeker-user")?.userInfo?.storeId ?? localGet("createdId") ?? null;
}

function convertApiDataToDisplay(apiData: any[]) {
  const normalList: NormalHoursItem[] = [];
  const specialList: SpecialHoursItem[] = [];

  apiData.forEach((item: any) => {
    const bt = Number(item.businessType);
    if (bt === 1) {
      const businessDate = item.businessDate != null ? String(item.businessDate) : "";
      const days: number[] = [];
      businessDate.split("、").forEach((label: string) => {
        const t = label.trim();
        const byLabel = weekDays.find(d => d.label === t);
        if (byLabel) days.push(byLabel.value);
        else if (/^\d+$/.test(t)) {
          const n = Number(t);
          if (n >= 1 && n <= 7) days.push(n);
        }
      });
      const is24 = isAllDayTimes(item.startTime, item.endTime);
      normalList.push({
        id: item.id,
        days,
        timeType: is24 ? "24hours" : "custom",
        startTime: is24 ? undefined : item.startTime,
        endTime: is24 ? undefined : item.endTime
      });
    } else if (bt === 2) {
      const businessDate = item.businessDate != null ? String(item.businessDate) : "";
      const holidayLabels = businessDate
        .split("、")
        .map((h: string) => h.trim())
        .filter(Boolean);
      const is24 = isAllDayTimes(item.startTime, item.endTime);
      const festivalName = item.festivalName ?? item.holidayInfo?.festivalName ?? "";
      const rawEssential = item.essentialId ?? item.holidayId;
      specialList.push({
        id: item.id,
        holidays: holidayLabels,
        timeType: is24 ? "24hours" : "custom",
        startTime: is24 ? undefined : item.startTime,
        endTime: is24 ? undefined : item.endTime,
        festivalName: festivalName || undefined,
        holidayId: item.holidayId != null ? Number(item.holidayId) : rawEssential != null ? Number(rawEssential) : undefined,
        essentialId: rawEssential
      });
    }
  });

  return { normalList, specialList };
}

async function getBusinessTimeData() {
  const storeId = getStoreId();
  if (!storeId) {
    ElMessage.warning("未找到店铺信息");
    return;
  }
  try {
    const res: any = await getStoreInfoBusinessHours({ id: storeId });
    const ok = res && (res.code === 200 || res.code === "200" || res.success) && res.data != null;
    if (ok) {
      const dataList = Array.isArray(res.data) ? res.data : res.data.list || [];
      const { normalList, specialList } = convertApiDataToDisplay(dataList);
      normalHours.value = normalList;
      specialHours.value = specialList;
    } else {
      normalHours.value = [];
      specialHours.value = [];
    }
  } catch (e) {
    console.error(e);
    normalHours.value = [];
    specialHours.value = [];
  }
}

onMounted(async () => {
  await loadHolidays();
  await getBusinessTimeData();
});

const toggleDay = (day: number) => {
  const index = normalForm.selectedDays.indexOf(day);
  if (index > -1) normalForm.selectedDays.splice(index, 1);
  else normalForm.selectedDays.push(day);
};

const toggleHoliday = (holiday: string) => {
  const index = specialForm.selectedHolidays.indexOf(holiday);
  if (index > -1) specialForm.selectedHolidays.splice(index, 1);
  else specialForm.selectedHolidays.push(holiday);
};

function openAddNormalDialog() {
  if (normalHours.value.length > 0) {
    ElMessage.warning("已有正常营业时间");
    return;
  }
  normalEditIndex.value = null;
  resetNormalForm();
  normalDialogVisible.value = true;
}

function handleEditRow(row: { source: "normal" | "special"; index: number }) {
  if (row.source === "normal") {
    normalEditIndex.value = row.index;
    const item = normalHours.value[row.index];
    normalForm.selectedDays = [...item.days];
    normalForm.timeType = item.timeType;
    normalForm.startTime = item.timeType === "custom" ? item.startTime || "" : "";
    normalForm.endTime = item.timeType === "custom" ? item.endTime || "" : "";
    normalDialogVisible.value = true;
  } else {
    specialEditIndex.value = row.index;
    const item = specialHours.value[row.index];
    specialForm.selectedHolidays = [...item.holidays];
    specialForm.timeType = item.timeType;
    specialForm.startTime = item.timeType === "custom" ? item.startTime || "00:00" : "00:00";
    specialForm.endTime = item.timeType === "custom" ? item.endTime || "00:00" : "00:00";
    specialDialogVisible.value = true;
    loadHolidays();
  }
}

function handleDeleteRow(row: { source: "normal" | "special"; index: number }) {
  if (row.source === "normal") {
    ElMessage.warning("不可删除正常营业时间");
    return;
  }
  ElMessageBox.confirm("确认要删除当前营业时间吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      specialHours.value.splice(row.index, 1);
      ElMessage.success("删除成功");
    })
    .catch(() => {});
}

function openAddSpecialDialog() {
  specialEditIndex.value = null;
  resetSpecialForm();
  specialDialogVisible.value = true;
  loadHolidays();
}

function resetNormalForm() {
  normalForm.selectedDays = [];
  normalForm.timeType = "custom";
  normalForm.startTime = "";
  normalForm.endTime = "";
  normalEditIndex.value = null;
}

function resetSpecialForm() {
  specialForm.selectedHolidays = [];
  specialForm.timeType = "custom";
  specialForm.startTime = "00:00";
  specialForm.endTime = "00:00";
  specialEditIndex.value = null;
}

/** 弹窗内「重置」：与商家端 addBody reset 一致，不关弹窗、不清编辑下标 */
function resetSpecialFormFields() {
  specialForm.selectedHolidays = [];
  specialForm.timeType = "custom";
  specialForm.startTime = "00:00";
  specialForm.endTime = "00:00";
}

function confirmNormalHours() {
  if (normalForm.selectedDays.length === 0) {
    ElMessage.warning("请选择营业日");
    return;
  }
  if (normalForm.timeType === "custom" && (!normalForm.startTime || !normalForm.endTime)) {
    ElMessage.warning("请选择营业时间段");
    return;
  }
  const newItem: NormalHoursItem = {
    days: [...normalForm.selectedDays],
    timeType: normalForm.timeType,
    startTime: normalForm.timeType === "custom" ? normalForm.startTime : undefined,
    endTime: normalForm.timeType === "custom" ? normalForm.endTime : undefined
  };
  const editingNormal = normalEditIndex.value !== null;
  if (editingNormal && normalEditIndex.value !== null) {
    newItem.id = normalHours.value[normalEditIndex.value].id;
    normalHours.value[normalEditIndex.value] = newItem;
  } else {
    normalHours.value.push(newItem);
  }
  normalDialogVisible.value = false;
  resetNormalForm();
  ElMessage.success(editingNormal ? "编辑成功" : "添加成功");
}

function checkDateDuplicate(holidayValues: string[], excludeIndex: number | null): boolean {
  const other = specialHours.value.filter((_, i) => i !== excludeIndex);
  return other.some(item => holidayValues.some(h => item.holidays.includes(h)));
}

/**
 * 与商家端 businessHours handleConfirm + addBody submit：
 * - 新增：多选节日 → 多条记录，每条 businessDate 为单个节日名 + 对应 holidayId；最多 5 条；逐条 unshift 顺序与小程序一致
 * - 编辑：仅取第一个选中项（与小程序 list.length>1 时 list=[list[0]]）
 */
function confirmSpecialHours() {
  if (specialForm.selectedHolidays.length === 0) {
    ElMessage.warning("请选择特殊日期");
    return;
  }
  if (specialForm.timeType === "custom" && (!specialForm.startTime || !specialForm.endTime)) {
    ElMessage.warning("请选择营业时间段");
    return;
  }

  const editingSpecial = specialEditIndex.value !== null;
  const excludeIdx = editingSpecial ? specialEditIndex.value : null;

  if (editingSpecial) {
    const selected = [specialForm.selectedHolidays[0]];
    if (checkDateDuplicate(selected, excludeIdx)) {
      ElMessage.warning("选择的日期重复");
      return;
    }
    const val = selected[0];
    const holidayOpt = holidays.value.find(h => h.value === val);
    const holidayIdFromList = holidayOpt?.id != null && holidayOpt.id > 0 ? holidayOpt.id : undefined;
    const prev = specialHours.value[specialEditIndex.value!];
    const newItem: SpecialHoursItem = {
      holidays: [val],
      timeType: specialForm.timeType,
      startTime: specialForm.timeType === "custom" ? specialForm.startTime : undefined,
      endTime: specialForm.timeType === "custom" ? specialForm.endTime : undefined,
      festivalName: val,
      holidayId: holidayIdFromList ?? prev.holidayId,
      essentialId: holidayIdFromList ?? prev.essentialId
    };
    newItem.id = prev.id;
    if (specialForm.timeType === "24hours") {
      newItem.startTime = undefined;
      newItem.endTime = undefined;
    }
    specialHours.value[specialEditIndex.value!] = newItem;
    specialDialogVisible.value = false;
    resetSpecialForm();
    ElMessage.success("编辑成功");
    return;
  }

  const selected = [...specialForm.selectedHolidays];
  if (specialHours.value.length + selected.length > 5) {
    ElMessage.warning("最多添加5个特殊营业时间");
    return;
  }
  for (const val of selected) {
    if (checkDateDuplicate([val], null)) {
      ElMessage.warning("选择的日期重复");
      return;
    }
  }

  const newItems: SpecialHoursItem[] = selected.map(val => {
    const holidayOpt = holidays.value.find(h => h.value === val);
    const holidayIdFromList = holidayOpt?.id != null && holidayOpt.id > 0 ? holidayOpt.id : undefined;
    return {
      holidays: [val],
      timeType: specialForm.timeType,
      startTime: specialForm.timeType === "custom" ? specialForm.startTime : undefined,
      endTime: specialForm.timeType === "custom" ? specialForm.endTime : undefined,
      festivalName: val,
      holidayId: holidayIdFromList,
      essentialId: holidayIdFromList
    };
  });

  for (let i = newItems.length - 1; i >= 0; i--) {
    specialHours.value.unshift(newItems[i]);
  }
  specialDialogVisible.value = false;
  resetSpecialForm();
  ElMessage.success(newItems.length > 1 ? `已添加 ${newItems.length} 条特殊营业时间` : "添加成功");
}

/** 与商家端 1.vue save：全天为 00:00-00:00；特殊项带 essentialId */
function convertDisplayDataToApi() {
  const apiDataList: any[] = [];
  const storeId = getStoreId();
  if (!storeId) return apiDataList;

  normalHours.value.forEach(item => {
    const sortedDays = [...item.days].sort((a, b) => a - b);
    const dayLabels = sortedDays.map(d => weekDays.find(w => w.value === d)?.label).filter(Boolean);
    const businessDate = dayLabels.join("、");
    const is24 = item.timeType === "24hours";
    apiDataList.push({
      storeId: Number(storeId),
      businessType: 1,
      businessDate,
      startTime: is24 ? "00:00" : item.startTime || "00:00",
      endTime: is24 ? "00:00" : item.endTime || "23:59",
      deleteFlag: 0,
      createdTime: "",
      createdUserId: 0,
      updatedTime: "",
      updatedUserId: 0
    });
  });

  specialHours.value.forEach(item => {
    const businessDate = item.holidays.join("、");
    const is24 = item.timeType === "24hours";
    const raw = item.holidayId ?? item.essentialId;
    const essentialId = raw != null && raw !== "" ? String(raw) : null;
    const row: Record<string, any> = {
      storeId: Number(storeId),
      businessType: 2,
      businessDate,
      startTime: is24 ? "00:00" : item.startTime || "00:00",
      endTime: is24 ? "00:00" : item.endTime || "23:59",
      deleteFlag: 0,
      createdTime: "",
      createdUserId: 0,
      updatedTime: "",
      updatedUserId: 0
    };
    if (essentialId != null) row.essentialId = essentialId;
    apiDataList.push(row);
  });

  return apiDataList;
}

async function handleSave() {
  if (normalHours.value.length === 0) {
    ElMessage.warning("至少添加一条营业时间");
    return;
  }
  const storeId = getStoreId();
  if (!storeId) {
    ElMessage.error("未找到店铺信息");
    return;
  }
  saveLoading.value = true;
  try {
    const apiDataList = convertDisplayDataToApi();
    const result: any = await addOrEditBusinessTime(apiDataList);
    if (result && (result.code === 200 || result.code === "200")) {
      ElNotification({ title: "保存成功", type: "success", duration: 3000 });
      await getBusinessTimeData();
    } else {
      ElMessage.error(result?.msg || "保存失败");
    }
  } catch (error: any) {
    ElMessage.error(error?.msg || error?.message || "保存失败，请重试");
  } finally {
    saveLoading.value = false;
  }
}
</script>

<style scoped lang="scss">
.business-hours-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  background-color: #ffffff;
}
.page-title {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: bold;
  color: #000000;
}
.main-tip {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #334154;
}
.hours-card-list {
  flex: 1;
  max-height: calc(100vh - 280px);
  margin-bottom: 16px;
  overflow-y: auto;
}
.hours-card {
  padding: 16px;
  margin-bottom: 12px;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgb(0 0 0 / 6%);
}
.hours-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hours-card-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  max-width: 78%;
  font-size: 14px;
  font-weight: 600;
  color: #334154;
}
.tag-year {
  display: inline-block;
  min-width: 36px;
  font-weight: 600;
}
.title-text {
  line-height: 1.4;
  word-break: break-all;
}
.hours-card-time {
  margin: 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: #334154;
}
.hours-card-actions {
  display: flex;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid #f2f2f2;
}
.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 0;
  margin-top: auto;
}
.day-buttons,
.holiday-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  .el-button {
    margin: 0;
  }
}
.time-picker-group {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.time-separator {
  color: #606266;
}
.dialog-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.dialog-footer-special {
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.dialog-footer-right {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.holiday-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 12px;
  line-height: 1.3;
}
.holiday-btn-label {
  font-size: 14px;
}
.holiday-btn-date {
  margin-top: 2px;
  font-size: 12px;
  font-weight: normal;
  opacity: 0.85;
}
</style>
