<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          v-hasPermi="['demo:leave:edit']"
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['demo:leave:remove']"
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['demo:leave:export']"
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
        >导出</el-button>
      </el-col> -->
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>

    <el-table v-loading="loading" :data="attendanceGroups" @selection-change="handleSelectionChange" >
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column v-if="false" label="主键ID" align="center" prop="id" />
      <el-table-column label="考勤组名称" align="center" prop="name" width="180" > </el-table-column>
      <el-table-column  label="描述" align="center" prop="description"> </el-table-column>
      <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width" >
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-circle-check" @click="editArea(scope.row)" >编辑</el-button>
          <el-button size="mini" type="text" icon="el-icon-camera" @click="deleteArea(scope.row)" >删除</el-button>
          <!-- <el-button size="mini" type="text" icon="el-icon-setting" @click="toggleAreaStatus(scope.row)" :disabled="scope.row.enableStatus =='0'"
          >{{ scope.row.enableStatus == '0' ? '已启用' : '启用' }}</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
      <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="userName" label="姓名"></el-table-column>
            <el-table-column prop="userId" label="工号"></el-table-column>
            <el-table-column prop="nickName" label="用户昵称"></el-table-column>
            <el-table-column prop="deptName" 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>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="createNewGroup">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </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> -->
      <index ref="userRef" :message="attendanceGroup" @handleUserSelectionChange="handleUserSelectionChange"></index>
      <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,
  queryList,
  queryArea,
  del,
  delUser,
  test
} from '@/api/daka/attendance-group'

import index from '@/views/components/daka/index';
export default {
  name: 'AttendanceGroup',
  components: { index },
  dicts: [
    'zs_operation_warn_types',
    'zs_operation_status',
    'zs_operation_compare_status',
    'zs_operation_platform',
    'daka_check_in_status'
  ],
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      resultList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 图片快照时间范围
      daterangeWarnTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sysUserName: undefined,
        checkInStatus: undefined,
        exportRange: undefined,
      },
      // 表单参数
      form: {},
      // 结果
      warnResult: '',
      // 表单校验
      rules: {
        snapshotUrl: [
          { required: true, message: '图片快照不能为空', trigger: 'blur' }
        ]
      },
      daka_check_in_status: [{label: '正常', value: '0'},{label: '迟到', value: '1'},{label: '缺卡', value: '2'}],
      // 地图相关
      map: null,
      marker: null,
      circle: null,
      mapHeight: '400px',
      baiduMapKey: '你的百度地图API Key', // 替换为你的API Key
      
      // 表单数据
      formData: {
        id: null,
        name: '',
        lng: '116.404', // 默认经度（北京天安门）
        lat: '39.915',  // 默认纬度（北京天安门）
        radius: 500,    // 默认半径500米
        enabled: false
      },
      
      // 区域列表
      areaList: [],
      
      // 模态框状态
      showDeleteModal: false,
      currentDeletingArea: null,
      // 考勤组列表
      attendanceGroups: [],
      // 当前选中的考勤组ID
      selectedGroupId: null,
      // 考勤组表单数据
      attendanceGroup: {
        id: null,
        name: '',
        description: '',
        workDays: ['mon', 'tue', 'wed', 'thu', 'fri'],
        workStartTime: '09:00',
        workEndTime: '18:00',
        allowLate: false,
        lateRange: 15,
        allowEarly: false,
        earlyRange: 15,
        areaId: null,
        checkInType: 'location',
        members: [],
        areaName: ''
      },
      attendanceGroupModel: {
        id: null,
        name: '',
        description: '',
        workDays: ['mon', 'tue', 'wed', 'thu', 'fri'],
        workStartTime: '09:00',
        workEndTime: '18:00',
        allowLate: false,
        lateRange: 15,
        allowEarly: false,
        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: {
    // 表单验证
    isFormValid() {
      return (
        this.formData.name.trim() !== '' &&
        !isNaN(parseFloat(this.formData.lng)) &&
        !isNaN(parseFloat(this.formData.lat)) &&
        this.formData.radius >= 10 &&
        this.formData.radius <= 5000
      );
    },
    // 过滤后的用户列表
    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.getList();
    this.test()
    // 加载模拟数据
    this.getList();
    // 加载打卡区域数据（实际项目中从API获取）
    this.loadCheckInAreas();
  },
  methods: {
    test(){
      test({userId:1}).then((res) => {
        console.log(res)
      })
    },

    /** 新增按钮操作 */
    handleAdd() {
      // this.reset()
      this.attendanceGroup = this.attendanceGroupModel
      this.open = true
    },

        // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    // 编辑区域
    editArea(area) {
      // console.log('editArea', area)
      this.open = true
      // 复制对象，避免直接修改原始数据
      this.attendanceGroup = { ...area };
      
      this.selectGroup(area.id)

    },

    // 删除
    deleteArea(area) {
      del(area.id).then((res) => {
        this.getList()
      })
      this.currentDeletingArea = area;
      this.showDeleteModal = true;
    },

        // 验证早退浮动范围
    validateEarlyRange(value) {
      if (value > 30) {
        this.attendanceGroup.earlyRange = 30;
        this.$message.warning('早退浮动范围最大为30分钟');
      }
    },

    // 打开员工选择对话框
    openUserSelectionDialog() {
      this.userSelectionDialogVisible = true;
      this.selectedUsers = [];
    },

    // 移除员工
    removeMember(member) {
      this.$confirm('确定要移除该员工吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.attendanceGroup.members = this.attendanceGroup.members.filter(
          m => m.id !== member.id
        );
        // console.log(member)
        delUser(member.id).then((res) => {
          // console.log(res)
          this.getList()
          this.$message.success('用户删除成功！');
        })
      }).catch(() => {
        // 取消操作
      });
    },

    // 创建新考勤组
    createNewGroup() {
      this.$refs.groupForm.validate(valid => {
        if (valid) {
          // 实际项目中调用API创建
          const newGroup = {
            id: this.attendanceGroup.id,
            name: this.attendanceGroup.name,
            description: this.attendanceGroup.description,
            workDays: this.attendanceGroup.workDays,
            workStartTime: this.attendanceGroup.workStartTime,
            workEndTime: this.attendanceGroup.workEndTime,
            allowLate: this.attendanceGroup.allowLate,
            lateRange: this.attendanceGroup.lateRange,
            allowEarly: this.attendanceGroup.allowEarly,
            earlyRange: this.attendanceGroup.earlyRange,
            areaId: this.attendanceGroup.areaId,
            areaName: '',
            members: this.attendanceGroup.members
          };
          // console.log(newGroup)
          add(newGroup).then((res) => {
            console.log(res)
            this.$message.success(res.msg);
            this.getList()
          })
          this.attendanceGroups.push(newGroup);
          this.selectGroup(newGroup.id);
          this.showAddGroupModal = false;
          this.open = false
          // this.$message.success('考勤组创建成功');
        }
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      // this.reset();
    },

    // 处理关闭员工对话框
    handleCloseUserDialog(done) {
      if (this.selectedUsers.length > 0) {
        this.$confirm('确定要取消选择吗？', '提示', {
          type: 'warning'
        }).then(() => {
          done();
        }).catch(() => {
          // 取消关闭
        });
      } else {
        done();
      }
    },

    // 处理员工选择变化
    handleUserSelectionChange(selection) {
      console.log(selection)
      const newList = selection.map(item => ({
        ...item, // 保留原始字段
        deptName: item.dept.deptName, // 新增字段，
      }));
      // const convertList = newList.map(item => ({
      //   ...item,
      //   userId: parseInt(item.userId)
      // }))
      this.selectedUsers = newList;
      console.log(this.selectedUsers)
    },

    // 确认选择员工
    confirmUserSelection() {
      if (this.selectedUsers.length === 0) {
        this.$message.warning('请选择员工');
        return;
      }
      
      // 添加选中的员工到考勤组
      // const map = new Map();
      // [...this.attendanceGroup.members, ...this.selectedUsers].forEach(item => map.set(item.id, item));
      // const mergedArray = Array.from(map.values());
      // 合并并去重（以id为唯一标识）
      // console.log(this.attendanceGroup.members, this.selectedUsers)
      const mergedArray = [
        ...this.attendanceGroup.members,
        ...this.selectedUsers.filter(item => !this.attendanceGroup.members.some(a1 => a1.userId === item.userId))
      ];
      this.attendanceGroup.members = mergedArray
      this.userSelectionDialogVisible = false;
    },

    // 加载模拟数据
    getList() {
      // 模拟考勤组数据
      // 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: '市场总监' }
      // ];

      queryList(this.queryParams).then((response) => {
        this.attendanceGroups = response.rows
        this.total = response.total
        this.loading = false
        // console.log(this.attendanceGroups)
      })
    },
    
    // 加载打卡区域数据（实际项目中从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 }
      // ];
      queryArea({enabled: true}).then((res) => {
        // console.log(res)
        this.checkInAreas = res
      })
    },
    
    // 重置表单
    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;
    },
    
    

    
    // 保存考勤组
    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('考勤组创建成功');
          }

          add(newGroup).then((res) => {
            // console.log(res)
          })
          
          // 重置表单
          // 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();
      }
    },
    
    // 搜索用户
    searchUsers() {
      // 搜索逻辑已在computed属性中实现
    },
    
    // 处理迟到开关变化
    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分钟');
      }
    },
    
    // 显示成功消息
    showSuccessMessage(message) {
      this.successMessage = message;
      this.successMessageVisible = true;
      
      // 3秒后自动关闭
      setTimeout(() => {
        this.successMessageVisible = false;
      }, 3000);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updatePurpose(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addPurpose(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    
    // 保存区域
    saveArea() {
      if (!this.isFormValid) return;
      
      const newArea = {
        id: this.formData.id || Date.now(), // 如果是新建，使用时间戳作为ID
        name: this.formData.name.trim(),
        lng: parseFloat(this.formData.lng),
        lat: parseFloat(this.formData.lat),
        radius: this.formData.radius,
        enabled: this.formData.enabled
      };
      
      if (this.formData.id) {
        // 更新现有区域
        const index = this.areaList.findIndex(area => area.id === this.formData.id);
        if (index !== -1) {
          this.areaList.splice(index, 1, newArea);
        }
      } else {
        // 添加新区域
        this.areaList.push(newArea);
      }
      addConfig(this.formData).then((res)=>{
        // console.log(this.formData)
        // console.log(res)
        this.open = false;
        this.getList()
      })
      // 重置表单
      this.clearMapSelection();
      
    },

    // 选择考勤组
    selectGroup(id) {
      this.selectedGroupId = id;
      const group = this.attendanceGroups.find(g => g.id === id);
      if (group) {
        // 复制考勤组数据
        this.attendanceGroup = { ...group };
        this.isEditMode = true;
      }
    },
    
    // 切换区域状态
    toggleAreaStatus(area) {
      if (area.enableStatus == '0') {
        // 已启用的区域不允许禁用
        alert('已启用的区域不允许禁用');
        return;
      }
      
      // 启用区域
      const index = this.areaList.findIndex(a => a.id === area.id);
      if (index !== -1) {
        this.areaList[index].enableStatus = '0';
      }

      area.enableStatus = '0'
      updateConfig(area).then((res) => {
        // console.log(res)
      })
    },
    
    // 确认删除区域
    confirmDeleteArea() {
      if (!this.currentDeletingArea) return;
      
      this.areaList = this.areaList.filter(
        area => area.id !== this.currentDeletingArea.id
      );
      
      // console.log(this.currentDeletingArea)
      deleteConfig(this.currentDeletingArea.id).then((res)=> {
        // console.log(res)
      })
      
      this.currentDeletingArea = null;
      this.showDeleteModal = false;
    }
  },
  beforeDestroy() {
    // 销毁地图实例
    if (this.map) {
      this.map.clearOverlays();
      this.map.removeEventListener('click');
      this.map = null;
    }
  }
}
</script>
<style lang="scss" 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%;
  }
}
.warn-result table {
  width: 100% !important;
}
.warn-result table td a {
  display: none;
}
.warn-result table img {
  width: 100% !important;
}
.warn-result-message {
  .warn-result-text {
    font-size: 14px;
    color: #303133;
    a {
      color: #409eff;
      text-decoration: underline;
    }
  }
  .warn-result-tips {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
  }
}
</style>
<style lang="scss" scoped>
.goods--info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  .el-link {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  em {
    font-size: 12px;
    color: #999;
    font-style: normal;
  }
}

.attendance-area-config {
  padding: 20px;
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
}

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

.page-header h1 {
  color: #333;
  margin-bottom: 10px;
}

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

.content-wrapper {
  display: flex;
  gap: 20px;
}

.area-list {
  flex: 1;
  min-width: 400px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.list-header h2 {
  margin: 0;
  color: #333;
}

.btn-add {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-add:hover {
  background-color: #3a8ee6;
}

.area-table {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.area-table table {
  width: 100%;
  border-collapse: collapse;
}

.area-table th,
.area-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.area-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

.area-table tr:last-child td {
  border-bottom: none;
}

.area-table tr:hover {
  background-color: #fafafa;
}

.status-enabled {
  display: inline-block;
  padding: 2px 6px;
  background-color: #e6f7ff;
  color: #1890ff;
  border-radius: 3px;
  font-size: 12px;
}

.status-disabled {
  display: inline-block;
  padding: 2px 6px;
  background-color: #f5f5f5;
  color: #999;
  border-radius: 3px;
  font-size: 12px;
}

.btn-edit,
.btn-status,
.btn-delete {
  padding: 5px 10px;
  margin-right: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 12px;
}

.btn-edit {
  background-color: #e6f7ff;
  color: #1890ff;
}

.btn-edit:hover {
  background-color: #d6efff;
}

.btn-status {
  background-color: #f6ffed;
  color: #52c41a;
}

.btn-status:hover {
  background-color: #e8ffd9;
}

.btn-status:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.btn-delete {
  background-color: #fff2f0;
  color: #ff4d4f;
}

.btn-delete:hover {
  background-color: #ffe5e3;
}

.btn-delete:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: #999;
}

.empty-state i {
  font-size: 40px;
  margin-bottom: 10px;
  display: block;
}

.map-section {
  flex: 1;
}

.map-section h2 {
  margin-top: 0;
  color: #333;
}

.map-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 220px;
}

.control-group label {
  font-weight: bold;
  min-width: 80px;
}

.control-group input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.radius-slider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.radius-slider input[type="range"] {
  flex: 1;
}

.map {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
}

.map-actions {
  display: flex;
  gap: 10px;
}

.btn-clear,
.btn-save {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-clear {
  background-color: #f5f5f5;
  color: #666;
}

.btn-clear:hover {
  background-color: #eee;
}

.btn-save {
  background-color: #409eff;
  color: white;
}

.btn-save:hover {
  background-color: #3a8ee6;
}

.btn-save:disabled {
  background-color: #e6e6e6;
  color: #999;
  cursor: not-allowed;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  width: 300px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.modal-content h3 {
  margin-top: 0;
  color: #333;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.btn-cancel,
.btn-confirm {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-cancel {
  background-color: #f5f5f5;
  color: #666;
}

.btn-cancel:hover {
  background-color: #eee;
}

.btn-confirm {
  background-color: #409eff;
  color: white;
}

.btn-confirm:hover {
  background-color: #3a8ee6;
}

/* 响应式设计 */
@media (max-width: 900px) {
  .content-wrapper {
    flex-direction: column;
  }
  
  .area-list,
  .map-section {
    min-width: auto;
  }
}

@media (max-width: 500px) {
  .control-group {
    min-width: 100%;
  }
  
  .area-table th,
  .area-table td {
    padding: 8px 5px;
    font-size: 14px;
  }
  
  .btn-edit,
  .btn-status,
  .btn-delete {
    padding: 4px 6px;
    margin-right: 2px;
  }
}
</style>
