import React, { useEffect, useState } from 'react'
import { Card, Form, Input, Button, Select, message, Divider, Spin, Row, Col } from 'antd'
import styles from './messageConfig.less';
import { GetMessageConfigInfo, SaveSystemInfo, ConnectMessPlatform, GetBasicInfo, GetDataBaseConfig } from '@/services/platform/hostmanager'
import message11 from '../../../../assets/images/icons/消息.svg'
import Yes from '../../../../assets/images/icons/正确.svg';
import { CloseCircleFilled } from '@ant-design/icons';

const layout = {
    labelCol: { span: 3 },
    wrapperCol: { span: 21 },

};
const tailLayout = {
    wrapperCol: { offset: 11, span: 13 },

};
const MessageConfig = () => {

    const [loading, setLoading] = useState(false); // 加载
    const [currentAddress, setCurrentAddress] = useState("")
    const [currentDataBase, setCurrentDataBase] = useState({});
    const [currentSiteInfo, setcurrentSiteInfo] = useState("");
    const [show1, setShow1] = useState('none')
    const [show2, setShow2] = useState('none')

    const [form] = Form.useForm();
    const onFinish = (values) => {
        //先测试连接再保存
        //1.测试链接
        setLoading(true)
        ConnectMessPlatform({
            messAddress: values.messageAddress,
            sqlServerIP: currentDataBase.ip,
            loginName: currentDataBase.userName,
            password: currentDataBase.password,
            sqlName: currentDataBase.dbName,
            siteCode: currentSiteInfo
        }).then(res => {
            setLoading(false)
            if (res.code === 0) {
                setShow1('block')
                setShow2('none')
                //2.保存连接
                SaveSystemInfo({
                    configName: "消息平台连接地址",
                    configValue: values.messageAddress
                }).then(
                    res => {
                        if (res.code === 0) {
                            message.info("配置保存成功")
                        } else {
                            message.error(res.msg)
                        }
                    }
                )
            } else {
                setShow1('none')
                setShow2('block')
                message.error(res.msg)
            }
        })

    };

    const getMessageConfig = (CurrentAddress, CurrentDataBase, currentSiteInfo) => {
        setLoading(true)
        ConnectMessPlatform({
            messAddress: CurrentAddress,
            sqlServerIP: CurrentDataBase.ip,
            loginName: CurrentDataBase.userName,
            password: CurrentDataBase.password,
            sqlName: CurrentDataBase.dbName,
            siteCode: currentSiteInfo
        }).then(res => {
            setLoading(false)
            if (res.code === 0) {
                setShow1('block')
                setShow2('none')
            } else {
                setShow1('none')
                setShow2('block')
                message.error(res.msg)
            }
        })
    }

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };



    useEffect(() => {
        GetMessageConfigInfo().then(
            res => {
                if (res.code == 0) {
                    let CurrentAddress = res.data
                    setCurrentAddress(res.data)
                    form.setFieldsValue({ messageAddress: res.data });
                    GetDataBaseConfig().then(
                        res => {
                            if (res.code === 0) {
                                let CurrentDataBase = res.data
                                setCurrentDataBase(res.data)
                                GetBasicInfo().then(
                                    res => {
                                        if (res.code === 0) {
                                            let currentSiteInfo = res.data
                                            setcurrentSiteInfo(res.data)
                                            getMessageConfig(CurrentAddress, CurrentDataBase, currentSiteInfo)
                                        }
                                    }
                                )
                            }
                        }
                    )
                } else {
                    message.info("获取消息平台配置失败!")
                }

            }
        )


    }, [])



    return (
        <div className={styles.message_container}>
            <Card style={{ width: "100%", height: 'calc(100vh - 130px)' }}>
                <Spin spinning={loading} tip="loading">
                    <Form
                        {...layout}
                        form={form}
                        name="basic"
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                    >
                        <div style={{ marginTop: '10px', display: 'flex', alignItems: 'center', marginLeft: '15px' }}>
                            <img src={message11} style={{ height: '16px' }} alt="" /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>消息平台</span>
                        </div>
                        <Divider />
                        <Row>
                            <Col span={21}>
                                <Form.Item
                                    label="服务地址(平台)"
                                    name="messageAddress"
                                    rules={[{ required: true, pattern: new RegExp(/^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])(:\d*)$/, "g"), message: '请输入正确的IP例如:192.168.12.231:8231' }]}
                                >
                                    <Input style={{ width: '94%' }} />
                                </Form.Item>
                            </Col>
                            <Col span={3}>
                                <span style={{ display: show1 }}><img src={Yes} style={{ height: '32px', marginRight: '20px' }} alt="" /><span>已连接</span></span>
                                <span style={{ display: show2 }}><CloseCircleFilled style={{ fontSize: '32px', marginRight: '20px', marginTop: '5px' }} /><span style={{ verticalAlign: 'text-bottom' }}>未连接</span></span>
                            </Col>
                        </Row>
                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit" disabled={currentSiteInfo.length > 0 ? false : true}>
                                保存连接
                            </Button>
                        </Form.Item>
                    </Form>
                </Spin>
            </Card>
        </div>
    )
}
export default MessageConfig