// 文本/下拉/多选/时间
/**
 * @description:
 * @params:
 *  onChange: 需要传入onChange,接收值的变更
 */
import React, { useEffect, useState } from 'react';
import { Input, Select } from 'antd';
import { reportService } from '../../api';
import { returnDefaultValueOrConfigs } from '../utils/utils';

const { Option } = Select;
const { Search } = Input;
const TextSearchComponent = ({ onChange, style, onSearch, placeholder }) => {
  return (
    <Search
      title={placeholder}
      style={style}
      placeholder={placeholder}
      onChange={onChange}
      onSearch={onSearch}
    />
  );
};
/**
 * Data = ['选项1','选项2'...]
 *
 * @props:
 *  正常选项:武汉
 *        附带统计数值: 武汉 (20)
 */
const SelectSearchComponent = ({
  onChange,
  style,
  data,
  mode,
  reportName,
  fieldAlias,
  configItems,
  filterFields,
  filterValues,
  filterObject,
}) => {
  const [value, setValue] = useState('');
  const [options, setOptions] = useState([]);
  const defaultConfigs = returnDefaultValueOrConfigs(configItems, ['defaultValue']);
  const { defaultValue } = defaultConfigs;
  const getData = () => {
    reportService
      .getReportFilterValues({
        fieldAlias,
        ...filterObject,
      })
      .then((res) => {
        if (res.code === 0) {
          let _options = res.data
            .find((item) => item.fieldAlias === fieldAlias)
            .filterValues.filter((item) => item.filterValue);
          if (filterValues && filterFields) {
            let _filterFields = filterFields.split('|');
            let _filterValues = filterValues.split('|');
            let _index = _filterFields.findIndex((item) => item === fieldAlias);
            if (_index > -1) {
              let _needToFilterValues = _filterValues[_index]?.split(',') || [];
              _options = _options.filter((item) => _needToFilterValues.includes(item.filterValue));
            }
          }
          setOptions(_options);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
  useEffect(() => {
    getData();
    setValue(defaultValue);
  }, []);
  return (
    <Select
      value={value}
      style={style}
      onChange={(e) => {
        onChange(e);
        setValue(e);
      }}
      mode={mode}
      defaultValue={mode === 'multiple' && defaultValue ? defaultValue.split(',') : defaultValue}
      allowClear
      maxTagCount={1}
      placeholder={`请选择${fieldAlias}`}
    >
      {options && options.length
        ? options.map((item) => (
            <Option key={item.filterValue} value={item.filterValue}>
              {item.filterValue} <span style={{ color: 'rgba(0,0,0,.65)' }}>({item.count})</span>
            </Option>
          ))
        : ''}
    </Select>
  );
};
const ReturnControlComponent = ({
  type,
  onChange,
  style,
  data,
  onSearch,
  reportName,
  fieldAlias,
  placeholder,
  configItems,
  filterValues,
  filterFields,
  filterObject,
}) => {
  let _component = '';
  switch (type) {
    case '文本':
      _component = (
        <TextSearchComponent
          style={style}
          onChange={onChange}
          onSearch={onSearch}
          placeholder={placeholder}
          configItems={configItems}
        />
      );
      break;
    case '下拉':
    case '多选':
      _component = (
        <SelectSearchComponent
          mode={type === '多选' ? 'multiple' : ''}
          style={style}
          onChange={onChange}
          reportName={reportName}
          fieldAlias={fieldAlias}
          configItems={configItems}
          filterFields={filterFields}
          filterValues={filterValues}
          filterObject={filterObject}
        />
      );
      break;
    default:
      break;
  }
  return _component;
};
export default ReturnControlComponent;