<template>
  <div class="attendance-group-container">
    <div class="page-header">
      <el-row>
        <el-col :span="24">
          <h1>考勤组配置</h1>
          <p>设置考勤规则、关联员工和打卡区域</p>
        </el-col>
      </el-row>
    </div>
    
    <div class="main-content">
      <el-row :gutter="20">
        <!-- 左侧：考勤组列表 -->
        <el-col :sm="24" :md="6">
          <el-card class="group-list-card">
            <template #header>
              <div class="card-header">
                <h3>考勤组列表</h3>
                <el-button type="primary" size="small" @click="showAddGroupModal = true">
                  <i class="el-icon-plus"></i> 新建
                </el-button>
              </div>
            </template>
            
            <div class="group-list">
              <div 
                v-for="group in attendanceGroups" 
                :key="group.id"
                class="group-item"
                :class="{'active': selectedGroupId === group.id}"
                @click="selectGroup(group.id)"
              >
                <div class="group-name">{{ group.name }}</div>
                <div class="group-desc">{{ group.description || '未设置描述' }}</div>
                <div class="group-meta">
                  <span>{{ group.members.length }}名员工</span>
                  <span v-if="group.areaName">· {{ group.areaName }}</span>
                </div>
              </div>
              
              <div v-if="attendanceGroups.length === 0" class="empty-state">
                <i class="el-icon-s-empty"></i>
                <p>暂无考勤组，点击"新建"按钮创建</p>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <!-- 右侧：考勤组表单 -->
        <el-col :sm="24" :md="18">
          <el-card class="group-form-card">
            <template #header>
              <div class="card-header">
                <h3>{{ isEditMode ? '编辑考勤组' : '新建考勤组' }}</h3>
              </div>
            </template>
            
            <el-form :model="attendanceGroup" :rules="rules" ref="groupForm" label-width="120px">
              <!-- 基本信息 -->
              <el-form-item label="考勤组名称" prop="name">
                <el-input v-model="attendanceGroup.name" placeholder="请输入考勤组名称"></el-input>
              </el-form-item>
              
              <el-form-item label="描述" prop="description">
                <el-input v-model="attendanceGroup.description" placeholder="请输入描述信息"></el-input>
              </el-form-item>
              
              <!-- 考勤时间设置 -->
              <el-form-item label="工作日设置">
                <el-checkbox-group v-model="attendanceGroup.workDays">
                  <el-checkbox v-for="day in workDays" :key="day.value" :label="day.value">{{ day.label }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              
              <el-form-item label="上班时间" prop="workStartTime">
                <el-time-picker
                  v-model="attendanceGroup.workStartTime"
                  format="HH:mm"
                  value-format="HH:mm"
                  placeholder="选择上班时间"
                ></el-time-picker>
              </el-form-item>
              
              <el-form-item label="迟到浮动" prop="lateRange">
                <el-col :span="12">
                  <el-switch
                    v-model="attendanceGroup.allowLate"
                    active-text="允许"
                    inactive-text="不允许"
                    @change="handleLateChange"
                  ></el-switch>
                </el-col>
                <el-col :span="12" v-if="attendanceGroup.allowLate">
                  <el-slider
                    v-model="attendanceGroup.lateRange"
                    :min="1"
                    :max="30"
                    :step="1"
                    show-tooltip
                    @change="validateLateRange"
                  ></el-slider>
                  <div class="slider-value">{{ attendanceGroup.lateRange }}分钟</div>
                </el-col>
              </el-form-item>
              
              <el-form-item label="下班时间" prop="workEndTime">
                <el-time-picker
                  v-model="attendanceGroup.workEndTime"
                  format="HH:mm"
                  value-format="HH:mm"
                  placeholder="选择下班时间"
                ></el-time-picker>
              </el-form-item>
              
              <el-form-item label="早退浮动" prop="earlyRange">
                <el-col :span="12">
                  <el-switch
                    v-model="attendanceGroup.allowEarly"
                    active-text="允许"
                    inactive-text="不允许"
                    @change="handleEarlyChange"
                  ></el-switch>
                </el-col>
                <el-col :span="12" v-if="attendanceGroup.allowEarly">
                  <el-slider
                    v-model="attendanceGroup.earlyRange"
                    :min="1"
                    :max="30"
                    :step="1"
                    show-tooltip
                    @change="validateEarlyRange"
                  ></el-slider>
                  <div class="slider-value">{{ attendanceGroup.earlyRange }}分钟</div>
                </el-col>
              </el-form-item>
              
              <!-- 打卡配置 -->
              <el-form-item label="打卡区域" prop="areaId">
                <el-select
                  v-model="attendanceGroup.areaId"
                  placeholder="请选择打卡区域"
                >
                  <el-option
                    v-for="area in checkInAreas"
                    :key="area.id"
                    :label="area.name"
                    :value="area.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              
              <!-- 关联员工 -->
              <el-form-item label="关联员工">
                <el-button
                  type="primary"
                  size="small"
                  @click="openUserSelectionDialog"
                >
                  <i class="el-icon-plus"></i> 选择员工
                </el-button>
              
                <el-table
                  :data="attendanceGroup.members"
                  style="width: 100%; margin-top: 20px"
                  empty-text="暂无关联员工"
                >
                  <el-table-column prop="name" label="姓名"></el-table-column>
                  <el-table-column prop="employeeId" label="工号"></el-table-column>
                  <el-table-column prop="department" label="部门"></el-table-column>
                  <el-table-column prop="position" label="职位"></el-table-column>
                  <el-table-column label="操作" width="80">
                    <template #default="scope">
                      <el-button
                        type="danger"
                        size="mini"
                        @click="removeMember(scope.row)"
                      >
                        <i class="el-icon-delete"></i>
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
              
              <!-- 操作按钮 -->
              <el-form-item>
                <el-button type="primary" @click="saveGroup">保存</el-button>
                <el-button @click="cancelEdit">取消</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 新建考勤组对话框 -->
    <el-dialog
      title="新建考勤组"
      :visible.sync="showAddGroupModal"
      width="30%"
      :before-close="handleCloseAddGroupDialog"
    >
      <el-form :model="newGroup" :rules="newGroupRules" ref="newGroupForm" label-width="100px">
        <el-form-item label="考勤组名称" prop="name">
          <el-input v-model="newGroup.name" placeholder="请输入考勤组名称"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="newGroup.description" placeholder="请输入描述信息"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddGroupModal = false">取消</el-button>
        <el-button type="primary" @click="createNewGroup">创建</el-button>
      </template>
    </el-dialog>
    
    <!-- 员工选择对话框 -->
    <el-dialog
      title="选择员工"
      :visible.sync="userSelectionDialogVisible"
      width="60%"
      :before-close="handleCloseUserDialog"
    >
      <div class="search-container">
        <el-input
          v-model="userSearchKeyword"
          placeholder="搜索员工"
          prefix-icon="el-icon-search"
          @keyup.enter="searchUsers"
        ></el-input>
        <el-button @click="searchUsers">搜索</el-button>
      </div>
      <el-table
        :data="filteredUsers"
        @selection-change="handleUserSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="employeeId" label="工号"></el-table-column>
        <el-table-column prop="department" label="部门"></el-table-column>
        <el-table-column prop="position" label="职位"></el-table-column>
      </el-table>
      <template #footer>
        <el-button @click="userSelectionDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmUserSelection">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  add,
  getList,
  update,
  del
} from '@/api/daka/attendance-group'

export default {
  name: 'AttendanceGroup',
  data() {
    return {
      // 考勤组列表
      attendanceGroups: [],
      // 当前选中的考勤组ID
      selectedGroupId: null,
      // 考勤组表单数据
      attendanceGroup: {
        id: null,
        name: '',
        description: '',
        workDays: ['mon', 'tue', 'wed', 'thu', 'fri'],
        workStartTime: '09:00',
        workEndTime: '18:00',
        allowLate: true,
        lateRange: 15,
        allowEarly: true,
        earlyRange: 15,
        areaId: null,
        checkInType: 'location',
        members: [],
        areaName: ''
      },
      // 工作日选项
      workDays: [
        { value: 'mon', label: '周一' },
        { value: 'tue', label: '周二' },
        { value: 'wed', label: '周三' },
        { value: 'thu', label: '周四' },
        { value: 'fri', label: '周五' },
        { value: 'sat', label: '周六' },
        { value: 'sun', label: '周日' }
      ],
      // 员工列表
      users: [],
      // 打卡区域列表
      checkInAreas: [],
      // 新建考勤组表单
      newGroup: {
        name: '',
        description: ''
      },
      // 新建考勤组表单规则
      newGroupRules: {
        name: [{ required: true, message: '请输入考勤组名称', trigger: 'blur' }]
      },
      // 搜索关键词
      userSearchKeyword: '',
      // 选中的用户
      selectedUsers: [],
      // 对话框状态
      userSelectionDialogVisible: false,
      showAddGroupModal: false,
      // 表单验证规则
      rules: {
        name: [
          { required: true, message: '请输入考勤组名称', trigger: 'blur' }
        ],
        workStartTime: [
          { required: true, message: '请选择上班时间', trigger: 'change' }
        ],
        workEndTime: [
          { required: true, message: '请选择下班时间', trigger: 'change' }
        ],
        areaId: [
          { required: true, message: '请选择打卡区域', trigger: 'change' }
        ]
      },
      // 编辑模式
      isEditMode: false,
      // 提示信息
      successMessage: '',
      successMessageVisible: false
    };
  },
  computed: {
    // 过滤后的用户列表
    filteredUsers() {
      // 获取不在当前考勤组中的用户
      const groupMemberIds = this.attendanceGroup.members.map(member => member.id);
      const availableUsers = this.users.filter(user => 
        !groupMemberIds.includes(user.id)
      );
      
      // 应用搜索过滤
      if (!this.userSearchKeyword) return availableUsers;
      
      const keyword = this.userSearchKeyword.toLowerCase();
      return availableUsers.filter(user => 
        user.name.toLowerCase().includes(keyword) || 
        user.employeeId.toLowerCase().includes(keyword) ||
        user.department.toLowerCase().includes(keyword) ||
        user.position.toLowerCase().includes(keyword)
      );
    }
  },
  mounted() {
    // 加载模拟数据
    this.loadMockData();
    // 加载打卡区域数据（实际项目中从API获取）
    this.loadCheckInAreas();
  },
  methods: {
    // 加载模拟数据
    loadMockData() {
      // 模拟考勤组数据
      this.attendanceGroups = [
        {
          id: 1,
          name: '研发部考勤组',
          description: '研发部门日常考勤规则',
          workDays: ['mon', 'tue', 'wed', 'thu', 'fri'],
          workStartTime: '09:00',
          workEndTime: '18:00',
          allowLate: true,
          lateRange: 15,
          allowEarly: true,
          earlyRange: 15,
          areaId: 1,
          areaName: '总部办公楼',
          members: [
            { id: 1, name: '张三', employeeId: 'EMP001', department: '研发部', position: '高级工程师' },
            { id: 2, name: '李四', employeeId: 'EMP002', department: '研发部', position: '产品经理' }
          ]
        },
        {
          id: 2,
          name: '销售部考勤组',
          description: '销售部门考勤规则',
          workDays: ['mon', 'tue', 'wed', 'thu', 'fri'],
          workStartTime: '09:30',
          workEndTime: '18:30',
          allowLate: true,
          lateRange: 10,
          allowEarly: false,
          earlyRange: 0,
          areaId: 2,
          areaName: '销售办公室',
          members: [
            { id: 3, name: '王五', employeeId: 'EMP003', department: '销售部', position: '销售代表' },
            { id: 4, name: '赵六', employeeId: 'EMP004', department: '销售部', position: '销售经理' }
          ]
        }
      ];
      
      // 模拟员工数据
      this.users = [
        { id: 1, name: '张三', employeeId: 'EMP001', department: '研发部', position: '高级工程师' },
        { id: 2, name: '李四', employeeId: 'EMP002', department: '研发部', position: '产品经理' },
        { id: 3, name: '王五', employeeId: 'EMP003', department: '销售部', position: '销售代表' },
        { id: 4, name: '赵六', employeeId: 'EMP004', department: '销售部', position: '销售经理' },
        { id: 5, name: '钱七', employeeId: 'EMP005', department: '财务部', position: '会计' },
        { id: 6, name: '孙八', employeeId: 'EMP006', department: '财务部', position: '财务总监' },
        { id: 7, name: '周九', employeeId: 'EMP007', department: '人力资源', position: 'HR专员' },
        { id: 8, name: '吴十', employeeId: 'EMP008', department: '人力资源', position: 'HR经理' },
        { id: 9, name: '郑十一', employeeId: 'EMP009', department: '市场部', position: '市场专员' },
        { id: 10, name: '王十二', employeeId: 'EMP010', department: '市场部', position: '市场总监' }
      ];
    },
    
    // 加载打卡区域数据（实际项目中从API获取）
    loadCheckInAreas() {
      this.checkInAreas = [
        { id: 1, name: '总部办公楼', lng: 116.404, lat: 39.915, radius: 300, enabled: true },
        { id: 2, name: '销售办公室', lng: 116.414, lat: 39.905, radius: 200, enabled: true },
        { id: 3, name: '南区仓库', lng: 116.394, lat: 39.925, radius: 500, enabled: true }
      ];
    },
    
    // 选择考勤组
    selectGroup(id) {
      this.selectedGroupId = id;
      const group = this.attendanceGroups.find(g => g.id === id);
      if (group) {
        // 复制考勤组数据
        this.attendanceGroup = { ...group };
        this.isEditMode = true;
      }
    },
    
    // 重置表单
    resetForm() {
      this.attendanceGroup = {
        id: null,
        name: '',
        description: '',
        workDays: ['mon', 'tue', 'wed', 'thu', 'fri'],
        workStartTime: '09:00',
        workEndTime: '18:00',
        allowLate: true,
        lateRange: 15,
        allowEarly: true,
        earlyRange: 15,
        areaId: null,
        checkInType: 'location',
        members: [],
        areaName: ''
      };
      
      this.isEditMode = false;
      this.selectedGroupId = null;
    },
    
    // 打开新建考勤组对话框
    openAddGroupDialog() {
      this.resetForm();
      this.showAddGroupModal = true;
    },
    
    // 创建新考勤组
    createNewGroup() {
      this.$refs.newGroupForm.validate(valid => {
        if (valid) {
          // 实际项目中调用API创建
          const newGroup = {
            name: this.newGroup.name,
            description: this.newGroup.description,
            workDays: ['mon', 'tue', 'wed', 'thu', 'fri'],
            workStartTime: '09:00',
            workEndTime: '18:00',
            allowLate: true,
            lateRange: 15,
            allowEarly: true,
            earlyRange: 15,
            areaId: null,
            areaName: '',
            members: []
          };
          add(newGroup).then((res) => {
            console.log(res)
          })
          this.attendanceGroups.push(newGroup);
          this.selectGroup(newGroup.id);
          this.showAddGroupModal = false;
          this.$message.success('考勤组创建成功');
        }
      });
    },
    
    // 处理关闭新建考勤组对话框
    handleCloseAddGroupDialog(done) {
      if (this.newGroup.name) {
        this.$confirm('确定要取消创建吗？', '提示', {
          type: 'warning'
        }).then(() => {
          done();
        }).catch(() => {
          // 取消关闭
        });
      } else {
        done();
      }
    },
    
    // 保存考勤组
    saveGroup() {
      this.$refs.groupForm.validate(valid => {
        if (valid) {
          // 查找打卡区域名称
          const area = this.checkInAreas.find(a => a.id === this.attendanceGroup.areaId);
          if (area) {
            this.attendanceGroup.areaName = area.name;
          }
          
          if (this.isEditMode) {
            // 更新现有考勤组
            const index = this.attendanceGroups.findIndex(g => g.id === this.attendanceGroup.id);
            if (index !== -1) {
              this.attendanceGroups.splice(index, 1, this.attendanceGroup);
            }
            this.$message.success('考勤组更新成功');
          } else {
            // 添加新考勤组
            this.attendanceGroups.push(this.attendanceGroup);
            this.selectedGroupId = this.attendanceGroup.id;
            this.$message.success('考勤组创建成功');
          }
          
          // 重置表单
          // this.resetForm();
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },
    
    // 取消编辑
    cancelEdit() {
      if (this.isEditMode && this.selectedGroupId) {
        const group = this.attendanceGroups.find(g => g.id === this.selectedGroupId);
        if (group) {
          this.attendanceGroup = { ...group };
        }
      } else {
        this.resetForm();
      }
    },
    
    // 打开员工选择对话框
    openUserSelectionDialog() {
      this.userSelectionDialogVisible = true;
      this.selectedUsers = [];
    },
    
    // 处理员工选择变化
    handleUserSelectionChange(selection) {
      this.selectedUsers = selection;
    },
    
    // 搜索用户
    searchUsers() {
      // 搜索逻辑已在computed属性中实现
    },
    
    // 确认选择员工
    confirmUserSelection() {
      if (this.selectedUsers.length === 0) {
        this.$message.warning('请选择员工');
        return;
      }
      
      // 添加选中的员工到考勤组
      this.attendanceGroup.members = [
        ...this.attendanceGroup.members,
        ...this.selectedUsers
      ];
      
      this.userSelectionDialogVisible = false;
    },
    
    // 处理关闭员工对话框
    handleCloseUserDialog(done) {
      if (this.selectedUsers.length > 0) {
        this.$confirm('确定要取消选择吗？', '提示', {
          type: 'warning'
        }).then(() => {
          done();
        }).catch(() => {
          // 取消关闭
        });
      } else {
        done();
      }
    },
    
    // 移除员工
    removeMember(member) {
      this.$confirm('确定要移除该员工吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.attendanceGroup.members = this.attendanceGroup.members.filter(
          m => m.id !== member.id
        );
      }).catch(() => {
        // 取消操作
      });
    },
    
    // 处理迟到开关变化
    handleLateChange(value) {
      if (!value) {
        this.attendanceGroup.lateRange = 0;
      }
    },
    
    // 处理早退开关变化
    handleEarlyChange(value) {
      if (!value) {
        this.attendanceGroup.earlyRange = 0;
      }
    },
    
    // 验证迟到浮动范围
    validateLateRange(value) {
      if (value > 30) {
        this.attendanceGroup.lateRange = 30;
        this.$message.warning('迟到浮动范围最大为30分钟');
      }
    },
    
    // 验证早退浮动范围
    validateEarlyRange(value) {
      if (value > 30) {
        this.attendanceGroup.earlyRange = 30;
        this.$message.warning('早退浮动范围最大为30分钟');
      }
    },
    
    // 显示成功消息
    showSuccessMessage(message) {
      this.successMessage = message;
      this.successMessageVisible = true;
      
      // 3秒后自动关闭
      setTimeout(() => {
        this.successMessageVisible = false;
      }, 3000);
    }
  }
};
</script>

<style scoped>
.attendance-group-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
}

.page-header p {
  color: #606266;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
}

.group-list-card, .group-form-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.slider-value {
  text-align: center;
  margin-top: 10px;
  color: #606266;
}

/* 表单验证错误提示样式 */
.el-form-item__error {
  padding-top: 4px;
}

/* 表格样式优化 */
.el-table {
  border-radius: 4px;
}

.el-table th {
  background-color: #f5f7fa;
}

/* 按钮样式优化 */
.el-button {
  transition: all 0.2s;
}

.el-button:hover {
  transform: translateY(-1px);
}

/* 消息提示样式 */
.el-message {
  top: 80px;
}

/* 考勤组列表样式 */
.group-list {
  max-height: 400px;
  overflow-y: auto;
  padding: 10px 0;
}

.group-item {
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #ebeef5;
  transition: all 0.3s;
}

.group-item:hover {
  border-color: #409eff;
  background-color: #f5f7fa;
}

.group-item.active {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.group-name {
  font-weight: 500;
  margin-bottom: 5px;
  color: #303133;
}

.group-desc {
  font-size: 13px;
  color: #606266;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-meta {
  font-size: 12px;
  color: #909399;
}

.empty-state {
  text-align: center;
  padding: 30px 0;
  color: #909399;
}

.empty-state i {
  font-size: 36px;
  margin-bottom: 10px;
  display: block;
  color: #dcdfe6;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
  
  .group-list-card, .group-form-card {
    width: 100%;
  }
}
</style>