import React from 'react';
import { connect } from 'dva';
import { Button, Row, Col, Form, Input, Select, DatePicker, Modal, Transfer, Spin, Table, Tabs, Popconfirm, message } from 'antd';
import {
  extend,
  extendRule,
  initFilter,
  initQueryFilter,
  getOnlyPropertyData,
  extendInclude,
  getDataFieldValue, guid, initFilterGroup, extendGroupRule
} from "../../../utils/common";
import moment from 'moment'
import FormPage from '../../FormPage';
import storage from "../../../utils/storage";

import config from "../../../config.js";

const FormItem = Form.Item;
const Option = Select.Option;
const TabPane = Tabs.TabPane;
const { TextArea } = Input;
class FormConfigSqlPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      btns: [],
      title: '流程审核',
      historyData: [],
      remark: '',
    };
  };

  componentDidMount() {
    this.props.form.resetFields();
    this.loadData();
    this.props.dispatch({
      type: 'custom/save',
      payload: {
        formConfigSqlClick: false
      },
    });
  }

  componentWillReceiveProps(NextProps) {
    if (NextProps.custom.formConfigSqlClick) {
      this.props.form.resetFields();
      this.loadData();
      this.props.dispatch({
        type: 'custom/save',
        payload: {
          formConfigSqlClick: false
        },
      });
    }
  }

  loadData = () => {
    this.setState({
      sqls: '',
      data: {
        FormType: 1,
        DataBaseType: 1,
        DstOrgId: storage('lacal').getItem('formConfigSqlDstOrgId' + this.props.login.userId).val,
        DstFormConfigVersion: '',
        SqlType: "0",
        StartTime: null,
        loadSqlFileUrl: null,
        dbConnStr: storage('lacal').getItem('formConfigSqlDbConnStr' + this.props.login.userId).val,
        formCode: ''
      }
    })
  };





  getSqlsByFormId = () => {
    const { data } = this.props;
    const { ids } = data ? data : {};
    if (!this.state.data.FormType) {
      message.error('请选择导出类型');
      return;
    }
    if (!this.state.data.DataBaseType) {
      message.error('请选择数据库类型');
      return;
    }
    // if(!this.state.data.DstOrgId) {
    //   message.error('请输入目标组织ID');
    //   return;
    // }

    if (!ids && !this.state.data.StartTime && !this.state.data.formCode) {
      message.error('为了效率考虑，请选择表单记录或者选择开始时间');
      return;
    }
    storage('lacal').setItem(('formConfigSqlDstOrgId' + this.props.login.userId), this.state.data.DstOrgId);
    storage('lacal').setItem(('formConfigSqlDbConnStr' + this.props.login.userId), this.state.data.dbConnStr);
    var json = initFilter(this.props.login.OrgId);
    json['Keyword'] = ids;
    json['Parameter1'] = this.state.data.DataBaseType;
    json['Parameter2'] = this.state.data.DstOrgId;
    json['Parameter3'] = this.state.data.DstFormConfigVersion;
    json['Parameter4'] = this.state.data.SqlType;
    json['Parameter5'] = this.state.data.StartTime;
    json['Parameter7'] = this.state.data.formConfigSqlType;
    json['Parameter8'] = this.state.data.dbConnStr;
    json['Parameter9'] = true;
    json['Parameter10'] = this.state.data.FormType;
    json['Parameter11'] = this.state.data.formCode;
    this.props.dispatch({
      type: 'PFForm/getSqlsByFormId',
      payload: json,
      onComplete: (ret) => {
        if (this.state.data.formConfigSqlType === 1 || this.state.data.formConfigSqlType === '1') {
          this.setState({
            loadSqlFileUrl: ret,
            sqls: ret ? "请正在下载文件" : "无任何配置信息"
          }, () => {
            if (ret) {
              this.aRef.click();
            }
          })
        }
        else {
          this.setState({
            sqls: ret,
            loadSqlFileUrl: null,
          })
        }
      }
    });
  }

  handleLoadSqlFile = () => {

  }


  render() {


    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };



    return (
      <div>
        <Form>
          <Row style={{ marginTop: '20px' }}>
            <Col span={12}>
              <Form.Item
                label={'导出类型'}
                {...formItemLayout}
              >
                <Select value={this.state.data.FormType ? this.state.data.FormType.toString() : '0'} onChange={(e) => {
                  const data = { ...this.state.data };
                  data.FormType = e;
                  this.setState({
                    data,
                  })
                }} >
                  <Option value="1">表单</Option>
                  <Option value="2">菜单</Option>
                  <Option value="3">跑批队列</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label={'目标数据库类型'}
                {...formItemLayout}
              >
                <Select value={this.state.data.DataBaseType ? this.state.data.DataBaseType.toString() : '1'} onChange={(e) => {
                  const data = { ...this.state.data };
                  data.DataBaseType = e;
                  this.setState({
                    data,
                  })
                }} >
                  <Option value="1">SQL</Option>
                  <Option value="2">MySQL</Option>
                  <Option value="3">Oracle</Option>
                  <Option value="4">Postgresql</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label={'类型'}
                {...formItemLayout}
              >
                <Select placeholder="类型" value={this.state.data.formConfigSqlType ? this.state.data.formConfigSqlType.toString() : '0'} onChange={(e) => {
                  const data = { ...this.state.data };
                  data.formConfigSqlType = e;
                  this.setState({
                    data,
                  })
                }} >
                  {
                    this.props.app.enums && this.props.app.enums.PFFormConfigSqlTypeEnum ? this.props.app.enums.PFFormConfigSqlTypeEnum.options.map(t => {
                      return <Option value={t.value.toString()}>{t.label}</Option>
                    }) : null
                  }
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label={'开始时间'}
                {...formItemLayout}
              >
                <DatePicker value={this.state.data.StartTime ? moment(this.state.data.StartTime) : null} onChange={(e, dataStr) => {
                  const data = { ...this.state.data };
                  data.StartTime = dataStr;
                  this.setState({
                    data,
                  })
                }} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label={'目标组织ID'}
                {...formItemLayout}
              >
                {/* <Input  value={this.state.data.DstOrgId} onChange={(e)=>{
                    const data={...this.state.data};
                   data.DstOrgId=e.target.value;
                    this.setState({
                      data,
                    })
                 }} /> */}
                <Select placeholder="目标组织ID" onChange={(e) => {
                  const data = { ...this.state.data };
                  data.DstOrgId = e;
                  this.setState({
                    data,
                  })
                }} >
                  {/* <Option value="b043b28b-bbc3-c452-6052-4fba1457abfa">行洛坑</Option>
                  <Option value="d9871ba8-0eec-9e4a-bb87-7d5a540d8913">洛阳豫鹭</Option>
                  <Option value="8b3c41aa-51b1-7ce9-1879-248a038c1b5c">都昌金鼎</Option>
                  <Option value="8f1cf418-8bf3-ea3f-7a6d-fc5d61247008">龙岩稀土</Option>
                  <Option value="3EFD5276-632B-E379-9FF3-7A7546591FCA">广西博白</Option>
                  <Option value="A3DCE14A-13D9-D879-D9AB-821D4A3F1F93">SMS</Option>
                  <Option value="88888888-8888-8888-8888-888888888888">demo8</Option> */}
                   <Option value="00300000-0000-0000-0000-000000000000">金源</Option>
                  <Option value="00500000-0000-0000-0000-000000000000">邦泰</Option>
                  <Option value="01000000-0000-0000-0000-000000000000">路源</Option>
                  <Option value="01500000-0000-0000-0000-000000000000">金能昆仑</Option>
                  <Option value="02000000-0000-0000-0000-000000000000">西拓</Option>

                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label={'目标表单版本'}
                {...formItemLayout}
              >
                <Input value={this.state.data.DstFormConfigVersion} onChange={(e) => {
                  const data = { ...this.state.data };
                  data.DstFormConfigVersion = e.target.value;
                  this.setState({
                    data,
                  })
                }} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label={'语法类型'}
                {...formItemLayout}
              >
                <Select value={this.state.data.SqlType ? this.state.data.SqlType.toString() : '0'} onChange={(e) => {
                  const data = { ...this.state.data };
                  data.SqlType = e;
                  this.setState({
                    data,
                  })
                }} >
                  <Option value="0">更新和插入</Option>
                  <Option value="1">仅更新</Option>
                  <Option value="2">仅插入</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label={'连接字符串'}
                {...{
                  labelCol: { span: 4 },
                  wrapperCol: { span: 20 },
                }}
              >
                <Input style={{ width: "100%" }} value={this.state.data.dbConnStr} onChange={(e) => {
                  const data = { ...this.state.data };
                  data.dbConnStr = e.target.value;
                  this.setState({
                    data,
                  })
                }} />
              </Form.Item>
            </Col>


            <Col span={12}>
              <Form.Item
                label={'表单编号'}
                {...{
                  labelCol: { span: 4 },
                  wrapperCol: { span: 16 },
                }}
              >

                <Input placeholder='表单编号用 | 拼接' value={this.state.data.formCode} onChange={(e) => {
                  const data = { ...this.state.data };
                  data.formCode = e.target.value;
                  this.setState({
                    data,
                  })
                }} />

              </Form.Item>
            </Col>

            <Col span={12}>
              <ul>
                <li>行洛坑 &nbsp;&nbsp;&nbsp;b043b28b-bbc3-c452-6052-4fba1457abfa</li>
                <li>洛阳豫鹭 d9871ba8-0eec-9e4a-bb87-7d5a540d8913</li>
                <li>都昌金鼎 8b3c41aa-51b1-7ce9-1879-248a038c1b5c</li>
                <li>龙岩稀土 8f1cf418-8bf3-ea3f-7a6d-fc5d61247008</li>
                <li>广西博白 3EFD5276-632B-E379-9FF3-7A7546591FCA</li>
                <li>demo8  88888888-8888-8888-8888-888888888888</li>
                <li>SMS &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A3DCE14A-13D9-D879-D9AB-821D4A3F1F93</li>
                <li>连城锰矿 11111111-1111-1111-1111-111111111111</li>
              </ul>
            </Col>

          </Row>

          <Row style={{ marginTop: '20px' }}>
            <Col style={{ textAlign: 'right' }}>
              <Button type={'primary'} icon={'eye'} onClick={this.getSqlsByFormId} >确认</Button>
            </Col>
          </Row>
          <a href={config.serviceHost('api/' + this.state.loadSqlFileUrl)} ref={ref => this.aRef = ref} download />
          <Row style={{ marginTop: '20px' }}>
            <Col span={24}>
              <Form.Item>
                <TextArea rows={10} style={{ width: "100%" }} value={this.state.sqls} disabled={true} />
              </Form.Item>
            </Col>
          </Row>

        </Form>
      </div>
    );
  }

}

FormConfigSqlPage.propTypes = {
};

export default connect(({ login, loading, custom, app }) => ({ login, loading, custom, app }))(Form.create()(FormConfigSqlPage));