import { Button, Col, Input, Row, Select } from "antd";
import { useState } from "react";
import styles from './InspectionTaskPlan.less';
// 导入图片
import tempImage from '../../../../assets/img/temp1.png';

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


const InspectionTaskPlan = () => {
  // 状态管理
  const [searchValue, setSearchValue] = useState('');
  const [filterStatus, setFilterStatus] = useState('');

  // 处理搜索
  const handleSearch = (value) => {
    setSearchValue(value);
    console.log('搜索:', value);
    // 这里可以实现搜索逻辑
  };

  // 处理状态筛选
  const handleStatusFilter = (value) => {
    setFilterStatus(value);
    console.log('筛选状态:', value);
    // 这里可以实现筛选逻辑
  };

  // 处理重置
  const handleReset = () => {
    setSearchValue('');
    setFilterStatus('');
    console.log('重置搜索和筛选');
  };

  return (
    <div className={styles.container}>
      {/* 搜索和筛选区域 */}
      <Row gutter={16} align="middle" style={{ marginBottom: '16px' }}>
        <Col span={8}>
          <Search
            placeholder="搜索节点、负责人"
            allowClear
            onSearch={handleSearch}
            onChange={(e) => setSearchValue(e.target.value)}
            value={searchValue}
            style={{ width: '100%' }}
          />
        </Col>
        <Col span={6}>
          <Select
            placeholder="状态"
            allowClear
            style={{ width: '100%' }}
            onChange={handleStatusFilter}
            value={filterStatus}
          >
            <Option value="normal">正常</Option>
            <Option value="warning">警告</Option>
            <Option value="error">异常</Option>
          </Select>
        </Col>
        <Col>
          <Button onClick={handleReset}>重置</Button>
        </Col>
      </Row>
      
      {/* 下方留白区域 */}
      <div className={styles.emptyArea}>
        <img src={tempImage} alt="巡检计划" style={{ width: '100%', height: 'auto' }} />
      </div>
    </div>
  );
}

export default InspectionTaskPlan;
