yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/pressure2/schedule/index.vue

  <template>
  <!-- 搜索工作栏 -->
  <ContentWrap>
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
        <el-form-item label="月份" prop="month">
        <el-date-picker
          v-model="month"
          type="month"
          value-format="YYYY-MM"
          placeholder="日期选择"
          class="!w-240px"
          @change="handleMonthChange"
        />
      </el-form-item>
      <el-form-item label="部门" prop="relateDepartment">
        <DeptSelect
          v-model="queryParams.relateDepartment"
          placeholder="请选择部门"
          clearable
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px" /> 搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px" /> 重置
        </el-button>
        <el-button type="danger" @click="handleSubmitPlan">
          <Icon icon="ep:upload" class="mr-5px" /> 提交计划
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 右键菜单 -->
  <el-popover
    v-model:visible="contextMenuVisible"
    :virtual-ref="virtualRef"
    virtual-triggering
    trigger="contextmenu"
    placement="bottom"
    popper-class="context-menu-popover"
  >
    <div class="context-menu">
      <div class="context-menu-item" @click="handleEditPlan">
        <el-icon><Edit /></el-icon>
        <span>修改计划</span>
      </div>
      <div class="context-menu-item" @click="handleCancelPlan">
        <el-icon><Delete /></el-icon>
        <span>取消计划</span>
      </div>
    </div>
  </el-popover>

  <!-- 计划详情弹窗 -->
  <PlanDetail
    v-model:visible="showDetailDialog"
    :task-data="currentTask"
    @success="handleDetailSuccess"
  />

  <!-- 日历视图 -->
  <ContentWrap>
    <div class="calendar-wrap mb-20px">
      <div class="calendar-header-wrap">
        <div class="flex items-center">
          <el-radio-group v-model="queryParams.type" class="mr-4" @change="handleQuery">
            <el-radio-button value="100">仅看我排的计划</el-radio-button>
            <el-radio-button value="200">查看部门全部排期</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <el-calendar v-model="currentDate" class="mt-20px">
        <template #header="{ date }">
          <div class="calendar-header">
            <el-button-group>
              <el-button size="small" @click="handlePrevMonth">
                <el-icon><ArrowLeft /></el-icon>
              </el-button>
              <el-button size="small" @click="handleNextMonth">
                <el-icon><ArrowRight /></el-icon>
              </el-button>
            </el-button-group>
            <span class="current-month">{{ date }}</span>
            <div>
              <el-alert
                v-if="selectedTasks.length > 0"
                type="info"
                :closable="false"
                show-icon
                class="small-alert"
              >
                <span>已选择 <strong>{{ selectedTasks.length }}</strong> 个计划，将只提交已选择的计划</span>
              </el-alert>
              <el-alert
                v-else
                type="warning"
                :closable="false"
                show-icon
                class="small-alert"
              >
                <span>提示：按 <kbd>Ctrl</kbd> + 点击计划卡片可多选，提交时只提交已选择的计划</span>
              </el-alert>
            </div>
          </div>
        </template>

        <template #date-cell="{ data }">
          <div 
            class="calendar-cell"
          >
            <div class="cell-content">
              <div class="date-text" @click.stop="handleDateClick(data.day)">
                {{ data.day }}
              </div>
              <div class="task-container" v-if="taskList[data.day]?.taskItems?.length > 0">
                <div
                  v-for="task in taskList[data.day].taskItems"
                  :key="task.taskId"
                  class="task-item"
                  :class="{
                    'selected': selectedTasks.some(t => t.taskId === task.taskId),
                    'dragging': isDragging && selectedTasks.some(t => t.taskId === task.taskId),
                    [`check-type-${task.checkType}`]: true
                  }"
                  draggable="true"
                  @dragstart="handleDragStart($event, task)"
                  @dragend="handleDragEnd"
                  @click="handleTaskSelect(task, $event)"
                >
                  <div class="task-content">
                    <div class="task-header">
                      <div class="company-info flex-1">
                        <div class="company-name">{{ task.unitName }}</div>
                        <div class="company-address" v-if="task.equipDistrictName || task.equipStreetName">
                          <span v-if="task.equipDistrictName">{{ task.equipDistrictName }}</span>
                          <span v-if="task.equipDistrictName && task.equipStreetName">-</span>
                          <span v-if="task.equipStreetName">{{ task.equipStreetName }}</span>
                        </div>
                        <div class="text-[12px] text-[#015293]">{{ getStatusText(task) }}</div>
                      </div>
                      <el-button
                        class="delete-btn"
                        type="danger"
                        link
                        @click.stop="handleDeleteTask(task)"
                      >
                        <el-icon><Delete /></el-icon>
                      </el-button>
                    </div>
                    <div class="task-numbers">
                      <span class="check-type regular-check" v-if="task.checkType === '100'">
                        <img v-if="task.type === EQUIP_TYPES.PIPELINE" src="@/assets/svgs/pressure/gd.svg" class="type-icon" />
                        <img v-if="task.type === EQUIP_TYPES.CONTAINER" src="@/assets/svgs/pressure/rq.svg" class="type-icon" />
                        <img v-if="task.type === EQUIP_TYPES.BOILER" src="@/assets/svgs/pressure/wl.svg" class="type-icon" />
                        {{ EQUIP_TYPE_NAMES[task.type as keyof typeof EQUIP_TYPES] }}内检设备: {{ task.equipCount }}
                        <span v-if="task.source === 200" class="source-tag">前台约检</span>
                      </span>
                      <span class="check-type year-check" v-if="task.checkType === '200'">
                        <img v-if="task.type === EQUIP_TYPES.PIPELINE" src="@/assets/svgs/pressure/gd.svg" class="type-icon" />
                        <img v-if="task.type === EQUIP_TYPES.CONTAINER" src="@/assets/svgs/pressure/rq.svg" class="type-icon" />
                        <img v-if="task.type === EQUIP_TYPES.BOILER" src="@/assets/svgs/pressure/wl.svg" class="type-icon" />
                        {{ EQUIP_TYPE_NAMES[task.type as keyof typeof EQUIP_TYPES] }}外检设备: {{ task.equipCount }}
                        <span v-if="task.source === 200" class="source-tag">前台约检</span>
                      </span>
                      <span class="check-type expired-check" v-if="task.checkType === '300'">
                        <img v-if="task.type === EQUIP_TYPES.PIPELINE" src="@/assets/svgs/pressure/gd.svg" class="type-icon" />
                        <img v-if="task.type === EQUIP_TYPES.CONTAINER" src="@/assets/svgs/pressure/rq.svg" class="type-icon" />
                        <img v-if="task.type === EQUIP_TYPES.BOILER" src="@/assets/svgs/pressure/wl.svg" class="type-icon" />
                        {{ EQUIP_TYPE_NAMES[task.type as keyof typeof EQUIP_TYPES] }}耐压检验: {{ task.equipCount }}
                        <span v-if="task.source === 200" class="source-tag">前台约检</span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="date-info" v-if="taskList[data.day]?.thisDistance || taskList[data.day]?.unitDistance">
              <template v-if="taskList[data.day].thisDistance">
                <span class="distance-info">
                  <el-icon><Location /></el-icon>
                  离本院距离: {{ taskList[data.day].thisDistance }}km
                </span>
              </template>
              <template v-if="taskList[data.day].unitDistance">
                <span class="distance-info">
                  <el-icon><Place /></el-icon>
                  单位相隔最大距离: {{ taskList[data.day].unitDistance }}km
                </span>
              </template>
            </div>
          </div>
        </template>
      </el-calendar>
    </div>
  </ContentWrap>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { ArrowLeft, ArrowRight, Delete, Document, Location, Place, Edit } from '@element-plus/icons-vue'
import DeptSelect from "@/views/pressure2/equipboilerscheduling/components/DeptSelect.vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import { EquipBoilerSchedulingApi, BoilerTaskItem, BoilerPlanSchedulingCalendarVO } from '@/api/pressure2/equipboilerscheduling'
import dayjs from 'dayjs'
import PlanDetail from './detail.vue'

// 设备类型常量
const EQUIP_TYPES = {
  CONTAINER: '100', // 容器
  PIPELINE: '200', // 管道
  BOILER: '300' // 锅炉
} as const

// 设备类型显示名称
const EQUIP_TYPE_NAMES: Record<string, string> = {
  [EQUIP_TYPES.PIPELINE]: '管道',
  [EQUIP_TYPES.CONTAINER]: '容器',
  [EQUIP_TYPES.BOILER]: '锅炉'
} as const
const getStatusText = (taskItem): string => {
  const { status } = taskItem
  if (status === null || status === undefined) return '未知'
  const statusMap: Record<number, string> = {
    100: '已排期',
    200: '待约检',
    300: '已受理',
    400: '检测中',
    500: '部分办结',
    600: '已办结'
  }
  return statusMap[Number(status)] || '未知'
}

// 查询参数
const queryParams = ref({
  planDate: [] as string[],
  relateDepartment: undefined as string | undefined,
  type: '100',
})

const month = ref('')
const queryFormRef = ref(null) // 搜索的表单
const currentDate = ref(new Date())
const taskList = ref<Record<string, BoilerPlanSchedulingCalendarVO>>({})

// 添加选中计划列表
const selectedTasks = ref<BoilerTaskItem[]>([])

// 拖拽相关的状态
const draggedTask = ref<BoilerTaskItem | null>(null)
const isDragging = ref(false)

// 日期备注相关
const showNoteDialog = ref(false)
const currentEditDate = ref('')
//const currentNote = ref('')

// 右键菜单相关
const contextMenuVisible = ref(false)
const virtualRef = ref()
const currentTask = ref<BoilerTaskItem | {}>({})

// 详情弹窗相关 
const showDetailDialog = ref(false)

// 添加任务ID数组
const taskIds = ref<string[]>([])

// 添加 watch 监听器
watch(currentDate, (newDate) => {
  // 获取新的月份格式
  const newMonth = dayjs(newDate).format('YYYY-MM')
  // 如果月份不同，则触发月份更新
  if (newMonth !== month.value) {
    handleMonthChange(newMonth)
    handleQuery()
  }
})

const handlePrevMonth = () => {
  const date = new Date(currentDate.value)
  date.setMonth(date.getMonth() - 1)
  currentDate.value = date
  handleMonthChange(dayjs(date).format('YYYY-MM'))
  handleQuery() 
}

const handleNextMonth = () => {
  const date = new Date(currentDate.value)
  date.setMonth(date.getMonth() + 1)
  currentDate.value = date
  handleMonthChange(dayjs(date).format('YYYY-MM'))
  handleQuery()
}

/** 处理月份变化 */
const handleMonthChange = (val: string | null) => {
  if (!val) {
    queryParams.value.planDate = []
    month.value = ''
    return
  }

  month.value = val
  
  // 用dayjs把月份转换为开始和结束日期
  const startDate = dayjs(val).startOf('month').format('YYYY-MM-DD')
  const endDate = dayjs(val).endOf('month').format('YYYY-MM-DD')
  queryParams.value.planDate = [startDate, endDate]
}

/** 搜索按钮操作 */
const handleQuery = async () => {
  try {
    // 如果有指定日期参数，则切换日历到该日期所在月份
    if (queryParams.value.planDate.length > 0) {
      const targetDate = dayjs(queryParams.value.planDate[0])
      const targetMonth = targetDate.format('YYYY-MM')
      
      // 设置日历当前日期为目标日期
      currentDate.value = targetDate.toDate()
      
      // 更新月份和日期范围
      if (targetMonth !== month.value) {
        handleMonthChange(targetMonth)
      }
    }
    
    // 调用后端API获取数据
    const response = await EquipBoilerSchedulingApi.planSchedulingCalendar(queryParams.value)

    // 处理返回的数据，转换为以日期为键的对象
    const tasksMap: Record<string, BoilerPlanSchedulingCalendarVO> = {}
    // 清空之前的任务ID数组
    taskIds.value = []
    
    response.forEach((dayData) => {
      const dateKey = dayData.planDate; // 使用 planDate 作为 key
      // 初始化当天的 tasksMap 条目 (如果不存在)
      if (!tasksMap[dateKey]) {
        tasksMap[dateKey] = {
          planDate: dateKey,
          taskItems: [],
          unitDistance: dayData.unitDistance,
          thisDistance: dayData.thisDistance
        };
      }
      
      // 处理锅炉排期
      if (dayData.taskItems && dayData.taskItems.length > 0) {
        dayData.taskItems.forEach(task => {
          //锅炉类型
          task.type = EQUIP_TYPES.BOILER
          // 收集任务ID
          taskIds.value.push(task.taskId)
          tasksMap[dateKey].taskItems.push(task);
        })
      }
      
    })

    taskList.value = tasksMap
    //console.log(taskList.value)
  } catch (error) {
    //console.error('获取计划数据失败:', error)
    ElMessage.error('获取计划数据失败')
    taskList.value = {}
    taskIds.value = []
  }
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value && queryFormRef.value.resetFields()
  const startDate = dayjs().startOf('month').format('YYYY-MM-DD')
  const endDate = dayjs().endOf('month').format('YYYY-MM-DD')
  queryParams.value = {
    type: '100',
    planDate: [startDate, endDate]
  } as any;
  handleQuery()
}

/** 处理计划点击 */
const handleTaskSelect = (task: BoilerTaskItem, event?: MouseEvent) => {

  // 检查是否按下了 Ctrl/Command 键
  const isMultiSelect = event?.ctrlKey || event?.metaKey
  
  if (isMultiSelect) {
    // Ctrl/Command 多选
    const index = selectedTasks.value.findIndex(t => t.taskId === task.taskId)
    if (index === -1) {
      selectedTasks.value.push(task)
    } else {
      selectedTasks.value.splice(index, 1)
    }
  } else {
    // 如果是单击，且不是拖拽开始，则打开详情
    // 使用setTimeout来区分点击和拖拽开始
    setTimeout(() => {
      if (!isDragging.value) {
        selectedTasks.value = []
        currentTask.value = task
        virtualRef.value = {
          getBoundingClientRect() {
            const element = event?.target as HTMLElement
            const rect = element.getBoundingClientRect()
            return {
              x: rect.left,
              y: rect.bottom,
              width: 0,
              height: 0,
              top: rect.bottom,
              right: rect.left,
              bottom: rect.bottom,
              left: rect.left,
            }
          }
        }
        contextMenuVisible.value = true
      }
    }, 200)
  }
}

/** 处理开始拖拽 */
const handleDragStart = (event: DragEvent, task: BoilerTaskItem) => {
  if (event.dataTransfer) {
    // 隐藏右键菜单
    contextMenuVisible.value = false
    
    event.dataTransfer.effectAllowed = 'move'
    // 如果拖动的计划不在选中列表中，则将其设为唯一选中
    if (!selectedTasks.value.find(t => t.taskId === task.taskId)) {
      selectedTasks.value = [task]
    }
    draggedTask.value = task
    isDragging.value = true
    
    // 只有多选时才显示自定义拖动效果
    if (selectedTasks.value.length > 1) {
      // 创建一个半透明的拖动效果
      const dragImage = document.createElement('div')
      dragImage.textContent = `${selectedTasks.value.length} 个计划`
      dragImage.style.padding = '4px 8px'
      dragImage.style.background = 'rgba(64, 158, 255, 0.1)'
      dragImage.style.border = '2px solid #409EFF'
      dragImage.style.borderRadius = '4px'
      dragImage.style.position = 'fixed'
      dragImage.style.top = '-1000px'
      document.body.appendChild(dragImage)
      
      event.dataTransfer.setDragImage(dragImage, 0, 0)
      
      // 延迟移除临时元素
      setTimeout(() => document.body.removeChild(dragImage), 0)
    }
  }
}

/** 处理拖拽结束 */
const handleDragEnd = (event: DragEvent) => {
  draggedTask.value = null
  isDragging.value = false
  // 清空选中状态
  selectedTasks.value = []
}

/** 处理放置 */
const handleDrop = async (event: DragEvent, newDate: string) => {
  event.preventDefault()
  
  if (!draggedTask.value || selectedTasks.value.length === 0) return
  
  // 标准化日期格式
  const standardNewDate = dayjs(newDate.trim()).format('YYYY-MM-DD')
  
  // 检查是否所有选中计划的日期都相同
  if (selectedTasks.value.every(task => {
    const standardTaskDate = dayjs(task.planDate.trim()).format('YYYY-MM-DD')
    return standardTaskDate === standardNewDate
  })) {
    selectedTasks.value = [] // 如果拖动到相同日期，也清空选中状态
    return
  }

  try {
    // 调用后端 API 批量更新计划日期
    await EquipBoilerSchedulingApi.planSchedulingUpdateCalendar({
      ids: selectedTasks.value.map(task => task.taskId),
      date: standardNewDate
    })

    // 重新读取数据
    handleQuery()
    
    // 清空选中状态
    selectedTasks.value = []
    
    ElMessage.success('计划日期更新成功')
  } catch (error) {
    console.error('更新计划日期失败:', error)
    ElMessage.error('更新计划日期失败')
  }
}

// 生命周期钩子
onMounted(() => {
  // 默认当月
  handleMonthChange(dayjs().format('YYYY-MM'))
  handleQuery()
  
  // 添加拖放事件监听
  const handleTableDragOver = (e: DragEvent) => {
    if (e.target instanceof HTMLElement) {
      const td = e.target.closest('td')
      if (td && td.querySelector('.date-text')) {
        e.preventDefault()
      }
    }
  }

  const handleTableDrop = (e: DragEvent) => {
    if (e.target instanceof HTMLElement) {
      const td = e.target.closest('td')
      if (td) {
        const dateText = td.querySelector('.date-text')?.textContent
        if (dateText) {
          handleDrop(e, dateText)
        }
      }
    }
  }

  // 给表格添加事件委托
  const calendar = document.querySelector('.el-calendar-table')
  if (calendar) {
    calendar.addEventListener('dragover', handleTableDragOver)
    calendar.addEventListener('drop', handleTableDrop)
  }

  // 清理事件监听
  onUnmounted(() => {
    const calendar = document.querySelector('.el-calendar-table')
    if (calendar) {
      calendar.removeEventListener('dragover', handleTableDragOver)
      calendar.removeEventListener('drop', handleTableDrop)
    }
  })

  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})

// 处理单个计划删除
const handleDeleteTask = (task: BoilerTaskItem) => {
  handleDeleteSelected([task])
}

// 处理删除选中计划
const handleDeleteSelected = async (tasksToDelete?: BoilerTaskItem[]) => {
  const tasks = tasksToDelete || selectedTasks.value
  if (tasks.length === 0) return
  
  try {
    await ElMessageBox.confirm(
      `确认删除选中的计划吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 调用后端 API 删除计划
    await EquipBoilerSchedulingApi.planSchedulingBatchDelete(tasks.map(t => t.taskId))
    
    // 更新本地数据
    const updatedTaskList = { ...taskList.value }
    Object.entries(updatedTaskList).forEach(([date, dayData]) => {
      const updatedTasks = dayData.taskItems.filter(
        task => !tasks.find(t => t.taskId === task.taskId)
      )
      if (updatedTasks.length === 0) {
        delete updatedTaskList[date]
      } else {
        updatedTaskList[date] = {
          ...dayData,
          taskItems: updatedTasks
        }
      }
    })
    taskList.value = updatedTaskList
    
    selectedTasks.value = selectedTasks.value.filter(
      task => !tasks.find(t => t.taskId === task.taskId)
    )

    taskIds.value = taskIds.value.filter(
      task => !tasks.find(t => t.taskId === task)
    )

    ElMessage.success('删除成功')
  } catch (error) {
    console.error('删除计划失败:', error)
  }
}

// 处理日期点击
const handleDateClick = (date: string) => {
  currentEditDate.value = date
  //currentNote.value = taskList.value[date]?.remark || ''
  showNoteDialog.value = true
}

// 修改计划
const handleEditPlan = () => {
  if (currentTask.value) {
    showDetailDialog.value = true
    contextMenuVisible.value = false
  }
}

// 取消计划
const handleCancelPlan = () => {
  if (currentTask.value) {
    handleDeleteSelected([currentTask.value])
    contextMenuVisible.value = false
  }
}

// 点击其他地方关闭菜单
const handleClickOutside = (event: MouseEvent) => {
  if (contextMenuVisible.value) {
    contextMenuVisible.value = false
  }
}

// 处理详情保存成功
const handleDetailSuccess = () => {
  handleQuery() // 重新加载数据
}

// 提交计划
const handleSubmitPlan = async () => {
  console.log('提交计划的任务IDs:', taskIds.value)
  // 如果有选中的计划，只提交选中的计划
  const taskIdsToSubmit = selectedTasks.value.length > 0
    ? selectedTasks.value.map(t => t.taskId)
    : taskIds.value

  if (taskIdsToSubmit.length === 0) {
    ElMessage.warning('没有可提交的计划')
    return
  }

  try {
    await ElMessageBox.confirm(
      `是否确认提交${selectedTasks.value.length > 0 ? '选中的' : '这'} ${taskIdsToSubmit.length} 个计划？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    await EquipBoilerSchedulingApi.planSchedulingConfirm({
      ids: taskIdsToSubmit
    })
    ElMessage.success('提交计划成功')

    // 提交成功后清空选中状态
    selectedTasks.value = []
    // 重新加载数据
    handleQuery()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('提交计划失败:', error)
      ElMessage.error('提交计划失败')
    }
  }
}
</script>

<style lang="scss" scoped>
.calendar-wrap {
  background-color: var(--el-bg-color);
  border-radius: 4px;
  
  .calendar-header-wrap {
    padding: 16px;
    border-bottom: 1px solid var(--el-border-color-light);
  }
}

.calendar-cell {
  height: 100%;
  min-height: 100%;
  padding: 4px;
  display: flex;
  flex-direction: column;

  .cell-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
  }

  .date-text {
    font-size: 12px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    width: fit-content;
    padding: 2px 4px;
    border-radius: 2px;
    font-weight: 500;
    
    &:hover {
      background-color: var(--el-fill-color-light);
    }
    
  }

  .date-note {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--el-text-color-secondary);
    padding: 2px 4px;
    margin-bottom: 4px;
    background-color: var(--el-fill-color-lighter);
    border-radius: 2px;

    .note-icon {
      font-size: 12px;
      color: var(--el-text-color-secondary);
      margin-right: 4px;
    }
    
    span {
      flex: 1;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
    }
  }

  .task-container {
    flex: 1;
    overflow-y: visible;

    .task-item {
      margin-bottom: 4px;
      border: 2px solid transparent;
      border-radius: 4px;
      background-color: var(--el-bg-color);
      transition: all 0.2s;
      cursor: move;
      box-sizing: border-box;
      position: relative;
      display: flex;

      // 添加类型指示色块
      &::before {
        content: '';
        width: 4px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 4px 0 0 4px;
      }

      // 根据检验类型添加色块颜色和背景色
      &.check-type-100 {
        background-color: rgba(64, 158, 255, 0.05);
        &::before {
          background-color: var(--el-color-primary);
        }
      }

      &.check-type-200 {
        background-color: rgba(103, 194, 58, 0.05);
        &::before {
          background-color: var(--el-color-success);
        }
      }

      &.check-type-300 {
        background-color: rgba(245, 108, 108, 0.05);
        &::before {
          background-color: var(--el-color-danger);
        }
      }

      &.selected {
        &::after {
          content: '';
          position: absolute;
          inset: -2px;
          border: 2px solid var(--el-color-primary);
          border-radius: 4px;
          pointer-events: none;
          z-index: 1;
        }
        background-color: rgba(64, 158, 255, 0.05);
      }

      &.dragging {
        opacity: 0.5;
        transform: scale(0.95);
        cursor: move;
      }

      &:hover {
        .delete-btn {
          opacity: 1;
        }
      }

      .task-content {
        flex: 1;
        min-width: 0;
      }

      .task-header {
        display: flex;
        align-items: center;
        padding: 4px 8px;
        border-bottom: 1px solid var(--el-border-color-lighter);
        background-color: var(--el-fill-color-light);
        border-radius: 4px 4px 0 0;
      }

      .company-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;

        .company-name {
          font-size: 12px;
          font-weight: 500;
          color: var(--el-text-color-primary);
        }

        .company-address {
          font-size: 11px;
          color: var(--el-text-color-secondary);
        }
      }

      .delete-btn {
        opacity: 0;
        transition: opacity 0.2s;
        padding: 2px;
      }

      .task-numbers {
        padding: 4px;
        display: flex;
        flex-direction: column;
        gap: 2px;

        .check-type {
          display: inline-flex;
          align-items: center;
          font-size: 11px;
          padding: 2px 8px;
          border-radius: 12px;
          color: var(--el-text-color-regular);
          width: fit-content;
          
          .type-icon {
            width: 16px;
            height: 16px;
            margin-right: 4px;
            vertical-align: middle;
          }
          
          .source-tag {
            margin-left: 4px;
            padding: 0 4px;
            background-color: var(--el-color-warning-light-9);
            color: var(--el-color-warning);
            border-radius: 2px;
            font-size: 10px;
          }
          
          &.regular-check {
            color: var(--el-color-primary);
            .type-icon {
              filter: invert(30%) sepia(95%) saturate(1139%) hue-rotate(187deg) brightness(93%) contrast(104%);
            }
          }
          
          &.year-check {
            color: #2da44e;
            .type-icon {
              filter: invert(45%) sepia(64%) saturate(501%) hue-rotate(89deg) brightness(93%) contrast(89%);
            }
          }
          
          &.expired-check {
            color: var(--el-color-danger);
            .type-icon {
              filter: invert(54%) sepia(71%) saturate(4037%) hue-rotate(332deg) brightness(98%) contrast(93%);
            }
          }
        }
      }
    }
  }

  .date-info {
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    padding-top: 4px;

    .distance-info {
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--el-text-color-secondary);
      padding: 1px 4px;

      .el-icon {
        font-size: 12px;
      }
    }
  }
}

:deep(.el-calendar) {
  background: none;
  
  .el-calendar__header {
    padding: 0;
    border-bottom: 1px solid var(--el-border-color-lighter);
  }

  .el-calendar__body {
    padding: 0;
  }

  .el-calendar-day {
    height: auto !important;
    &:hover {
      cursor: default;
      background-color: transparent;
    }
  }

  .is-selected {
    background-color: transparent !important;
  }

  .el-calendar-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-right: 1px solid var(--el-border-color-lighter);
    border-bottom: 1px solid var(--el-border-color-lighter);

    td {
      height: 100px !important;
      padding: 0 !important;
      vertical-align: top;
    }

    .el-calendar-day {
      height: 100% !important;
      padding: 0;
    }
  }

  .calendar-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px 20px;

    .current-month {
      font-size: 16px;
      font-weight: bold;
    }
  }
}

.task-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: var(--el-text-color-secondary);

  > div {
    background-color: var(--el-fill-color-lighter);
    padding: 1px 4px;
    border-radius: 2px;
  }
}

.type-icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: middle;
}

.context-menu {
  min-width: 120px;
  
  .context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    
    &:hover {
      background-color: var(--el-fill-color-light);
    }
    
    .el-icon {
      font-size: 16px;
    }
  }
}

:deep(.context-menu-popover) {
  padding: 4px 0;
  min-width: 120px;
}


.small-alert {
  padding: 2px;
  :deep(.el-alert__title) {
    font-size: 10px;
  }

  :deep(.el-alert__icon) {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }
}
</style>