import React, { useState } from 'react';
import { Input, Button, Select, Radio, DatePicker } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import styles from './announce.less';
import moment from 'moment';

const { Option } = Select;
const { RangePicker } = DatePicker;

// 定义搜索表单数据类型
export interface SearchFormData {
  searchKeyword: string;
  announceType: string;
  projectUnit: string;
  projectLocation: string;
  publishTime: string;
  projectType: string;
  currentProvince: string;
  dateRange?: [moment.Moment, moment.Moment] | null;
}

interface SearchProps {
  initialValues?: SearchFormData;
  onChange?: (formData: SearchFormData) => void;
  onSearch?: (formData: SearchFormData) => void;
  isShowAnnounceType?: boolean;
  isShowSearch?: boolean;
  isShowProjectUnit?: boolean;
}

// 公告类型选项
const announceTypeOptions = [
  { label: '全部', value: '全部' },
  { label: '采购需求公示', value: '采购需求公示' },
  { label: '招标采购公告', value: '招标采购公告' },
  { label: '非招标采购公告', value: '非招标采购公告' },
  { label: '资格预审公告', value: '资格预审公告' },
  { label: '招募公告', value: '招募公告' },
  { label: '变更公告', value: '变更公告' },
  { label: '中标(中选)候选人公示', value: '中标(中选)候选人公示' },
  { label: '中标(中选)结果公示', value: '中标(中选)结果公示' },
  { label: '采购失败(流标)公告', value: '采购失败(流标)公告' },
];

// 第一行省份
const firstRowProvinces = [
  '全部',
  '北京',
  '天津',
  '河北',
  '山西',
  '内蒙古',
  '辽宁',
  '吉林',
  '黑龙江',
  '上海',
  '江苏',
  '浙江',
  '安徽',
  '福建',
  '江西',
];

// 发布时间选项
const publishTimeOptions = [
  { label: '不限', value: '不限' },
  { label: '今天', value: '今天' },
  { label: '最近三天', value: '最近三天' },
  { label: '最近一周', value: '最近一周' },
  { label: '最近一月', value: '最近一月' },
  { label: '自定义', value: '自定义' },
];

// 项目类型选项
const projectTypeOptions = [
  { label: '全部', value: '全部' },
  { label: '货物', value: '货物' },
  { label: '工程', value: '工程' },
  { label: '服务', value: '服务' },
  { label: '其他', value: '其他' },
];

const Search: React.FC<SearchProps> = ({
  initialValues,
  onChange,
  onSearch,
  isShowAnnounceType = true,
  isShowSearch = true,
  isShowProjectUnit = true,
}) => {
  // 内部状态管理
  const [formData, setFormData] = useState<SearchFormData>(
    initialValues || {
      searchKeyword: '',
      announceType: '全部',
      projectUnit: '全选',
      projectLocation: '中国',
      publishTime: '不限',
      projectType: '全部',
      currentProvince: '全部',
      dateRange: null,
    },
  );

  // 更新表单数据并通知父组件
  const updateFormData = (key: keyof SearchFormData, value: any) => {
    const newFormData = { ...formData, [key]: value };
    setFormData(newFormData);
    if (onChange) {
      onChange(newFormData);
    }
  };

  // 处理搜索按钮点击
  const handleSearch = () => {
    if (onSearch) {
      onSearch(formData);
    }
  };

  return (
    <div className={styles.announceSearch}>
      {/* 公告搜索 */}
      {isShowSearch && (
        <div className={styles.searchRow}>
          <div className={styles.searchLabel}>公告搜索</div>
          <Input.Group compact>
            <Input style={{ width: 'calc(100% - 200px)' }} />
            <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
              搜 索
            </Button>
          </Input.Group>
        </div>
      )}

      {/* 公告类型 */}
      {isShowAnnounceType && (
        <div className={styles.filterRow}>
          <div className={styles.filterLabel}>公告类型</div>
          <div className={styles.filterOptions}>
            <Radio.Group
              value={formData.announceType}
              onChange={(e) => updateFormData('announceType', e.target.value)}
              buttonStyle="solid"
            >
              {announceTypeOptions.map((option) => (
                <Radio.Button key={option.value} value={option.value}>
                  {option.label}
                </Radio.Button>
              ))}
            </Radio.Group>
          </div>
        </div>
      )}

      {/* 项目所属单位 */}
      {isShowProjectUnit && (
        <div className={styles.filterRow}>
          <div className={styles.filterLabel}>所属单位</div>
          <Select
            style={{ width: 300 }}
            value={formData.projectUnit}
            onChange={(value) => updateFormData('projectUnit', value)}
          >
            <Option value="全选">全选</Option>
            <Option value="中远海运集团">中远海运集团</Option>
            <Option value="中远海运物流">中远海运物流</Option>
            <Option value="中远海运集装箱">中远海运集装箱</Option>
          </Select>
        </div>
      )}

      {/* 项目所在地 */}
      <div className={styles.filterRow}>
        <div className={styles.filterLabel}>项目所在地</div>
        <div className={styles.locationSelector}>
          <Select
            style={{ width: 150, marginRight: 10 }}
            value={formData.projectLocation}
            onChange={(value) => updateFormData('projectLocation', value)}
          >
            <Option value="中国">中国</Option>
            <Option value="国外">国外</Option>
          </Select>

          <div className={styles.provinceSelector}>
            <Radio.Group
              value={formData.currentProvince}
              onChange={(e) => updateFormData('currentProvince', e.target.value)}
              buttonStyle="solid"
            >
              <div className={styles.provinceRow}>
                {firstRowProvinces.map((province) => (
                  <Radio.Button key={province} value={province}>
                    {province}
                  </Radio.Button>
                ))}
              </div>
            </Radio.Group>
          </div>
        </div>
      </div>

      {/* 发布时间 */}
      <div className={styles.filterRow}>
        <div className={styles.filterLabel}>发布时间</div>
        <div className={styles.filterOptions}>
          <Radio.Group
            value={formData.publishTime}
            onChange={(e) => updateFormData('publishTime', e.target.value)}
            buttonStyle="solid"
          >
            {publishTimeOptions.map((option) => (
              <Radio.Button key={option.value} value={option.value}>
                {option.label}
              </Radio.Button>
            ))}
          </Radio.Group>
          {formData.publishTime === '自定义' && (
            <RangePicker
              style={{ marginLeft: 10 }}
              value={formData.dateRange as any}
              onChange={(dates) => updateFormData('dateRange', dates)}
            />
          )}
        </div>
      </div>

      {/* 项目类型 */}
      <div className={styles.filterRow}>
        <div className={styles.filterLabel}>项目类型</div>
        <div className={styles.filterOptions}>
          <Radio.Group
            value={formData.projectType}
            onChange={(e) => updateFormData('projectType', e.target.value)}
            buttonStyle="solid"
          >
            {projectTypeOptions.map((option) => (
              <Radio.Button key={option.value} value={option.value}>
                {option.label}
              </Radio.Button>
            ))}
          </Radio.Group>
        </div>
      </div>
    </div>
  );
};

export default Search;