import React, { useState, useEffect } from 'react';
import { deviceApi } from '../api/deviceApi';

const AttendanceSystem = () => {
  const [deviceInfo, setDeviceInfo] = useState(null);
  const [attendanceRecords, setAttendanceRecords] = useState([]);

  useEffect(() => {
    fetchDeviceInfo();
    fetchAttendanceRecords();
  }, []);

  const fetchDeviceInfo = async () => {
    try {
      const info = await deviceApi.getDeviceInfo();
      setDeviceInfo(info);
    } catch (error) {
      console.error('获取设备信息失败', error);
    }
  };

  const fetchAttendanceRecords = async () => {
    try {
      const endTime = new Date().toISOString();
      const startTime = new Date(new Date().setDate(new Date().getDate() - 7)).toISOString();
      const records = await deviceApi.getAttendanceRecords(startTime, endTime);
      setAttendanceRecords(records);
    } catch (error) {
      console.error('获取考勤记录失败', error);
    }
  };

  return (
    <div>
      <h2>考勤系统</h2>
      {deviceInfo && (
        <div>
          <h3>设备信息</h3>
          <p>设备ID: {deviceInfo.deviceId}</p>
          <p>设备名称: {deviceInfo.deviceName}</p>
        </div>
      )}
      <h3>考勤记录</h3>
      <ul>
        {attendanceRecords.map((record, index) => (
          <li key={index}>
            人员ID: {record.personId}, 打卡时间: {record.timestamp}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AttendanceSystem;