import React, { useState, useEffect, useRef } from 'react';
import { Button,Form,Input,Message,Select, Switch } from '@alifd/next';
import styles from './index.module.scss';
import { request } from 'ice';

const postData = {
    mysqlIp: process.env.NODE_ENV === 'development' ? 'rm-uf6z3z6jq11x653d77o.mysql.rds.aliyuncs.com' : undefined,
    mysqlPort: '3306',
    mysqlUsername: 'root',
    mysqlUserpass: process.env.NODE_ENV === 'development' ? 'DQ@0lW##kBb2+-jPZC1s$Ma0h5$9W((q' : undefined,
    mysqlName: '',
}

const tjData = { packPath:'com.yunzhi',author:'yansen' }
const FormItem = Form.Item;

const formItemLayout = {
    labelCol: {xxs: 4, l: 4},
    wrapperCol: {xxs: 20, l: 16}
};

const Guide = props => {
    const [dataSource, setDataSource] = useState([])
    const [dbData, setDbData] = useState({})

    const handleSubmit = (values) => {
        console.log('Get form value:', values);
        setDbData(values)
        request({
          url: '/mydb/connection',
          method: 'post',
          data: values
        }).then((response) => {
            setDataSource(response)
            Message.success('连接成功，请选择要生成的库')})
        .catch((err) => {Message.error('连接出错,请检查配置')});
    };
      
    const createdCode = (values) => {
        console.log('Get form value22:', {...values,...dbData});
        request({
            url: '/mydb/create',
            method: 'post',
            responseType: 'arraybuffer',
            data: {...values,...dbData}
          }).then((response) => {
              var binaryData = [];
              binaryData.push(response);
              let blobUrl = window.URL.createObjectURL(new Blob(binaryData, {type: "application/zip"}))
              let aElement = document.createElement('a'); //获取a标签元素
              let filename = 'code.zip';//设置文件名称
              aElement.href = blobUrl;//设置a标签路径
              aElement.download = filename;
              aElement.click();
              window.URL.revokeObjectURL(blobUrl);
          })
          .catch((err) => {console.error(err) ; Message.error('生成失败请重试，或联系工作人员')});
    };

    return (
  <div className={styles.container}>
      <div>
        <Form style={{width: '60%'}} {...formItemLayout} value={postData}>
            <FormItem label="数据库类型">
                <p>MSQL</p>
            </FormItem>
            <FormItem label="数据库地址" required requiredMessage="必填">
                <Input name="mysqlIp" placeholder="请输入数据库地址"/>
            </FormItem>
            <FormItem label="端口号" required requiredMessage="必填">
                <Input name="mysqlPort" placeholder="请输入数据库端口号"/>
            </FormItem>
            <FormItem label="数据库用户名" required requiredMessage="必填">
                <Input name="mysqlUsername" placeholder="请输入数据库用户名"/>
            </FormItem>
            <FormItem label="数据库密码" required requiredMessage="必填">
                <Input.Password name="mysqlUserpass" placeholder="请输入数据库密码"/>
            </FormItem>
            <FormItem label="数据库库名" required requiredMessage="必填">
                <Input name="mysqlName" placeholder="请输入数据库库名"/>
            </FormItem>
            <FormItem label=" ">
                <Form.Submit onClick={handleSubmit}>连接数据库</Form.Submit>
            </FormItem>
        </Form>
      </div>
      <div>
      <Form style={{width: '60%'}} {...formItemLayout} value={tjData}>
            <FormItem label="包路径" help="如：com.huiju.estateagents">
                <Input name="packPath" placeholder="请输入包路径"/>
            </FormItem>
            <FormItem label="作者">
                <Input name="author" placeholder="请输入作者"/>
            </FormItem>
            <FormItem label="开启 Swagger2" style={{  textAlign: 'left' }}>
                <Switch name="swagger2" checkedChildren="on" unCheckedChildren="off" style={{ width: `60px` }} />
            </FormItem>
            <FormItem label="要生成代码的表" required requiredMessage="必填">
                <Select name="mysqlLib" mode="multiple" showSearch dataSource={dataSource} style={{width: 700}} />
            </FormItem>
            <FormItem label=" ">
                <a download><Form.Submit onClick={createdCode}>生成代码</Form.Submit></a>
            </FormItem>
        </Form>
       
      </div>
  </div>)
}

export default Guide;
