<!--
 * @Description: nacos配置框
 * @Author: xiaofengzhou
 * @Email: 2946471396@qq.com
 * @Date: 2022-08-05 21:36:15
 * @LastEditTime: 2022-10-19 12:20:06
 * @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">Nacos配置</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">
                <div style="text-align: center;"><span>注册中心</span></div>
                <a-form-model :style="{ width: '100%' }" layout="horizontal" v-bind="{
                    labelCol: { span: 6 },
                    wrapperCol: { span: 16 },
                }" :colon="true" labelAlign="right" :model="nacosConfig.property" :rules="nacosRules"
                    ref="nacosConfig">
                    <a-form-model-item label="nacos地址" prop="nacosDiscoveryAddress" v-bind="{}">
                        <a-input size="large" :disabled="action === 'view'" v-model="nacosConfig.property.nacosDiscoveryAddress"
                            placeholder="请输入nacos地址" />
                    </a-form-model-item>
                    <a-form-model-item label="nacos端口号" prop="nacosDiscoveryPort" v-bind="{}">
                        <a-input size="large" :disabled="action === 'view'" v-model="nacosConfig.property.nacosDiscoveryPort"
                            placeholder="请输入nacos端口号" />
                    </a-form-model-item>
                </a-form-model>
                <div style="text-align: center;"><span>配置中心</span></div>
                <a-form-model :style="{ width: '100%' }" layout="horizontal" v-bind="{
                    labelCol: { span: 6 },
                    wrapperCol: { span: 16 },
                }" :colon="true" labelAlign="right" :model="serverConfig.property" :rules="nacosRules"
                    ref="nacosSingleConfig">
                    <a-form-model-item label="nacos地址" prop="nacosConfigAddress" v-bind="{}">
                        <a-input size="large" :disabled="action === 'view'" v-model="serverConfig.property.nacosConfigAddress"
                            placeholder="请输入nacos地址" />
                    </a-form-model-item>
                    <a-form-model-item label="nacos端口号" prop="nacosConfigPort" v-bind="{}">
                        <a-input size="large" :disabled="action === 'view'" v-model="serverConfig.property.nacosConfigPort"
                            placeholder="请输入nacos端口号" />
                    </a-form-model-item>
                    <a-form-model-item label="命名空间" prop="nacosNamespace" v-bind="{}">
                        <a-input size="large" :disabled="action === 'view'" v-model="serverConfig.property.nacosNamespace"
                            placeholder="请输入命名空间" />
                    </a-form-model-item>
                    <a-form-model-item label="组" prop="nacosGroup" v-bind="{}">
                        <a-input size="large" :disabled="action === 'view'" v-model="serverConfig.property.nacosGroup"
                            placeholder="请输入组" />
                    </a-form-model-item>
                    <a-form-model-item label="文件扩展形式" prop="nacosFileExtension" v-bind="{}">
                        <a-input size="large" :disabled="action === 'view'" v-model="serverConfig.property.nacosFileExtension"
                            placeholder="请输入文件扩展形式" />
                    </a-form-model-item>
                    <a-form-model-item label="文件前缀名" prop="nacosPrefix" v-bind="{}">
                        <a-input size="large" :disabled="action === 'view'" v-model="serverConfig.property.nacosPrefix"
                            placeholder="请输入文件前缀名" />
                    </a-form-model-item>

                    <!-- <a-form-model-item label="请选择部署环境" prop="env" v-bind="{}">
                        <a-radio-group @change="envChange" v-model="nacosConfig.env" :options="deployEnvOption">
                        </a-radio-group>
                    </a-form-model-item> -->
                </a-form-model>
                <a-form-model :style="{ width: '100%' }" layout="horizontal" v-bind="{
                    labelCol: { span: 6 },
                    wrapperCol: { span: 16 },
                }" :colon="true" labelAlign="right" :model="serverConfig" :rules="nacosRules" ref="middlewareConfig">
                    <a-form-model-item label="是否需要安装中间件" prop="installedFlag" v-bind="{}">
                        <a-radio-group :disabled="action === 'view'" v-model="serverConfig.installedFlag"
                            :options="installedFlagOption" @change="asyncSelect">
                        </a-radio-group>
                    </a-form-model-item>

                    <a-form-model-item v-if="serverConfig.installedFlag === '0'" label="请选择中间件脚本" prop="scriptId"
                        v-bind="{}" placeholder="请选择中间件脚本">
                        <a-select size="large" @change="asyncSelectScript" :options="allScriptsSel" v-model="serverConfig.scriptId"
                            :disabled="action === 'view'">

                        </a-select>
                    </a-form-model-item>
                </a-form-model>

            </div>
            <div v-show="!standOrCluster" style="height:500px;overflow:scroll">
                <!-- <div style="padding-left: 27px;margin-bottom: 10px;margin-top: 10px;">
                    是否配置集群:&nbsp;&nbsp;&nbsp;<a-radio-group :disabled="action === 'view'" v-model="isConfigClutser"
                        :options="isInstallClusster">
                    </a-radio-group>
                </div> -->
                <div v-for="(item, index) in nacosClusterConfig">
                <div style="text-align: center;"><span>注册中心</span></div>
                    <a-form-model :style="{ width: '100%' }" layout="horizontal" v-bind="{
                        labelCol: { span: 6 },
                        wrapperCol: { span: 18 },
                    }" :colon="true" labelAlign="right" :model="item.property" :rules="nacosRules"
                        ref="nacosClusterConfig">
                        <a-form-model-item label="nacos地址" prop="nacosDiscoveryAddress" v-bind="{}">
                            <a-input size="large" :disabled="action === 'view'" v-model="item.property.nacosDiscoveryAddress"
                                placeholder="请输入nacos地址" />
                        </a-form-model-item>
                        <a-form-model-item label="nacos端口号" prop="nacosDiscoveryPort" v-bind="{}">
                            <a-input size="large" :disabled="action === 'view'" v-model="item.property.nacosDiscoveryPort"
                                placeholder="请输入nacos端口号" />
                        </a-form-model-item>
                        <!-- <a-form-model-item label="是否需要安装中间件" prop="installedFlag" v-bind="{}">
                            <a-radio-group :disabled="action === 'view'" v-model="item.installedFlag"
                                :options="installedFlagOption" @change="asyncSelect">
                            </a-radio-group>
                        </a-form-model-item> -->
                    </a-form-model>
                     <a-form-model :style="{ width: '100%' }" layout="horizontal" v-bind="{
                        labelCol: { span: 6 },
                        wrapperCol: { span: 16 },
                    }" :colon="true" labelAlign="right" :model="item" :rules="nacosRules"
                        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" v-show="action !== 'view'">
                    <button @click="expandNacosRegisterForm" class="add-btn">
                        <span class="iconfont icon-roundadd add-btn-span"></span>
                    </button>
                </div>
                <div style="text-align: center;"><span>配置中心</span></div>
                <div v-for="(item, index) in nacosServerClusterConfig">
                    <a-form-model :style="{ width: '100%' }" layout="horizontal" v-bind="{
                        labelCol: { span: 6 },
                        wrapperCol: { span: 16 },
                    }" :colon="true" labelAlign="right" :model="item.property" :rules="nacosRules"
                        ref="nacosServerClusterConfig">
                        <a-form-model-item label="nacos地址" prop="nacosConfigAddress" v-bind="{}">
                            <a-input size="large" :disabled="action === 'view'" v-model="item.property.nacosConfigAddress"
                                placeholder="请输入nacos地址" />
                        </a-form-model-item>
                        <a-form-model-item label="nacos端口号" prop="nacosConfigPort" v-bind="{}">
                            <a-input size="large" :disabled="action === 'view'" v-model="item.property.nacosConfigPort"
                                placeholder="请输入nacos端口号" />
                        </a-form-model-item>
                        <a-form-model-item label="命名空间" prop="nacosNamespace" v-bind="{}">
                            <a-input size="large" :disabled="action === 'view'" v-model="item.property.nacosNamespace"
                                placeholder="请输入命名空间" />
                        </a-form-model-item>
                        <a-form-model-item label="组" prop="nacosGroup" v-bind="{}">
                            <a-input size="large" :disabled="action === 'view'" v-model="item.property.nacosGroup"
                                placeholder="请输入组" />
                        </a-form-model-item>
                        <a-form-model-item label="文件扩展形式" prop="nacosFileExtension" v-bind="{}">
                            <a-input size="large" :disabled="action === 'view'" v-model="item.property.nacosFileExtension"
                                placeholder="请输入文件扩展形式" />
                        </a-form-model-item>
                        <a-form-model-item label="文件前缀名" prop="nacosPrefix" v-bind="{}">
                            <a-input size="large" :disabled="action === 'view'" v-model="item.property.nacosPrefix"
                                placeholder="请输入文件前缀名" />
                        </a-form-model-item>
                        <!-- <a-form-model-item label="是否需要安装中间件" prop="installedFlag" v-bind="{}">
                            <a-radio-group :disabled="action === 'view'" v-model="item.installedFlag"
                                :options="installedFlagOption" @change="asyncSelect">
                            </a-radio-group>
                        </a-form-model-item> -->
                    </a-form-model>
                    <a-form-model :style="{ width: '100%' }" layout="horizontal" v-bind="{
                        labelCol: { span: 6 },
                        wrapperCol: { span: 16 },
                    }" :colon="true" labelAlign="right" :model="item" :rules="nacosRules"
                        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="expandNacosConfigForm" class="add-btn">
                        <span class="iconfont icon-roundadd add-btn-span"></span>
                    </button>
                </div>
            </div>

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

<script>


export default {
    data() {
        return {
      
            allScriptsSel: [],
            action: 'view',
            isInstallClusster: [{ label: '是', value: true }, { label: '否', value: false }],
            isConfigClutser: false,
            isActive: false,
            deployEnvOption: [{ label: '测试环境', value: '0' }, { label: '生产环境', value: '1' }],

            installedFlagOption: [{ label: '安装', value: '0' },
            { label: '不安装', value: '1' }],
            visible: false,
            standOrCluster: true,
            defaultNacosConfig: {
                scriptId: '',

                middlewareType: '6',
                property: {
                    nacosDiscoveryAddress: '',
                    nacosDiscoveryPort: '',
                    configType: '0',


                },
                configType: '0',
                installedFlag: '0',
                env: '0'
            },
            defaultServerConfig: {
                scriptId: '',

                middlewareType: '6',
                property: {
                    nacosConfigAddress: '',
                    nacosConfigPort: '',
                    nacosNamespace: '',
                    nacosGroup: '',
                    nacosFileExtension: '',
                    nacosPrefix: '',
                    configType: '1',


                },
                env: '0',
                configType: '0',
                installedFlag: '0'
            },
            // 注册中心
            nacosConfig: {
                scriptId: '',

                middlewareType: '6',
                property: {
                    nacosDiscoveryAddress: '',
                    nacosDiscoveryPort: '',
                    configType: '0',


                },
                configType: '0',
                installedFlag: '0',
                env: '0',

            },
            // 服务器配置
            serverConfig: {
                scriptId: '',

                middlewareType: '6',
                property: {
                    nacosConfigAddress: '',
                    nacosConfigPort: '',
                    nacosNamespace: '',
                    nacosGroup: '',
                    nacosFileExtension: '',
                    nacosPrefix: '',
                    configType: '1',


                },
                configType: '0',
                installedFlag: '0',
                env: '0',

            },
            defaultNacosClusterConfig:
                [
                    {
                        scriptId: '',

                        middlewareType: '6',
                        property: {
                            nacosDiscoveryAddress: '',
                            nacosDiscoveryPort: '',
                            configType: '0',
                        },

                        configType: '1',
                        installedFlag: '0'

                    }
                ]
            ,
            nacosClusterConfig:
                [
                    {
                        scriptId: '',

                        middlewareType: '6',
                        property: {
                            nacosDiscoveryAddress: '',
                            nacosDiscoveryPort: '',
                            configType: '0',
                        },

                        configType: '1',
                        installedFlag: '0'

                    }
                ]
            ,
            defaultNacosServerClusterConfig:
                [
                    {
                        scriptId: '',

                        middlewareType: '6',
                        property: {
                            nacosConfigAddress: '',
                            nacosConfigPort: '',
                            nacosNamespace: '',
                            nacosGroup: '',
                            nacosFileExtension: '',
                            nacosPrefix: '',
                            configType: '1',

                        },
                        configType: '1',
                        installedFlag: '0'

                    }
                ]
            ,
            nacosServerClusterConfig:
                [
                    {
                        scriptId: '',

                        middlewareType: '6',
                        property: {
                            nacosConfigAddress: '',
                            nacosConfigPort: '',
                            nacosNamespace: '',
                            nacosGroup: '',
                            nacosFileExtension: '',
                            nacosPrefix: '',
                            configType: '1',

                        },
                        configType: '1',
                        installedFlag: '0'

                    }
                ]
            ,
            nacosRules: {
                scriptId: [
                    {
                        required: true,
                        message: "中间件脚本不能为空",
                        trigger: "change",
                    }
                ],
                nacosConfigAddress: [
                    {
                        required: true,
                        message: "nacos配置中心地址不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "nacos配置中心地址长度不能大于255",
                        trigger: "blur",
                    },
                ],
                nacosConfigPort: [
                    {
                        required: true,
                        message: "nacos配置中心端口号不能为空",
                        trigger: "blur",
                    }

                ],
                nacosDiscoveryAddress: [
                    {
                        required: true,
                        message: "nacos注册中心地址不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "nacos注册中心地址长度不能大于255",
                        trigger: "blur",
                    },
                ],
                nacosDiscoveryPort: [
                    {
                        required: true,
                        message: "nacos注册中心端口号不能为空",
                        trigger: "blur",
                    }

                ],
                nacosNamespace: [
                    {
                        required: true,
                        message: "nacos命名空间不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "nacos命名空间长度不能大于255",
                        trigger: "blur",
                    },
                ],
                nacosGroup: [
                    {
                        required: true,
                        message: "nacos组不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "nacos组长度不能大于255",
                        trigger: "blur",
                    },
                ],
                nacosFileExtension: [
                    {
                        required: true,
                        message: "文件扩展形式不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "文件扩展形式长度不能大于255",
                        trigger: "blur",
                    },
                ],

                nacosPrefix: [
                    {
                        required: true,
                        message: "文件前缀名不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "文件前缀名长度不能大于255",
                        trigger: "blur",
                    },
                ],
            },

        }
    },
    methods: {
        initCluster(record1, record2) {


            if (record1.length === 0 || record2.length === 0) {
                this.isConfigClutser = false
                this.nacosClusterConfig = JSON.parse(JSON.stringify(this.defaultNacosClusterConfig))
                this.nacosServerClusterConfig = JSON.parse(JSON.stringify(this.defaultNacosServerClusterConfig))
            } else {
                this.isConfigClutser = true

                this.nacosClusterConfig = record1
                this.nacosServerClusterConfig = record2

            }
        },
        // 初始化
        init(record, type) {

            if (type === 1) {
                this.serverConfig = record

            } else if (type === 2) {

                this.nacosConfig = record
            }
        },
        // 确定
        onOk() {

            if (this.action === 'view') {
                this.visible = false
            } else {
                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 p2 = new Promise((resolve, reject) => {
                    //     this.$refs["nacosConfig"].validate((valid) => {
                    //         if (valid) {
                    //             resolve()
                    //         }
                    //     })
                    // })

                    let p3 = new Promise((resolve, reject) => {
                        let flag = true
                        for (var x in this.$refs["nacosClusterConfig"]) {
                            this.$refs["nacosClusterConfig"][x].validate((valid) => {
                                if (valid) {

                                } else {
                                    flag = false
                                }
                            })
                        }
                        if (flag) {
                            resolve()
                        }
                    })
                    let p4 = new Promise((resolve, reject) => {
                        let flag = true
                        for (var x in this.$refs["nacosServerClusterConfig"]) {
                            this.$refs["nacosServerClusterConfig"][x].validate((valid) => {
                                if (valid) {
                                } else {
                                    flag = false
                                }
                            })
                        }
                        if (flag) {
                            resolve()
                        }
                    })
                    // let p5 = new Promise((resolve, reject) => {
                    //     this.$refs["nacosSingleConfig"].validate((valid) => {
                    //         if (valid) {
                    //             resolve()
                    //         }
                    //     })
                    // })
                    Promise.all([p1,p3,p4]).then(() => {
                        // this.$emit("nacosConfig", { nacosConfig: this.nacosConfig, serverConfig: this.serverConfig }, 1);
                        this.nacosClusterConfig.map((item, index) => {
                            item.properties = JSON.stringify(item.property)
                        })
                        this.nacosServerClusterConfig.map((item, index) => {
                            item.properties = JSON.stringify(item.property)
                        })

                        this.$emit("nacosConfig", { nacosConfig: this.nacosClusterConfig, serverConfig: this.nacosServerClusterConfig }, 2);

                        // this.$emit("dubboConfig", this.dubboClusterConfig, 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["nacosSingleConfig"].validate((valid) => {
                            if (valid) {
                                resolve()
                            }
                        })
                    })
                    let p3 = new Promise((resolve, reject) => {
                        this.$refs["nacosConfig"].validate((valid) => {
                            if (valid) {
                                resolve()
                            }
                        })
                    })
                    Promise.all([p1, p2, p3]).then(() => {
                        this.$emit("nacosConfig", { nacosConfig: this.nacosConfig, serverConfig: this.serverConfig }, 1);
                        this.visible = false
                    })

                    
                }




            }
        },
        // 取消
        onCancle() {
            if (this.action === 'view') {
                this.visible = false
            } else {
                this.visible = false
                this.nacosConfig = JSON.parse(JSON.stringify(this.defaultNacosConfig))
                this.serverConfig = JSON.parse(JSON.stringify(this.defaultServerConfig))
                this.nacosClusterConfig = JSON.parse(JSON.stringify(this.defaultNacosClusterConfig))
                this.nacosServerClusterConfig = JSON.parse(JSON.stringify(this.defaultNacosServerClusterConfig))
                this.$emit("nacosConfig", "cancel");
            }
        },
        // 重置
        reset() {
            // this.standOrCluster = true

            this.nacosConfig = JSON.parse(JSON.stringify(this.defaultNacosConfig))
            this.serverConfig = JSON.parse(JSON.stringify(this.defaultServerConfig))
            this.nacosClusterConfig = JSON.parse(JSON.stringify(this.defaultNacosClusterConfig))
            this.nacosServerClusterConfig = JSON.parse(JSON.stringify(this.defaultNacosServerClusterConfig))
        },
        // 是否安装中间件
        asyncSelect(e) {
            this.nacosConfig.installedFlag = e.target.value
        },
        asyncSelectScript(e) {
            // console.log(e);
            this.nacosConfig.scriptId = e

        },
        // 环境切换同步(服务器和注册中心)
        envChange(e) {
            this.serverConfig.env = e.target.value
        },
        // 切换集群和单机
        changeStandOrCluster(val) {
            if (val === 1) {
                this.standOrCluster = false
                this.isActive = true
            } else {
                this.standOrCluster = true
                this.isActive = false
            }
        },
        // 集群扩展
        expandNacosRegisterForm() {
            this.nacosClusterConfig.push(
                {
                    scriptId: '',

                    middlewareType: '6',

                    property: {
                        nacosDiscoveryAddress: '',
                        nacosDiscoveryPort: '',
                        configType: '0',
                    },

                    configType: '1',
                    installedFlag: '0'

                }
            )
        },
        // 集群扩展
        expandNacosConfigForm() {

            this.nacosServerClusterConfig.push(
                {
                    scriptId: '',

                    middlewareType: '6',

                    property: {
                        nacosConfigAddress: '',
                        nacosConfigPort: '',
                        nacosNamespace: '',
                        nacosGroup: '',
                        nacosFileExtension: '',
                        nacosPrefix: '',
                        configType: '1',

                    },


                    configType: '1',
                    installedFlag: '0'

                }
            )
        }

    },
    //生命周期 - 创建完成（访问当前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;
    }

}
</style>