import { Row, Form, Col, Select, Button } from 'antd';
import Title from '../homepage/compontent/title'
import TableWidthPagination from '../../components/assetmangement/table'
import styles from './DeviceMap.less'

// 设备列表列配置
const tableColumns = [
  {
    title: '设备名称',
    dataIndex: 'deviceName',
  },
  {
    title: '类型',
    dataIndex: 'type',
  },
  {
    title: '状态',
    dataIndex: 'status',
    render: (text) => {
      let color = '#52c41a'; // 默认在线绿色
      if (text === '离线') color = '#d9d9d9';
      if (text === '故障') color = '#ff4d4f';
      return <span style={{ color }}>{text}</span>;
    },
  },
  {
    title: '位置',
    dataIndex: 'location',
  },
  {
    title: '最后更新时间',
    dataIndex: 'lastUpdateTime',
  },
];

// 标注管理列配置
const annotationColumns = [
  {
    title: '设备名称',
    dataIndex: 'deviceName',
  },
  {
    title: '标注内容',
    dataIndex: 'annotationContent',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '创建人',
    dataIndex: 'creator',
  },
  {
    title: '操作',
    dataIndex: 'action',
    render: () => (
      <div>
        <a style={{ marginRight: 16 ,color:'#2C9E9D'}}>编辑</a>
        <a style={{ color: '#ff4d4f' }}>删除</a>
      </div>
    ),
  },
];

// 标注管理数据源
const annotationData = [
  {
    id: 1,
    deviceName: '园区传感器A',
    annotationContent: '该设备为新能源监控设备',
    createTime: '2025-10-28',
    creator: '周国华',
  },
  {
    id: 2,
    deviceName: '车间网关B',
    annotationContent: '离线路由器为光兆接入',
    createTime: '2025-10-30',
    creator: '冯海',
  },
  {
    id: 3,
    deviceName: '路口摄像头C',
    annotationContent: '镜头被遮挡，已申请更换',
    createTime: '2025-10-30',
    creator: '郑雅',
  },
];

// 设备列表数据源
const tableData = [
  {
    id: 1,
    deviceName: '园区传感器A',
    type: '传感器',
    status: '在线',
    location: '园区A-东门',
    lastUpdateTime: '2025-10-30 10:00'
  },
  {
    id: 2,
    deviceName: '车间网关B',
    type: '网关',
    status: '离线',
    location: '车间B-2层',
    lastUpdateTime: '2025-10-30 09:30'
  },
  {
    id: 3,
    deviceName: '路口摄像头C',
    type: '摄像头',
    status: '故障',
    location: '故障区-南口',
    lastUpdateTime: '2025-10-30 08:45'
  },
  {
    id: 4,
    deviceName: '温度传感器D',
    type: '传感器',
    status: '在线',
    location: '试验室-北区',
    lastUpdateTime: '2025-10-30 10:15'
  },
  {
    id: 5,
    deviceName: '仓库执行器E',
    type: '执行器',
    status: '在线',
    location: '仓库-西区',
    lastUpdateTime: '2025-10-30 09:50'
  },
  {
    id: 6,
    deviceName: '办公楼网关F',
    type: '网关',
    status: '在线',
    location: '办公楼-5层',
    lastUpdateTime: '2025-10-30 10:05'
  }
];

const DeviceMap = () => {
  return (
    <div style={{ padding: '20px' }}>
      <div>
        <Title title="筛选条件" />
      </div>
      <Row style={{ marginTop: '20px', paddingBottom: 20, borderBottom: '1px solid #eeeeee' }}>
        <Col span={12}>
          <Form layout={'inline'}>
            <Row gutter={[16, 16]} justify="space-between" style={{ width: '100%' }}>
              <Form.Item label="设备状态" name="deviceStatus">
                <Select defaultValue="全部" style={{ width: 128 }} />
              </Form.Item>
              <Form.Item label="设备类型" name="deviceType">
                <Select defaultValue="全部" style={{ width: 128 }} />
              </Form.Item>
              <Form.Item label="区域范围" name="regionRange">
                <Select placeholder="全部" style={{ width: 128 }} />
              </Form.Item>
            </Row>
          </Form>
        </Col>
        <Col span={12} style={{ textAlign: 'right' }}>
          <Button className={styles['search-button']} >标注管理</Button>
          <Button className={styles['search-button']} style={{ marginLeft: 30 }}>导出地图</Button>
          <Button className={styles['reset-button']} style={{ marginLeft: 30 }}>刷新地图</Button>
        </Col>
      </Row>
      <Row gutter={16} style={{ marginTop: '20px', marginBottom: 50 }}>
        <Col span={15}>
          <div className={styles.mapContainer}></div>
        </Col>
        <Col span={9}>
          <Title title="设备列表" />
          <Row style={{marginTop:20,marginBottom:20}}>
            <TableWidthPagination
              rowKey="id"
              columns={tableColumns}
              dataSource={tableData}
              pagination={{
                pageSize: 10,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (total) => `共 ${total} 条`,
              }}
              style={{ marginTop: 20 }}
              isPagination={false}
            />
          </Row>
          <Title title="标注管理" />
          <Row style={{marginTop:20}}>
            <TableWidthPagination
              rowKey="id"
              columns={annotationColumns}
              dataSource={annotationData}
              pagination={{
                pageSize: 10,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (total) => `共 ${total} 条`,
              }}
              style={{ marginTop: 20 }}
              isPagination={false}
            />
          </Row>
        </Col>
      </Row>
    </div>
  )
}
export default DeviceMap