import React, { PureComponent } from 'react';
import { Card, Input, Button, Table, DatePicker, Tag, Avatar, Row, Col, Statistic, Progress } from 'antd';
import { SearchOutlined, SyncOutlined, ExclamationCircleOutlined, EditOutlined, ExportOutlined, LineChartOutlined, CalendarOutlined, CalculatorOutlined, DownloadOutlined, PieChartOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';
import styles from './Attendancedetails.less';

const { RangePicker } = DatePicker;

class Attendancedetails extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      employeeId: '',
      employeeName: '',
      dateRange: null,
      attendanceData: [],
      loading: false,
    };
  }

  componentDidMount() {
    this.initAttendanceChart();
  }

  // 初始化考勤分析图表
  initAttendanceChart = () => {
    const chartDom = document.getElementById('attendanceChart');
    if (chartDom) {
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['正常出勤', '迟到', '早退', '缺勤']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '正常出勤',
            type: 'line',
            stack: 'Total',
            data: [9, 9, 8.5, 9, 9.5, 9, 8.8, 9.2, 9, 9.3]
          },
          {
            name: '迟到',
            type: 'line',
            stack: 'Total',
            data: [0, 0, 0.5, 0, 0, 0, 0.2, 0, 0, 0]
          },
          {
            name: '早退',
            type: 'line',
            stack: 'Total',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '缺勤',
            type: 'line',
            stack: 'Total',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      };
      myChart.setOption(option);
    }
  };

  // 查询考勤数据
  handleSearch = () => {
    this.setState({ loading: true });
    // 模拟API调用
    setTimeout(() => {
      this.setState({ loading: false });
    }, 1000);
  };

  // 表格列定义
  getTableColumns = () => [
    {
      title: '日期',
      dataIndex: 'date',
      key: 'date',
      width: 120,
    },
    {
      title: '考勤地点',
      dataIndex: 'location',
      key: 'location',
      width: 150,
    },
    {
      title: '考勤状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status) => {
        const statusConfig = {
          normal: { color: 'success', text: '正常' },
          late: { color: 'error', text: '迟到' },
          early: { color: 'warning', text: '早退' },
          remote: { color: 'processing', text: '远程' },
        };
        const config = statusConfig[status] || statusConfig.normal;
        return <Tag color={config.color}>{config.text}</Tag>;
      },
    },
    {
      title: '上班时间',
      dataIndex: 'checkInTime',
      key: 'checkInTime',
      width: 120,
    },
    {
      title: '下班时间',
      dataIndex: 'checkOutTime',
      key: 'checkOutTime',
      width: 120,
    },
    {
      title: '工作时长',
      dataIndex: 'workHours',
      key: 'workHours',
      width: 120,
    },
    {
      title: '操作',
      key: 'action',
      width: 80,
      render: (_, record) => (
        <Button type="link" size="small">
          详情
        </Button>
      ),
    },
  ];

  // 模拟表格数据
  getTableData = () => [
    {
      key: '1',
      date: '2023-11-01',
      location: '总部大楼-3F',
      status: 'normal',
      checkInTime: '08:56',
      checkOutTime: '18:30',
      workHours: '9小时34分钟',
    },
    {
      key: '2',
      date: '2023-10-31',
      location: '总部大楼-3F',
      status: 'normal',
      checkInTime: '09:02',
      checkOutTime: '18:45',
      workHours: '9小时43分钟',
    },
    {
      key: '3',
      date: '2023-10-30',
      location: '远程办公',
      status: 'remote',
      checkInTime: '09:15',
      checkOutTime: '18:50',
      workHours: '9小时35分钟',
    },
    {
      key: '4',
      date: '2023-10-27',
      location: '总部大楼-3F',
      status: 'late',
      checkInTime: '09:35',
      checkOutTime: '18:20',
      workHours: '8小时45分钟',
    },
    {
      key: '5',
      date: '2023-10-26',
      location: '总部大楼-3F',
      status: 'normal',
      checkInTime: '08:50',
      checkOutTime: '18:10',
      workHours: '9小时20分钟',
    },
  ];

  render() {
    const { employeeId, employeeName, dateRange, loading } = this.state;

    return (
      <div className={styles['attendance-details-page']}>
        {/* 查询条件 */}
        <Card className={styles['search-section']}>
          <Row gutter={16} align="bottom">
            <Col xs={24} sm={12} md={6}>
              <div className={styles['form-item']}>
                <label className={styles['form-label']}>员工 ID</label>
                <Input
                  placeholder="请输入员工ID"
                  value={employeeId}
                  onChange={(e) => this.setState({ employeeId: e.target.value })}
                />
              </div>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <div className={styles['form-item']}>
                <label className={styles['form-label']}>员工姓名</label>
                <Input
                  placeholder="请输入员工姓名"
                  value={employeeName}
                  onChange={(e) => this.setState({ employeeName: e.target.value })}
                />
              </div>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <div className={styles['form-item']}>
                <label className={styles['form-label']}>日期范围</label>
                <RangePicker
                  style={{ width: '100%' }}
                  placeholder={['开始日期', '结束日期']}
                  value={dateRange}
                  onChange={(dates) => this.setState({ dateRange: dates })}
                />
              </div>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <div className={styles['form-item']}>
                <label className={styles['form-label']} style={{ visibility: 'hidden' }}>占位</label>
                <Button
                  type="primary"
                  icon={<SearchOutlined />}
                  onClick={this.handleSearch}
                  loading={loading}
                  block
                >
                  查询
                </Button>
              </div>
            </Col>
          </Row>
        </Card>

        {/* 第一行卡片组 */}
        <Row gutter={[16, 16]} className={styles['cards-row']}>
          {/* 员工基本信息卡片 */}
          <Col xs={24} md={8}>
            <Card className={styles['info-card']} hoverable>
              <div className={styles['employee-info']}>
                <Avatar size={64} src="https://mastergo.com/ai/api/search-image?query=professional20asian20business20woman20portrait20with20white20background20modern20office20attire20high20quality20detailed20facial20features20corporate20identity20isolated20on20solid20color20background&width=80&height=80&orientation=squarish&flag=be98d141ba2245f194713abc5bba69dc" />
                <div className={styles['employee-details']}>
                  <h3>张雨晴</h3>
                  <p>ID: E10086</p>
                </div>
              </div>
              <div className={styles['employee-meta']}>
                <div className={styles['meta-item']}>
                  <span className={styles['meta-label']}>部门:</span>
                  <span>产品研发中心</span>
                </div>
                <div className={styles['meta-item']}>
                  <span className={styles['meta-label']}>岗位:</span>
                  <span>高级产品经理</span>
                </div>
                <div className={styles['meta-item']}>
                  <span className={styles['meta-label']}>职级:</span>
                  <span>P7</span>
                </div>
                <div className={styles['meta-item']}>
                  <span className={styles['meta-label']}>入职日期:</span>
                  <span>2019-05-15</span>
                </div>
              </div>
            </Card>
          </Col>

          {/* 考勤状态卡片 */}
          <Col xs={24} md={8}>
            <Card title="今日考勤状态" className={styles['status-card']} hoverable>
              <div className={styles['status-info']}>
                <div className={styles['status-badge']}>
                  <div className={styles['status-dot']}></div>
                  <span>正常出勤</span>
                </div>
                <div className={styles['status-details']}>
                  <p>上班打卡: 08:58 (准时)</p>
                  <p>下班打卡: 18:32 (准时)</p>
                  <p>工作时长: 9小时34分钟</p>
                  <p>本月累计出勤: 18天</p>
                </div>
              </div>
            </Card>
          </Col>

          {/* 操作按钮卡片 */}
          <Col xs={24} md={8}>
            <Card title="快捷操作" className={styles['action-card']} hoverable>
              <div className={styles['action-buttons']}>
                <Row gutter={[8, 20]}>
                  <Col span={12}>
                    <Button block icon={<SyncOutlined />}>重新同步</Button>
                  </Col>
                  <Col span={12}>
                    <Button block icon={<ExclamationCircleOutlined />}>异常提报</Button>
                  </Col>
                  <Col span={12}>
                    <Button block icon={<EditOutlined />}>修改记录</Button>
                  </Col>
                  <Col span={12}>
                    <Button block icon={<ExportOutlined />}>导出数据</Button>
                  </Col>
                  <Col span={24}>
                    <Button type="primary" block icon={<LineChartOutlined />}>
                      查看考勤分析
                    </Button>
                  </Col>
                </Row>
              </div>
            </Card>
          </Col>
        </Row>

        {/* 考勤数据表格 */}
        <Card className={styles['table-section']}>
          <Table
            columns={this.getTableColumns()}
            dataSource={this.getTableData()}
            pagination={{
              showSizeChanger: true,
              showQuickJumper: true,
              showTotal: (total, range) => `显示 ${range[0]}-${range[1]} 条，共 ${total} 条记录`,
            }}
            scroll={{ x: 800 }}
          />
        </Card>

        {/* 第二行卡片组 */}
        <Row gutter={[16, 16]} className={styles['cards-row']}>
          {/* 排班数据卡片 */}
          <Col xs={24} md={8}>
            <Card title="当前排班" className={styles['schedule-card']} hoverable>
              <div className={styles['schedule-info']}>
                <div className={styles['schedule-item']}>
                  <span>排班名称:</span>
                  <span>标准工作日</span>
                </div>
                <div className={styles['schedule-item']}>
                  <span>上班时间:</span>
                  <span>09:00</span>
                </div>
                <div className={styles['schedule-item']}>
                  <span>下班时间:</span>
                  <span>18:00</span>
                </div>
                <div className={styles['schedule-item']}>
                  <span>午休时间:</span>
                  <span>12:00-13:30</span>
                </div>
                <div className={styles['schedule-item']}>
                  <span>适用日期:</span>
                  <span>周一至周五</span>
                </div>
                <Button block icon={<CalendarOutlined />} className={styles['schedule-button']}>
                  查看排班历史
                </Button>
              </div>
            </Card>
          </Col>

          {/* 考勤明细卡片 */}
          <Col xs={24} md={8}>
            <Card title="本月考勤统计" className={styles['statistics-card']} hoverable>
              <div className={styles['statistics-info']}>
                <div className={styles['stat-item']}>
                  <span>应出勤天数:</span>
                  <span>22天</span>
                </div>
                <div className={styles['stat-item']}>
                  <span>实际出勤天数:</span>
                  <span>18天</span>
                </div>
                <div className={styles['stat-item']}>
                  <span>迟到次数:</span>
                  <span>1次</span>
                </div>
                <div className={styles['stat-item']}>
                  <span>早退次数:</span>
                  <span>0次</span>
                </div>
                <div className={styles['stat-item']}>
                  <span>缺卡次数:</span>
                  <span>0次</span>
                </div>
                <Button block icon={<PieChartOutlined />} className={styles['stat-button']}>
                  查看详细统计
                </Button>
              </div>
            </Card>
          </Col>

          {/* 同步信息卡片 */}
          <Col xs={24} md={8}>
            <Card title="数据同步信息" className={styles['sync-card']} hoverable>
              <div className={styles['sync-info']}>
                <div className={styles['sync-item']}>
                  <span>最后同步时间:</span>
                  <span>2023-11-01 23:45:12</span>
                </div>
                <div className={styles['sync-item']}>
                  <span>同步状态:</span>
                  <span className={styles['success-text']}>成功</span>
                </div>
                <div className={styles['sync-item']}>
                  <span>最后计算时间:</span>
                  <span>2023-11-02 00:15:30</span>
                </div>
                <div className={styles['sync-item']}>
                  <span>计算状态:</span>
                  <span className={styles['success-text']}>成功</span>
                </div>
                <div className={styles['sync-buttons']}>
                  <Row gutter={8}>
                    <Col span={12}>
                      <Button block icon={<SyncOutlined />}>立即同步</Button>
                    </Col>
                    <Col span={12}>
                      <Button type="primary" block icon={<CalculatorOutlined />}>
                        重新计算
                      </Button>
                    </Col>
                  </Row>
                </div>
              </div>
            </Card>
          </Col>
        </Row>

        {/* 考勤分析图表 */}
        <Card className={styles['chart-section']}>
          <div className={styles['chart-header']}>
            <h3>月度考勤分析</h3>
            <div className={styles['chart-actions']}>
              <Button icon={<CalendarOutlined />}>选择月份</Button>
              <Button type="primary" icon={<DownloadOutlined />}>导出图表</Button>
            </div>
          </div>
          <div id="attendanceChart" className={styles['chart-container']}></div>
        </Card>
      </div>
    );
  }
}

export default Attendancedetails;