import React, { useState, useEffect } from 'react'
import { Button, Descriptions, Input, Card, Divider, Row, Col } from 'antd'
import styles from './BaseConfig.less'
import { S_GetDataBaseConfig, GetTCPConfigInfo, GetDataBaseConfig, GetBasicInfo } from '@/services/platform/hostmanager'
import { VerticalAlignBottomOutlined } from '@ant-design/icons'
import servie from '../../../../assets/images/icons/服务器管理.svg' 
import configuration from '../../../../assets/images/icons/站点配置.svg'



const BaseConfig = () => {


    const [currentDataBase, setCurrentDataBase] = useState({ userName: "", password: "", dbName: "", ip: "" });
    const [currentSiteInfo, setcurrentSiteInfo] = useState("");


    useEffect(() => {
        getCurrentConfig()
        getSiteCode()
    }, [])

    const getCurrentConfig = () => {

        GetDataBaseConfig().then(
            res => {
                if (res.code === 0) {
                    setCurrentDataBase(res.data)
                }
            }
        )
    }
    const getSiteCode = () => {
        GetBasicInfo().then(
            res => {
                if (res.code === 0) {
                    setcurrentSiteInfo(res.data)
                }
            }
        )
    }

    const encrypt = (word) => {
        let encryptStr = ""
        for (let i = 0; i < word.length; i++) {
            encryptStr += "*"
        }
        return encryptStr
    }
    return (
        <div className={styles.base_container}>
            <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
                <div style={{display:'flex', alignItems:'center', marginTop:'10px'}}>
                    <img src={configuration} style={{ height: '16px'}}/><span style={{ marginLeft: '10px', fontWeight:'bold' }}>站点配置</span>
                </div>
                <Divider />
                <Row>
                    <Col span={3}>
                        <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>站点编号</span>
                    </Col>
                    <Col span={21}>
                        {
                            currentSiteInfo ? <Input value={currentSiteInfo} disabled={true} style={{width:'80%'}}/>
                                : <div>
                                    <Input value={currentSiteInfo} style={{width:'80%'}} />
                                    <Button style={{ marginLeft: "10px" }}>生成编号</Button>
                                </div>
                        }
                    </Col>
                </Row>
                <div style={{ marginTop: '50px', display:'flex', alignItems:'center'}}>
                    <img src={servie} style={{ height: '16px'}} alt="" /><span style={{ marginLeft: '10px', fontWeight:'bold' }}>服务器链接</span>
                </div>
                <Divider />
                <Row gutter={[8, 16]} >
                    <Col span={3}>
                        <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>服务器IP</span>
                    </Col>
                    <Col span={21}>
                        <span style={{ lineHeight: '32px' }}>{currentDataBase.ip}</span>
                    </Col>
                    <Col span={3}>
                        <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>数据库名称</span>
                    </Col>
                    <Col span={21}>
                        <span style={{ lineHeight: '32px' }}>{currentDataBase.dbName}</span>
                    </Col>
                    <Col span={3}>
                        <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>登录名</span>
                    </Col>
                    <Col span={21}>
                        <span style={{ lineHeight: '32px' }}>{currentDataBase.userName}</span>
                    </Col>
                    <Col span={3}>
                        <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>密码</span>
                    </Col>
                    <Col span={21}>
                        <span style={{ lineHeight: '32px' }}>{encrypt(currentDataBase.password)}</span>
                    </Col>
                </Row>
            </Card>
        </div>
    )

    // return (
    //     <div className={styles.base_container}>
    //         <div style={{ backgroundColor: "white", padding: "10px", width: "100%" }}>
    //             <Descriptions title="" bordered >
    //                 <Descriptions.Item label="站点编号" span={3}>
    //                     {
    //                         currentSiteInfo?<Input value={currentSiteInfo} disabled={true} style={{with:"200px"}}/>:<div>
    //                             <Input value={currentSiteInfo} style={{width:"200px"}} />
    //                            <Button style={{marginLeft:"10px"}}>生成编号</Button>
    //                         </div>
    //                     }
    //                 </Descriptions.Item>
    //                 <Descriptions.Item label="服务器IP" span={3}>{currentDataBase.ip}</Descriptions.Item>
    //                 <Descriptions.Item label="数据库名称" span={3}>{currentDataBase.dbName}</Descriptions.Item>
    //                 <Descriptions.Item label="登录名" span={1}>{currentDataBase.userName}</Descriptions.Item>
    //                 <Descriptions.Item label="密码" span={1}>{encrypt(currentDataBase.password)}</Descriptions.Item>

    //             </Descriptions>
    //         </div>
    //     </div>
    // )

}
export default BaseConfig

