/**

 * 选择监区 组件

 */

import React, { PureComponent } from 'react';

import PropTypes from 'prop-types';

import { Select } from 'antd';

import styles from './index.less';

const Option = Select.Option;

const provinceData = ['Zhejiang', 'Jiangsu'];

const cityData = {

  Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],

  Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],

};

export default class SelectPrison extends PureComponent {

  constructor(props) {

    super(props);

    const value = props.value || {};

    this.state = {

      cities: cityData[provinceData[0]],

      secondCity: cityData[provinceData[0]][0],

    };

  }

  handleProvinceChange = (value) => {

    this.setState({

      cities: cityData[value],

      secondCity: cityData[value][0],

    });

  }

  onSecondCityChange = (value) => {

    this.setState({

      secondCity: value,

    });

  }

  // 改变日期

  changeDateRange = (date, dateString) => {

    const onChange = this.props.onChange;

    if (onChange) {

      onChange(Object.assign({}, this.state, {start:dateString[0],end:dateString[1]}));

    }

  }

  render() {

    const { cities } = this.state;

    return (

      <React.Fragment>

        <Select

          defaultValue={provinceData[0]}

          style={{ width: 120 }}

          onChange={this.handleProvinceChange}

        >

          {provinceData.map(province => <Option key={province}>{province}</Option>)}

        </Select>

        <Select

          style={{ width: 120 }}

          value={this.state.secondCity}

          onChange={this.onSecondCityChange}

        >

          {cities.map(city => <Option key={city}>{city}</Option>)}

        </Select>

      </React.Fragment>

    );

  }

}