/**
 * 省市区formItem组件
 * @param {*省市区的标签的文本} label
 * @param {*省市区的标签的字段名} name
 * @param {*详细地址的标签的文本} alabel
 * @param {*详细地址的字段名} aname
 */
import React, { useState, useEffect, forwardRef } from 'react';
import { connect } from 'dva';
import { Card, Button, Row, Col, Input, Popover, Form, Cascader, Select } from 'antd';
import InputFormItem from '@/components/FormItems/InputFormItem';
const { TextArea } = Input;
const { Option } = Select;
const CitySelects = forwardRef((props, ref) => {
  const { value = {}, onChange, options = [], disabled } = props;
  const { province, city, district } = value;
  const [provinceData, setprovinceData] = useState([]);
  const [cityData, setcityData] = useState([]);
  const [districtData, setdistrictData] = useState([]);
  useEffect(() => {
    if (options.length > 0) {
      if (province) {
        const plists = provinceData.filter(_ => _.label === province);
        setcityData(plists[0].children);
      }
    }
  }, [province]);
  useEffect(() => {
    if (city && cityData.length > 0) {
      const cityLists = cityData.filter(_ => _.label === city);
      setdistrictData(cityLists[0].children);
    }
  }, [city]);

  useEffect(() => {
    if (cityData.length > 0) {
      const cityLists = cityData.filter(_ => _.label === city);

      setdistrictData(cityLists.length > 0 ? cityLists[0].children : []);
    }
  }, [cityData]);

  useEffect(() => {
    setprovinceData(options);
  }, [options]);

  const handleProvinceChange = province => {
    const provinceLists = provinceData.filter(_ => _.label === province);
    setcityData(provinceLists[0].children);
    onChange({
      ...value,
      province,
      city: '',
    });
  };
  const onSecondCityChange = city => {
    const cityLists = cityData.filter(_ => _.label === city);
    setdistrictData(cityLists[0].children);
    onChange({
      ...value,
      city,
      district: '',
    });
  };
  const onDistrictChange = district => {
    onChange({
      ...value,
      district,
    });
  };
  return (
    <>
      <Select
        className="mr-10"
        value={province}
        style={{ width: 150 }}
        onChange={handleProvinceChange}
        placeholder="请选择省份"
        disabled={disabled}
      >
        {provinceData.map(province => (
          <Option key={province.label}>{province.label}</Option>
        ))}
      </Select>
      <Select
        className="mr-10"
        value={city}
        style={{ width: 150 }}
        onChange={onSecondCityChange}
        placeholder="请选择城市"
        disabled={disabled}
      >
        {cityData.map(city => (
          <Option key={city.label}>{city.label}</Option>
        ))}
      </Select>
      <Select
        value={district}
        style={{ width: 150 }}
        onChange={onDistrictChange}
        placeholder="请选择区县"
        disabled={disabled}
      >
        {districtData.map(district => (
          <Option key={district.label}>{district.label}</Option>
        ))}
      </Select>
    </>
  );
});

const FormItem = props => {
  const {
    name,
    label,
    alabel,
    aname,
    wrapperCol = { span: 10 },
    BaseProvinceList,
    dispatch,
    form,
    disabled,
  } = props;
  const validator = (rule, value = {}) => {
    const { province, city, district } = value;
    if (!province && !city && !district) {
      return Promise.reject('请选择省市区!');
    } else if (!province) {
      return Promise.reject('请选择省份!');
    } else if (!city) {
      return Promise.reject('请选择城市!');
    } else if (!district) {
      return Promise.reject('请选择区县!');
    } else {
      return Promise.resolve();
    }
  };
  return (
    <>
      <Form.Item
        label={label}
        name={name}
        required
        rules={[
          {
            validator,
          },
        ]}
      >
        <CitySelects disabled={disabled} options={BaseProvinceList} />
      </Form.Item>
      <InputFormItem disabled={disabled} label={alabel} name={aname} max={25} />
    </>
  );
};
const mapStateToProps = ({ global }) => {
  return {
    BaseProvinceList: global.BaseProvinceList,
  };
};
export default connect(mapStateToProps)(FormItem);