import React from 'react';
import { Switch, Modal, Popconfirm, Select, Input, Icon, Form, Divider, Row, Col, Button, DatePicker } from 'antd';
import { $http } from '../../containers/config/https';
import PubilcTablePagination from '../common/PubilcTablePagination.jsx'; // 公共table组件
import moment from 'moment';
import './charges/style/platformAddressStyle.less';

const { Option } = Select;
const dateFormat = 'YYYY-MM-DD'; //定义全局日期格式
const formItemLayout = {    // label 和input宽度
  labelCol: { span: 8 },
  wrapperCol: { span: 16, offset: 0 },
};


class OPPlatformAddress extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false, //加载状态标志
      tableData: [], // 表格数据
      total: 0,  // 表格数据总条数
      page: 1, //当前页数
      pageSize: 10, //每页显示条数
      startValue: null, //日期选择器开始时间
      endValue: null, //日期选择器结束时间
      code: '', //代码
      name: '', //名称
      descripts: '', //描述
      IP: '', //IP
      port: '', //端口
      username: '', //用户登录名
      state: '', //状态
      startDate: '', //生效日期
      stopDate: '', //失效日期
      displayCode: 'none', //是否显示code提示信息
      codeHeight: '50px',
      displayName: 'none', //是否显示name提示信息
      nameHeight: '50px',
      displayIP: 'none', //是否显示IP提示信息
      IPHeight: '50px',
      displayPort: 'none', //是否显示port提示信息
      portHeight: '50px',
      displayUsername: 'none', //是否显示Username提示信息
      usernameHeight: '50px',
      //能否提交标志
      isSubmitCode: false,
      isSubmitName: false,
      isSubmitIP: false,
      isSubmitPort: false,
      isSubmitUsername: false,
      //输入框变化标志
      existCode: '', 
      existName: '', 
      existIP: '',
      existPort: '',
      existUsername: '',
    };
    this.columns = [
      {
        title: '代码',
        dataIndex: 'code',
        key: 'code',
        align: "center",
        width: '100px',
      },
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        align: "center",
        width: '200px',
      },
      {
        title: '描述',
        dataIndex: 'descripts',
        key: 'descripts',
        align: "center",
        width: '200px',
      },
      {
        title: 'IP',
        dataIndex: 'IP',
        key: 'IP',
        align: "center",
        width: '100px',
      },
      {
        title: '端口',
        dataIndex: 'port',
        key: 'port',
        align: "center",
        width: '100px',
      },
      {
        title: '用户名',
        dataIndex: 'username',
        key: 'username',
        align: "center",
        width: '100px',
      },
      {
        title: '状态',
        dataIndex: 'state',
        key: 'state',
        align: "center",
        width: '100px',
      },
      {
        title: '操作',
        key: 'op',
        align: "center",
        render: (text, record) => (
          <span>
            <span className='span' onClick={() => this.showModal(record)}><Icon type="edit" />编辑</span>
            <Divider type="vertical" />
            <Popconfirm
              title="确定要删除吗?"
              onConfirm={this.delConfirm}
              okText="是"
              cancelText="否"
            >
              <span style={{ color: '#f00' }} className='span' ><Icon type="delete" />删除</span>
            </Popconfirm>
            <Divider type="vertical" />
            <span ><Icon type="setting" />重置密码</span>
          </span>
        ),
      },
    ];
    this.dataSource = [
      {
        key: '1',
        code: '02211567',
        name: '云HIS数据平台',
        descripts: 'HIS基础数据',
        IP: '192.168.52.56',
        port: '5000',
        username: 'xys',
        state: '生效',
      },
      {
        key: '2',
        code: '02211566',
        name: '集成平台地址',
        descripts: '基础数据',
        IP: '192.168.52.56',
        port: '3000',
        username: 'ylkj',
        state: '生效',
      },
      {
        key: '3',
        code: '02211566',
        name: '集成平台地址',
        descripts: '患者标准数据集',
        IP: '192.168.52.56',
        port: '3000',
        username: 'ylkj',
        state: '生效',
      },
    ];
  }

  componentDidMount() {
    //初始化列表数据
    this.handleQuery();
  }

  //初始化列表数据
  handleQuery = () => {
    // 数据加载成功关闭loading
    this.child.handleLoading()
  }

  // 调用公共组件的连接事件
  onRef = (ref) => {
    this.child = ref
  }

  // 提供修改page和pageSize的回调函数
  compilePage(page, pageSize) {
    // 修改page，或者pageSize
    this.setState({ page: page, pageSize: pageSize }, () => {
      // 重新调用查询方法
      this.handleQuery();
    })
  }

  //开始日期选择器选择限制
  disabledStartDate = startValue => {
    const { endValue } = this.state;
    if (!startValue || !endValue) {
      return false;
    }
    return startValue.valueOf() > endValue.valueOf();
  };

  //失效日期选择器选择限制
  disabledEndDate = endValue => {
    const { startValue } = this.state;
    if (!endValue || !startValue) {
      return false;
    }
    return endValue.valueOf() <= startValue.valueOf();
  };

  onChange = (field, value) => {
    this.setState({
      [field]: value,
    });
  };

  //开始日期变化
  onStartChange = value => {
    this.onChange('startValue', value);
  };

  //结束日期变化
  onEndChange = value => {
    this.onChange('endValue', value);
  };

  //点击清除按钮重置
  reset = () => {
    this.props.form.setFieldsValue({
      'code': '',
      'name': '',
      'descripts': '',
      'IP': '',
      'port': '',
      'password': '',
      'username': '',
      'startDate': undefined,
      'stopDate': undefined,
    });
  }

  //点击保存按钮
  save = () => {
    this.props.form.validateFields((err, values) => {
      if (err) {
        return;
      }
      let data = {};
      data = {
        params: [{
          platformCode: values.code, //代码
          name: values.name, //名称
          descripts: values.descripts, //描述
          IP: values.IP, //IP
          port: values.port, //端口
          username: values.username, //用户登录名
          state: '生效', //状态
          startDate: moment(values.startDate).utcOffset(480).format('YYYY-MM-DD'), //生效日期
          stopDate: values.stopDate ? moment(values.stopDate).utcOffset(480).format('YYYY-MM-DD') : '', //失效日期
        }]
      }
      console.log(data);
      // $http.post('urlS', this, {
      //   code: '00000000',
      //   data: data,
      //   success: function (res) {
      //     if (+res.errorCode === 0) {
      //       message.success(res.errorMessage);
      //       this.handleQuery();
      //       this.setState({ loading: false, visible: false });
      //     }
      //   }
      // })
    })
  }

  //删除确认
  delConfirm = (e) => {
    this.handleDel();
  }

  //删除操作
  handleDel = () => {
    let data = {
      params: [{
        changeID: JSON.parse(window.sessionStorage.userData).userID
      }]
    };
    console.log(data);
    // $http.post('urlS', this, {
    //   code: "0000000",
    //   data: data,
    //   success: function (res) {
    //     let errorCode = res.errorCode;
    //     if (errorCode === '0') {
    //       message.success(res.errorMessage);
    //       this.handleQuery() // 查询
    //     }
    //   }
    // });
  }

  //弹窗显示
  showModal = (record) => {
    this.setState({
      code: record.code,
      name: record.name,
      descripts: record.descripts,
      IP: record.IP,
      port: record.port,
      username: record.username,
      state: true,
      visible: true,
      displayCode: 'none', //是否显示code提示信息
      codeHeight: '50px',
      displayName: 'none', //是否显示name提示信息
      nameHeight: '50px',
      displayIP: 'none', //是否显示IP提示信息
      IPHeight: '50px',
      displayPort: 'none', //是否显示port提示信息
      portHeight: '50px',
      displayUsername: 'none', //是否显示Username提示信息
      usernameHeight: '50px',
      //输入框变化标志
      existCode: '', 
      existCode: '', 
      existName: '', 
      existIP: '',
      existPort: '',
      existUsername: '',
    });
  };

  //弹窗点击确定
  handleOk = () => {
    let {isSubmitCode,isSubmitName,isSubmitIP,isSubmitPort,isSubmitUsername,}=this.state
    if (isSubmitCode || isSubmitName || isSubmitIP || isSubmitPort || isSubmitUsername) {
      return;
    } else {
      this.setState({
        visible: false,
      });
      console.log(this.state)
    }
  };

  //弹窗点击取消
  handleCancel = () => {
    this.setState({ visible: false, });
  };

  //改变代码
  changeCode = (e) => {
    this.setState({
      code: e.target.value,
      displayCode: e.target.value === '' ? 'block' : 'none',
      codeHeight: e.target.value === '' ? '69px' : '50px',
      isSubmitCode: e.target.value === '' ? true : false,
      existCode: e.target.value === '' ? 'none' : '',
    });
    console.log(this.state.existCode)
  }

  //改变名称
  changeName = (e) => {
    this.setState({
      name: e.target.value,
      displayName: e.target.value === '' ? 'block' : 'none',
      nameHeight: e.target.value === '' ? '69px' : '50px',
      isSubmitName: e.target.value === '' ? true : false,
      existName: e.target.value === '' ? 'none' : '',
    })
  }

  //改变描述
  changeDescripts = (e) => {
    this.setState({ descripts: e.target.value })
  }

  //改变IP
  changeIP = (e) => {
    this.setState({
      IP: e.target.value,
      displayIP: e.target.value === '' ? 'block' : 'none',
      IPHeight: e.target.value === '' ? '69px' : '50px',
      isSubmitIP: e.target.value === '' ? true : false,
      existIP: e.target.value === '' ? 'none' : '',
    })
  }

  //改变端口
  changePort = (e) => {
    this.setState({
      port: e.target.value,
      displayPort: e.target.value === '' ? 'block' : 'none',
      portHeight: e.target.value === '' ? '69px' : '50px',
      isSubmitPort: e.target.value === '' ? true : false,
      existPort: e.target.value === '' ? 'none' : '',
    })
  }

  //改变用户名称
  changeUsername = (e) => {
    this.setState({
      username: e.target.value,
      displayUsername: e.target.value === '' ? 'block' : 'none',
      usernameHeight: e.target.value === '' ? '69px' : '50px',
      isSubmitUsername: e.target.value === '' ? true : false,
      existUsername: e.target.value === '' ? 'none' : '',
    })
  }

  //改变状态
  changeState = (e) => {
    this.setState({ state: e })
  }

  render() {
    let { code, name, descripts, IP, port, username, state, startValue, endValue, displayCode, codeHeight, displayName,
      nameHeight, displayIP, IPHeight, displayPort, portHeight, displayUsername, usernameHeight,
    } = this.state;
    const { getFieldDecorator } = this.props.form;
    const param = {
      // 表头配置
      columns: this.columns,
      // 表格数据
      data: this.dataSource,
      // 数据总条数
      total: '3',
      // 数据页数
      page: 1,
      // 表格的宽度
      x: 900,
    }
    return (
      <div>
        <div style={{ width: '100%', height: '100%' }}>
          <div style={{ width: '100%', height: '30px', lineHeight: '30px', paddingLeft: '5px', borderTop: '1px solid #e2e2e2', borderBottom: '1px solid #e2e2e2', }}>
            <span><Icon type="plus" />添加平台地址</span>
          </div>
          <div style={{ width: '100%' }}>
            <Form layout="inline" >
              <Row style={{ minHeight: '80px', padding: '24px 24px 24px 24px' }}>
                <Col span={4}>
                  <Form.Item label="代码" {...formItemLayout} >
                    {getFieldDecorator('code', {
                      initialValue: '',
                      rules: [{ required: true, message: '代码不能为空' }],
                    })(
                      <Input
                        placeholder="请输入代码"
                      />,
                    )}
                  </Form.Item>
                </Col>
                <Col span={4}>
                  <Form.Item label="名称" {...formItemLayout}>
                    {getFieldDecorator('name', {
                      initialValue: '',
                      rules: [{ required: true, message: '名称不能为空' }],
                    })(
                      <Input
                        placeholder="请输入代码"
                      />,
                    )}
                  </Form.Item>
                </Col>
                <Col span={4}>
                  <Form.Item label="描述" {...formItemLayout}>
                    {getFieldDecorator('descripts', {
                      initialValue: '',
                    })(
                      <Input
                        placeholder="请输入描述内容"
                      />,
                    )}
                  </Form.Item>
                </Col>
                <Col span={4}>
                  <Form.Item label="IP" {...formItemLayout}>
                    {getFieldDecorator('IP', {
                      initialValue: '',
                      rules: [{ required: true, message: 'IP不能为空' }],
                    })(
                      <Input
                        placeholder="请输入平台IP地址"
                      />,
                    )}
                  </Form.Item>
                </Col>
                <Col span={4}>
                  <Form.Item label="端口" {...formItemLayout}>
                    {getFieldDecorator('port', {
                      initialValue: '',
                      rules: [{ required: true, message: '端口不能为空' }],
                    })(
                      <Input
                        placeholder="请输入端口号"
                      />,
                    )}
                  </Form.Item>
                </Col>
                <Col span={4}>
                  <Form.Item label="密码" {...formItemLayout}>
                    {getFieldDecorator('password', {
                      initialValue: '',
                      rules: [{ required: true, message: '密码不能为空' }],
                    })(
                      <Input
                        placeholder="请输入访问密码"
                      />,
                    )}
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item label="登录用户名" {...formItemLayout}>
                    {getFieldDecorator('username', {
                      initialValue: '',
                      rules: [{ required: true, message: '用户名不能为空' }],
                    })(
                      <Input
                        placeholder="请输入登录用户名"
                      />,
                    )}
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item label="生效日期" {...formItemLayout}>
                    {getFieldDecorator('startDate', {
                      initialValue: undefined,
                      rules: [{ required: true, message: '生效日期不能为空' }],
                    })(
                      <DatePicker
                        format={dateFormat}
                        disabledDate={this.disabledStartDate}
                        value={startValue}
                        onChange={this.onStartChange}
                      />
                    )}
                  </Form.Item>
                </Col>
                <Col span={5}>
                  <Form.Item label="失效日期" {...formItemLayout}>
                    {getFieldDecorator('stopDate', {
                      initialValue: undefined,
                    })(
                      <DatePicker
                        format={dateFormat}
                        disabledDate={this.disabledEndDate}
                        value={endValue}
                        onChange={this.onEndChange}
                      />
                    )}
                  </Form.Item>
                </Col>
                <Col span={2} style={{ textAlign: 'right', lineHeight: '40px' }}>
                  <Button type="primary" onClick={() => this.reset()} icon='rest' style={{ background: '#F7805D', color: '#FFFFFF', borderColor: '#F7805D' }} >
                    清空
                  </Button>
                </Col>
                <Col span={2} style={{ textAlign: 'center', lineHeight: '40px' }}>
                  <Button type="primary" onClick={() => this.save()} icon='save' >
                    保存
                  </Button>
                </Col>
              </Row>
            </Form>
          </div>
        </div>
        <div style={{ widht: '100%', height: '10px', background: '#f0f2f5' }}></div>
        <div style={{ width: '100%', height: '30px', lineHeight: '30px', paddingLeft: '5px', borderTop: '1px solid #e2e2e2', borderBottom: '1px solid #e2e2e2', }}>
          <span><Icon type="unordered-list" />平台地址列表</span>
        </div>
        <div style={{ padding: 24 }}>
          <Row style={{ paddingBottom: 24 }}>
            <Col span={2}>
              <Select style={{ width: '100%' }} allowClear placeholder="请选择" >
                <Option value="1" >代码</Option>
              </Select>
            </Col>
            <Col span={4} style={{ paddingLeft: 5 }}>
              <Input placeholder="输入后回车查询" />
            </Col>
            <Col span={2} style={{ textAlign: 'right', }}>
              <span style={{ height: '30px', lineHeight: '30px' }}>状态：</span>
            </Col>
            <Col span={4}>
              <Select style={{ width: '150px' }} allowClear placeholder="请选择" >
                <Option value="1" >生效</Option>
              </Select>
            </Col>
            <Col span={4}>
              <Button type="primary" icon="search" >查询</Button>
            </Col>
          </Row>
          <Modal
            visible={this.state.visible}
            title='编辑'
            onOk={() => this.handleOk()}
            onCancel={this.handleCancel}
            width='600px'
            footer={[
              <Button key="back" onClick={this.handleCancel}>
                返回
              </Button>,
              <Button key="submit" type="primary" loading={this.state.loading} onClick={this.handleOk}>
                提交
              </Button>,
            ]}
          >
            <Row>
              <Col span={24} style={{ height: codeHeight, }}>
                <Col span={8} style={{ textAlign: 'right', }}>
                  <span style={{ display: 'inline-block', marginRight: '4px', color: '#f5222d', fontSize: '14px', lineHeight: 1, }}>*</span>
                  <span>代码：</span>
                </Col>
                <Col span={2}></Col>
                <Col span={14} className={this.state.existCode !=='' ? 'codeInput' : ''}>
                  <Input
                    placeholder="请输入代码"
                    style={{ width: '150px', }}
                    value={code}
                    onChange={(e) => this.changeCode(e)}
                    allowClear
                  />
                  <div style={{ color: '#f5222d', minHeight: '22px', marginTop: '2px', lineHeight: '1.5', display: displayCode, }}>代码不能为空</div>
                </Col>
              </Col>
              <Col span={24} style={{ height: nameHeight, }}>
                <Col span={8} style={{ textAlign: 'right', }}>
                  <span style={{ display: 'inline-block', marginRight: '4px', color: '#f5222d', fontSize: '14px', lineHeight: 1, }}>*</span>
                  <span>名称：</span>
                </Col>
                <Col span={2}></Col>
                <Col span={14} className={this.state.existName !=='' ? 'nameInput' : ''} >
                  <Input
                    placeholder="请输入名称"
                    style={{ width: '150px', }}
                    value={name}
                    onChange={(e) => this.changeName(e)}
                    allowClear
                  />
                  <div style={{ color: '#f5222d', minHeight: '22px', marginTop: '2px', lineHeight: '1.5', display: displayName, }}>名称不能为空</div>
                </Col>
              </Col>
              <Col span={24} style={{ height: '50px', }}>
                <Col span={8} style={{ textAlign: 'right', }}>
                  <span>描述：</span>
                </Col>
                <Col span={2}></Col>
                <Col span={14}>
                  <Input
                    placeholder="请输入描述"
                    style={{ width: '150px', }}
                    value={descripts}
                    onChange={(e) => this.changeDescripts(e)}
                    allowClear
                  />
                </Col>
              </Col>
              <Col span={24} style={{ height: IPHeight, }}>
                <Col span={8} style={{ textAlign: 'right', }}>
                  <span style={{ display: 'inline-block', marginRight: '4px', color: '#f5222d', fontSize: '14px', lineHeight: 1, }}>*</span>
                  <span>IP：</span>
                </Col>
                <Col span={2}></Col>
                <Col span={14} className={this.state.existIP !=='' ? 'IPInput' : ''} >
                  <Input
                    placeholder="请输入IP"
                    style={{ width: '150px', }}
                    value={IP}
                    onChange={(e) => this.changeIP(e)}
                    allowClear
                  />
                  <div style={{ color: '#f5222d', minHeight: '22px', marginTop: '2px', lineHeight: '1.5', display: displayIP, }}>IP不能为空</div>
                </Col>
              </Col>
              <Col span={24} style={{ height: portHeight, }}>
                <Col span={8} style={{ textAlign: 'right', }}>
                  <span style={{ display: 'inline-block', marginRight: '4px', color: '#f5222d', fontSize: '14px', lineHeight: 1, }}>*</span>
                  <span>端口：</span>
                </Col>
                <Col span={2}></Col>
                <Col span={14} className={this.state.existPort !=='' ? 'portInput' : ''} >
                  <Input
                    placeholder="请输入端口"
                    style={{ width: '150px', }}
                    value={port}
                    onChange={(e) => this.changePort(e)}
                    allowClear
                  />
                  <div style={{ color: '#f5222d', minHeight: '22px', marginTop: '2px', lineHeight: '1.5', display: displayPort, }}>端口不能为空</div>
                </Col>
              </Col>
              <Col span={24} style={{ height: usernameHeight, }}>
                <Col span={8} style={{ textAlign: 'right', }}>
                  <span style={{ display: 'inline-block', marginRight: '4px', color: '#f5222d', fontSize: '14px', lineHeight: 1, }}>*</span>
                  <span>用户名：</span>
                </Col>
                <Col span={2}></Col>
                <Col span={14} className={this.state.existUsername !=='' ? 'userNameInput' : ''} >
                  <Input
                    placeholder="请输入用户名"
                    style={{ width: '150px', }}
                    value={username}
                    onChange={(e) => this.changeUsername(e)}
                    allowClear
                  />
                  <div style={{ color: '#f5222d', minHeight: '22px', marginTop: '2px', lineHeight: '1.5', display: displayUsername, }}>用户名不能为空</div>
                </Col>
              </Col>
              <Col span={24} style={{ height: '50px', }}>
                <Col span={8} style={{ textAlign: 'right', }}>
                  <span>状态：</span>
                </Col>
                <Col span={2}></Col>
                <Col span={14}>
                  <Switch checkedChildren="生效" unCheckedChildren="失效" defaultChecked={state} onChange={(e) => this.changeState(e)} />
                </Col>
              </Col>
            </Row>
          </Modal>
          {/* handelThis将父组件的属性与方法给子组件访问 */}
          <PubilcTablePagination param={param} handelThis={this} onRef={this.onRef} />
        </div>
      </div>
    )
  }
}

const OPPlatformAddressForm = Form.create()(OPPlatformAddress);
export default OPPlatformAddressForm;