import React, { Component } from 'react';
import styles from './style.css';
import { PickerView } from 'antd-mobile';

class Popup extends Component {
  constructor(props) {
    super(props);
    let val = props.data[0] ? [props.data[0]] : [];
    this.state = {
      value: val,
    };
  }
  changeHandle = val => {
    const { onChange } = this.props;
    this.setState({
      value: val,
    });
    onChange(val);
  };
  render() {
    const { cancelHandle, okHandle, onChange, ...props } = this.props;
    const { value } = this.state;
    return (
      <div>
        <div className={styles.mask} />
        <div className={styles.ksPopupWrap}>
          <div role="document" className={styles.ksPopupContent}>
            <div className={styles.ksPopupHeader}>
              <div className={styles.headerLeft} onClick={cancelHandle}>
                取消
              </div>
              <div className={styles.headerTitle} />
              <div className={styles.headerRight} onClick={okHandle}>
                确定
              </div>
            </div>
            <PickerView {...props} value={value} onChange={this.changeHandle} />
          </div>
        </div>
      </div>
    );
  }
}

export default Popup;
