<template>
  <view class="attendance-container">
    <!-- 使用子头部组件 -->
    <sub-header 
      title="考勤打卡" 
      @goBack="goBack" 
      @showMoreOptions="showMoreOptions"
    />

    <!-- 顶部日期与问候语 -->
    <view class="header">
      <!-- <view class="date">
        {{ currentDate }}
      </view>
      <view class="greeting">
        {{ greeting }}, {{ userName }}
      </view> -->
    </view>

    <!-- Tab切换 -->
    <view class="tab-container">
      <view
        class="tab-item"
        :class="{ active: activeTab === 'work' }"
        @tap="switchTab('work')"
      >
        上下班打卡
      </view>
      <view
        class="tab-item"
        :class="{ active: activeTab === 'out' }"
        @tap="switchTab('out')"
      >
        外出打卡
      </view>
    </view>

    <!-- 考勤摘要模块 -->
    <view class="attendance-summary flex-column">
      <view class="flex-between underline pb-30">
        <view class="status">
        <view class="label">上班时间</view>
        <view class="value">{{ workStart }}</view>
      </view>
      <view class="status">
        <view class="label">下班时间</view>
        <view class="value">{{ workEnd }}</view>
      </view>
      <view class="status">
        <view class="label">已打卡天数</view>
        <view class="value">{{ punchDays }}</view>
      </view>
      </view>
      <view class="flex mt-30 tools-bar" >
        <view @tap="goToRecord">记录</view>
        <view @tap="goToStatistics">统计</view>
        <view @tap="goToRule">规则</view>
      </view>
    </view>

    <!-- 上下班打卡区域 -->
    <view class="clockin-area" v-if="activeTab === 'work'">
      <view class="circle" @tap="handleWorkPunch">
        <view class="punch-time">{{ currentTime }}</view>
        <view class="punch-status" v-if="workRecorded">
          <text class="status-success">已打卡</text>
        </view>
        <view v-else class="punch-btn">
          {{ workPunchText }}
        </view>
      </view>
      <view class="location">
        <text class="iconfont icon-dizhi"></text>
        {{ location }}
        <button class="location-refresh" size="mini" @tap="refreshLocation">
          刷新定位
        </button>
      </view>
    </view>

    <!-- 外出打卡区域 -->
    <view class="out-area" v-if="activeTab === 'out'">
      <view class="out-form">
        <view class="form-item">
          <text class="label">开始时间</text>
          <picker
            mode="time"
            :value="startTime"
            @change="onStartTimeChange"
            class="time-picker"
          >
            <view class="picker-text">{{ startTime || "请选择开始时间" }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">结束时间</text>
          <picker
            mode="time"
            :value="endTime"
            @change="onEndTimeChange"
            class="time-picker"
          >
            <view class="picker-text">{{ endTime || "请选择结束时间" }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">外出时长</text>
          <view class="duration-display">
            <text class="duration-text">{{ calculatedDuration }}</text>
          </view>
        </view>
        <view class="form-item">
          <text class="label">外出事由</text>
          <textarea
            class="textarea"
            v-model="outReason"
            placeholder="请输入外出事由（8000字以内）"
            placeholder-style="color: #999"
            :maxlength="8000"
            :show-count="true"
            auto-height
          />
        </view>
      </view>
      <view class="out-punch-btn">
        <button
          class="punch-btn"
          :disabled="!canOutPunch"
          @tap="handleOutPunch"
        >
          提交外出申请
        </button>
      </view>
    </view>

    <!-- 打卡记录弹窗 -->
    <view class="record-modal" v-if="showRecordModal" @tap="closeRecordModal">
      <view class="modal-content" @tap.stop>
        <view class="modal-header">
          <view class="modal-title">打卡记录</view>
          <view class="close-btn" @tap="closeRecordModal">
            <i class="fas fa-times"></i>
          </view>
        </view>
        <view class="modal-body">
          <view v-if="todayRecords.length > 0">
            <view
              class="record-item"
              v-for="(record, idx) in todayRecords"
              :key="idx"
            >
              <view class="record-left">
                <view class="record-time">{{ formatRecordTime(record.time) }}</view>
                <view class="record-type">{{ record.type }}</view>
                <view v-if="record.reason" class="record-detail"
                  >事由：{{ record.reason }}</view
                >
                <view v-if="record.startTime" class="record-detail"
                  >开始时间：{{ record.startTime }}</view
                >
                <view v-if="record.endTime" class="record-detail"
                  >结束时间：{{ record.endTime }}</view
                >
                <view v-if="record.duration" class="record-detail"
                  >外出时长：{{ record.duration }}</view
                >
              </view>
            </view>
          </view>
          <view v-else class="no-record">暂无打卡记录</view>
        </view>
      </view>
    </view>

    <!-- 考勤规则弹窗 -->
    <view class="rule-modal" v-if="showRuleModal" @tap="closeRuleModal">
      <view class="modal-content" @tap.stop>
        <view class="modal-header">
          <view class="modal-title">考勤规则</view>
          <view class="close-btn" @tap="closeRuleModal">
            <i class="fas fa-times"></i>
          </view>
        </view>
        <view class="modal-body">
          <view class="rule-sections">
            <!-- 考勤时间 -->
            <view class="rule-section">
              <view class="rule-header" @tap="toggleRuleSection('attendance')">
                <view class="rule-title">
                  <i class="fas fa-clock"></i>
                  考勤时间
                </view>
                <view class="rule-arrow" :class="{ expanded: expandedRules.attendance }">
                  <i class="fas fa-chevron-down"></i>
                </view>
              </view>
              <view class="rule-content" v-if="expandedRules.attendance">
                <view class="rule-item">
                  <text class="rule-label">上班时间：</text>
                  <text class="rule-value">09:00</text>
                </view>
                <view class="rule-item">
                  <text class="rule-label">下班时间：</text>
                  <text class="rule-value">18:00</text>
                </view>
                <view class="rule-item">
                  <text class="rule-label">午休时间：</text>
                  <text class="rule-value">12:00 - 13:00</text>
                </view>
                <view class="rule-item">
                  <text class="rule-label">弹性时间：</text>
                  <text class="rule-value">±30分钟</text>
                </view>
              </view>
            </view>

            <!-- 补卡规则 -->
            <view class="rule-section">
              <view class="rule-header" @tap="toggleRuleSection('supplement')">
                <view class="rule-title">
                  <i class="fas fa-edit"></i>
                  补卡规则
                </view>
                <view class="rule-arrow" :class="{ expanded: expandedRules.supplement }">
                  <i class="fas fa-chevron-down"></i>
                </view>
              </view>
              <view class="rule-content" v-if="expandedRules.supplement">
                <view class="rule-item">
                  <text class="rule-label">补卡时限：</text>
                  <text class="rule-value">当日24:00前</text>
                </view>
                <view class="rule-item">
                  <text class="rule-label">补卡次数：</text>
                  <text class="rule-value">每月最多3次</text>
                </view>
                <view class="rule-item">
                  <text class="rule-label">补卡原因：</text>
                  <text class="rule-value">必须填写详细说明</text>
                </view>
                <view class="rule-item">
                  <text class="rule-label">审批流程：</text>
                  <text class="rule-value">直属领导审批</text>
                </view>
              </view>
            </view>

            <!-- 更多规则 -->
            <view class="rule-section">
              <view class="rule-header" @tap="toggleRuleSection('more')">
                <view class="rule-title">
                  <i class="fas fa-cog"></i>
                  更多规则
                </view>
                <view class="rule-arrow" :class="{ expanded: expandedRules.more }">
                  <i class="fas fa-chevron-down"></i>
                </view>
              </view>
              <view class="rule-content" v-if="expandedRules.more">
                <view class="rule-item">
                  <text class="rule-label">迟到处理：</text>
                  <text class="rule-value">超过30分钟算迟到</text>
                </view>
                <view class="rule-item">
                  <text class="rule-label">早退处理：</text>
                  <text class="rule-value">提前30分钟以上算早退</text>
                </view>
                <view class="rule-item">
                  <text class="rule-label">外出申请：</text>
                  <text class="rule-value">需提前1小时申请</text>
                </view>
                <view class="rule-item">
                  <text class="rule-label">请假制度：</text>
                  <text class="rule-value">按公司请假制度执行</text>
                </view>
                <view class="rule-item">
                  <text class="rule-label">加班规定：</text>
                  <text class="rule-value">超过18:30算加班</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import SubHeader from '../../components/subHeader.vue'

export default {
  components: {
    SubHeader
  },
  data() {
    return {
      userName: "张三",
      currentDate: "",
      greeting: "",
      currentTime: "",
      workStart: "09:00",
      workEnd: "18:00",
      punchDays: 12,
      workRecorded: false,
      location: "正在定位中...",
      todayRecords: [],
      activeTab: "work", // 当前激活的tab
      // 外出打卡相关数据
      outReason: "",
      startTime: "",
      endTime: "",
      outRecorded: false,
      // 弹窗相关数据
      showRecordModal: false,
      showRuleModal: false,
      expandedRules: {
        attendance: true,  // 默认展开第一个
        supplement: false,
        more: false
      },
    };
  },
  onLoad() {
    this.updateDateTime();
    this.greeting = this.getGreeting();
    this.refreshLocation();
    this.loadTodayRecords();
    // 更新时间
    this.timer = setInterval(this.updateDateTime, 1000);
  },
  onUnload() {
    clearInterval(this.timer);
  },
  computed: {
    // 从全局数据获取设备信息
    isMobile() {
      return getApp().globalData.isMobile;
    },
    workPunchText() {
      // 根据今日打卡记录判断是上班还是下班
      const workRecords = this.todayRecords.filter(
        (record) => record.type === "上班打卡" || record.type === "下班打卡"
      );
      if (workRecords.length === 0) {
        return "上班打卡";
      } else if (workRecords.length === 1) {
        return "下班打卡";
      } else {
        return "今日已打卡";
      }
    },
    canOutPunch() {
      return (
        this.startTime && 
        this.endTime && 
        this.outReason.trim() &&
        this.calculatedDuration !== "时间无效"
      );
    },
    calculatedDuration() {
      if (!this.startTime || !this.endTime) {
        return "请选择开始和结束时间";
      }
      
      const start = this.parseTime(this.startTime);
      const end = this.parseTime(this.endTime);
      
      if (!start || !end) {
        return "时间格式错误";
      }
      
      if (end <= start) {
        return "结束时间必须晚于开始时间";
      }
      
      const diffMs = end - start;
      const hours = Math.floor(diffMs / (1000 * 60 * 60));
      const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
      
      if (hours > 0) {
        return `${hours}小时${minutes}分钟`;
      } else {
        return `${minutes}分钟`;
      }
    },
  },
  methods: {
    updateDateTime() {
      const now = new Date();
      this.currentDate = `${now.getFullYear()}-${(now.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${now.getDate().toString().padStart(2, "0")}`;
      this.currentTime = now.toTimeString().slice(0, 8);
    },
    getGreeting() {
      const hour = new Date().getHours();
      if (hour < 6) return "夜深了";
      if (hour < 9) return "早上好";
      if (hour < 12) return "上午好";
      if (hour < 14) return "中午好";
      if (hour < 18) return "下午好";
      if (hour < 22) return "晚上好";
      return "夜深了";
    },
    switchTab(tab) {
      this.activeTab = tab;
    },
    handleWorkPunch() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const time = `${year}-${month}-${day} ${this.currentTime}`;
      
      // 这里只做前端模拟，实际要调用接口
      let type = "";
      const workRecords = this.todayRecords.filter(
        (record) => record.type === "上班打卡" || record.type === "下班打卡"
      );

      if (workRecords.length === 0) {
        type = "上班打卡";
      } else if (workRecords.length === 1) {
        type = "下班打卡";
      } else {
        uni.showToast({ title: "今日已打卡完成", icon: "none" });
        return;
      }

      this.todayRecords.push({ time, type });
      this.workRecorded = true;
      uni.showToast({ title: `${type}成功`, icon: "success" });
      setTimeout(() => {
        this.workRecorded = false;
      }, 2000);
    },
    handleOutPunch() {
      if (!this.canOutPunch) {
        if (!this.startTime || !this.endTime) {
          uni.showToast({ title: "请选择开始和结束时间", icon: "none" });
        } else if (this.calculatedDuration === "结束时间必须晚于开始时间") {
          uni.showToast({ title: "结束时间必须晚于开始时间", icon: "none" });
        } else if (!this.outReason.trim()) {
          uni.showToast({ title: "请填写外出事由", icon: "none" });
        } else {
          uni.showToast({ title: "请填写完整信息", icon: "none" });
        }
        return;
      }

      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const time = `${year}-${month}-${day} ${this.currentTime}`;
      
      const type = "外出申请";
      const record = {
        time,
        type,
        reason: this.outReason,
        startTime: this.startTime,
        endTime: this.endTime,
        duration: this.calculatedDuration,
      };

      this.todayRecords.push(record);
      this.outRecorded = true;
      uni.showToast({ title: "外出申请提交成功", icon: "success" });

      // 清空表单
      this.outReason = "";
      this.startTime = "";
      this.endTime = "";

      setTimeout(() => {
        this.outRecorded = false;
      }, 2000);
    },
    onStartTimeChange(e) {
      this.startTime = e.detail.value;
    },
    onEndTimeChange(e) {
      this.endTime = e.detail.value;
    },
    parseTime(timeStr) {
      if (!timeStr) return null;
      const [hours, minutes] = timeStr.split(':').map(Number);
      if (isNaN(hours) || isNaN(minutes)) return null;
      
      const today = new Date();
      today.setHours(hours, minutes, 0, 0);
      return today;
    },
    refreshLocation() {
      // 模拟定位
      this.location = "北京·中关村";
      // 若已集成定位api可替换
      // uni.getLocation({...});
    },
    loadTodayRecords() {
      // 模拟从本地加载今日打卡
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');
      
      this.todayRecords = [
        {
          time: `${year}-${month}-${day} 09:15:30`,
          type: "上班打卡"
        },
        {
          time: `${year}-${month}-${day} 12:30:45`,
          type: "外出申请",
          reason: "客户拜访",
          startTime: "12:30",
          endTime: "14:00",
          duration: "1小时30分钟"
        },
        {
          time: `${year}-${month}-${day} 18:20:15`,
          type: "下班打卡"
        }
      ];
    },
    /**
     * 返回
     */
    goBack() {
      uni.navigateBack();
    },
    /**
     * 显示更多选项
     */
    showMoreOptions() {
      uni.showActionSheet({
        itemList: ["考勤记录", "设置", "帮助"],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              // 考勤记录
              this.showRecordModal = true;
              break;
            case 1:
              // 设置
              uni.showToast({ title: "设置功能开发中", icon: "none" });
              break;
            case 2:
              // 帮助
              uni.showToast({ title: "帮助功能开发中", icon: "none" });
              break;
          }
        },
      });
    },
    /**
     * 显示打卡记录
     */
    goToRecord() {
      this.showRecordModal = true;
    },
    /**
     * 关闭打卡记录弹窗
     */
    closeRecordModal() {
      this.showRecordModal = false;
    },
    /**
     * 跳转到统计页面
     */
    goToStatistics() {
      uni.navigateTo({
        url: "/pages/hr/attendance/statistics",
      });
    },
    /**
     * 显示考勤规则弹窗
     */
    goToRule() {
      this.showRuleModal = true;
    },
    /**
     * 关闭考勤规则弹窗
     */
    closeRuleModal() {
      this.showRuleModal = false;
    },
    /**
     * 切换规则栏目展开状态
     */
    toggleRuleSection(section) {
      this.expandedRules[section] = !this.expandedRules[section];
    },
    /**
     * 格式化记录时间显示
     */
    formatRecordTime(timeStr) {
      if (!timeStr) return '';
      
      // 如果是完整的时间字符串（包含年月日）
      if (timeStr.includes('-') || timeStr.includes('/')) {
        const date = new Date(timeStr);
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit'
        });
      }
      
      // 如果只是时间字符串，添加今天的日期
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');
      
      return `${year}-${month}-${day} ${timeStr}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.attendance-container {
  min-height: 100vh;
  background: #f4f6fa;
  padding: 0;
  padding-top: calc(var(--status-bar-height) + 88rpx);
}

/* 支持安全区域的设备 */
@supports (padding: max(0px)) {
  .attendance-container {
    padding-top: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
  }
}

.header {
  padding: 48rpx 36rpx 12rpx 36rpx;
//   background: linear-gradient(90deg, #5497ff 0%, #88bafe 100%);
  color: #fff;
  .date {
    font-size: 28rpx;
    margin-bottom: 8rpx;
    opacity: 0.9;
  }
  .greeting {
    font-size: 40rpx;
    font-weight: bold;
  }
}

.tab-container {
  background: #fff;
  margin: -32rpx 36rpx 0 36rpx;
  border-radius: 16rpx 16rpx 0 0;
  border-bottom: 1rpx solid #efefefef;
  display: flex;
  box-shadow: 0 -6rpx 18rpx 0 rgba(74, 144, 226, 0.04);
  position: relative;
  z-index: 1;
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 24rpx 0;
    font-size: 28rpx;
    color: #9eaab7;
    position: relative;
    transition: all 0.3s ease;
    &.active {
      color: #388bff;
      font-weight: bold;
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background: #388bff;
        border-radius: 2rpx;
      }
    }
  }
}

.attendance-summary {
  background: #fff;
  box-shadow: 0 6rpx 18rpx 0 rgba(74, 144, 226, 0.04);
  border-radius: 16rpx;
  padding: 36rpx 30rpx;
  margin: -32rpx 36rpx 32rpx 36rpx;
  display: flex;
  justify-content: space-between;
  .status {
    text-align: center;
    margin-top: 30rpx;
    .label {
      color: #9eaab7;
      font-size: 24rpx;
    }
    .value {
      color: #2d4259;
      font-size: 32rpx;
      margin-top: 8rpx;
      font-weight: bold;
    }
  }

  .tools-bar {
    font-size: 28rpx;
    color: #388bff;
    font-weight: bold;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}

.clockin-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 240rpx 0 0 0;
  .circle {
    width: 320rpx;
    height: 320rpx;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8rpx 18rpx 0 rgba(74, 144, 226, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    .punch-time {
      font-size: 60rpx;
      font-weight: bold;
      color: #2d4259;
      margin-bottom: 8rpx;
    }
    .punch-status {
      margin-top: 16rpx;
      .status-success {
        color: #66c27c;
        font-size: 32rpx;
      }
    }
    .punch-btn {
      border: none;
      color: #388bff;
      font-size: 32rpx;
    }
  }
  .location {
    margin-top: 26rpx;
    color: #90a4b7;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    .iconfont {
      margin-right: 10rpx;
      font-size: 26rpx;
    }
    .location-refresh {
      background: none;
      color: #388bff;
      margin-left: 18rpx;
      font-size: 22rpx;
      border: none;
      padding: 0 10rpx;
    }
  }
}

.out-area {
  margin: 24rpx 36rpx 0 36rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 18rpx 0 rgba(74, 144, 226, 0.06);
  padding: 36rpx 30rpx;

  .out-form {
    .form-item {
      margin-bottom: 32rpx;
      .label {
        display: block;
        font-size: 28rpx;
        color: #2d4259;
        margin-bottom: 16rpx;
        font-weight: 500;
      }
      .input {
        width: 100%;
        height: 80rpx;
        background: #f8f9fa;
        border: 1rpx solid #e9ecef;
        border-radius: 12rpx;
        padding: 0 24rpx;
        font-size: 28rpx;
        color: #2d4259;
        box-sizing: border-box;
        &:focus {
          border-color: #388bff;
          background: #fff;
        }
      }
      .textarea {
        width: 100%;
        min-height: 120rpx;
        background: #f8f9fa;
        border: 1rpx solid #e9ecef;
        border-radius: 12rpx;
        padding: 20rpx 24rpx;
        font-size: 28rpx;
        color: #2d4259;
        box-sizing: border-box;
        line-height: 1.5;
        &:focus {
          border-color: #388bff;
          background: #fff;
        }
      }
      .duration-display {
        width: 100%;
        height: 80rpx;
        background: #f8f9fa;
        border: 1rpx solid #e9ecef;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        padding: 0 24rpx;
        box-sizing: border-box;
        .duration-text {
          font-size: 28rpx;
          color: #2d4259;
          font-weight: 500;
        }
      }
      .time-picker {
        width: 100%;
        height: 80rpx;
        background: #f8f9fa;
        border: 1rpx solid #e9ecef;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        padding: 0 24rpx;
        box-sizing: border-box;
        .picker-text {
          font-size: 28rpx;
          color: #2d4259;
        }
        &:active {
          border-color: #388bff;
          background: #fff;
        }
      }
    }
  }

  .out-punch-btn {
    margin-top: 40rpx;
    text-align: center;
    .punch-btn {
      background: linear-gradient(90deg, #388bff 0%, #62b3ff 100%);
      border: none;
      color: #fff;
      font-size: 32rpx;
      border-radius: 64rpx;
      width: 200rpx;
      height: 80rpx;
      box-shadow: 0 4rpx 10rpx 0 rgba(56, 139, 255, 0.17);
      &:disabled {
        background: #e9ecef;
        color: #9eaab7;
        box-shadow: none;
      }
    }
  }
}

.record-section {
  margin: 48rpx 36rpx 0 36rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 10rpx 0 rgba(74, 144, 226, 0.04);
  padding: 30rpx 24rpx;
  .record-title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 18rpx;
    color: #2d4259;
  }
  .record-item {
    padding: 24rpx 0;
    border-bottom: 1px solid #f2f3f8;
    &:last-child {
      border-bottom: none;
    }
    .record-left {
      .record-time {
        font-size: 28rpx;
        color: #2d4259;
        font-weight: 500;
        margin-bottom: 8rpx;
      }
      .record-type {
        color: #388bff;
        font-size: 26rpx;
        font-weight: 500;
        margin-bottom: 8rpx;
      }
      .record-detail {
        font-size: 24rpx;
        color: #9eaab7;
        margin-bottom: 4rpx;
        line-height: 1.4;
      }
    }
  }
  .no-record {
    color: #aaa;
    text-align: center;
    padding: 26rpx 0;
    font-size: 28rpx;
  }
}

/* 打卡记录弹窗 */
.record-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  box-sizing: border-box;
}

.modal-content {
  background: #fff;
  border-radius: 16rpx;
  width: 100%;
  max-width: 600rpx;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
}

.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #2d4259;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5f5f5;
  color: #666;
  font-size: 28rpx;
  transition: all 0.2s ease;
}

.close-btn:active {
  background: #e0e0e0;
  transform: scale(0.95);
}

.modal-body {
  padding: 0 40rpx 40rpx 40rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.modal-body .record-item {
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f2f3f8;
  &:last-child {
    border-bottom: none;
  }
  .record-left {
    .record-time {
      font-size: 28rpx;
      color: #2d4259;
      font-weight: 500;
      margin-bottom: 8rpx;
    }
    .record-type {
      color: #388bff;
      font-size: 26rpx;
      font-weight: 500;
      margin-bottom: 8rpx;
    }
    .record-detail {
      font-size: 24rpx;
      color: #9eaab7;
      margin-bottom: 4rpx;
      line-height: 1.4;
    }
  }
}

.modal-body .no-record {
  color: #aaa;
  text-align: center;
  padding: 60rpx 0;
  font-size: 28rpx;
}

/* 考勤规则弹窗 */
.rule-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  box-sizing: border-box;
}

.rule-sections {
  .rule-section {
    margin-bottom: 20rpx;
    border-radius: 12rpx;
    overflow: hidden;
    background: #f8f9fa;
    border: 1rpx solid #e9ecef;
    
    .rule-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 30rpx;
      background: #fff;
      border-bottom: 1rpx solid #e9ecef;
      cursor: pointer;
      transition: all 0.2s ease;
      
      &:active {
        background: #f5f5f5;
      }
      
      .rule-title {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        font-weight: 600;
        color: #2d4259;
        
        i {
          margin-right: 16rpx;
          color: #388bff;
          font-size: 28rpx;
        }
      }
      
      .rule-arrow {
        color: #9eaab7;
        font-size: 24rpx;
        transition: transform 0.3s ease;
        
        &.expanded {
          transform: rotate(180deg);
        }
      }
    }
    
    .rule-content {
      padding: 0 30rpx 24rpx 30rpx;
      background: #fff;
      
      .rule-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .rule-label {
          font-size: 26rpx;
          color: #666;
          flex: 1;
        }
        
        .rule-value {
          font-size: 26rpx;
          color: #2d4259;
          font-weight: 500;
          text-align: right;
        }
      }
    }
  }
}
</style>
