import React, { PureComponent } from 'react';
import { Button, Card, Row, Col, Input, Select, Space, Tag, Divider } from 'antd';
import { SearchOutlined, FilterOutlined, ExportOutlined, LocateOutlined, UserOutlined, ClockCircleOutlined, EnvironmentOutlined }
  from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './PersonnelLocation.less';
import datadictionary from "@/utils/dataDictionary";
import gisTemp from '@/assets/img/gisTemp.svg';

const { Option } = Select;
const { Search } = Input;

// 模拟数据
const mockLocationData = {
  list: [
    {
      id: '001',
      name: '张三',
      empId: '10001',
      position: '管理人员',
      department: '安全部',
      location: 'A区安控室',
      time: '2025-09-03 21:32',
      status: '正常'
    },
    {
      id: '002',
      name: '李四',
      empId: '10002',
      position: '管理人员',
      department: '设备部',
      location: 'A区发电室',
      time: '2025-09-03 21:30',
      status: '预警'
    },
    {
      id: '003',
      name: '王五',
      empId: '10003',
      position: '管理人员',
      department: '设备部',
      location: 'A区发电室',
      time: '2025-09-03 21:29',
      status: '预警'
    },
    {
      id: '004',
      name: '赵六',
      empId: '10004',
      position: '管理人员',
      department: '设备部',
      location: 'A区发电室',
      time: '2025-09-03 21:28',
      status: '告警'
    },
    {
      id: '005',
      name: '孙七',
      empId: '10005',
      position: '管理人员',
      department: '设备部',
      location: 'A区发电室',
      time: '2025-09-03 21:27',
      status: '正常'
    },
  ],
  pagination: {
    total: 120,
    current: 1,
    pageSize: 5,
  },
};

// 历史轨迹数据
const historyTrailData = [
  {
    title: '进入危险区域管理',
    time: '2025-09-03 20:30',
    location: 'A区发电室'
  },
  {
    title: '长时间停留',
    time: '2025-09-03 20:15',
    location: 'A区发电室'
  },
  {
    title: '异常行为',
    time: '2025-09-03 19:45',
    location: 'A区发电室'
  },
  {
    title: '工作开始',
    time: '2025-09-03 08:00',
    location: 'A区发电室'
  },
];

// 人员警告信息数据
const personnelWarningData = [
  {
    title: '电池低电量',
    time: '2025-09-03 21:35',
    location: 'A区发电室',
    level: 'warning'
  },
  {
    title: '信号丢失',
    time: '2025-09-03 21:30',
    location: 'B区地下室',
    level: 'error'
  },
  {
    title: '超过活动范围',
    time: '2025-09-03 21:25',
    location: 'C区仓库',
    level: 'warning'
  },
  {
    title: '静止时间过长',
    time: '2025-09-03 21:20',
    location: 'D区会议室',
    level: 'warning'
  },
];

class PersonnelLocation extends PureComponent {
  state = {
    selectedRows: [],
    formValues: {},
    selectedPerson: null,
  };

  // 表格列定义
  columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      width: 100,
      render: (text) => (
        <span style={{ fontSize: '12px' }}>{text}</span>
      ),
    },
    {
      title: '工号',
      dataIndex: 'empId',
      key: 'empId',
      width: 100,
      render: (text) => (
        <span style={{ fontSize: '12px' }}>{text}</span>
      ),
    },
    {
      title: '岗位',
      dataIndex: 'position',
      key: 'position',
      width: 120,
      render: (text) => (
        <span style={{ fontSize: '12px' }}>{text}</span>
      ),
    },
    {
      title: '所属部门',
      dataIndex: 'department',
      key: 'department',
      width: 120,
      render: (text) => (
        <span style={{ fontSize: '12px' }}>{text}</span>
      ),
    },
    {
      title: '当前位置',
      dataIndex: 'location',
      key: 'location',
      width: 150,
      render: (text) => (
        <span style={{ fontSize: '12px' }}>{text}</span>
      ),
    },
    {
      title: '时间',
      dataIndex: 'time',
      key: 'time',
      width: 150,
      render: (text) => (
        <span style={{ fontSize: '12px' }}>{text}</span>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 80,
      render: (text) => {
        if (text === '正常') {
          return <Tag className={styles['status-tag'] + ' ' + styles['status-normal']}>{text}</Tag>;
        } else if (text === '预警') {
          return <Tag className={styles['status-tag'] + ' ' + styles['status-warning']}>{text}</Tag>;
        } else {
          return <Tag className={styles['status-tag'] + ' ' + styles['status-error']}>{text}</Tag>;
        }
      },
    },
    {
      title: '操作',
      key: 'action',
      width: 80,
      fixed: 'right',
      render: (_, record) => (
        <a
          style={{
            color: 'rgba(36, 114, 214, 1)',
            fontSize: '12px'
          }}
          onClick={() => this.handleLocate(record)}
        >
          定位
        </a>
      ),
    },
  ];

  // 获取地图配置选项
  getMapChartOption = () => {
    return {
      tooltip: {
        trigger: 'item',
        formatter: '{b}'
      },
      series: [
        {
          name: '人员分布',
          type: 'scatter',
          coordinateSystem: 'geo',
          symbolSize: 20,
          data: [
            { name: '张三', value: [116.404, 39.915], itemStyle: { color: '#52C41A' } },
            { name: '李四', value: [116.414, 39.925], itemStyle: { color: '#FAAD14' } },
            { name: '王五', value: [116.424, 39.935], itemStyle: { color: '#FAAD14' } },
            { name: '赵六', value: [116.434, 39.945], itemStyle: { color: '#FF4D4F' } },
            { name: '孙七', value: [116.444, 39.955], itemStyle: { color: '#52C41A' } },
          ],
          emphasis: {
            focus: 'series',
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2
            }
          }
        }
      ],
      geo: {
        map: 'beijing',
        label: {
          show: true
        },
        roam: true,
        itemStyle: {
          areaColor: '#f0f2f5',
          borderColor: '#999'
        },
        emphasis: {
          itemStyle: {
            areaColor: '#e6f7ff'
          }
        }
      }
    };
  };

  // 处理表格变化
  handleTableChange = (pagination, sorter) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;

    const params = {
      currentPage: pagination.current,
      pageSize: pagination.pageSize,
      ...formValues
    };

    sorter.field && (params.sorter = `${sorter.field}_${sorter.order}`);
  };

  // 处理行选择
  handleSelectRows = rows => {
    this.setState({
      selectedRows: rows
    });
  };

  // 处理搜索
  handleSearch = values => {
    this.setState({
      formValues: values
    });
  };

  // 处理定位
  handleLocate = (record) => {
    this.setState({
      selectedPerson: record
    });
    // 这里可以添加地图定位的逻辑
    console.log('定位人员:', record);
  };

  render() {
    const {
      selectedRows,
      selectedPerson
    } = this.state;

    return (
      <Card bordered={false} className={styles['card-container']}>
        {/* 主要内容区域 - 地图、历史轨迹和人员警告在同一行 */}
        <Row gutter={16} style={{ marginBottom: 15 }}>
          {/* 左侧：地图显示（占一半宽度） */}
          <Col span={12}>
            <Card title="人员定位管理" className={styles['map-card']}>
              <div className={styles['map-container']}>
                {/* 由于缺少实际地图组件，这里使用模拟的地图容器 */}
                <div className={styles['mock-map']}>
                  <div className={styles['map-legend']}>
                    <div className={styles['legend-item']}>
                      <div className={styles['legend-dot']} style={{ backgroundColor: '#52C41A' }}></div>
                      <span>正常 (45)</span>
                    </div>
                    <div className={styles['legend-item']}>
                      <div className={styles['legend-dot']} style={{ backgroundColor: '#FAAD14' }}></div>
                      <span>预警 (32)</span>
                    </div>
                    <div className={styles['legend-item']}>
                      <div className={styles['legend-dot']} style={{ backgroundColor: '#FF4D4F' }}></div>
                      <span>告警 (12)</span>
                    </div>
                  </div>
                  <div className={styles['map-content']}>
                    <img
                      src={gisTemp}
                      alt="GIS地图"
                      className={styles['map-image']}
                    />
                    {/* 地图上的标记点 */}
                    <div className={styles['map-marker']} style={{ top: '15%', left: '25%', backgroundColor: '#52C41A' }}>
                      <span className={styles['marker-tooltip']}>张三 - A区安控室</span>
                    </div>
                    <div className={styles['map-marker']} style={{ top: '30%', left: '40%', backgroundColor: '#FAAD14' }}>
                      <span className={styles['marker-tooltip']}>李四 - A区发电室</span>
                    </div>
                    <div className={styles['map-marker']} style={{ top: '45%', left: '55%', backgroundColor: '#FAAD14' }}>
                      <span className={styles['marker-tooltip']}>王五 - A区发电室</span>
                    </div>
                    <div className={styles['map-marker']} style={{ top: '60%', left: '70%', backgroundColor: '#FF4D4F' }}>
                      <span className={styles['marker-tooltip']}>赵六 - A区发电室</span>
                    </div>
                    <div className={styles['map-marker']} style={{ top: '75%', left: '85%', backgroundColor: '#52C41A' }}>
                      <span className={styles['marker-tooltip']}>孙七 - A区发电室</span>
                    </div>
                  </div>
                </div>
              </div>
              {/* 筛选栏 - 移至地图卡片内部 */}
              <Divider style={{ margin: '16px 0' }} />
              <div className={styles['table-toolbar-container']}>
                <Row justify="space-between" align="middle">
                  <Col>
                    <Space>
                      <Search
                        placeholder="搜索姓名、工号..."
                        className={styles['search-input']}
                        onSearch={this.handleSearch}
                      />
                      <span style={{ marginLeft: 20 }}>安全区域</span>
                      <Select
                        placeholder="请选择"
                        className={styles['filter-select']}
                        defaultValue="all"
                      >
                        <Option value="all">全部区域</Option>
                        <Option value="high">高风险</Option>
                        <Option value="medium">中风险</Option>
                        <Option value="low">低风险</Option>
                      </Select>
                      <span style={{ marginLeft: 20 }}>人员类型</span>
                      <Select
                        placeholder="请选择"
                        className={styles['filter-select']}
                        defaultValue="all"
                      >
                        <Option value="all">全部人员</Option>
                        <Option value="safety">安全人员</Option>
                        <Option value="manager">管理人员</Option>
                        <Option value="operator">操作维护人员</Option>
                        <Option value="other">其他人员</Option>
                      </Select>
                    </Space>
                  </Col>
                  <Col>
                    <Space>
                      <Button
                        icon={<FilterOutlined />}
                        className={styles['button-style']}
                      >
                        筛选
                      </Button>
                      <Button
                        icon={<ExportOutlined />}
                        className={styles['button-style']}
                      >
                        导出
                      </Button>
                    </Space>
                  </Col>
                </Row>
              </div>
            </Card>
          </Col>

          {/* 中间：历史轨迹（占四分之一宽度） */}
          <Col span={6}>
            <Card title="历史轨迹追踪" className={styles['trail-card']}>
              <div className={styles['trail-list']}>
                {historyTrailData.map((item, index) => (
                  <div key={index} className={styles['trail-item']}>
                    <div className={styles['trail-icon']}>
                      <ClockCircleOutlined />
                    </div>
                    <div className={styles['trail-content']}>
                      <div className={styles['trail-title']}>{item.title}</div>
                      <div className={styles['trail-info']}>
                        <span>{item.time}</span>
                        <span>{item.location}</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </Card>
          </Col>

          {/* 右侧：人员警告信息（占四分之一宽度） */}
          <Col span={6}>
            <Card title="人员警告信息" className={styles['warning-card']}>
              <div className={styles['warning-list']}>
                {personnelWarningData.map((item, index) => (
                  <div key={index} className={styles['warning-item'] + ' ' + styles[`warning-${item.level}`]}>
                    <div className={styles['warning-icon']}>
                      {item.level === 'error' ? <Tag color="error">严重</Tag> : <Tag color="warning">警告</Tag>}
                    </div>
                    <div className={styles['warning-content']}>
                      <div className={styles['warning-title']}>{item.title}</div>
                      <div className={styles['warning-info']}>
                        <span>{item.time}</span>
                        <span>{item.location}</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </Card>
          </Col>
        </Row>

        {/* 底部表格区域 */}
        <div className={styles['table-container']}>
          <Card title="人员实时位置信息" className={styles['location-table-card']}>
            <StandardTable
              rowKey={'id'}
              selectedRows={selectedRows}
              loading={false}
              data={mockLocationData}
              columns={this.columns}
              onSelectRow={this.handleSelectRows}
              onChange={this.handleTableChange}
              scroll={{ x: 1200 }}
              showTotal={(total, range) => `共 ${total} 条`}
            />
          </Card>
        </div>
      </Card>
    );
  }
}

export default PersonnelLocation;