<template>
  <div class="project-container">
    <!-- 内容区域 -->
    <div class="project-content">
      <div class="tab-content">
        <div class="working-hours-container">
          <!-- Tab buttons -->
          <div class="time-tabs">
            <button
                v-for="tab in tabs2"
                :key="tab.value"
                :class="{ 'active': activeTab2 === tab.value }"
                @click="switchTab2(tab.value)"
            >
              {{ tab.label }}
            </button>
          </div>

          <!-- Control bar -->
          <div class="control-bar">
            <el-button type="primary" @click="showBatchRecord">批量记录</el-button>

            <div class="month-picker">
              <div class="calendar-header">
                <el-button
                    :disabled="!canGoPrevYear"
                    @click="prevYear"
                    plain
                >《</el-button>
                <el-button
                    :disabled="!canGoPrevMonth"
                    @click="prevMonth"
                    plain
                ><</el-button>

                <el-date-picker
                    v-model="currentMonth"
                    type="month"
                    :picker-options="monthPickerOptions"
                    placeholder="选择月份"
                    @change="handleMonthChange"
                    v-click-outside="closeMonthPicker"
                />

                <el-button
                    :disabled="!canGoNextMonth"
                    @click="nextMonth"
                    plain
                >></el-button>
                <el-button
                    :disabled="!canGoNextYear"
                    @click="nextYear"
                    plain
                >》</el-button>
              </div>
            </div>
          </div>

          <!-- Data table - Different content for each tab -->
          <div v-if="activeTab2 === 'person'" class="data-table">
            <div
                v-if="activeFilter"
                class="filter-popover"
                :style="popoverStyle"
                v-click-outside="closeFilter"
            >
              <!-- 添加筛选框组件 -->
              <el-input
                  v-model="filters[activeFilter]"
                  :placeholder="`请输入${filterLabels[activeFilter]}`"
                  size="small"
                  clearable
              />
              <div class="filter-actions">
                <el-button size="small" type="primary" @click="applyFilter">查询</el-button>
                <el-button size="small" @click="resetFilter">重置</el-button>
              </div>
            </div>

            <el-table
                :data="pagedData"
                border
                style="width: 100%"
                stripe
            >
              <!-- Name column with circle -->
              <el-table-column prop="name" label="姓名" width="180">
                <template #default="{ row }">
                  <div class="name-cell">
                    <span class="name-circle" :style="{ backgroundColor: row.color }">
                      {{ row.name.slice(-2) }}
                    </span>
                    {{ row.name }}
                  </div>
                </template>
                <template #header="{ column }">
                  <div class="filter-header" @click.stop="showFilter('name', $event)">
                    <span>{{ column.label }}</span>
                    <el-icon class="filter-icon"><ArrowDown /></el-icon>
                  </div>
                </template>
              </el-table-column>

              <!-- Other columns -->
              <el-table-column prop="code" label="工号">
                <template #header="{ column }">
                  <div class="filter-header" @click.stop="showFilter('code', $event)">
                    <span>{{ column.label }}</span>
                    <el-icon class="filter-icon"><ArrowDown /></el-icon>
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="department" label="部门">
                <template #header="{ column }">
                  <div class="filter-header" @click.stop="showFilter('department', $event)">
                    <span>{{ column.label }}</span>
                    <el-icon class="filter-icon"><ArrowDown /></el-icon>
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="employmentType" label="聘用方式"></el-table-column>
              <el-table-column prop="hours" label="研发工时（小时）" align="right"></el-table-column>

              <!-- Action column -->
              <el-table-column label="操作" width="180" fixed="right">
                <template #default="{ row }">
                  <el-button
                      type="primary"
                      link
                      @click="showEditDialog(row)"
                  >
                    <el-icon><Edit /></el-icon>记录工时
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- Pagination -->
            <div class="pagination">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="filteredData.length"
              />
            </div>
          </div>

          <!-- Equipment tab content -->
          <div v-else-if="activeTab2 === 'equipment'" class="tab-content">
            <div
                v-if="activeFilter"
                class="filter-popover"
                :style="popoverStyle"
                v-click-outside="closeFilter"
            >
              <el-input
                  v-if="['name', 'code'].includes(activeFilter)"
                  v-model="filters[activeFilter]"
                  :placeholder="`请输入${filterLabels[activeFilter]}`"
                  size="small"
                  clearable
              />
              <!-- 用途筛选 -->
              <el-select
                  v-if="activeFilter === 'purpose'"
                  v-model="filters.purpose"
                  placeholder="请选择用途"
                  size="small"
                  clearable
                  style="width: 100%"
              >
                <el-option label="公用" value="公用" />
                <el-option label="专用" value="专用" />
              </el-select>
              <div class="filter-actions">
                <el-button size="small" type="primary" @click="applyFilter">查询</el-button>
                <el-button size="small" @click="resetFilter">重置</el-button>
              </div>
            </div>
            <el-table
                :data="pagedData2"
                border
                style="width: 100%"
                stripe
            >
              <!-- Other columns -->
              <el-table-column prop="code" label="编号">
                <template #header="{ column }">
                  <div class="filter-header" @click.stop="showFilter('code', $event)">
                    <span>{{ column.label }}</span>
                    <el-icon class="filter-icon"><ArrowDown /></el-icon>
                  </div>
                </template>
              </el-table-column>

              <!-- Name column with circle -->
              <el-table-column prop="name" label="名称" width="180">
                <template #default="{ row }">
                  <div class="name-cell">
                    <span class="name-circle" :style="{ backgroundColor: row.color }">
                      {{ row.name.slice(-2) }}
                    </span>
                    {{ row.name }}
                  </div>
                </template>
                <template #header="{ column }">
                  <div class="filter-header" @click.stop="showFilter('name', $event)">
                    <span>{{ column.label }}</span>
                    <el-icon class="filter-icon"><ArrowDown /></el-icon>
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="purpose" label="用途">
                <template #header="{ column }">
                  <div class="filter-header" @click.stop="showFilter('purpose', $event)">
                    <span>{{ column.label }}</span>
                    <el-icon class="filter-icon"><ArrowDown /></el-icon>
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="assetType" label="资产类型"></el-table-column>
              <el-table-column prop="hours" label="研发工时（小时）" align="right"></el-table-column>

              <!-- Action column -->
              <el-table-column label="操作" width="180" fixed="right">
                <template #default="{ row }">
                  <el-button
                      type="primary"
                      link
                      @click="showEditDialog(row)"
                  >
                    <el-icon><Edit /></el-icon>记录工时
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- Pagination -->
            <div class="pagination">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="filteredData2.length"
              />
            </div>
          </div>

          <!-- Intangible assets tab content -->
          <div v-else-if="activeTab2 === 'intangible'" class="tab-content">
            <div
                v-if="activeFilter"
                class="filter-popover"
                :style="popoverStyle"
                v-click-outside="closeFilter"
            >
              <el-input
                  v-if="['name', 'code'].includes(activeFilter)"
                  v-model="filters[activeFilter]"
                  :placeholder="`请输入${filterLabels[activeFilter]}`"
                  size="small"
                  clearable
              />
              <!-- 类型筛选 -->
              <el-select
                  v-if="activeFilter === 'type'"
                  v-model="filters.type"
                  placeholder="请选择用途"
                  size="small"
                  clearable
                  style="width: 100%"
              >
                <el-option label="非专利技术" value="非专利技术" />
                <el-option label="专利权" value="专利权" />
                <el-option label="软件" value="软件" />
              </el-select>
              <!-- 用途筛选 -->
              <el-select
                  v-if="activeFilter === 'purpose'"
                  v-model="filters.purpose"
                  placeholder="请选择用途"
                  size="small"
                  clearable
                  style="width: 100%"
              >
                <el-option label="公用" value="公用" />
                <el-option label="专用" value="专用" />
              </el-select>
              <div class="filter-actions">
                <el-button size="small" type="primary" @click="applyFilter">查询</el-button>
                <el-button size="small" @click="resetFilter">重置</el-button>
              </div>
            </div>
            <el-table
                :data="pagedData3"
                border
                style="width: 100%"
                stripe
            >
              <!-- Name column with circle -->
              <el-table-column prop="name" label="名称" width="180">
                <template #default="{ row }">
                  <div class="name-cell">
                    <span class="name-circle" :style="{ backgroundColor: row.color }">
                      {{ row.name.slice(-2) }}
                    </span>
                    {{ row.name }}
                  </div>
                </template>
                <template #header="{ column }">
                  <div class="filter-header" @click.stop="showFilter('name', $event)">
                    <span>{{ column.label }}</span>
                    <el-icon class="filter-icon"><ArrowDown /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <!-- Other columns -->
              <el-table-column prop="type" label="类型">
                <template #header="{ column }">
                  <div class="filter-header" @click.stop="showFilter('type', $event)">
                    <span>{{ column.label }}</span>
                    <el-icon class="filter-icon"><ArrowDown /></el-icon>
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="purpose" label="用途">
                <template #header="{ column }">
                  <div class="filter-header" @click.stop="showFilter('purpose', $event)">
                    <span>{{ column.label }}</span>
                    <el-icon class="filter-icon"><ArrowDown /></el-icon>
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="hours" label="研发工时（小时）" align="right"></el-table-column>

              <!-- Action column -->
              <el-table-column label="操作" width="180" fixed="right">
                <template #default="{ row }">
                  <el-button
                      type="primary"
                      link
                      @click="showEditDialog(row)"
                  >
                    <el-icon><Edit /></el-icon>记录工时
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- Pagination -->
            <div class="pagination">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="filteredData3.length"
              />
            </div>
          </div>

          <!-- Combined assets tab content -->
          <div v-else-if="activeTab2 === 'combined'" class="tab-content">
            <div
                v-if="activeFilter"
                class="filter-popover"
                :style="popoverStyle"
                v-click-outside="closeFilter"
            >
              <el-input
                  v-if="['name', 'code'].includes(activeFilter)"
                  v-model="filters[activeFilter]"
                  :placeholder="`请输入${filterLabels[activeFilter]}`"
                  size="small"
                  clearable
              />
              <!-- 用途筛选 -->
              <el-select
                  v-if="activeFilter === 'purpose'"
                  v-model="filters.purpose"
                  placeholder="请选择用途"
                  size="small"
                  clearable
                  style="width: 100%"
              >
                <el-option label="公用" value="公用" />
                <el-option label="专用" value="专用" />
              </el-select>
              <div class="filter-actions">
                <el-button size="small" type="primary" @click="applyFilter">查询</el-button>
                <el-button size="small" @click="resetFilter">重置</el-button>
              </div>
            </div>
            <el-table
                :data="pagedData2"
                border
                style="width: 100%"
                stripe
            >
              <!-- Other columns -->
              <el-table-column prop="code" label="编号">
                <template #header="{ column }">
                  <div class="filter-header" @click.stop="showFilter('code', $event)">
                    <span>{{ column.label }}</span>
                    <el-icon class="filter-icon"><ArrowDown /></el-icon>
                  </div>
                </template>
              </el-table-column>

              <!-- Name column with circle -->
              <el-table-column prop="name" label="名称" width="180">
                <template #default="{ row }">
                  <div class="name-cell">
                    <span class="name-circle" :style="{ backgroundColor: row.color }">
                      {{ row.name.slice(-2) }}
                    </span>
                    {{ row.name }}
                  </div>
                </template>
                <template #header="{ column }">
                  <div class="filter-header" @click.stop="showFilter('name', $event)">
                    <span>{{ column.label }}</span>
                    <el-icon class="filter-icon"><ArrowDown /></el-icon>
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="purpose" label="用途">
                <template #header="{ column }">
                  <div class="filter-header" @click.stop="showFilter('purpose', $event)">
                    <span>{{ column.label }}</span>
                    <el-icon class="filter-icon"><ArrowDown /></el-icon>
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="assetType" label="资产类型"></el-table-column>
              <el-table-column prop="hours" label="研发工时（小时）" align="right"></el-table-column>

              <!-- Action column -->
              <el-table-column label="操作" width="180" fixed="right">
                <template #default="{ row }">
                  <el-button
                      type="primary"
                      link
                      @click="showEditDialog(row)"
                  >
                    <el-icon><Edit /></el-icon>记录工时
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- Pagination -->
            <div class="pagination">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="filteredData2.length"
              />
            </div>
          </div>

          <!-- Batch Record Dialog - Step 1 -->
          <el-drawer
              v-model="batchRecordVisible"
              title="批量记录 第一步：选择人员"
              :direction="'rtl'"
              size="50%"
          >
            <template #header>
              <el-icon class="close-icon" @click="batchRecordVisible = false"><Close /></el-icon>
              <h4>批量记录 第一步：选择人员</h4>
            </template>

            <div class="batch-record-content">
              <div class="left-panel" style="margin: 20px;background-color: #f8f8f8">
                <div
                    class="batch-add"
                    :class="{ 'active': batchAddActive }"
                    @click="showBatchSelectDialog"
                >
                  <span>批量添加</span>
                </div>

                <el-input
                    v-model="searchText"
                    placeholder="搜索人员"
                    clearable
                >
                  <template #suffix>
                    <el-icon><Search /></el-icon>
                  </template>
                </el-input>

                <div class="department-list">
                  <div v-for="dept in departments" :key="dept.name">
                    <div class="dept-name">{{ dept.name }}</div>
                    <el-checkbox-group v-model="selectedPersons">
                      <el-checkbox
                          v-for="person in dept.persons"
                          :key="person.id"
                          :label="person.id"
                      >
                        {{ person.code }} {{ person.name }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </div>

              <div class="right-panel" style="margin: 20px;background-color: #f8f8f8">
                <div class="selected-title">已选择人员 ({{ selectedPersons.length }})</div>
                <div class="selected-list">
                  <div
                      v-for="person in selectedPersonDetails"
                      :key="person.id"
                      class="selected-person"
                  >
                    <span>{{ person.name }}</span>
                    <el-icon @click="removeSelectedPerson(person.id)"><Close /></el-icon>
                  </div>
                </div>
              </div>
            </div>

            <div class="batch-record-footer">
              <el-button @click="batchRecordVisible = false">取消</el-button>
              <el-button type="primary" @click="goToStep2">下一步：选择时间</el-button>
            </div>
          </el-drawer>

          <!-- Batch Select Dialog -->
          <el-drawer
              v-model="batchSelectVisible"
              title="批量选择"
              :direction="'rtl'"
              size="40%"
              style="margin: 20px"
          >
            <template #header>
              <h4>批量选择</h4>
              <el-icon class="close-icon" @click="batchSelectVisible = false"><Close /></el-icon>
            </template>

            <div class="batch-select-content">
              <div class="warning-box">
                不存在的选项：（确认时会自动过滤）
              </div>
              <el-input
                  type="textarea"
                  :rows="10"
                  placeholder="请输入人员工号或姓名，每行一个"
                  v-model="batchInput"
              />
              <div class="batch-select-actions">
                <el-button @click="clearBatchInput">清空</el-button>
                <el-button @click="batchSelectVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmBatchSelect">确认</el-button>
              </div>
            </div>
          </el-drawer>

          <!-- Batch Record Dialog - Step 2 -->
          <el-drawer
              v-model="batchRecordStep2Visible"
              title="批量记录 第二步：选择时间"
              :direction="'rtl'"
              size="50%"
              style="padding: 20px"
          >
            <template #header>
              <h4>批量记录 第二步：选择时间</h4>
              <el-icon class="close-icon" @click="batchRecordStep2Visible = false"><Close /></el-icon>
            </template>

            <div class="time-record-content">
              <div class="record-mode">
                <span>工时记录模式：</span>
                <el-button
                    v-for="mode in recordModes"
                    :key="mode"
                    :class="{ 'active-mode': recordMode === mode }"
                    @click="recordMode = mode"
                >
                  {{ mode }}
                </el-button>
              </div>

              <div v-if="recordMode === '连续记录'" class="continuous-record">
                <div class="notice-box">
                  开始时间至结束时间是连续的。<br>
                  例如：<br>
                    开始时间是2019年1月1日10:00<br>
                    结束时间是2019年1月2日15:00<br>
                  那么记录工时为：<br>
                    2019年1月1日10:00-17:00<br>
                    2019年1月2日08:00-15:00<br>
                  总工时为14小时。<br>
                  （以班次08:00-17:00为例）
                </div>

                <el-form label-width="100px">
                  <el-form-item label="开始时间：" required>
                    <el-date-picker
                        v-model="startDate"
                        type="date"
                        placeholder="选择日期"
                        :disabled-date="disableFutureDates"
                    />
                    <el-time-picker
                        v-model="startTime"
                        format="HH:mm"
                        placeholder="选择时间"
                    />
                  </el-form-item>

                  <el-form-item label="结束时间：" required>
                    <el-date-picker
                        v-model="endDate"
                        type="date"
                        placeholder="选择日期"
                        :disabled-date="disableFutureDates"
                    />
                    <el-time-picker
                        v-model="endTime"
                        format="HH:mm"
                        placeholder="选择时间"
                    />
                  </el-form-item>

                  <el-form-item label="研发内容：" required>
                    <el-input
                        type="textarea"
                        :rows="3"
                        v-model="researchContent"
                        resize="none"
                    />
                  </el-form-item>
                </el-form>
              </div>
              <div v-if="recordMode === '分段记录'" class="continuous-record">
                <div class="notice-box">
                  开始时间至结束时间是不连续的。<br>
                  例如：<br>
                    开始时间是2019年1月1日10:00<br>
                    结束时间是2019年1月2日15:00<br>
                  那么记录工时为：<br>
                    2019年1月1日10:00-17:00<br>
                    2019年1月2日08:00-15:00<br>
                  总工时为14小时。<br>
                  （以班次08:00-17:00为例）
                </div>

                <el-form label-width="100px">
                  <el-form-item label="开始时间：" required>
                    <el-date-picker
                        v-model="startDate"
                        type="date"
                        placeholder="选择日期"
                        :disabled-date="disableFutureDates"
                    />
                    <el-time-picker
                        v-model="startTime"
                        format="HH:mm"
                        placeholder="选择时间"
                    />
                  </el-form-item>

                  <el-form-item label="结束时间：" required>
                    <el-date-picker
                        v-model="endDate"
                        type="date"
                        placeholder="选择日期"
                        :disabled-date="disableFutureDates"
                    />
                    <el-time-picker
                        v-model="endTime"
                        format="HH:mm"
                        placeholder="选择时间"
                    />
                  </el-form-item>

                  <el-form-item label="研发内容：" required>
                    <el-input
                        type="textarea"
                        :rows="3"
                        v-model="researchContent"
                        resize="none"
                    />
                  </el-form-item>
                </el-form>
              </div>

              <div v-if="recordMode === '部分记录'" class="continuous-record">
                <div class="notice-box">
                  时间为按天记录，选中某一天将会记录当天所有工时。<br>
                  如选中：<br>
                    2019年1月1日和2019年1月2日<br>
                    结束时间是2019年1月2日15:00<br>
                  那么记录工时为：<br>
                    2019年1月1日08:00-17:00<br>
                    2019年1月2日08:00-17:00<br>
                  总工时为18小时。<br>
                  （以班次08:00-17:00为例）
                </div>

                <el-form label-width="100px">
                  <el-form-item label="选择日期：" required>

                    <div class="calendar-header">
                      <el-button
                          :disabled="!canGoPrevYearInDialog"
                          @click="prevYearInDialog"
                          plain
                      >《</el-button>
                      <el-button
                          :disabled="!canGoPrevMonthInDialog"
                          @click="prevMonthInDialog"
                          plain
                      ><</el-button>

                      <el-date-picker
                          v-model="dialogMonth"
                          type="month"
                          :picker-options="dialogMonthPickerOptions"
                          placeholder="选择月份"
                          @change="handleDialogMonthChange"
                          v-click-outside="closeDialogMonthPicker"
                      />

                      <el-button
                          :disabled="!canGoNextMonthInDialog"
                          @click="nextMonthInDialog"
                          plain
                      >></el-button>
                      <el-button
                          :disabled="!canGoNextYearInDialog"
                          @click="nextYearInDialog"
                          plain
                      >》</el-button>
                    </div>

                    <div class="calendar-container">
                      <div class="weekdays">
                        <div v-for="day in weekdays" :key="day" class="weekday">{{ day }}</div>
                      </div>
                      <div class="days-grid">
                        <div
                            v-for="day in calendarDays"
                            :key="day.date"
                            class="day-cell"
                            :class="{
                'current-month': day.isCurrentMonth,
                'today': day.isToday,
                'weekend': day.isWeekend
              }"
                        >
                          <div class="day-number">{{ day.day }}</div>
                          <div class="day-content" v-if="day.isCurrentMonth">
                            <div class="hours-recorded" v-if="day.hours > 0">
                              {{ day.hours }}小时
                            </div>
                            <el-button
                                v-else
                                type="text"
                                size="small"
                                @click="showPartialRecordForDay(day)"
                            >
                              记录
                            </el-button>
                          </div>
                        </div>
                      </div>
                    </div>


                  </el-form-item>

                  <el-form-item label="已选择日期
请在上方选择日期" required>
                  </el-form-item>

                  <el-form-item label="研发内容：" required>
                    <el-input
                        type="textarea"
                        :rows="3"
                        v-model="researchContent"
                        resize="none"
                    />
                  </el-form-item>
                </el-form>
              </div>
            </div>

            <div class="batch-record-footer">
              <el-button type="primary" @click="backToStep1">上一步：重新选择人员</el-button>
              <el-button @click="batchRecordStep2Visible = false">取消</el-button>
              <el-button type="primary" @click="saveBatchRecord">保存</el-button>
            </div>
          </el-drawer>

          <!-- Edit Time Dialog -->
          <el-drawer
              v-model="editDialogVisible"
              title="编辑工时"
              :direction="'rtl'"
              size="50%"
          >
            <template #header>
              <h4>编辑工时</h4>
              <el-icon class="close-icon" @click="editDialogVisible = false"><Close /></el-icon>
            </template>

            <div class="edit-content">
              <div class="calendar-header">
                <el-button
                    :disabled="!canGoPrevYearInDialog"
                    @click="prevYearInDialog"
                    plain
                >《</el-button>
                <el-button
                    :disabled="!canGoPrevMonthInDialog"
                    @click="prevMonthInDialog"
                    plain
                ><</el-button>

                <el-date-picker
                    v-model="dialogMonth"
                    type="month"
                    :picker-options="dialogMonthPickerOptions"
                    placeholder="选择月份"
                    @change="handleDialogMonthChange"
                    v-click-outside="closeDialogMonthPicker"
                />

                <el-button
                    :disabled="!canGoNextMonthInDialog"
                    @click="nextMonthInDialog"
                    plain
                >></el-button>
                <el-button
                    :disabled="!canGoNextYearInDialog"
                    @click="nextYearInDialog"
                    plain
                >》</el-button>
              </div>

              <div class="calendar-container">
                <div class="weekdays">
                  <div v-for="day in weekdays" :key="day" class="weekday">{{ day }}</div>
                </div>
                <div class="days-grid">
                  <div
                      v-for="day in calendarDays"
                      :key="day.date"
                      class="day-cell"
                      :class="{
                'current-month': day.isCurrentMonth,
                'today': day.isToday,
                'weekend': day.isWeekend
              }"
                  >
                    <div class="day-number">{{ day.day }}</div>
                    <div class="day-content" v-if="day.isCurrentMonth">
                      <div class="hours-recorded" v-if="day.hours > 0">
                        {{ day.hours }}小时
                      </div>
                      <el-button
                          v-else
                          type="text"
                          size="small"
                          @click="showPartialRecordForDay(day)"
                      >
                        记录
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="calendar-actions">
                <el-button type="primary" @click="showPartialRecord">记录部分工时</el-button>
                <el-button type="danger" @click="showClearConfirm">清除整月工时</el-button>
              </div>
            </div>
          </el-drawer>

          <!-- Partial Record Dialog -->
          <el-dialog
              v-model="partialRecordVisible"
              :title="`记录工时 - ${partialRecordDate ? formatDate(partialRecordDate) : ''}`"
              width="50%"
          >
            <template #header>
              <h4>记录部分工时 - {{ partialRecordDate ? formatDate(partialRecordDate) : '' }}</h4>
              <el-icon class="close-icon" @click="partialRecordVisible = false"><Close /></el-icon>
            </template>

            <el-form label-width="100px">
              <el-form-item label="研发内容：" required>
                <el-input
                    type="textarea"
                    :rows="3"
                    v-model="partialResearchContent"
                    resize="none"
                />
              </el-form-item>

              <el-form-item label="工时（小时）：" required>
                <el-input-number
                    v-model="partialHours"
                    :min="0.5"
                    :max="24"
                    :step="0.5"
                    controls-position="right"
                />
              </el-form-item>
            </el-form>

            <template #footer>
              <el-button @click="partialRecordVisible = false">取消</el-button>
              <el-button type="primary" @click="savePartialRecord">保存</el-button>
            </template>
          </el-dialog>

          <!-- Clear Confirm Dialog -->
          <el-dialog
              v-model="clearConfirmVisible"
              title="提示"
              width="30%"
          >
            <span>确定清除整月数据？</span>
            <template #footer>
              <el-button @click="clearConfirmVisible = false">取消</el-button>
              <el-button type="danger" @click="confirmClear">确定</el-button>
            </template>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from "element-plus";
import { ArrowDown, Edit, Close, Search } from "@element-plus/icons-vue";
import {
  addMonths, addYears,
  eachDayOfInterval,
  endOfMonth, format,
  isSameMonth,
  isToday,
  isWeekend,
  startOfMonth,
  subMonths, subYears
} from "date-fns";
import { zhCN } from "date-fns/locale";

const router = useRouter()

// Tabs
const tabs2 = [
  { label: '人员工时', value: 'person' },
  { label: '设备工时', value: 'equipment' },
  { label: '无形资产工时', value: 'intangible' },
  { label: '组合资产工时', value: 'combined' }
];
const activeTab2 = ref('person');

const switchTab2 = (tab) => {
  activeTab2.value = tab;
};

// Month picker
const currentMonth = ref(new Date());
const canGoPrevMonth = ref(false);
const canGoNextMonth = ref(false);
const canGoPrevYear = ref(false);
const canGoNextYear = ref(false);

const weekdays = ['日', '一', '二', '三', '四', '五', '六'];

// Calendar days for edit dialog
const calendarDays = computed(() => {
  if (!dialogMonth.value) return [];

  const monthStart = startOfMonth(dialogMonth.value);
  const monthEnd = endOfMonth(dialogMonth.value);

  // Get days of current month
  const days = eachDayOfInterval({
    start: monthStart,
    end: monthEnd
  });

  // Add padding days from previous month
  const startDay = monthStart.getDay();
  const prevMonthDays = [];
  if (startDay > 0) {
    const prevMonthEnd = new Date(monthStart);
    prevMonthEnd.setDate(0); // Last day of previous month
    for (let i = startDay - 1; i >= 0; i--) {
      prevMonthDays.push(new Date(prevMonthEnd.getFullYear(), prevMonthEnd.getMonth(), prevMonthEnd.getDate() - i));
    }
  }

  // Add padding days from next month
  const endDay = monthEnd.getDay();
  const nextMonthDays = [];
  if (endDay < 6) {
    for (let i = 1; i <= 6 - endDay; i++) {
      nextMonthDays.push(new Date(monthEnd.getFullYear(), monthEnd.getMonth(), monthEnd.getDate() + i));
    }
  }

  // Combine all days
  const allDays = [...prevMonthDays, ...days, ...nextMonthDays];

  return allDays.map(day => {
    const randomHours = Math.random() > 0.7 ? Math.floor(Math.random() * 8) + 1 : 0;
    return {
      date: day,
      day: day.getDate(),
      isCurrentMonth: isSameMonth(day, dialogMonth.value),
      isToday: isToday(day),
      isWeekend: isWeekend(day),
      hours: randomHours
    };
  });
});

// Data table
const tableData = ref([
  { id: 1, name: '臧建斌', code: 'JSH0003', department: '研发中心', employmentType: '正式', hours: 120, color: '#FF6B6B' },
  { id: 2, name: '旲锋锋', code: 'JSH0005', department: '研发中心', employmentType: '正式', hours: 95, color: '#4ECDC4' },
  { id: 3, name: '张三', code: 'JSH0007', department: '研发中心', employmentType: '正式', hours: 110, color: '#FFA500' },
  { id: 4, name: '李四', code: 'JSH0009', department: '质检部', employmentType: '正式', hours: 85, color: '#9370DB' },
  { id: 5, name: '王五', code: 'JSH0011', department: '质检部', employmentType: '正式', hours: 75, color: '#20B2AA' },
  { id: 6, name: '赵六', code: 'JSH0013', department: '研发中心', employmentType: '正式', hours: 130, color: '#FF6347' },
  { id: 7, name: '钱七', code: 'JSH0015', department: '质检部', employmentType: '正式', hours: 90, color: '#4682B4' },
  { id: 8, name: '孙八', code: 'JSH0017', department: '研发中心', employmentType: '正式', hours: 105, color: '#32CD32' },
  { id: 9, name: '周九', code: 'JSH0019', department: '质检部', employmentType: '正式', hours: 80, color: '#BA55D3' },
  { id: 10, name: '吴十', code: 'JSH0021', department: '研发中心', employmentType: '正式', hours: 115, color: '#FF8C00' },
  { id: 11, name: '郑十一', code: 'JSH0023', department: '质检部', employmentType: '正式', hours: 70, color: '#6A5ACD' },
  { id: 12, name: '王十二', code: 'JSH0025', department: '研发中心', employmentType: '正式', hours: 125, color: '#2E8B57' },
]);

// Data table
const tableData2 = ref([
  { id: 1, name: '碱液循环泵', code: 'JSH0003', purpose: '公用', assetType: '自有', hours: 120, color: '#FF6B6B' },
  { id: 2, name: '粗卤泵', code: 'JSH0005', purpose: '公用', assetType: '自有', hours: 95, color: '#4ECDC4' },
]);

const tableData3 = ref([
  { id: 1, name: '专利技术A', type: '专利权', purpose: '专用', hours: 50, color: '#FFA500',code:'1234' },
  { id: 2, name: '软件系统B', type: '软件', purpose: '公用', hours: 80, color: '#9370DB' ,code:'33344'},
]);

// Filter
const activeFilter = ref(null);
const popoverPosition = ref({ top: 0, left: 0 });
const popoverStyle = computed(() => ({
  top: `${popoverPosition.value.top}px`,
  left: `${popoverPosition.value.left}px`,
  'z-index': 2000
}));
const filters = ref({
  name: '',
  code: '',
  department: '',
  purpose: '',
  type: ''
});
const filterLabels = {
  name: '名称',
  code: '编号',
  department: '部门',
  purpose: '用途',
  type: '类型'
};

// Pagination
const currentPage = ref(1);
const pageSize = ref(10);

// Batch record
const batchRecordVisible = ref(false);
const batchSelectVisible = ref(false);
const batchRecordStep2Visible = ref(false);
const batchAddActive = ref(false);
const searchText = ref('');
const selectedPersons = ref([]);
const batchInput = ref('');
const recordMode = ref('连续记录');
const recordModes = ['连续记录', '分段记录', '部分记录'];
const startDate = ref(null);
const startTime = ref(null);
const endDate = ref(null);
const endTime = ref(null);
const researchContent = ref('');

// Edit dialog
const editDialogVisible = ref(false);
const partialRecordVisible = ref(false);
const clearConfirmVisible = ref(false);
const dialogMonth = ref(new Date());
const canGoPrevMonthInDialog = ref(false);
const canGoNextMonthInDialog = ref(false);
const canGoPrevYearInDialog = ref(false);
const canGoNextYearInDialog = ref(false);
const partialRecordDate = ref(null);
const partialResearchContent = ref('');
const partialHours = ref(8);

// Departments data
const departments = ref([
  {
    name: '研发中心',
    persons: [
      { id: 'JSH0003', name: '臧建斌', code: 'JSH0003' },
      { id: 'JSH0005', name: '旲锋锋', code: 'JSH0005' },
      { id: 'JSH0007', name: '张三', code: 'JSH0007' },
      { id: 'JSH0009', name: '李四', code: 'JSH0009' },
      { id: 'JSH0011', name: '王五', code: 'JSH0011' },
      { id: 'JSH0013', name: '赵六', code: 'JSH0013' },
    ]
  },
  {
    name: '质检部',
    persons: [
      { id: 'JSH0015', name: '钱七', code: 'JSH0015' },
      { id: 'JSH0017', name: '孙八', code: 'JSH0017' },
      { id: 'JSH0019', name: '周九', code: 'JSH0019' },
      { id: 'JSH0021', name: '吴十', code: 'JSH0021' },
      { id: 'JSH0023', name: '郑十一', code: 'JSH0023' },
      { id: 'JSH0025', name: '王十二', code: 'JSH0025' },
    ]
  }
]);

// Computed properties
const filteredData = computed(() => {
  return tableData.value.filter(item => {
    return (
        (!filters.value.name || item.name.includes(filters.value.name)) &&
        (!filters.value.code || item.code.includes(filters.value.code)) &&
        (!filters.value.department || item.department.includes(filters.value.department))
    );
  });
});

const pagedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredData.value.slice(start, end);
});

const filteredData2 = computed(() => {
  return tableData2.value.filter(item => {
    return (
        (!filters.value.name || item.name.includes(filters.value.name)) &&
        (!filters.value.code || item.code.includes(filters.value.code)) &&
        (!filters.value.purpose || item.purpose.includes(filters.value.purpose))
    );
  });
});

const pagedData2 = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredData2.value.slice(start, end);
});

const filteredData3 = computed(() => {
  return tableData3.value.filter(item => {
    return (
        (!filters.value.name || item.name.includes(filters.value.name)) &&
        (!filters.value.code || item.code.includes(filters.value.code)) &&
        (!filters.value.type || item.type.includes(filters.value.type)) &&
        (!filters.value.purpose || item.purpose.includes(filters.value.purpose))
    );
  });
});

const pagedData3 = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredData3.value.slice(start, end);
});

const selectedPersonDetails = computed(() => {
  return selectedPersons.value.map(id => {
    for (const dept of departments.value) {
      const person = dept.persons.find(p => p.id === id);
      if (person) return person;
    }
    return null;
  }).filter(Boolean);
});

const monthPickerOptions = computed(() => ({
  disabledDate: (date) => {
    // Only allow months with data (March-May 2025 in this example)
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    return !(year === 2025 && month >= 3 && month <= 5);
  }
}));

const dialogMonthPickerOptions = computed(() => ({
  disabledDate: (date) => {
    // Disable future months
    const now = new Date();
    return date > new Date(now.getFullYear(), now.getMonth() + 1, 0);
  }
}));

// Methods
const updateMonthNavState = () => {
  const year = currentMonth.value.getFullYear();
  const month = currentMonth.value.getMonth() + 1;

  // Example: Only March-May 2025 has data
  canGoPrevMonth.value = !(year === 2025 && month === 3);
  canGoNextMonth.value = !(year === 2025 && month === 5);
  canGoPrevYear.value = year > 2025 || (year === 2025 && month > 3);
  canGoNextYear.value = year < 2025 || (year === 2025 && month < 5);
};

const prevMonth = () => {
  currentMonth.value = subMonths(currentMonth.value, 1);
  updateMonthNavState();
};

const nextMonth = () => {
  currentMonth.value = addMonths(currentMonth.value, 1);
  updateMonthNavState();
};

const prevYear = () => {
  currentMonth.value = subYears(currentMonth.value, 1);
  updateMonthNavState();
};

const nextYear = () => {
  currentMonth.value = addYears(currentMonth.value, 1);
  updateMonthNavState();
};

const handleMonthChange = () => {
  updateMonthNavState();
};

const closeMonthPicker = () => {
  // This will be handled by the date picker itself
};

const showFilter = (column, event) => {
  const headerEl = event.currentTarget.closest('.filter-header');
  const rect = headerEl.getBoundingClientRect();
  activeFilter.value = column;
  popoverPosition.value = {
    top: rect.bottom + window.scrollY - 90,
    left: rect.left + window.scrollX - 240
  };
};

const closeFilter = () => {
  activeFilter.value = null;
};

const applyFilter = () => {
  currentPage.value = 1;
  closeFilter();
};

const resetFilter = () => {
  filters.value = {
    name: '',
    code: '',
    department: '',
    purpose: '',
    type: ''
  };
  applyFilter();
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};

const showBatchRecord = () => {
  batchRecordVisible.value = true;
  selectedPersons.value = [];
};

const showBatchSelectDialog = () => {
  batchSelectVisible.value = true;
  batchAddActive.value = true;
};

const removeSelectedPerson = (id) => {
  selectedPersons.value = selectedPersons.value.filter(p => p !== id);
};

const clearBatchInput = () => {
  batchInput.value = '';
};

const confirmBatchSelect = () => {
  const inputs = batchInput.value.split('\n').filter(line => line.trim());
  const newSelections = [];

  inputs.forEach(input => {
    for (const dept of departments.value) {
      const person = dept.persons.find(p =>
          p.code === input.trim() || p.name.includes(input.trim())
      );
      if (person && !selectedPersons.value.includes(person.id)) {
        newSelections.push(person.id);
      }
    }
  });

  selectedPersons.value = [...selectedPersons.value, ...newSelections];
  batchSelectVisible.value = false;
  ElMessage.success(`已添加${newSelections.length}名人员`);
};

const goToStep2 = () => {
  if (selectedPersons.value.length === 0) {
    ElMessage.warning('请至少选择一名人员');
    return;
  }
  batchRecordVisible.value = false;
  batchRecordStep2Visible.value = true;
};

const backToStep1 = () => {
  batchRecordStep2Visible.value = false;
  batchRecordVisible.value = true;
};

const saveBatchRecord = () => {
  ElMessage.success('批量记录已保存');
  batchRecordStep2Visible.value = false;
};

const showEditDialog = (row) => {
  editDialogVisible.value = true;
  dialogMonth.value = new Date(currentMonth.value);
  updateDialogMonthNavState();
};

const updateDialogMonthNavState = () => {
  const now = new Date();
  const current = dialogMonth.value;

  // Can go to previous month if not the earliest allowed month
  canGoPrevMonthInDialog.value = !(current.getFullYear() === 2025 && current.getMonth() === 2); // March 2025 is earliest

  // Can go to next month if not the current or future month
  canGoNextMonthInDialog.value = current.getFullYear() < now.getFullYear() ||
      (current.getFullYear() === now.getFullYear() &&
          current.getMonth() < now.getMonth());

  // Can go to previous year if not the earliest allowed year
  canGoPrevYearInDialog.value = current.getFullYear() > 2025 ||
      (current.getFullYear() === 2025 && current.getMonth() > 2);

  // Can go to next year if not the current or future year
  canGoNextYearInDialog.value = current.getFullYear() < now.getFullYear();
};

const prevMonthInDialog = () => {
  dialogMonth.value = subMonths(dialogMonth.value, 1);
  updateDialogMonthNavState();
};

const nextMonthInDialog = () => {
  dialogMonth.value = addMonths(dialogMonth.value, 1);
  updateDialogMonthNavState();
};

const prevYearInDialog = () => {
  dialogMonth.value = subYears(dialogMonth.value, 1);
  updateDialogMonthNavState();
};

const nextYearInDialog = () => {
  dialogMonth.value = addYears(dialogMonth.value, 1);
  updateDialogMonthNavState();
};

const handleDialogMonthChange = () => {
  updateDialogMonthNavState();
};

const closeDialogMonthPicker = () => {
  // This will be handled by the date picker itself
};

const showPartialRecord = () => {
  partialRecordVisible.value = true;
  partialRecordDate.value = new Date();
  partialResearchContent.value = '';
  partialHours.value = 8;
};

const showPartialRecordForDay = (day) => {
  partialRecordVisible.value = true;
  partialRecordDate.value = day.date;
  partialResearchContent.value = '';
  partialHours.value = 8;
};

const formatDate = (date) => {
  return format(date, 'yyyy年MM月dd日 (EEEE)', { locale: zhCN });
};

const savePartialRecord = () => {
  if (!partialRecordDate.value) {
    ElMessage.warning('请选择日期');
    return;
  }
  if (!partialResearchContent.value) {
    ElMessage.warning('请输入研发内容');
    return;
  }
  if (partialHours.value <= 0) {
    ElMessage.warning('请输入有效的工时数');
    return;
  }

  ElMessage.success('部分工时记录已保存');
  partialRecordVisible.value = false;

  // Update the calendar display
  const dayIndex = calendarDays.value.findIndex(
      day => day.date.getTime() === partialRecordDate.value.getTime()
  );
  if (dayIndex !== -1) {
    calendarDays.value[dayIndex].hours = partialHours.value;
  }
};

const showClearConfirm = () => {
  clearConfirmVisible.value = true;
};

const confirmClear = () => {
  ElMessage.success('整月数据已清除');
  clearConfirmVisible.value = false;
  editDialogVisible.value = false;
};

const disableFutureDates = (date) => {
  return date > new Date();
};

// Initialize
onMounted(() => {
  updateMonthNavState();
});
</script>

<style scoped>
.project-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: 'Arial', sans-serif;
  position: relative;
}
.arrow {
  margin-right: 8px;
  font-size: 20px;
}
.project-list-container {
  position: absolute;
  top: 100%;
  left: 0;
  width: 400px;
  max-height: 500px;
  overflow-y: auto;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  padding: 8px 0;
}

.search-box {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.search-box input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.3s;
}

.search-box input:focus {
  border-color: #1890ff;
}

.project-lists {
  padding: 8px 0;
  max-height: 400px;
  overflow-y: auto;
}

.project-list {
  margin-bottom: 8px;
}

.list-title {
  padding: 8px 12px;
  color: #999;
  font-size: 12px;
}

.project-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.project-item:hover {
  background-color: #f5f5f5;
}

.view-all {
  text-align: center;
  padding: 8px 12px;
  color: #1890ff;
  cursor: pointer;
  border-top: 1px solid #f0f0f0;
  font-weight: 500;
  transition: background-color 0.3s;
}

.view-all:hover {
  background-color: #f5f5f5;
}

.nav-tabs {
  display: flex;
  margin-left: auto;
  align-items: center;
}

.nav-tabs button {
  padding: 8px 16px;
  margin: 0 4px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: all 0.3s;
  position: relative;
}

.nav-tabs button:hover {
  color: #1890ff;
}

.nav-tabs button.active {
  color: #1890ff;
}

.nav-tabs button.active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 16px;
  right: 16px;
  height: 2px;
  background-color: #1890ff;
}

.settings-btn {
  margin-left: 16px;
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: color 0.3s;
}

.settings-btn:hover, .settings-btn.active {
  color: #1890ff;
}

.project-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background-color: #f5f5f5;
}
.working-hours-container {
  padding: 20px;
}

.time-tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.time-tabs button {
  padding: 8px 16px;
  margin-right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
  font-size: 14px;
}

.time-tabs button.active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}

.tab-content {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f5f7fa;
  margin-bottom: 20px;
  border-radius: 4px;
}

.month-picker {
  display: flex;
  align-items: center;
}

.month-picker .el-button {
  margin: 0 5px;
}

.data-table {
  margin-top: 20px;
}

.name-cell {
  display: flex;
  align-items: center;
}

.name-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: white;
  margin-right: 10px;
  font-size: 12px;
}

.filter-header {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.filter-icon {
  margin-left: 5px;
}

.filter-popover {
  position: absolute;
  background: white;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  z-index: 2000;
  border-radius: 4px;
}

.filter-actions {
  margin-top: 10px;
  text-align: right;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.batch-record-content {
  display: flex;
  height: calc(100% - 60px);
}

.left-panel {
  width: 60%;
  padding: 20px;
  border-right: 1px solid #eee;
}

.batch-add {
  border: 1px dashed #999;
  padding: 10px;
  margin-bottom: 15px;
  text-align: center;
  cursor: pointer;
  color: #333;
}

.batch-add.active, .batch-add:hover {
  border-color: #409eff;
  color: #409eff;
}

.department-list {
  margin-top: 15px;
  max-height: 400px;
  overflow-y: auto;
}

.dept-name {
  font-weight: bold;
  margin: 10px 0;
}

.right-panel {
  width: 40%;
  padding: 20px;
}

.selected-title {
  font-weight: bold;
  margin-bottom: 15px;
}

.selected-list {
  max-height: 400px;
  overflow-y: auto;
}

.selected-person {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  margin: 5px 0;
  background: #f5f7fa;
  border-radius: 4px;
}

.selected-person .el-icon {
  cursor: pointer;
  color: #999;
}

.selected-person .el-icon:hover {
  color: #f56c6c;
}

.batch-record-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 15px;
  border-top: 1px solid #eee;
  text-align: right;
}

.notice-box {
  background-color: #fffbe6;
  padding: 10px;
  margin-bottom: 15px;
  border-left: 3px solid #ffe58f;
  color: #666;
  font-size: 13px;
  line-height: 1.5;
}

.record-mode {
  margin-bottom: 20px;
}

.record-mode .el-button {
  margin-right: 10px;
  background: none;
  border: 1px solid #dcdfe6;
  color: #666;
}

.record-mode .active-mode {
  border-color: #409eff;
  color: #409eff;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.calendar-container {
  margin: 20px 0;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

.weekday {
  padding: 5px;
}

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.day-cell {
  min-height: 80px;
  border: 1px solid #ebeef5;
  padding: 5px;
  border-radius: 4px;
}

.day-cell.current-month {
  background-color: #fff;
}

.day-cell:not(.current-month) {
  background-color: #f9f9f9;
  color: #ccc;
}

.day-cell.today {
  border: 2px solid #409eff;
}

.day-cell.weekend {
  background-color: #f5f7fa;
}

.day-number {
  font-weight: bold;
  text-align: right;
}

.day-content {
  margin-top: 5px;
  text-align: center;
}

.hours-recorded {
  font-size: 12px;
  color: #67c23a;
  background-color: #f0f9eb;
  padding: 2px 5px;
  border-radius: 3px;
  display: inline-block;
}

.calendar-actions {
  margin-top: 20px;
  text-align: center;
}

.warning-box {
  background-color: #fffbe6;
  padding: 10px;
  margin-bottom: 15px;
  font-weight: bold;
  color: #333;
}

.batch-select-actions {
  margin-top: 15px;
  text-align: right;
}

.close-icon {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}

.el-table .cell {
  white-space: nowrap;
}

.el-table {
  width: 100%;
}

.el-table th.el-table__cell,
.el-table td.el-table__cell {
  padding: 8px 0;
}

.edit-content {
  padding: 20px;
}

.el-drawer__header {
  position: relative;
  padding: 20px;
  margin-bottom: 0;
  border-bottom: 1px solid #ebeef5;
}

.el-drawer__header h4 {
  margin: 0;
  font-size: 18px;
}

.el-drawer__body {
  padding: 0;
  height: calc(100% - 60px);
  overflow-y: auto;
}
.device-table-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
</style>
