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

// 实时告警列表列配置
const alertColumns = [
  {
    title: '告警时间',
    dataIndex: 'alertTime',
  },
  {
    title: '摄像头名称',
    dataIndex: 'cameraName',
  },
  {
    title: '告警类型',
    dataIndex: 'alertType',
  },
  {
    title: '状态',
    dataIndex: 'status',
    render: (text) => {
      let color = text === '未处理' ? '#ff4d4f' : '#52c41a';
      return <span style={{ color }}>{text}</span>;
    },
  },
  {
    title: '操作',
    dataIndex: 'action',
    render: () => (
      <div>
        <a style={{ marginRight: 16, color: '#2C9E9D' }}>查看详情</a>
        <a style={{ color: '#ff4d4f' }}>忽略</a>
      </div>
    ),
  },
];

// 存储列表列配置
const storageColumns = [
  {
    title: '录像时间',
    dataIndex: 'recordTime',
  },
  {
    title: '摄像头名称',
    dataIndex: 'cameraName',
  },
  {
    title: '时长',
    dataIndex: 'duration',
  },
  {
    title: '分辨率存储状态',
    dataIndex: 'storageStatus',
  },
  {
    title: '操作',
    dataIndex: 'action',
    render: () => (
      <div>
        <a style={{ marginRight: 16, color: '#2C9E9D' }}>回放</a>
        <a style={{ marginRight: 16, color: '#2C9E9D' }}>下载</a>
        <a style={{ color: '#ff4d4f' }}>删除</a>
      </div>
    ),
  },
];

// 实时告警列表数据源
const alertData = [
  {
    id: 1,
    alertTime: '10:05:20',
    cameraName: '园区东门摄像头',
    alertType: '人员闯入',
    status: '未处理',
  },
  {
    id: 2,
    alertTime: '09:30:15',
    cameraName: '车间A-2层摄像头',
    alertType: '设备异常(烟雾)',
    status: '已处理',
  },
  {
    id: 3,
    alertTime: '08:45:30',
    cameraName: '仓库西区摄像头',
    alertType: '物体移动',
    status: '未处理',
  },
];

// 存储列表数据源
const storageData = [
  {
    id: 1,
    recordTime: '10:00-11:00',
    cameraName: '园区东门摄像头',
    duration: '60分钟',
    storageStatus: '1080P已存储',
  },
  {
    id: 2,
    recordTime: '09:00-10:00',
    cameraName: '车间A-2层摄像头',
    duration: '60分钟',
    storageStatus: '720P已存储',
  },
  {
    id: 3,
    recordTime: '08:00-09:00',
    cameraName: '仓库西区摄像头',
    duration: '60分钟',
    storageStatus: '已存储',
  },
];
const VideoConfig=()=>{
    return(
      <Row  style={{height:'48px',width:'100%',color:'#fff',position:'absolute',bottom:0,right:0,textAlign:'center',lineHeight:'48px',backgroundColor:' #00000080'}}>
          <Col span={3}>
            1080p
          </Col>
          <Col span={9}>
            <div style={{ display:'flex',gap:'20px',alignItems:'center',justifyContent:'center',height:'100%'}}>
                <img src={require('@/assets/img/video6.png')} alt="切换" />  
                <img src={require('@/assets/img/video7.png')} alt="切换" />  
                <img src={require('@/assets/img/video8.png')} alt="切换" />  
            </div> 
          </Col>
          <Col span={9}>
            <div className={styles['speed-select']}>
              <div>倍速</div>
              <span>0.5</span>  
              <span>1</span>  
              <span>1.5</span>  
              <span>2</span>  
            </div>
          </Col>
          <Col span={3}>
             <img src={require('@/assets/img/video5.png')} alt="全屏" />
          </Col>
      </Row>
    )
}

const Video = () => {
  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>
              <Form.Item label="AI分析" name="regionRange">
                 <Switch defaultChecked  />
              </Form.Item>
            </Row>
          </Form>
        </Col>
        <Col span={12} style={{ textAlign: 'right' }}>
       
          <Button className={styles['reset-button']} style={{ marginLeft: 30 }}>1分屏</Button>
          <Button className={styles['reset-button']} style={{ marginLeft: 30 }}>4分屏</Button>
          <Button className={styles['reset-button']} style={{ marginLeft: 30 }}>9分屏</Button>
          <Button className={styles['search-button']} style={{ marginLeft: 30 }}>存储策略</Button>
        </Col>
      </Row>
      <Row gutter={16} style={{ marginTop: '20px', marginBottom: 50 }} className={styles.videoRow}>
        <Col span={15}>
          <Row gutter={[8,8]} style={{height:'100%'}}>
            <Col span={12}>
              <div className={styles.videoContainer}>
                <VideoConfig/>
              </div>
            </Col>
            <Col span={12}>
              <div className={styles.videoContainer}>
                <VideoConfig/>
              </div>
            </Col>
            <Col span={12}>
              <div className={styles.videoContainer}>
                <VideoConfig/>
              </div>
            </Col>
            <Col span={12}>
              <div className={styles.videoContainer}>
                <VideoConfig/>
              </div>
            </Col>
          </Row>
        </Col>
        <Col span={9}>
          <Title title="实时告警列表" />
          <Row style={{marginTop:20,marginBottom:20}}>
            <TableWidthPagination
              rowKey="id"
              columns={alertColumns}
              dataSource={alertData}
              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={storageColumns}
              dataSource={storageData}
              pagination={{
                pageSize: 10,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (total) => `共 ${total} 条`,
              }}
              style={{ marginTop: 20 }}
              isPagination={false}
            />
          </Row>
        </Col>
      </Row>
    </div>
  )
}
export default Video
