import React, { Component } from 'react';
import {Button} from 'antd';
import {
  WeaLocaleProvider,
  WeaCron,
  WeaInput,
} from 'ecCom';

const {getLabel} = WeaLocaleProvider;

export default class CronExp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showCron: false
    }
  }

  componentWillMount() {
    this.setState({
      showCron: false
    })
  }

  componentWillUnmount() {
    this.setState({
      showCron: false
    })
  }

  render() {
    const {
      field,
      value,
    } = this.props;
    const {
      showCron
    } = this.state;

    return (
      <div>
        <nobr>
          <WeaInput 
            {...field} 
            ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@integrationPublicCornExp`}
            value={value}
            onChange={v => {
              if(this.props.onChange && typeof(this.props.onChange) === "function") {
                this.props.onChange(v);
              }
            }} 
          />
          <div style={{display: 'inline-block'}}>
            <Button 
              ecId={`${this && this.props && this.props.ecId || ''}_Button@integrationPublicCornExpButtonSetting`}
              onClick={() => this.setState({showCron: !showCron})}
            >{getLabel('30747','设置')}</Button>
            <Button 
              ecId={`${this && this.props && this.props.ecId || ''}_Button@integrationPublicCornExpButtonReset`}
              onClick={() => {
                if(this.props.onChange && typeof(this.props.onChange) === "function") {
                  this.props.onChange('0 0 * * * ?');
                }
               }}
               style={{marginLeft: 10}}
            >{getLabel('2022','重置')}</Button>
          </div>
        </nobr>
        <div 
          style={{
            position: 'absolute', 
            border: '1px solid #d9d9d9', 
            marginTop: 10, 
            zIndex: 1, 
            backgroundColor: 'white', 
            padding: '20px 25px 0', 
            display: showCron ? 'block' : 'none'
          }}
        >
          <div>{getLabel('508909','Cron表达式生成器')}</div>
          <div style={{ width: 450, height: 400}}>
            <WeaCron
              ecId={`${this && this.props && this.props.ecId || ''}_WeaCron@integrationPublicCornExpWeaCron`}
              cronExpression={value}
              onChange={v => {
                if(this.props.onChange && typeof(this.props.onChange) === "function") {
                  this.props.onChange(v);
                }
              }}
            />
          </div>
        </div>
      </div>
    )
  }
}
