<template>
  <div class="appoinmentmanage-container">
    <div class="appoinmentmanage-header">
      <h2 class="appoinmentmanage-title">科室名称管理</h2>
    </div>
    
    <div class="appoinmentmanage-content">
      <!-- 查询条件 -->
      <div class="query-condition">
        <el-select v-model="queryParams.orgName" placeholder="全部机构" class="query-select">
          <el-option label="全部机构" value=""></el-option>
          <el-option label="中联医院" value="中联医院"></el-option>
        </el-select>
        
        <el-select v-model="queryParams.deptName" placeholder="全部科室" class="query-select">
          <el-option label="全部科室" value=""></el-option>
          <el-option v-for="dept in departmentOptions" :key="dept.id || dept.code" :label="dept.name || dept.deptName" :value="dept.name || dept.deptName"></el-option>
        </el-select>
        
        <el-button type="primary" @click="handleQuery" class="query-button">查询</el-button>
        <el-button @click="handleReset" class="reset-button">重置</el-button>
        <el-button type="success" @click="handleAppointmentSetting" class="appointment-setting-button">预约设置</el-button>
      </div>
      
      <!-- 科室列表 -->
      <div class="dept-table-container">
        <el-table :data="deptList" border style="width: 100%" class="centered-table">
          <!-- 添加空状态提示 -->
          <template #empty>
            <div style="padding: 20px 0;">
              <el-icon><DocumentRemove /></el-icon>
              <span style="margin-left: 8px;">暂无数据</span>
            </div>
          </template>
          
          <!-- 适配常见的后端字段名 -->
          <el-table-column prop="id" label="ID" width="150"></el-table-column>
          <el-table-column prop="orgName" label="卫生机构" width="350">
            <template #default="scope">
              {{ scope.row.orgName || scope.row.organizationName || scope.row.org || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="deptName" label="科室名称" width="350">
            <template #default="scope">
              {{ scope.row.deptName || scope.row.departmentName || scope.row.name || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" width="400">
            <template #default="scope">
              {{ scope.row.remark || scope.row.description || scope.row.note || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="作废标志">
            <template #default="scope">
              <el-tag :type="(scope.row.status === 1 || scope.row.status === true || scope.row.status === '1') ? 'success' : 'danger'">
                {{ (scope.row.status === 1 || scope.row.status === true || scope.row.status === '1') ? '有效' : '无效' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="350" fixed="right">
            <template #default="scope">
              <el-button type="primary" size="small" @click="handleEdit(scope.row)">
                <el-icon><EditPen /></el-icon>
              </el-button>
              <el-button type="info" size="small" @click="handleView(scope.row)">
                <el-icon><View /></el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
  
  <!-- 预约设置弹窗 -->
  <el-dialog
    v-model="appointmentSettingDialog"
    title="预约设置"
    width="400px"
    center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    top="50%"
    :before-close="handleAppointmentSettingCancel"
  >
    <el-form label-position="top" :model="appointmentSettingForm">
      <el-form-item label="取消预约时间类型">
        <el-select v-model="appointmentSettingForm.cancelAppointmentType" placeholder="请选择" style="width: 200px">
          <el-option label="年" value="年"></el-option>
          <el-option label="月" value="月"></el-option>
          <el-option label="日" value="日"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="取消预约次数">
        <el-input-number
          v-model="appointmentSettingForm.cancelAppointmentCount"
          :min="0"
          :step="1"
          placeholder="请输入"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleAppointmentSettingCancel">取消</el-button>
        <el-button type="primary" @click="handleAppointmentSettingConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
  
  <!-- 医生排班弹窗 -->
  <el-dialog
    v-model="scheduleDialogVisible"
    :title="scheduleDialogTitle"
    width="90%"
    :close-on-click-modal="false"
    top="20px"
    fullscreen
  >
    <div class="doctorschedule-content">
      <!-- 筛选条件 -->
      <div class="filter-condition">
        <span class="filter-label">卫生机构</span>
        <el-select v-model="filterParams.orgName" class="filter-select" disabled>
          <el-option :label="filterParams.orgName" :value="filterParams.orgName"></el-option>
        </el-select>
        
        <span class="filter-label">科室名称</span>
        <el-select v-model="filterParams.deptName" class="filter-select" disabled>
          <el-option :label="filterParams.deptName" :value="filterParams.deptName"></el-option>
        </el-select>
        
        <span class="filter-label">开始日期</span>
        <el-date-picker 
          v-model="filterParams.startDate" 
          type="date" 
          placeholder="选择日期" 
          class="filter-date-picker"
        />
        
        <span class="filter-label">排班类型</span>
        <div class="radio-group">
          <el-radio v-model="filterParams.appointmentType" label="普通">普通</el-radio>
          <el-radio v-model="filterParams.appointmentType" label="专家">专家</el-radio>
        </div>
      </div>
      
      <!-- 排班表格 -->
      <div class="schedule-table-container">
        <!-- 按日期分组显示排班 -->
        <div v-for="(dateGroup, index) in groupedSchedule" :key="index" class="daily-schedule">
          <div class="daily-header">
            <span class="date-text">{{ dateGroup.date }}</span>
            <span class="weekday-text">{{ dateGroup.weekday }}</span>
          </div>
          <el-table :data="dateGroup.items" border style="width: 100%" class="schedule-table">
            <el-table-column prop="timeSlot" label="时段" width="100"></el-table-column>
            <el-table-column prop="doctorName" label="医生" width="120">
              <template #default="scope">
                <el-select 
                  v-model="scope.row.doctorName" 
                  placeholder="请选" 
                  class="inline-select"
                  :disabled="!isEditMode"
                >
                  <el-option label="张医生" value="张医生"></el-option>
                  <el-option label="李医生" value="李医生"></el-option>
                  <el-option label="王医生" value="王医生"></el-option>
                  <el-option label="赵医生" value="赵医生"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="room" label="诊室" width="100">
              <template #default="scope">
                <el-select 
                  v-model="scope.row.room" 
                  placeholder="请选" 
                  class="inline-select"
                  :disabled="!isEditMode"
                >
                  <el-option label="诊室1" value="诊室1"></el-option>
                  <el-option label="诊室2" value="诊室2"></el-option>
                  <el-option label="诊室3" value="诊室3"></el-option>
                  <el-option label="诊室4" value="诊室4"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="startTime" label="开始时间" width="120">
              <template #default="scope">
                <el-time-picker 
                  v-model="scope.row.startTime" 
                  type="time" 
                  format="HH:mm" 
                  value-format="HH:mm" 
                  placeholder="选择开始时间"
                  :disabled="!isEditMode"
                  class="time-picker"
                />
              </template>
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间" width="120">
              <template #default="scope">
                <el-time-picker 
                  v-model="scope.row.endTime" 
                  type="time" 
                  format="HH:mm" 
                  value-format="HH:mm" 
                  placeholder="选择结束时间"
                  :disabled="!isEditMode"
                  class="time-picker"
                />
              </template>
            </el-table-column>
            <el-table-column prop="maxNumber" label="限号数量" width="80">
              <template #default="scope">
                <el-input
                    v-model="scope.row.maxNumber"
                    type="number"
                    :disabled="!isEditMode"
                  />
              </template>
            </el-table-column>
            <el-table-column prop="record" label="号源记录" width="80">
              <template #default="scope">
                <el-icon 
                  @click="handleViewRecord(scope.row)" 
                  class="record-icon"
                  title="查看号源记录"
                >
                  <View />
                </el-icon>
              </template>
            </el-table-column>
            <el-table-column prop="appointmentItem" label="挂号项目" width="120">
              <template #default="scope">
                <el-select 
                  v-model="scope.row.appointmentItem" 
                  placeholder="请选" 
                  class="inline-select"
                  :disabled="!isEditMode"
                >
                  <el-option label="挂号费 50" value="挂号费 50"></el-option>
                  <el-option label="一般诊疗费 10" value="一般诊疗费 10"></el-option>
                  <el-option label="主任医师 27" value="主任医师 27"></el-option>
                  <el-option label="副主任 15" value="副主任 15"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="registrationFee" label="挂号费(元)" width="100"></el-table-column>
            <el-table-column prop="clinicItem" label="诊查项目" width="150">
              <template #default="scope">
                <el-select 
                  v-model="scope.row.clinicItem" 
                  placeholder="请选择诊查项目" 
                  class="inline-select"
                  :disabled="!isEditMode"
                >
                  <el-option label="常规诊查" value="常规诊查"></el-option>
                  <el-option label="专科诊查" value="专科诊查"></el-option>
                  <el-option label="特殊诊查" value="特殊诊查"></el-option>
                  <el-option label="专家诊查" value="专家诊查"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="treatmentFee" label="诊疗费(元)" width="100"></el-table-column>
            <el-table-column prop="online" label="线上" width="60">
              <template #default="scope">
                <el-checkbox v-model="scope.row.online" :disabled="!isEditMode"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="stopClinic" label="停诊" width="60">
              <template #default="scope">
                <el-checkbox v-model="scope.row.stopClinic" :disabled="!isEditMode"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="stopReason" label="停诊原因" width="150">
              <template #default="scope">
                <el-input 
                  v-model="scope.row.stopReason" 
                  :placeholder="scope.row.stopClinic ? '请输入停诊原因' : ''" 
                  class="inline-input"
                  :disabled="!isEditMode || !scope.row.stopClinic"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="scope">
                <el-button 
                  type="primary" 
                  size="small" 
                  @click="handleAddSchedule(scope.row)"
                  :disabled="!isEditMode"
                >
                  添加
                </el-button>
                <el-button 
                  type="danger" 
                  size="small" 
                  @click="handleDeleteSchedule(scope.row)"
                  :disabled="!isEditMode"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      
      <!-- 底部操作按钮 -->
      <div class="bottom-buttons">
        <el-button type="primary" @click="handleSave" :disabled="!isEditMode">确定</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </div>
    
    <!-- 号源记录对话框 -->
    <el-dialog
      v-model="recordDialogVisible"
      title="号源记录"
      width="30%"
      :close-on-click-modal="true"
    >
      <div class="appointment-records">
        <div class="record-item" v-for="record in appointmentRecords" :key="record.index">
          <span class="record-time">{{ record.time }}</span>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="recordDialogVisible = false">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </el-dialog>
</template>

<script setup name="AppoinmentManage">
import { ref, onMounted, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElDialog, ElSelect, ElOption, ElInput, ElForm, ElFormItem, ElMessageBox } from 'element-plus'
import { EditPen, View, DocumentRemove } from '@element-plus/icons-vue'
import { listDept, searchDept } from '@/api/appoinmentmanage/dept'
import { getLocationTree } from '@/views/charge/outpatientregistration/components/outpatientregistration'

// 查询参数
const queryParams = ref({
  orgName: '',
  deptName: ''
})

// 科室选项列表
const departmentOptions = ref([])

// 科室列表
const deptList = ref([])

// 分页参数
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 预约设置弹窗
const appointmentSettingDialog = ref(false)

// 预约设置表单数据
const appointmentSettingForm = ref({
  cancelAppointmentType: '年',
  cancelAppointmentCount: 0
})

// 医生排班相关数据
// 排班弹窗可见性
const scheduleDialogVisible = ref(false)
// 排班弹窗标题
const scheduleDialogTitle = ref('')
// 当前操作模式（edit/view）
const currentMode = ref('edit')
// 当前选中的科室
const currentDept = ref(null)

// 筛选参数
const filterParams = ref({
  orgName: '演示医院',
  deptName: '测试内科',
  startDate: new Date('2025-12-01'),
  appointmentType: '普通'
})

// 排班列表数据
const scheduleList = ref([])

// 号源记录对话框相关
const recordDialogVisible = ref(false)
const currentRow = ref(null)
const appointmentRecords = ref([])

// 计算属性 - 是否为编辑模式
const isEditMode = computed(() => {
  return currentMode.value === 'edit'
})

// 按日期分组的排班数据
const groupedSchedule = computed(() => {
  // 按日期分组
  const groups = {}
  
  scheduleList.value.forEach(item => {
    if (!groups[item.date]) {
      groups[item.date] = {
        date: item.date,
        weekday: item.weekday,
        items: []
      }
    }
    groups[item.date].items.push(item)
  })
  
  // 转换为数组
  return Object.values(groups)
})

// 获取科室列表（通用方法）
const fetchDeptList = async (apiFunction) => {
  try {
    const res = await apiFunction({
      ...queryParams.value,
      pageNo: pagination.value.currentPage,
      pageSize: pagination.value.pageSize
    })
    console.log('后端返回的数据:', res)
    if (res.code === 200) {
      // 适配不同的后端数据结构
      let dataList = []
      let totalCount = 0
      
      // 首先检查是否存在嵌套的data结构
      let actualData = res.data
      // 处理嵌套data结构（用户提供的格式）
      if (actualData && actualData.code === 200 && actualData.msg) {
        actualData = actualData.data
      }
      
      // 检查是否是标准分页结构 (Spring Boot Page)
      if (actualData && actualData.content) {
        // Spring Boot Page结构使用content字段
        dataList = actualData.content
        totalCount = actualData.totalElements || 0
      } else if (actualData && actualData.records) {
        // 自定义分页结构使用records字段
        dataList = actualData.records
        totalCount = actualData.total || 0
      } else if (Array.isArray(actualData)) {
        // 直接返回数组
        dataList = actualData
        totalCount = actualData.length
      } else if (actualData && actualData.list) {
        // 其他可能的列表字段名
        dataList = actualData.list
        totalCount = actualData.total || actualData.list.length
      } else {
        // 默认处理
        dataList = actualData || []
        totalCount = Array.isArray(actualData) ? actualData.length : 0
      }
      
      deptList.value = dataList
      pagination.value.total = totalCount
      
      console.log('处理后的数据列表:', deptList.value)
      console.log('总记录数:', pagination.value.total)
    } else {
      ElMessage.error(res.msg || '获取科室列表失败')
    }
  } catch (error) {
    console.error('获取科室列表失败:', error)
    ElMessage.error('获取科室列表失败')
  }
}

// 获取科室列表（默认列表）
const getDeptList = async () => {
  await fetchDeptList(listDept)
}

// 查询
const handleQuery = () => {
  pagination.value.currentPage = 1
  fetchDeptList(searchDept)
}

// 重置
const handleReset = () => {
  queryParams.value = {
    orgName: '',
    deptName: ''
  }
  pagination.value.currentPage = 1
  getDeptList()
}

// 预约设置弹窗显示
const handleAppointmentSetting = () => {
  appointmentSettingDialog.value = true
}

// 预约设置确定
const handleAppointmentSettingConfirm = () => {
  // 这里可以添加表单验证和提交逻辑
  console.log('预约设置提交:', appointmentSettingForm.value)
  ElMessage.success('预约设置保存成功')
  appointmentSettingDialog.value = false
}

// 预约设置取消
const handleAppointmentSettingCancel = () => {
  appointmentSettingDialog.value = false
}

// 路由和导航
const router = useRouter()

// 生成一周排班数据
const generateWeekSchedule = (startDate) => {
  const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  const timeSlots = [
    { label: '上午', startTime: '08:00', endTime: '12:00' },
    { label: '下午', startTime: '14:30', endTime: '18:00' }
  ]
  
  const schedule = []
  
  // 生成一周7天的数据
  for (let i = 0; i < 7; i++) {
    const currentDate = new Date(startDate)
    currentDate.setDate(startDate.getDate() + i)
    
    const dateStr = currentDate.toISOString().split('T')[0]
    const weekday = days[currentDate.getDay()]
    
    // 每个时间段生成一条记录
    timeSlots.forEach(slot => {
      schedule.push({
        id: `${dateStr}-${slot.label}`,
        date: dateStr,
        weekday: weekday,
        timeSlot: slot.label,
        startTime: slot.startTime,
        endTime: slot.endTime,
        doctorName: '',
        room: '',
        maxNumber: '',
        appointmentItem: '',
        registrationFee: '',
        clinicItem: '',
        treatmentFee: '',
        online: true,
        stopClinic: false,
        stopReason: ''
      })
    })
  }
  
  return schedule
}

// 编辑
const handleEdit = (row) => {
  // 设置当前科室和模式
  currentDept.value = row
  currentMode.value = 'edit'
  scheduleDialogTitle.value = `编辑科室排班 - ${row.name || row.deptName}`
  
  // 动态设置筛选参数
  filterParams.value.orgName = row.orgName || '中联医院'
  filterParams.value.deptName = row.name || row.deptName
  
  // 生成排班数据
  scheduleList.value = generateWeekSchedule(filterParams.value.startDate)
  
  // 显示排班弹窗
  scheduleDialogVisible.value = true
}

// 查看
const handleView = (row) => {
  // 设置当前科室和模式
  currentDept.value = row
  currentMode.value = 'view'
  scheduleDialogTitle.value = `查看科室排班 - ${row.name || row.deptName}`
  
  // 动态设置筛选参数
  filterParams.value.orgName = row.orgName || '中联医院'
  filterParams.value.deptName = row.name || row.deptName
  
  // 生成排班数据
  scheduleList.value = generateWeekSchedule(filterParams.value.startDate)
  
  // 显示排班弹窗
  scheduleDialogVisible.value = true
}

// 添加排班
const handleAddSchedule = (row) => {
  ElMessage.info('添加排班功能待实现')
}

// 删除排班
const handleDeleteSchedule = (row) => {
  ElMessage.info('删除排班功能待实现')
}

// 计算号源记录
const calculateAppointmentRecords = (row) => {
  const { startTime, endTime, maxNumber } = row
  
  // 将时间转换为分钟数
  const [startHour, startMinute] = startTime.split(':').map(Number)
  const [endHour, endMinute] = endTime.split(':').map(Number)
  
  const startTotalMinutes = startHour * 60 + startMinute
  const endTotalMinutes = endHour * 60 + endMinute
  
  // 计算总时长和间隔
  const totalDuration = endTotalMinutes - startTotalMinutes
  const interval = Math.floor(totalDuration / maxNumber)
  
  // 生成号源记录
  const records = []
  for (let i = 0; i < maxNumber; i++) {
    const minutes = startTotalMinutes + i * interval
    const hour = Math.floor(minutes / 60).toString().padStart(2, '0')
    const minute = (minutes % 60).toString().padStart(2, '0')
    records.push({
      index: i + 1,
      time: `${hour}:${minute}`
    })
  }
  
  return records
}

// 查看号源记录
const handleViewRecord = (row) => {
  // 验证开始时间、结束时间和限号数量
  if (!row.startTime || !row.endTime || !row.maxNumber) {
    ElMessageBox.confirm('请先设置开始时间、结束时间和限号数量', '', {
      confirmButtonText: '确定',
      type: 'warning',
      showCancelButton: false
    })
    return
  }
  
  // 计算号源记录
  currentRow.value = row
  appointmentRecords.value = calculateAppointmentRecords(row)
  recordDialogVisible.value = true
}

// 保存排班
const handleSave = () => {
  ElMessage.success('排班保存成功')
  scheduleDialogVisible.value = false
}

// 取消操作
const handleCancel = () => {
  scheduleDialogVisible.value = false
}

// 分页大小变化
const handleSizeChange = (size) => {
  pagination.value.pageSize = size
  getDeptList()
}

// 当前页码变化
const handleCurrentChange = (current) => {
  pagination.value.currentPage = current
  getDeptList()
}

// 获取门诊挂号的就诊科室数据
const getDepartmentOptions = async () => {
  try {
    const response = await getLocationTree()
    if (response.code === 200) {
      // 适配不同的后端数据结构
      let actualData = response.data
      // 处理嵌套data结构
      if (actualData && actualData.code === 200 && actualData.msg) {
        actualData = actualData.data
      }
      
      // 确保数据是数组格式
      if (Array.isArray(actualData)) {
        departmentOptions.value = actualData
      } else if (actualData && actualData.records) {
        departmentOptions.value = actualData.records
      } else if (actualData && actualData.content) {
        departmentOptions.value = actualData.content
      } else if (actualData && actualData.list) {
        departmentOptions.value = actualData.list
      } else {
        departmentOptions.value = []
      }
    } else {
      console.error('获取科室列表失败:', response.msg)
      departmentOptions.value = []
    }
  } catch (error) {
    console.error('获取科室列表失败:', error)
    departmentOptions.value = []
  }
}

// 页面加载时获取科室列表
onMounted(() => {
  getDeptList()
  getDepartmentOptions()
})
</script>

<style scoped lang="scss">
.appoinmentmanage-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #f5f7fa;
}

.appoinmentmanage-header {
  margin-bottom: 20px;
}

.appoinmentmanage-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.appoinmentmanage-content {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.query-condition {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}

.query-select {
  width: 200px;
}

.query-button, .reset-button, .appointment-setting-button {
  min-width: 100px;
}

.dept-table-container {
  width: 100%;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* 表格居中样式 */
.centered-table {
  :deep(.el-table__header-wrapper th.el-table__cell),
  :deep(.el-table__body-wrapper td.el-table__cell) {
    text-align: center;
  }
}

/* 医生排班样式 */
.doctorschedule-content {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.filter-condition {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}

.filter-label {
  font-weight: 500;
  white-space: nowrap;
}

.filter-select {
  width: 150px;
}

.filter-date-picker {
  width: 200px;
}

.radio-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.schedule-table-container {
  margin-bottom: 20px;
  width: 100%;
  overflow-x: auto;
}

.daily-schedule {
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
}

.daily-header {
  background-color: #f5f7fa;
  padding: 10px 15px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 16px;
  font-weight: 600;
}

.date-text {
  color: #333;
}

.weekday-text {
  color: #606266;
  font-weight: normal;
}

.schedule-table {
  width: 100% !important;
  min-width: 100% !important;
  
  :deep(.el-table__header-wrapper) {
    width: 100% !important;
    border-top: none;
  }
  
  :deep(.el-table__body-wrapper) {
    width: 100% !important;
  }
  
  :deep(.el-table__header-wrapper th.el-table__cell),
  :deep(.el-table__body-wrapper td.el-table__cell) {
    text-align: center;
    padding: 8px 0;
  }
  
  /* 确保表格容器填满 */
  :deep(.el-table__inner-wrapper) {
    width: 100% !important;
  }
  
  /* 确保表格本身填满 */
  :deep(.el-table__body) {
    width: 100% !important;
  }
  
  /* 确保表格列正确分配宽度 */
  :deep(.el-table__header) {
    width: 100% !important;
  }
  
  :deep(.el-table__header tr),
  :deep(.el-table__body tr) {
    width: 100% !important;
  }
  
  /* 确保表格容器的最小宽度与内容匹配 */
  :deep(.el-table) {
    width: 100% !important;
    min-width: 100% !important;
  }
}

.inline-select {
  width: 100%;
}

.inline-input {
  width: 100%;
}

.time-picker {
  width: 100%;
}

.record-icon {
  font-size: 18px;
  color: #409eff;
  cursor: pointer;
  transition: color 0.2s;
}

.record-icon:hover {
  color: #66b1ff;
}

.bottom-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

/* 号源记录对话框样式 */
.appointment-records {
  max-height: 300px;
  overflow-y: auto;
  padding: 10px 0;
}

.record-item {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.record-item:last-child {
  border-bottom: none;
}

.record-time {
  font-size: 16px;
  color: #333;
}

.dialog-footer {
  text-align: center;
}

/* 隐藏数字输入框的增减按钮 */
:deep(.el-input__inner[type="number"]) {
  appearance: textfield;
  -moz-appearance: textfield;
}
:deep(.el-input__inner[type="number"])::-webkit-outer-spin-button,
:deep(.el-input__inner[type="number"])::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}
</style>

<style scoped>
/* 确保弹窗内容区占满宽度 */
:deep(.el-dialog__body) {
  padding: 20px;
}
</style>