<!--
 * @Description: 数据库配置框
 * @Author: xiaofengzhou
 * @Email: 2946471396@qq.com
 * @Date: 2022-08-05 21:33:28
 * @LastEditTime: 2022-10-19 10:49:45
 * @LastEditors: xiaofengzhou
-->
<template>
    <div>
        <a-modal :maskClosable="false" width="800px" v-model:visible="visible" @cancel="onCancle" @ok="onOk" okText="保存"
            cancelText="取消">
            <div class="head">
                <span class="iconfont icon-screen-code-line head-icon"></span>
                &nbsp;&nbsp;
                <span class="head-text">数据库配置</span>

            </div>
            <div class="change-content">
                <a-button @click="changeStandOrCluster(0)" class="change-btn" :class="!isActive ? 'active' : ''">单机配置
                </a-button>
                <a-button @click="changeStandOrCluster(1)" class="change-btn" :class="isActive ? 'active' : ''">集群配置
                </a-button>
            </div>
            <div v-show="standOrCluster">
                <a-form-model :style="{ width: '100%' }" layout="horizontal" v-bind="{
                    labelCol: { span: 8 },
                    wrapperCol: { span: 14 },
                }" :colon="true" labelAlign="right" :model="databaseConfig.property" :rules="dbRules"
                    ref="databaseConfig">
                    <a-form-model-item label="数据库初始化" prop="initFlag" v-bind="{}">
                        <a-radio-group :disabled="action === 'view'" v-model="databaseConfig.property.initFlag"
                            :options="databaseOptions">
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="数据库类型" prop="dbType" v-bind="{}" placeholder="请选择数据库类型">
                        <a-select size="large" v-model="databaseConfig.property.dbType" :disabled="action === 'view'">
                            <a-select-option value="0">oracle</a-select-option>
                            <a-select-option value="1">pg</a-select-option>
                            <a-select-option value="2">mysql</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="数据库名称" prop="dbName" v-bind="{}">
                        <a-input size="large" :disabled="action === 'view'" v-model="databaseConfig.property.dbName"
                            placeholder="请输入数据库名称" />
                    </a-form-model-item>
                    <a-form-model-item label="数据库地址" prop="dbAddress" v-bind="{}">
                        <a-input size="large" :disabled="action === 'view'" v-model="databaseConfig.property.dbAddress"
                            placeholder="请输入数据库地址" />
                    </a-form-model-item>
                    <a-form-model-item label="数据库端口" prop="dbPort" v-bind="{}">
                        <a-input size="large" :disabled="action === 'view'" v-model="databaseConfig.property.dbPort"
                            placeholder="请输入数据库端口" />
                    </a-form-model-item>
                    <a-form-model-item label="数据库账户名" prop="dbUser" v-bind="{}">
                        <a-input size="large" :disabled="action === 'view'" v-model="databaseConfig.property.dbUser"
                            placeholder="请输入数据库账户名" />
                    </a-form-model-item>
                    <a-form-model-item label="数据库密码" prop="dbPwd" v-bind="{}">
                        <a-input size="large" @click="clearInput" :disabled="action === 'view'"
                            v-model="databaseConfig.property.dbPwd" placeholder="请输入数据库密码" type="password" />
                    </a-form-model-item>

                </a-form-model>
                <a-form-model :style="{ width: '100%' }" layout="horizontal" v-bind="{
                    labelCol: { span: 8 },
                    wrapperCol: { span: 14 },
                }" :colon="true" labelAlign="right" :model="databaseConfig" :rules="dbRules" ref="middlewareConfig">
                    <a-form-model-item label="是否需要安装中间件" prop="installedFlag" v-bind="{}">
                        <a-radio-group :disabled="action === 'view'" v-model="databaseConfig.installedFlag"
                            :options="installedFlagOption">
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item v-if="databaseConfig.installedFlag === '0'" label="请选择中间件脚本" prop="scriptId"
                        v-bind="{}" placeholder="请选择中间件脚本">
                        <a-select size="large" :options="allScriptsSel" v-model="databaseConfig.scriptId"
                            :disabled="action === 'view'">
                        </a-select>
                    </a-form-model-item>
                </a-form-model>
            </div>
            <div v-show="!standOrCluster" style="height:500px;overflow:scroll">
                <div v-for="(item, index) in databaseClusterConfig">
                    <a-form-model :style="{ width: '100%' }" layout="horizontal" v-bind="{
                        labelCol: { span: 8 },
                        wrapperCol: { span: 14 },
                    }" :colon="true" labelAlign="right" :model="item.property" :rules="dbRules"
                        ref="databaseClusterConfig">
                        <a-form-model-item label="数据库初始化" prop="initFlag" v-bind="{}">
                            <a-radio-group :disabled="action === 'view'" v-model="item.property.initFlag"
                                :options="databaseOptions">
                            </a-radio-group>
                        </a-form-model-item>
                        <a-form-model-item label="数据库类型" prop="dbType" v-bind="{}" placeholder="请选择数据库类型">
                            <a-select :disabled="action === 'view'" v-model="item.property.dbType">
                                <a-select-option value="0">oracle</a-select-option>
                                <a-select-option value="1">pg</a-select-option>
                                <a-select-option value="2">mysql</a-select-option>
                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item label="数据库名称" :prop="'dbName'" v-bind="{}">
                            <a-input size="large" :disabled="action === 'view'" v-model="item.property.dbName"
                                placeholder="请输入数据库名称" />
                        </a-form-model-item>
                        <a-form-model-item label="数据库地址" prop="dbAddress" v-bind="{}">
                            <a-input size="large" :disabled="action === 'view'" v-model="item.property.dbAddress"
                                placeholder="请输入数据库地址" />
                        </a-form-model-item>
                        <a-form-model-item label="数据库端口" prop="dbPort" v-bind="{}">
                            <a-input size="large" :disabled="action === 'view'" v-model="item.property.dbPort"
                                placeholder="请输入数据库端口" />
                        </a-form-model-item>
                        <a-form-model-item label="数据库账户名" prop="dbUser" v-bind="{}">
                            <a-input size="large" :disabled="action === 'view'" v-model="item.property.dbUser"
                                placeholder="请输入数据库账户名" />
                        </a-form-model-item>
                        <a-form-model-item label="数据库密码" prop="dbPwd" v-bind="{}">
                            <a-input size="large" :disabled="action === 'view'" v-model="item.property.dbPwd" placeholder="请输入数据库密码"
                                type="password" />
                        </a-form-model-item>

                    </a-form-model>
                    <a-form-model :style="{ width: '100%' }" layout="horizontal" v-bind="{
                        labelCol: { span: 8 },
                        wrapperCol: { span: 14 },
                    }" :colon="true" labelAlign="right" :model="item" :rules="dbRules" ref="middlewareClusterConfig">
                        <a-form-model-item label="是否需要安装中间件" prop="installedFlag" v-bind="{}">
                            <a-radio-group :disabled="action === 'view'" v-model="item.installedFlag"
                                :options="installedFlagOption">
                            </a-radio-group>
                        </a-form-model-item>
                        <a-form-model-item v-if="item.installedFlag === '0'" label="请选择中间件脚本" prop="scriptId"
                            v-bind="{}" placeholder="请选择中间件脚本">
                            <a-select size="large" :options="allScriptsSel" v-model="item.scriptId" :disabled="action === 'view'">
                            </a-select>
                        </a-form-model-item>
                    </a-form-model>

                </div>
                <div class="add-btn-container">
                    <button v-show="action !== 'view'" @click="expandForm" class="add-btn">
                        <span class="iconfont icon-roundadd add-btn-span"></span>
                    </button>
                </div>
                <!-- <div class="add-btn-container">
                    <button v-show="action !== 'view'" @click="reduceForm" class="add-btn">
                        <span class="iconfont icon-reduce reduce-btn-span"></span>
                    </button>
                </div> -->
            </div>

        </a-modal>
    </div>
</template>

<script>
const isInstallClusster = [{ label: '是', value: true }, { label: '否', value: false }]

export default {
    data() {

        return {
            publicKey: "",
            allScriptsSel: [],
            action: 'view',
            isActive: false,
            deployEnvOption: [{ label: '测试环境', value: '0' }, { label: '生产环境', value: '1' }],
            isConfigClutser: false,
            isInstallClusster,
            installedFlagOption: [{ label: '安装', value: '0' },
            { label: '不安装', value: '1' }],
            visible: false,
            standOrCluster: true,
            defaultDatabaseConfig: {
                middlewareType: '0',
                scriptId: '',
                property: {
                    initFlag: '1',
                    dbType: '1',
                    dbName: '',
                    dbAddress: '',
                    dbPort: "",
                    dbUser: '',
                    dbPwd: '',
                },
                // 集群还是单机
                configType: '0',
                // 是否集成
                installedFlag: '0',
                env: '0'

            },
            databaseConfig: {
                middlewareType: '0',
                scriptId: '',
                property: {
                    initFlag: '1',
                    dbType: '1',
                    dbName: '',
                    dbAddress: '',
                    dbPort: "",
                    dbUser: '',
                    dbPwd: '',
                    scriptId: '',

                },
                // 集群还是单机
                configType: '0',
                // 是否集成
                installedFlag: '0',
                env: '0'

            },
            defaultDatabaseClusterConfig:
                [
                    {
                        scriptId: '',
                        middlewareType: '0',
                        property: {
                            dbName: '',
                            initFlag: '1',
                            dbType: '1',
                            dbAddress: '',
                            dbPort: "",
                            dbUser: '',
                            dbPwd: '',
                        },
                        properties: '',
                        // 集群还是单机
                        configType: '1',
                        // 是否集成
                        installedFlag: '0'

                    }
                ]
            ,
            databaseClusterConfig:
                [
                    {
                        scriptId: '',
                        middlewareType: '0',
                        property: {
                            dbName: '',
                            initFlag: '1',
                            dbType: '1',
                            dbAddress: '',
                            dbPort: "",
                            dbUser: '',
                            dbPwd: '',
                        },
                        properties: '',
                        // 集群还是单机
                        configType: '1',
                        // 是否集成
                        installedFlag: '0'

                    }
                ]
            ,
            databaseOptions: [{ label: '执行初始化', value: '1' }, { label: '不执行初始化', value: '0' }],
            dbRules: {
                scriptId: [
                    {
                        required: true,
                        message: "请选择脚本",
                        trigger: "change",
                    }
                ],

                initFlag: [
                    {
                        required: true,
                        message: "是否初始化不能为空",
                        trigger: "change",
                    }

                ],
                dbType: [
                    {
                        required: true,
                        message: "数据库类型不能为空",
                        trigger: "change",
                    }
                ],
                dbName: [
                    {
                        required: true,
                        message: "数据库名称不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "数据库名称长度不能大于255",
                        trigger: "blur",
                    },
                ],
                dbAddress: [
                    {
                        required: true,
                        message: "数据库地址不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "数据库地址长度不能大于255",
                        trigger: "blur",
                    },
                ],
                dbPort: [

                    {
                        required: true,
                        message: "端口号不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "端口号长度不能大于255",
                        trigger: "blur",
                    },
                ],
                dbUser: [
                    {
                        required: true,
                        message: "数据库账户名不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "数据库账户名长度不能大于255",
                        trigger: "blur",
                    },
                ],
                dbPwd: [
                    {
                        required: true,
                        message: "数据库密码不能为空",
                        trigger: "blur",
                    }

                ]

            },


        }
    },
    methods: {
        // clearInputCluster(item) {
        //     item.property.dbPwd = ""
        // },
        clearInput() {
            if (this.databaseConfig.property.dbPwd.length > 100) {
                this.databaseConfig.property.dbPwd = ""

            }
        },
        initCluster(record) {
            if (record.length === 0) {
                this.isConfigClutser = false
                this.databaseClusterConfig = JSON.parse(JSON.stringify(this.defaultDatabaseClusterConfig))
            } else {
                this.isConfigClutser = true
                this.databaseClusterConfig = record

            }
            // 清空密码输入框
            // this.databaseClusterConfig.map((item)=>{
            //     item.property.dbPwd=""
            // })
        },

        init(record) {
            
            this.databaseConfig = record
            // 清空密码输入框
            // this.databaseConfig.property.dbPwd=""
        },
        reset() {
            this.databaseConfig = JSON.parse(JSON.stringify(this.defaultDatabaseConfig))
            this.databaseClusterConfig = JSON.parse(JSON.stringify(this.defaultDatabaseClusterConfig))
        },
        onOk() {

            if (this.action === 'view') {
                this.visible = false
            } else {
                // 对密码进行加密处理
                const jse = new this.$jsEncrypt();

                jse.setPublicKey(this.$store.getters.publicKey);

                if (!this.standOrCluster) {

                    let p1 = new Promise((resolve, reject) => {

                        let flag = true
                        for (var x in this.$refs["middlewareClusterConfig"]) {
                            // 批量校验输入框
                            this.$refs["middlewareClusterConfig"][x].validate((valid) => {
                                if (!valid) {
                                    flag = false
                                }

                            })
                        }
                        if (flag) {
                            resolve()
                        }
                    })

                    let p3 = new Promise((resolve, reject) => {
                        let flag = true
                        for (var x in this.$refs["databaseClusterConfig"]) {
                            // 批量校验输入框
                            this.$refs["databaseClusterConfig"][x].validate((valid) => {
                                if (!valid) {
                                    flag = false
                                }

                            })
                        }
                        if (flag) {
                            resolve()
                        }
                    })
                    Promise.all([p1, p3]).then(() => {
                        // 增加逻辑
                        // 判断是否为修改
                        this.databaseClusterConfig.map((item, index) => {
                            // 位数大于100不做加密处理
                            if (item.property.dbPwd.length < 100) {
                                item.property.dbPwd = jse.encrypt(item.property.dbPwd)
                            }
                        })
                        this.databaseClusterConfig.map((item, index) => {
                            item.properties = JSON.stringify(item.property)
                        })
                        this.$emit("databaseConfig", this.databaseClusterConfig, 2);
                        this.visible = false
                    })



                } else {
                    let p1 = new Promise((resolve, reject) => {
                        this.$refs["middlewareConfig"].validate((valid) => {
                            if (valid) {
                                resolve()
                            }
                        })
                    })
                    let p2 = new Promise((resolve, reject) => {
                        this.$refs["databaseConfig"].validate((valid) => {
                            if (valid) {
                                resolve()
                            }
                        })
                    })
                    Promise.all([p1, p2]).then(() => {
                        if (this.databaseConfig.property.dbPwd.length < 100) {
                            this.databaseConfig.property.dbPwd = jse.encrypt(this.databaseConfig.property.dbPwd)
                        }
                        this.$emit("databaseConfig", this.databaseConfig, 1);
                        this.visible = false
                    })

                }
            }


        },
        // 取消
        onCancle() {
            if (this.action === 'view') {
                this.visible = false
            } else {
                this.databaseConfig = JSON.parse(JSON.stringify(this.defaultDatabaseConfig))
                this.databaseClusterConfig = JSON.parse(JSON.stringify(this.defaultDatabaseClusterConfig))
                this.$emit("databaseConfig", "cancel");
            }
        },
        // 切换单机和集群
        changeStandOrCluster(val) {
            if (val === 1) {
                this.standOrCluster = false
                this.isActive = true
            } else {
                this.standOrCluster = true
                this.isActive = false

            }
        },
        // 集群添加
        expandForm() {
            this.databaseClusterConfig.push(
                {
                    scriptId: '',

                    middlewareType: '0',
                    property: {
                        dbName: '',
                        initFlag: '1',
                        dbType: '1',
                        dbAddress: '',
                        dbPort: "",
                        dbUser: '',
                        dbPwd: '',
                    },
                    // 集群还是单机
                    configType: '1',
                    // 是否集成
                    installedFlag: '0'

                }
            )
        },
        reduceForm() {
            this.databaseClusterConfig.pop()
        }

    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {

    }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
/deep/ .ant-input{
    font-size: 16px !important;
}
/deep/ .ant-select{
    font-size: 16px !important;
}
/deep/ .ant-btn{
    font-size: 16px !important;
}

/deep/ .ant-form label{
    font-size: 16px !important;
}
.head {
    text-align: center;
    margin-bottom: 5px;

    .head-icon {
        font-size: 28px;
        vertical-align: middle;
        color: #284f84;
    }

    .head-text {
        font-size: 18px;
        vertical-align: middle;
        color: #284f84;
    }
}

.change-content {
    text-align: center;
    margin-bottom: 5px;


    .active {
        border-bottom: 2px solid #284f84;
    }

    .change-btn {
        /* border: none; */
        border-radius: 0%;
        border-top: none;
        border-left: none;
        border-right: none;

    }
}

.add-btn-container {
    text-align: center;

    .add-btn {
        border: none;
        background: none;
    }

    .add-btn-span {
        color: #284f84;
        font-size: 20px;
    }

    .reduce-btn-span {
        color: #284f84;
        font-size: 25px;
    }

}
</style>