import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form,Row,Col,Select,Input,Tabs,Transfer,Icon,Button,Modal } from 'amos-antd';
import { AmosFetch } from 'UTILS/processor';
import { trim } from 'amos-tool';
import OltSerUrl from 'CONSTS/urlConsts';
import { message } from 'amos-framework';
import './common/index.scss';

const TabPane = Tabs.TabPane;
const createForm = Form.create();
const FormItem = Form.Item;
const Option = Select.Option;

const monitorTypeArr = [
  { title: '采集', value: 1 },
  { title: '监听', value: 2 }
];

const periodArr = [
  { title: '30秒/次', value: 30 },
  { title: '60秒/次', value: 60 },
  { title: '300秒/次', value: 300 },
  { title: '900秒/次', value: 900 },
  { title: '1800秒/次', value: 1800 }
];

const noSpaceLengthValidate = (maxLength) => {
  return (rule, value, callback) => {
    if (value){
      if (/^\S*$/.test(value)){
        if (trim(value).length > maxLength){
          callback(`支持1-${maxLength}位非空格字符！`);
        }
      } else {
        callback(`支持1-${maxLength}位非空格字符！`);
      }
    }
    callback();
  };
};

const nameIsReplaceValidate = (oldName) => {
  return (rule, value, callback) => {
    if (value){
      if (value === oldName){
        callback();
      } else {
        let url = `${OltSerUrl.monitorRuleNameIsReplace}/${value}`;
        AmosFetch.get(url).then(res => {
          if (res.ok) {
            return res.json();
          }
          else
            {
            throw new Error('从服务端获取数据失败！');
          }
        }).then((data)=>{
          if (data.result === 'SUCCESS'){
            if (data.message === 'ok'){
              callback();
            } else {
              callback('任务名称重复，请重新输入！');
            }
          } else {
            callback('系统错误！');
          }
        });
      }
    } else {
      callback();
    }
  };
};

/**
 * 新增监测规则
 * @class AddRule
 * @extends {Component}
 */
class AddEditRule extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mockData: [],
      targetKeys: []
    };
  }

  componentWillMount(){
    let monitorRuleInfo = this.props.monitorRuleInfo;
    this.setState({
      targetKeys: monitorRuleInfo.deviceIds
    });
  }

  /**
   * 初始化
   */
  componentDidMount() {
    this.getMock();
  }

  componentWillReceiveProps(nextProps){
    if (nextProps.monitorRuleInfo){
      this.setState({
        targetKeys: nextProps.monitorRuleInfo.deviceIds
      });
    }

  }
  getMock = () => {
    AmosFetch.get(OltSerUrl.realDevice).then(res => {
      if (res.ok) {
        return res.json();
      }
      else
      {
        throw new Error('从服务端获取数据失败！');
      }
    }).then((data)=>{
      if (data.result === 'SUCCESS'){
        if (data.dataList.length !== 0){
          this.makeMock(data.dataList);
        }
      }
      this.setState({ dataList: [] });
    });
  }

  makeMock = (dataList) => {
    let mockData = [];
    dataList.map(data=>{
      data.key = data.id;
      data.title = data.name;
      mockData.push(data);
    });
    this.setState({ dataList,mockData });
  }

  handleSave = (obj) => {
    let { targetKeys } = this.state;
    let { monitorRuleInfo } = this.props;
    monitorRuleInfo.name = obj.name;
    monitorRuleInfo.monitorType = obj.monitorType;
    if (obj.monitorType === '1'){
      monitorRuleInfo.period = obj.period;
    } else {
      monitorRuleInfo.period = 0;
    }
    monitorRuleInfo.remark = obj.remark;
    if (!targetKeys || targetKeys.length === 0){
      Modal.info({
        title: '系统提示',
        content: '监测对象不能为空！'
      });
      return;
    }
    monitorRuleInfo.deviceIds = targetKeys;
    AmosFetch.post(OltSerUrl.monitorRuleAddOrUpdate,{ data: monitorRuleInfo }).then(res => {
      if (res.ok) {
        return res.json();
      }
      else
      {
        throw new Error('从服务端获取数据失败！');
      }
    }).then((data)=>{
      if (data.result === 'SUCCESS'){
        this.handleCancel();
        message.success('保存成功！');
      } else {
        message.danger('保存失败！');
      }
    });
  }
  /**
   * 关闭新增监测规则对话框
   */
  handleCancel = () => {
    this.props.form.resetFields();
    this.setState({
      targetKeys: []
    });
    this.props.cancel();
    this.props.reload();
  }
  /**
   * 保存按钮事件
   */
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((errors, values) => {
      if (errors) {
        return;
      }
      this.handleSave(values);
    });
  }

  handleChange = (targetKeys) => {
    this.setState({ targetKeys });
  }

  monitorTypeChange = (value) => {
    this.props.typeChange(value);
  }
  render() {
    let { mockData,targetKeys } = this.state;
    let { monitorRuleInfo,isCycle } = this.props;
    let { name, monitorType, period, remark } = monitorRuleInfo;
    const { getFieldProps } = this.props.form;
    const nameProps = getFieldProps('name', {
      initialValue: name,
      rules: [
          { required: true, message: '任务名称不能为空！' },
          { validator: noSpaceLengthValidate(50) },
          { validator: nameIsReplaceValidate(name) }
      ]
    });
    const monitorTypeProps = getFieldProps('monitorType', {
      initialValue: monitorType ? `${monitorType}` : '2',
      rules: [
          { required: true, message: '请选择监测方式！' }
      ]
    });
    const periodProps = getFieldProps('period', {
      initialValue: period ? `${period}` : '30',
      rules: [
      ]
    });
    const remarkProps = getFieldProps('remark', {
      initialValue: remark,
      rules: [
        { validator: noSpaceLengthValidate(500) }
      ]
    });
    const formItemLayout = {
      labelCol: { span: 9 },
      wrapperCol: { span: 8 }
    };
    return (
      <div>
        <div className='amos-grid-from'>
          <Form inline onSubmit={this.handleSubmit}>
            <Row style={{ marginTop: '20px' }} >
              <Col span={24}>
                <FormItem hasFeedback label={'任务名称'}  {...formItemLayout}>
                  <Input className='amos-grid-form-input' {...nameProps} placeholder='请输入任务名称' style={{ width: '250px' }} />
                </FormItem>
              </Col>
            </Row>
            <Row style={{ marginTop: '20px' }}>
              <Col span={24}>
                <FormItem hasFeedback label={'监测方式'}  {...formItemLayout} >
                  <Select style={{ width: 250 }} onSelect={this.monitorTypeChange} {...monitorTypeProps}  placeholder='请选择监测方式' >
                    {
                      monitorTypeArr.map(data => <Option key={`${data.value}`} value={`${data.value}`}>{data.title}</Option>)
                    }
                  </Select>
                </FormItem>
              </Col>
            </Row>
            {
              isCycle ?
                <Row style={{ marginTop: '20px' }}>
                  <Col span={24}>
                    <FormItem label={'任务周期'}  {...formItemLayout}>
                      <Select style={{ width: 250 }}  {...periodProps}  placeholder='请选择任务周期' >
                        {
                          periodArr.map(data => <Option key={`${data.value}`} value={`${data.value}`}>{data.title}</Option>)
                        }
                      </Select>
                    </FormItem>
                  </Col>
                </Row> :
              null
            }
            <Row style={{ marginTop: '20px' }}>
              <Col span={24}>
                <FormItem label={'描述'}  {...formItemLayout}   placeholder='请输入描述'>
                  <Input className='amos-grid-form-input' width={250} {...remarkProps} />
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
        <div>
          <Tabs defaultActiveKey='监测对象'>
            <TabPane tab={<span><Icon type='android' />监测对象</span>} key='监测对象'>
              <div style={{ width: '100%',height: '100%', overflow: 'auto' }}>
                <Transfer
                  dataSource={mockData}
                  showSearch
                  listStyle={{
                    width: 250,
                    height: 300,
                    color: '#666'
                  }}
                  operations={[ '添加', '移除' ]}
                  targetKeys={targetKeys}
                  onChange={this.handleChange}
                  render={item => `${item.title}`}
                />
              </div>
            </TabPane>
          </Tabs>
        </div>
        <Row style={{ textAlign: 'center',marginTop: '3rem' }} >
          <Button type='primary' onClick={this.handleSubmit} >确定</Button>
          <Button type='primary' onClick={this.handleCancel} style={{ marginLeft: '10px' }} >取消</Button>
        </Row>
      </div>
    );
  }
}

AddEditRule.propTypes = {
  form: PropTypes.any,
  cancel: PropTypes.func,
  monitorRuleInfo: PropTypes.any,
  reload: PropTypes.func,
  flag: PropTypes.any,
  typeChange: PropTypes.func,
  isCycle: PropTypes.any
};

AddEditRule.defaultProps = {
  monitorRuleInfo: { monitorType: '' }
};
export default createForm(AddEditRule);
