<!--
 * @Description: 新建项目
 * @Author: xiaofengzhou
 * @Email: 2946471396@qq.com
 * @Date: 2022-08-05 21:06:10
 * @LastEditTime: 2022-10-19 11:14:48
 * @LastEditors: xiaofengzhou
-->

<template>
    <div>
        <a-modal :maskClosable="false" v-model:visible="visible" width="1000px" :footer="null">
            <div class="head-content">
                <span class="iconfont icon-screen-code-line"></span>
                &nbsp;&nbsp;
                <span v-if="action === 'add'">新建项目</span>
                <span v-else-if="action === 'edit'">修改项目</span>
            </div>
            <a-steps progress-dot :current="steps.current" style="margin-top:20px ;">
                <a-step title="基础信息"> </a-step>
                <a-step title="中间件配置"> </a-step>
                <a-step title="仓库信息" />
            </a-steps>

            <a-form-model layout="horizontal" v-bind="{
                labelCol: { span: 6 },
                wrapperCol: { span: 15 },
            }" :colon="true" labelAlign="right" :model="formData" :rules="addRules" ref="myForm"
                style="margin-top:20px ;margin-bottom: 20px;">
                <div v-show="steps.current === 0">
                    <a-form-model-item label="项目名称" prop="projectName" v-bind="{}">
                        <a-input size="large" v-model="formData.projectName" placeholder="请输入项目中文名称" />
                    </a-form-model-item>
                    <a-form-model-item label="项目英文名称" prop="projectNameEn" v-bind="{}">
                        <a-input size="large" @change="syncInputValue" v-model="formData.projectNameEn"
                            placeholder="请输入项目英文名称" />
                    </a-form-model-item>
                    <a-form-model-item label="项目包名称" prop="packageName" v-bind="{}">
                        <a-input size="large" v-model="formData.packageName" placeholder="请输入项目包名称"
                            addon-before="com.nbport." />
                    </a-form-model-item>
                    <a-form-model-item label="版本号" prop="version" v-bind="{}">
                        <a-input size="large" v-model="formData.version" placeholder="请输入版本号" />
                    </a-form-model-item>
                </div>
                <div v-show="steps.current === 1" class="templateSet">
                    <a-row>
                        <a-col :span="24">

                            <a-form-model-item label="引用模板名称" v-bind="{}" prop="templateId">
                                <a-select size="large" v-model="formData.templateId" :options="allTempSel"
                                    @change="selChange">
                                </a-select>
                            </a-form-model-item>
                            <!-- <a-form-model-item label="引用模板名称" v-bind="{}" v-show="action === 'edit'">
                                {{ templateName }}
                            </a-form-model-item> -->
                        </a-col>
                    </a-row>

                    <a-row>
                        <a-col :span="8">

                            <div class="databaseConfig">
                                <div class="showicon">
                                    <span class="iconfont icon-ok active" v-if="isIntegrate.databaseConfig"></span>
                                    <span class="iconfont icon-Shapex inActive"
                                        v-if="!isIntegrate.databaseConfig"></span>
                                </div>

                                <label for="databaseConfig">
                                    <a-tooltip>
                                        <template slot="title">
                                            双击可查看详情
                                        </template>
                                        <span v-on:dblclick="showConfig(1)">数据库配置&nbsp;&nbsp;&nbsp;</span>
                                    </a-tooltip>
                                </label>
                                <a-radio-group id="databaseConfig" style="display: inline-block;"
                                    @change="middlerWareChange($event, 1)" v-model:value="isIntegrate.databaseConfig">
                                    <a-radio @click="handleEdit(1)" :value="true">集成</a-radio>
                                    <a-radio :value="false">不集成</a-radio>
                                </a-radio-group>
                            </div>
                        </a-col>
                        <a-col :span="8">

                            <div class="databaseConfig">
                                <div class="showicon">
                                <span class="iconfont icon-ok active" v-if="isIntegrate.redisConfig"></span>
                                <span class="iconfont icon-Shapex inActive"
                                    v-if="!isIntegrate.redisConfig"></span></div>
                                <label for="redisConfig">
                                    <a-tooltip>
                                        <template slot="title">
                                            双击可查看详情
                                        </template>

                                        <span v-on:dblclick="showConfig(2)">Redis配置&nbsp;&nbsp;&nbsp;</span>

                                    </a-tooltip>
                                </label>
                                <a-radio-group id="redisConfig" v-model:value="isIntegrate.redisConfig"
                                    @change="middlerWareChange($event, 2)">
                                    <a-radio @click="handleEdit(2)" :value="true">集成</a-radio>
                                    <a-radio :value="false">不集成</a-radio>
                                </a-radio-group>
                            </div>
                        </a-col>
                        <a-col :span="8">
                            <div class="databaseConfig">
                                <div class="showicon">

                                <span class="iconfont icon-ok active" v-if="isIntegrate.minioConfig"></span>
                                <span class="iconfont icon-Shapex inActive"
                                    v-if="!isIntegrate.minioConfig"></span></div>
                                <label for="minioConfig">
                                    <a-tooltip>
                                        <template slot="title">
                                            双击可查看详情
                                        </template>

                                        <span v-on:dblclick="showConfig(3)">Minio配置&nbsp;&nbsp;&nbsp;</span>

                                    </a-tooltip>
                                </label>
                                <a-radio-group id="minioConfig" style="display: inline-block;"
                                    v-model:value="isIntegrate.minioConfig" @change="middlerWareChange($event, 3)">
                                    <a-radio @click="handleEdit(3)" :value="true">集成</a-radio>
                                    <a-radio :value="false">不集成</a-radio>
                                </a-radio-group>
                            </div>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="8">
                            <div class="databaseConfig">
                                <div class="showicon">

                                <span class="iconfont icon-ok active" v-if="isIntegrate.xxljobConfig"></span>
                                <span class="iconfont icon-Shapex inActive"
                                    v-if="!isIntegrate.xxljobConfig"></span></div>
                                <label for="xxlJobConfig">
                                    <a-tooltip>
                                        <template slot="title">
                                            双击可查看详情
                                        </template>

                                        <span v-on:dblclick="showConfig(4)">XxlJob配置&nbsp;&nbsp;&nbsp;</span>

                                    </a-tooltip>
                                </label>
                                <a-radio-group id="xxlJobConfig" style="display: inline-block;"
                                    v-model:value="isIntegrate.xxljobConfig" @change="middlerWareChange($event, 4)">
                                    <a-radio @click="handleEdit(4)" :value="true">集成</a-radio>
                                    <a-radio :value="false">不集成</a-radio>
                                </a-radio-group>
                            </div>
                        </a-col>
                        <a-col :span="8">
                            <div class="databaseConfig">
                                <div class="showicon">

                                <span class="iconfont icon-ok active" v-if="isIntegrate.rocketMqConfig"></span>
                                <span class="iconfont icon-Shapex inActive"
                                    v-if="!isIntegrate.rocketMqConfig"></span></div>
                                <label for="rocketmqConfig">
                                    <a-tooltip>
                                        <template slot="title">
                                            双击可查看详情
                                        </template>

                                        <span v-on:dblclick="showConfig(5)">RocketMq&nbsp;&nbsp;&nbsp;</span>

                                    </a-tooltip>
                                </label>
                                <a-radio-group id="rocketmqConfig" style="display: inline-block;"
                                    v-model:value="isIntegrate.rocketMqConfig" @change="middlerWareChange($event, 5)">
                                    <a-radio @click="handleEdit(5)" :value="true">集成</a-radio>
                                    <a-radio :value="false">不集成</a-radio>
                                </a-radio-group>
                            </div>
                        </a-col>
                        <a-col :span="8">
                            <div class="databaseConfig">
                                <div class="showicon">

                                <span class="iconfont icon-ok active" v-if="isIntegrate.dubboConfig"></span>
                                <span class="iconfont icon-Shapex inActive"
                                    v-if="!isIntegrate.dubboConfig"></span></div>

                                <label for="dubboConfig">
                                    <a-tooltip>
                                        <template slot="title">
                                            双击可查看详情
                                        </template>
                                        <span v-on:dblclick="showConfig(6)">Dubbo配置&nbsp;&nbsp;&nbsp;</span>
                                    </a-tooltip>
                                </label>
                                <a-radio-group id="dubboConfig" style="display: inline-block;"
                                    v-model:value="isIntegrate.dubboConfig" @change="middlerWareChange($event, 6)">
                                    <a-radio @click="handleEdit(6)" :value="true">集成</a-radio>
                                    <a-radio :value="false">不集成</a-radio>
                                </a-radio-group>
                            </div>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="8">
                            <div class="databaseConfig">
                                <div class="showicon">

                                <span class="iconfont icon-ok active" v-if="isIntegrate.nacosConfig"></span>
                                <span class="iconfont icon-Shapex inActive"
                                    v-if="!isIntegrate.nacosConfig"></span></div>
                                <label for="nacosConfig">
                                    <a-tooltip>
                                        <template slot="title">
                                            双击可查看详情
                                        </template>
                                        <span v-on:dblclick="showConfig(7)">Nacos配置&nbsp;&nbsp;&nbsp;</span>
                                    </a-tooltip>
                                </label>
                                <a-radio-group id="nacosConfig" style="display: inline-block;"
                                    v-model:value="isIntegrate.nacosConfig" @change="middlerWareChange($event, 7)">
                                    <a-radio @click="handleEdit(7)" :value="true">集成</a-radio>
                                    <a-radio :value="false">不集成</a-radio>
                                </a-radio-group>
                            </div>
                        </a-col>
                        <a-col :span="8">
                            <div class="databaseConfig">
                                <div class="showicon">

                                <span class="iconfont icon-ok active" v-if="isIntegrate.nginxConfig"></span>
                                <span class="iconfont icon-Shapex inActive"
                                    v-if="!isIntegrate.nginxConfig"></span></div>
                                    
                                <label for="nginxConfig">
                                    <a-tooltip>
                                        <template slot="title">
                                            双击可查看详情
                                        </template>
                                        <span v-on:dblclick="showConfig(8)">Nginx配置&nbsp;&nbsp;&nbsp;</span>
                                    </a-tooltip>
                                </label>
                                <a-radio-group id="nginxConfig" style="display: inline-block;"
                                    v-model:value="isIntegrate.nginxConfig" @change="middlerWareChange($event, 8)">
                                    <a-radio @click="handleEdit(8)" :value="true">集成</a-radio>
                                    <a-radio :value="false">不集成</a-radio>
                                </a-radio-group>
                            </div>
                        </a-col>
                    </a-row>
                    <div style="height:50px;margin-top: 30px;" class="select-env">
                        <span>请选择环境:</span>
                        <a-select size="large" v-model="enviroment" @change="envChange">
                            <a-select-option value="0">
                                开发环境(development)
                            </a-select-option>
                            <a-select-option value="1">
                                生产环境(production)
                            </a-select-option>
                            <a-select-option value="2">
                                测试环境(testing)
                            </a-select-option>
                        </a-select>
                    </div>
                </div>
                <div v-show="steps.current === 2">
                    <a-form-model-item label="账户名" prop="storageAccount" v-bind="{}">
                        <a-input size="large" v-model="formData.storageAccount" placeholder="请输入账户名" />
                    </a-form-model-item>
                    <a-form-model-item label="密码" prop="storagePassword" v-bind="{}">
                        <a-input size="large" @click="clearInput" type="password" v-model="formData.storagePassword"
                            placeholder="请输入密码" />
                    </a-form-model-item>
                    <a-form-model-item label="仓库类型" prop="storageType" v-bind="{}">
                        <a-radio-group size="large" v-model:value="formData.storageType">
                            <a-radio value="0"> git </a-radio>
                            <a-radio value="1"> svn </a-radio>
                        </a-radio-group>
                    </a-form-model-item>

                    <a-form-model-item label="仓库地址" prop="storageAddress" v-bind="{}">
                        <a-input size="large" v-model="formData.storageAddress" placeholder="请输入仓库地址" />
                    </a-form-model-item>
                    <a-form-model-item label="分支名" prop="storageBranch" v-bind="{}">
                        <a-input size="large" v-model="formData.storageBranch" placeholder="请输入分支名" />
                    </a-form-model-item>
                    <!-- <a-form-model-item v-if="action === 'edit'" label="仓库地址" prop="storageAddress" v-bind="{}">
                        {{ formData.storageAddress }}
                    </a-form-model-item>
                    <a-form-model-item v-if="action === 'edit'" label="分支名" prop="storageBranch" v-bind="{}">
                        {{ formData.storageBranch }}
                    </a-form-model-item> -->
                </div>
            </a-form-model>
            <div style="text-align: center;">
                <a-button type="normal" size="large" @click="preStep" style="margin-right:8px;"
                    :disabled="steps.current === 0">上一步
                </a-button>
                <a-button type="primary" size="large" @click="handleSaveFormData" style="margin-right:8px;">保存
                </a-button>
                <a-button type="normal" size="large" @click="backStep" :disabled="steps.current === 2">下一步</a-button>
            </div>
        </a-modal>
        <PromptBox ref="PromptBox" />
        <DatabaseConfigModal @databaseConfig="databaseConfig" ref="databaseConfig" />
        <DubboConfigModal @dubboConfig="dubboConfig" ref="dubboConfig" />
        <MinioConfigModal @minioConfig="minioConfig" ref="minioConfig" />
        <NacosConfigModal @nacosConfig="nacosConfig" ref="nacosConfig" />
        <NginxConfigModal @nginxConfig="nginxConfig" ref="nginxConfig" />
        <RedisConfigModal @redisConfig="redisConfig" ref="redisConfig" />
        <RocketMqConfigModal @rocketMqConfig="rocketMqConfig" ref="rocketMqConfig" />
        <XxlJobConfigModal @xxljobConfig="xxljobConfig" ref="xxljobConfig" />
    </div>
</template>

<script>
import PromptBox from '../../../components/PromptBox'
import DatabaseConfigModal from './middlewareConfig/DatabaseConfigModal.vue';
import DubboConfigModal from './middlewareConfig/DubboConfigModal.vue';
import MinioConfigModal from './middlewareConfig/MinioConfigModal.vue';
import NacosConfigModal from './middlewareConfig/NacosConfigModal.vue';
import NginxConfigModal from './middlewareConfig/NginxConfigModal.vue';
import RedisConfigModal from './middlewareConfig/RedisConfigModal.vue';
import RocketMqConfigModal from './middlewareConfig/RocketMqConfigModal.vue';
import XxlJobConfigModal from './middlewareConfig/XxlJobConfigModal.vue';
import { getAllTempName, addProject, editProject, getAllScriptInfo } from '../../../../packages/api/manage'
const options = [
    { label: '集成', value: true },
    { label: '不集成', value: false }
];
export default {
    components: {
        DatabaseConfigModal,
        DubboConfigModal,
        MinioConfigModal,
        NacosConfigModal,
        NginxConfigModal,
        RedisConfigModal,
        RocketMqConfigModal,
        XxlJobConfigModal,
        PromptBox
    },
    data() {
        return {
            publicKey: "",
            allScriptSel: [],
            allScriptCate: {
                database: [],
                redis: [],
                minio: [],
                xxljob: [],
                rocketmq: [],
                dubbo: [],
                nacos: [],
                nginx: []
            },
            defaultAllScriptCate: {
                database: [],
                redis: [],
                minio: [],
                xxljob: [],
                rocketmq: [],
                dubbo: [],
                nacos: [],
                nginx: []
            },
            allMiddlewares: {
                dev: [],
                prod: [],
                test: []

            },
            allClusterMiddleares: {
                dev: {
                    database: [],
                    redis: [],
                    dubbo: [],
                    minio: [],
                    xxljob: [],
                    rocketmq: [],
                    nacos: [],
                    nacosServer: [],
                    nginx: []
                },
                prod: {
                    database: [],
                    redis: [],
                    dubbo: [],
                    minio: [],
                    xxljob: [],
                    rocketmq: [],
                    nacos: [],
                    nacosServer: [],
                    nginx: []
                },
                test: {
                    database: [],
                    redis: [],
                    dubbo: [],
                    minio: [],
                    xxljob: [],
                    rocketmq: [],
                    nacos: [],
                    nacosServer: [],
                    nginx: []
                }
            },
            defaultClusterMiddleares: {
                dev: {
                    database: [],
                    redis: [],
                    dubbo: [],
                    minio: [],
                    xxljob: [],
                    rocketmq: [],
                    nacos: [],
                    nacosServer: [],
                    nginx: []
                },
                prod: {
                    database: [],
                    redis: [],
                    dubbo: [],
                    minio: [],
                    xxljob: [],
                    rocketmq: [],
                    nacos: [],
                    nacosServer: [],
                    nginx: []
                },
                test: {
                    database: [],
                    redis: [],
                    dubbo: [],
                    minio: [],
                    xxljob: [],
                    rocketmq: [],
                    nacos: [],
                    nacosServer: [],
                    nginx: []
                }
            },
            enviroment: "0",
            isIntegrate: {
                databaseConfig: false,
                redisConfig: false,
                minioConfig: false,
                xxljobConfig: false,
                rocketMqConfig: false,
                dubboConfig: false,
                nacosConfig: false,
                serverConfig: false,
                nginxConfig: false
            },
            defaultIntegrate: {
                databaseConfig: false,
                redisConfig: false,
                minioConfig: false,
                xxljobConfig: false,
                rocketMqConfig: false,
                dubboConfig: false,
                nacosConfig: false,
                serverConfig: false,
                nginxConfig: false
            },
            allTempSel: [],
            options,
            visible: false,
            // 表格数据
            defaultFormData: {
                projectName: '',
                projectNameEn: "",
                packageName: "",
                version: "",
                storageAccount: "",
                storagePassword: "",
                storageType: "0",
                storageAddress: "",
                storageBranch: "",
                templateId: '',
                template: {
                    templateName: ""
                }
            },
            formData: {
                projectName: '',
                projectNameEn: "",
                packageName: "",
                version: "",
                storageAccount: "",
                storagePassword: "",
                storageType: "1",
                storageAddress: "",
                storageBranch: "",
                templateId: '',
                template: {
                    templateName: ""
                }
            },
            steps: {
                current: 0,
            },
            action: 'view',


            addRules: {
                templateId: [
                    {
                        required: true,
                        message: "引用模板不能为空",
                        trigger: "change",
                    },
                ],

                projectName: [
                    {
                        required: true,
                        message: "项目中文名称不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "项目中文名称长度不能大于255",
                        trigger: "blur",
                    },
                ],
                projectNameEn: [
                    {
                        required: true,
                        message: "项目英文名称不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "项目英文名称长度不能大于255",
                        trigger: "blur",
                    },
                ],
                packageName: [
                    {
                        required: true,
                        message: "项目包名称不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "项目包名称长度不能大于255",
                        trigger: "blur",
                    },
                ],
                version: [
                    {
                        required: true,
                        message: "项目版本不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "项目版本长度不能大于255",
                        trigger: "blur",
                    },
                ],
                storageAccount: [
                    {
                        required: true,
                        message: "账户名不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "账户名长度不能大于255",
                        trigger: "blur",
                    },
                ],
                storagePassword: [
                    {
                        required: true,
                        message: "账户密码不能为空",
                        trigger: "blur",
                    }
                ],
                storageType: [
                    {
                        required: true,
                        message: "仓库类型不能为空",
                        trigger: "blur",
                    }

                ],
                storageAddress: [
                    {
                        required: true,
                        message: "分支名不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "分支名长度不能大于255",
                        trigger: "blur",
                    },
                ],
                storageBranch: [
                    {
                        required: true,
                        message: "分支名不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "分支名长度不能大于255",
                        trigger: "blur",
                    },
                ],
            },
            templateName: '',
            templateId: ''

        }
    },
    methods: {


        syncInputValue(e) {

            this.formData.packageName = e.target.value
            // console.log(this.formData.packageName);
        },
        clearInput(e) {
            if (this.formData.storagePassword.length > 100) {
                this.formData.storagePassword = ""
            }
        },
        // 双击查看详情不可修改
        showConfig(type) {
            switch (type) {
                case 1:
                    this.$refs.databaseConfig.visible = true
                    this.$refs.databaseConfig.action = 'view'
                    break;
                case 2:
                    this.$refs.redisConfig.visible = true
                    this.$refs.redisConfig.action = 'view'
                    break;
                case 3:
                    this.$refs.minioConfig.visible = true
                    this.$refs.minioConfig.action = 'view'
                    break;
                case 4:
                    this.$refs.xxljobConfig.visible = true
                    this.$refs.xxljobConfig.action = 'view'
                    break;
                case 5:
                    this.$refs.rocketMqConfig.visible = true
                    this.$refs.rocketMqConfig.action = 'view'
                    break;
                case 6:
                    this.$refs.dubboConfig.visible = true
                    this.$refs.dubboConfig.action = 'view'
                    break;
                case 7:
                    this.$refs.nacosConfig.visible = true
                    this.$refs.nacosConfig.action = 'view'
                    break;
                case 8:
                    this.$refs.nginxConfig.visible = true
                    this.$refs.nginxConfig.action = 'view'
                    break;
                default:
                    break;
            }


        },
        // 环境切换
        envChange(e) {
            this.$refs.databaseConfig.reset()
            this.$refs.dubboConfig.reset()
            this.$refs.minioConfig.reset()
            this.$refs.nacosConfig.reset()
            this.$refs.nginxConfig.reset()
            this.$refs.redisConfig.reset()
            this.$refs.rocketMqConfig.reset()
            this.$refs.xxljobConfig.reset()
            this.isIntegrate = Object.assign({}, this.defaultIntegrate)
            // 根据不同选择切换数据
            if (e === '0') {
                this.allMiddlewares.dev.map((item, index) => {
                    if (item.middlewareType === '0') {
                        // 如果获取到数据库数据就赋值
                        this.$refs.databaseConfig.init(item)
                        this.isIntegrate.databaseConfig = true
                    } else if (item.middlewareType === '1') {
                        this.$refs.redisConfig.init(item)
                        this.isIntegrate.redisConfig = true
                    } else if (item.middlewareType === '2') {
                        this.$refs.minioConfig.init(item)
                        this.isIntegrate.minioConfig = true
                    } else if (item.middlewareType === '3') {
                        this.$refs.xxljobConfig.init(item)
                        this.isIntegrate.xxljobConfig = true
                    } else if (item.middlewareType === '4') {
                        this.$refs.rocketMqConfig.init(item)
                        this.isIntegrate.rocketMqConfig = true
                    } else if (item.middlewareType === '5') {
                        this.$refs.dubboConfig.init(item)
                        this.isIntegrate.dubboConfig = true
                    } else if (item.middlewareType === '6' && item.property.configType === '1') {
                        this.isIntegrate.nacosConfig = true
                        this.$refs.nacosConfig.init(item, 1)
                    } else if (item.middlewareType === '7') {
                        this.isIntegrate.nginxConfig = true
                        this.$refs.nginxConfig.init(item)
                    } else if (item.middlewareType === '6' && item.property.configType === '0') {
                        this.isIntegrate.nacosConfig = true
                        this.$refs.nacosConfig.init(item, 2)
                    }
                })
                //   如果有配置集群，那么也算是集成
                if (this.allClusterMiddleares.dev.database.length !== 0) {
                    this.isIntegrate.databaseConfig = true
                }
                if (this.allClusterMiddleares.dev.dubbo.length !== 0) {
                    this.isIntegrate.dubboConfig = true
                }
                if (this.allClusterMiddleares.dev.minio.length !== 0) {
                    this.isIntegrate.minioConfig = true
                }
                if (this.allClusterMiddleares.dev.nacos.length !== 0) {

                    this.isIntegrate.nacosConfig = true
                }
                if (this.allClusterMiddleares.dev.nginx.length !== 0) {
                    this.isIntegrate.nginxConfig = true
                }
                if (this.allClusterMiddleares.dev.redis.length !== 0) {
                    this.isIntegrate.redisConfig = true
                }
                if (this.allClusterMiddleares.dev.rocketmq.length !== 0) {
                    this.isIntegrate.rocketMqConfig = true
                }
                if (this.allClusterMiddleares.dev.xxljob.length !== 0) {
                    this.isIntegrate.xxljobConfig = true
                }
                this.$refs.databaseConfig.initCluster(this.allClusterMiddleares.dev.database)
                this.$refs.dubboConfig.initCluster(this.allClusterMiddleares.dev.dubbo)
                this.$refs.minioConfig.initCluster(this.allClusterMiddleares.dev.minio)
                this.$refs.nacosConfig.initCluster(this.allClusterMiddleares.dev.nacos, this.allClusterMiddleares.dev.nacosServer)
                this.$refs.nginxConfig.initCluster(this.allClusterMiddleares.dev.nginx)
                this.$refs.redisConfig.initCluster(this.allClusterMiddleares.dev.redis)
                this.$refs.rocketMqConfig.initCluster(this.allClusterMiddleares.dev.rocketmq)
                this.$refs.xxljobConfig.initCluster(this.allClusterMiddleares.dev.xxljob)
            } else if (e === '1') {
                this.allMiddlewares.prod.map((item, index) => {
                    if (item.middlewareType === '0') {
                        this.$refs.databaseConfig.init(item)
                        this.isIntegrate.databaseConfig = true
                    } else if (item.middlewareType === '1') {
                        this.$refs.redisConfig.init(item)
                        this.isIntegrate.redisConfig = true
                    } else if (item.middlewareType === '2') {
                        this.$refs.minioConfig.init(item)
                        this.isIntegrate.minioConfig = true
                    } else if (item.middlewareType === '3') {
                        this.$refs.xxljobConfig.init(item)
                        this.isIntegrate.xxljobConfig = true
                    } else if (item.middlewareType === '4') {
                        this.$refs.rocketMqConfig.init(item)
                        this.isIntegrate.rocketMqConfig = true
                    } else if (item.middlewareType === '5') {
                        this.$refs.dubboConfig.init(item)
                        this.isIntegrate.dubboConfig = true
                    } else if (item.middlewareType === '6' && item.property.configType === '1') {
                        this.isIntegrate.nacosConfig = true
                        this.$refs.nacosConfig.init(item, 1)
                    } else if (item.middlewareType === '7') {
                        this.isIntegrate.nginxConfig = true
                        this.$refs.nginxConfig.init(item)
                    } else if (item.middlewareType === '6' && item.property.configType === '0') {
                        this.isIntegrate.nacosConfig = true
                        this.$refs.nacosConfig.init(item, 2)
                    }
                })
                if (this.allClusterMiddleares.prod.database.length !== 0) {
                    this.isIntegrate.databaseConfig = true
                }
                if (this.allClusterMiddleares.prod.dubbo.length !== 0) {
                    this.isIntegrate.dubboConfig = true
                }
                if (this.allClusterMiddleares.prod.minio.length !== 0) {
                    this.isIntegrate.minioConfig = true
                }
                if (this.allClusterMiddleares.prod.nacos.length !== 0) {
                    this.isIntegrate.nacosConfig = true
                }
                if (this.allClusterMiddleares.prod.nginx.length !== 0) {
                    this.isIntegrate.nginxConfig = true
                }
                if (this.allClusterMiddleares.prod.redis.length !== 0) {
                    this.isIntegrate.redisConfig = true
                }
                if (this.allClusterMiddleares.prod.rocketmq.length !== 0) {
                    this.isIntegrate.rocketMqConfig = true
                }
                if (this.allClusterMiddleares.prod.xxljob.length !== 0) {
                    this.isIntegrate.xxljobConfig = true
                }
                this.$refs.databaseConfig.initCluster(this.allClusterMiddleares.prod.database)
                this.$refs.dubboConfig.initCluster(this.allClusterMiddleares.prod.dubbo)
                this.$refs.minioConfig.initCluster(this.allClusterMiddleares.prod.minio)
                this.$refs.nacosConfig.initCluster(this.allClusterMiddleares.prod.nacos, this.allClusterMiddleares.prod.nacosServer)
                this.$refs.nginxConfig.initCluster(this.allClusterMiddleares.prod.nginx)
                this.$refs.redisConfig.initCluster(this.allClusterMiddleares.prod.redis)
                this.$refs.rocketMqConfig.initCluster(this.allClusterMiddleares.prod.rocketmq)
                this.$refs.xxljobConfig.initCluster(this.allClusterMiddleares.prod.xxljob)
            } else if (e === '2') {
                this.allMiddlewares.test.map((item, index) => {
                    if (item.middlewareType === '0') {
                        this.$refs.databaseConfig.init(item)
                        this.isIntegrate.databaseConfig = true
                    } else if (item.middlewareType === '1') {
                        this.$refs.redisConfig.init(item)
                        this.isIntegrate.redisConfig = true
                    } else if (item.middlewareType === '2') {
                        this.$refs.minioConfig.init(item)
                        this.isIntegrate.minioConfig = true
                    } else if (item.middlewareType === '3') {
                        this.$refs.xxljobConfig.init(item)
                        this.isIntegrate.xxljobConfig = true
                    } else if (item.middlewareType === '4') {
                        this.$refs.rocketMqConfig.init(item)
                        this.isIntegrate.rocketMqConfig = true
                    } else if (item.middlewareType === '5') {
                        this.$refs.dubboConfig.init(item)
                        this.isIntegrate.dubboConfig = true
                    } else if (item.middlewareType === '6' && item.property.configType === '1') {
                        this.isIntegrate.nacosConfig = true
                        this.$refs.nacosConfig.init(item, 1)
                    } else if (item.middlewareType === '7') {
                        this.isIntegrate.nginxConfig = true
                        this.$refs.nginxConfig.init(item)
                    } else if (item.middlewareType === '6' && item.property.configType === '0') {
                        this.isIntegrate.nacosConfig = true
                        this.$refs.nacosConfig.init(item, 2)
                    }
                })
                if (this.allClusterMiddleares.test.database.length !== 0) {
                    this.isIntegrate.databaseConfig = true
                }
                if (this.allClusterMiddleares.test.dubbo.length !== 0) {
                    this.isIntegrate.dubboConfig = true
                }
                if (this.allClusterMiddleares.test.minio.length !== 0) {
                    this.isIntegrate.minioConfig = true
                }
                if (this.allClusterMiddleares.test.nacos.length !== 0) {
                    this.isIntegrate.nacosConfig = true
                }
                if (this.allClusterMiddleares.test.nginx.length !== 0) {
                    this.isIntegrate.nginxConfig = true
                }
                if (this.allClusterMiddleares.test.redis.length !== 0) {
                    this.isIntegrate.redisConfig = true
                }
                if (this.allClusterMiddleares.test.rocketmq.length !== 0) {
                    this.isIntegrate.rocketMqConfig = true
                }
                if (this.allClusterMiddleares.test.xxljob.length !== 0) {
                    this.isIntegrate.xxljobConfig = true
                }
                this.$refs.databaseConfig.initCluster(this.allClusterMiddleares.test.database)
                this.$refs.dubboConfig.initCluster(this.allClusterMiddleares.test.dubbo)
                this.$refs.minioConfig.initCluster(this.allClusterMiddleares.test.minio)
                this.$refs.nacosConfig.initCluster(this.allClusterMiddleares.test.nacos, this.allClusterMiddleares.test.nacosServer)
                this.$refs.nginxConfig.initCluster(this.allClusterMiddleares.test.nginx)
                this.$refs.redisConfig.initCluster(this.allClusterMiddleares.test.redis)
                this.$refs.rocketMqConfig.initCluster(this.allClusterMiddleares.test.rocketmq)
                this.$refs.xxljobConfig.initCluster(this.allClusterMiddleares.test.xxljob)

            }
        },
        // 模板选择
        selChange(e) {
            this.templateId = e
        },
        // 初始化
        init(action, record) {

            // 重新请求模板数据

            this.getAllScript()
            // 模板值传递
            this.$refs.databaseConfig.allScriptsSel = this.allScriptCate.database
            this.$refs.redisConfig.allScriptsSel = this.allScriptCate.redis
            this.$refs.minioConfig.allScriptsSel = this.allScriptCate.minio
            this.$refs.xxljobConfig.allScriptsSel = this.allScriptCate.xxljob
            this.$refs.rocketMqConfig.allScriptsSel = this.allScriptCate.rocketmq
            this.$refs.dubboConfig.allScriptsSel = this.allScriptCate.dubbo
            this.$refs.nacosConfig.allScriptsSel = this.allScriptCate.nacos
            this.$refs.nginxConfig.allScriptsSel = this.allScriptCate.nginx

            // 清除中间件数据
            this.allMiddlewares.dev = []
            this.allMiddlewares.prod = []
            this.allMiddlewares.test = []
            // 环境重置为dev
            this.enviroment = '0'
            // 步骤条初始化
            this.steps.current = 0
            // 动作
            this.action = action
            // 清楚中间件数据
            this.$refs.databaseConfig.reset()
            this.$refs.dubboConfig.reset()
            this.$refs.minioConfig.reset()
            this.$refs.nacosConfig.reset()
            this.$refs.nginxConfig.reset()
            this.$refs.redisConfig.reset()
            this.$refs.rocketMqConfig.reset()
            this.$refs.xxljobConfig.reset()
            // 集成初始化
            this.isIntegrate = Object.assign({}, this.defaultIntegrate)
            this.allClusterMiddleares = JSON.parse(JSON.stringify(this.defaultClusterMiddleares))
            if (action === 'add') {
                this.formData = JSON.parse(JSON.stringify(this.defaultFormData))
            } else if (action === 'edit') {
                this.templateName = record.template === null ? "" : record.template.templateName
                this.currentEdit = record.projectId
                this.formData = record
                // 密码输入框清空
                // this.formData.storagePassword = ""
                // console.log(this.formData.packageName);

                this.formData.packageName = this.formData.packageName.substring(11, this.formData.packageName.length)
                // console.log(this.formData.packageName);

                let result = record.middlewares
                // 解析集群数据
                result.map((item) => {
                    if (item.configType === '1' && item.env === '0' && item.middlewareType === '0') {
                        this.allClusterMiddleares.dev.database.push(item)
                    } else if (item.configType === '1' && item.env === '0' && item.middlewareType === '1') {
                        this.allClusterMiddleares.dev.redis.push(item)
                    } else if (item.configType === '1' && item.env === '0' && item.middlewareType === '2') {
                        this.allClusterMiddleares.dev.minio.push(item)
                    } else if (item.configType === '1' && item.env === '0' && item.middlewareType === '3') {
                        this.allClusterMiddleares.dev.xxljob.push(item)
                    } else if (item.configType === '1' && item.env === '0' && item.middlewareType === '4') {
                        this.allClusterMiddleares.dev.rocketmq.push(item)
                    } else if (item.configType === '1' && item.env === '0' && item.middlewareType === '5') {
                        this.allClusterMiddleares.dev.dubbo.push(item)
                    } else if (item.configType === '1' && item.env === '0' && item.middlewareType === '6' && item.property.configType === '0') {
                        this.allClusterMiddleares.dev.nacos.push(item)
                    } else if (item.configType === '1' && item.env === '0' && item.middlewareType === '6' && item.property.configType === '1') {
                        this.allClusterMiddleares.dev.nacosServer.push(item)
                    } else if (item.configType === '1' && item.env === '0' && item.middlewareType === '7') {
                        this.allClusterMiddleares.dev.nginx.push(item)
                    }
                    if (item.configType === '1' && item.env === '1' && item.middlewareType === '0') {
                        this.allClusterMiddleares.prod.database.push(item)
                    } else if (item.configType === '1' && item.env === '1' && item.middlewareType === '1') {
                        this.allClusterMiddleares.prod.redis.push(item)
                    } else if (item.configType === '1' && item.env === '1' && item.middlewareType === '2') {
                        this.allClusterMiddleares.prod.minio.push(item)
                    } else if (item.configType === '1' && item.env === '1' && item.middlewareType === '3') {
                        this.allClusterMiddleares.prod.xxljob.push(item)
                    } else if (item.configType === '1' && item.env === '1' && item.middlewareType === '4') {
                        this.allClusterMiddleares.prod.rocketmq.push(item)
                    } else if (item.configType === '1' && item.env === '1' && item.middlewareType === '5') {
                        this.allClusterMiddleares.prod.dubbo.push(item)
                    } else if (item.configType === '1' && item.env === '1' && item.middlewareType === '6' && item.property.configType === '0') {
                        this.allClusterMiddleares.prod.nacos.push(item)
                    } else if (item.configType === '1' && item.env === '1' && item.middlewareType === '6' && item.property.configType === '1') {
                        this.allClusterMiddleares.prod.nacosServer.push(item)
                    } else if (item.configType === '1' && item.env === '1' && item.middlewareType === '7') {
                        this.allClusterMiddleares.prod.nginx.push(item)
                    }
                    if (item.configType === '1' && item.env === '2' && item.middlewareType === '0') {
                        this.allClusterMiddleares.test.database.push(item)
                    } else if (item.configType === '1' && item.env === '2' && item.middlewareType === '1') {
                        this.allClusterMiddleares.test.redis.push(item)
                    } else if (item.configType === '1' && item.env === '2' && item.middlewareType === '2') {
                        this.allClusterMiddleares.test.minio.push(item)
                    } else if (item.configType === '1' && item.env === '2' && item.middlewareType === '3') {
                        this.allClusterMiddleares.test.xxljob.push(item)
                    } else if (item.configType === '1' && item.env === '2' && item.middlewareType === '4') {
                        this.allClusterMiddleares.test.rocketmq.push(item)
                    } else if (item.configType === '1' && item.env === '2' && item.middlewareType === '5') {
                        this.allClusterMiddleares.test.dubbo.push(item)
                    } else if (item.configType === '1' && item.env === '2' && item.middlewareType === '6' && item.property.configType === '0') {
                        this.allClusterMiddleares.test.nacos.push(item)
                    } else if (item.configType === '1' && item.env === '2' && item.middlewareType === '6' && item.property.configType === '1') {
                        this.allClusterMiddleares.test.nacosServer.push(item)
                    } else if (item.configType === '1' && item.env === '2' && item.middlewareType === '7') {
                        this.allClusterMiddleares.test.nginx.push(item)
                    }
                })
                // dev是否集成初始化
                if (this.allClusterMiddleares.dev.database.length !== 0) {
                    this.isIntegrate.databaseConfig = true
                }
                if (this.allClusterMiddleares.dev.dubbo.length !== 0) {
                    this.isIntegrate.dubboConfig = true
                }
                if (this.allClusterMiddleares.dev.minio.length !== 0) {
                    this.isIntegrate.minioConfig = true
                }
                if (this.allClusterMiddleares.dev.nacos.length !== 0) {
                    this.isIntegrate.nacosConfig = true
                }
                if (this.allClusterMiddleares.dev.nginx.length !== 0) {
                    this.isIntegrate.nginxConfig = true
                }
                if (this.allClusterMiddleares.dev.redis.length !== 0) {
                    this.isIntegrate.redisConfig = true
                }
                if (this.allClusterMiddleares.dev.rocketmq.length !== 0) {
                    this.isIntegrate.rocketMqConfig = true
                }
                if (this.allClusterMiddleares.dev.xxljob.length !== 0) {
                    this.isIntegrate.xxljobConfig = true
                }

                // 默认dev把集群数据填充下-------------------------------
                this.$refs.databaseConfig.initCluster(this.allClusterMiddleares.dev.database)
                this.$refs.dubboConfig.initCluster(this.allClusterMiddleares.dev.dubbo)
                this.$refs.minioConfig.initCluster(this.allClusterMiddleares.dev.minio)
                this.$refs.nacosConfig.initCluster(this.allClusterMiddleares.dev.nacos, this.allClusterMiddleares.dev.nacosServer)
                this.$refs.nginxConfig.initCluster(this.allClusterMiddleares.dev.nginx)
                this.$refs.redisConfig.initCluster(this.allClusterMiddleares.dev.redis)
                this.$refs.rocketMqConfig.initCluster(this.allClusterMiddleares.dev.rocketmq)
                this.$refs.xxljobConfig.initCluster(this.allClusterMiddleares.dev.xxljob)

                // 解析单机配置
                result.map((item, index) => {

                    if (item.env === '0' && item.configType === '0') {

                        this.allMiddlewares.dev.push(item)
                    } else if (item.env === '1' && item.configType === '0') {

                        this.allMiddlewares.prod.push(item)

                    } else if (item.env === '2' && item.configType === '0') {

                        this.allMiddlewares.test.push(item)
                    }
                })

                // 默认填充dev的单机配置
                this.allMiddlewares.dev.map((item, index) => {
                    if (item.middlewareType === '0') {
                        this.$refs.databaseConfig.init(item)
                        this.isIntegrate.databaseConfig = true
                    } else if (item.middlewareType === '1') {
                        this.$refs.redisConfig.init(item)
                        this.isIntegrate.redisConfig = true
                    } else if (item.middlewareType === '2') {
                        this.$refs.minioConfig.init(item)
                        this.isIntegrate.minioConfig = true
                    } else if (item.middlewareType === '3') {
                        this.$refs.xxljobConfig.init(item)
                        this.isIntegrate.xxljobConfig = true
                    } else if (item.middlewareType === '4') {
                        this.$refs.rocketMqConfig.init(item)
                        this.isIntegrate.rocketMqConfig = true
                    } else if (item.middlewareType === '5') {
                        this.$refs.dubboConfig.init(item)
                        this.isIntegrate.dubboConfig = true
                    } else if (item.middlewareType === '6' && item.property.configType === '1') {
                        this.isIntegrate.nacosConfig = true
                        this.$refs.nacosConfig.init(item, 1)
                    } else if (item.middlewareType === '7') {
                        this.isIntegrate.nginxConfig = true
                        this.$refs.nginxConfig.init(item)
                    } else if (item.middlewareType === '6' && item.property.configType === '0') {
                        this.isIntegrate.nacosConfig = true
                        this.$refs.nacosConfig.init(item, 2)
                    }
                })
            }

        },
        // 合并配置项目 如果已经存在则替换
        mergeConfig(env, val) {
            let temp = []
            this.allMiddlewares[env].map((item, index) => {
                if (item.middlewareType === val.middlewareType && item.env === val.env) {
                } else {
                    temp.push(item)
                }
            })
            temp.push(JSON.parse(JSON.stringify(val)))
            this.allMiddlewares[env] = temp
        },
        // 一系列配置
        databaseConfig(val, type) {
            // 标志位清除
            if (val === 'cancel') {
                this.isIntegrate.databaseConfig = false
            } else if (1 === type) {
                if (this.enviroment === '0') {
                    val.env = '0'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig('dev', val)
                } else if (this.enviroment === '1') {
                    val.env = '1'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig('prod', val)
                } else if (this.enviroment === '2') {
                    val.env = '2'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig('test', val)
                }
            } else if (2 === type) {
                if (this.enviroment === '0') {
                    this.allClusterMiddleares.dev.database = []
                    val.map((item, index) => {
                        item.env = '0'
                        this.allClusterMiddleares.dev.database.push(item)
                    })
                    // 合并配置项
                } else if (this.enviroment === '1') {
                    this.allClusterMiddleares.prod.database = []
                    val.map((item, index) => {
                        item.env = '1'
                        this.allClusterMiddleares.prod.database.push(item)

                    })
                } else if (this.enviroment === '2') {
                    this.allClusterMiddleares.test.database = []

                    val.map((item, index) => {
                        item.env = '2'
                        this.allClusterMiddleares.test.database.push(item)
                    })
                }
            }
        },

        dubboConfig(val, type) {

            if (val === 'cancel') {
                this.isIntegrate.dubboConfig = false
            } else if (1 === type) {
                if (this.enviroment === '0') {
                    val.env = '0'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig("dev", val)
                } else if (this.enviroment === '1') {
                    val.env = '1'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig("prod", val)

                } else if (this.enviroment === '2') {
                    val.env = '2'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig("test", val)

                }
            } else if (2 === type) {
                if (this.enviroment === '0') {
                    this.allClusterMiddleares.dev.dubbo = []

                    val.map((item, index) => {

                        item.env = '0'
                        this.allClusterMiddleares.dev.dubbo.push(item)
                    })
                    // 合并配置项
                } else if (this.enviroment === '1') {
                    this.allClusterMiddleares.prod.dubbo = []

                    val.map((item, index) => {

                        item.env = '1'
                        this.allClusterMiddleares.prod.dubbo.push(item)

                    })
                } else if (this.enviroment === '2') {
                    this.allClusterMiddleares.test.dubbo = []

                    val.map((item, index) => {

                        item.env = '2'
                        this.allClusterMiddleares.test.dubbo.push(item)
                    })
                }

            }
        },
        minioConfig(val, type) {

            if (val === 'cancel') {
                this.isIntegrate.minioConfig = false
            } else if (1 === type) {
                if (this.enviroment === '0') {
                    val.env = '0'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig("dev", val)

                } else if (this.enviroment === '1') {
                    val.env = '1'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig("prod", val)

                } else if (this.enviroment === '2') {
                    val.env = '2'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig("test", val)

                }
            } else if (2 === type) {
                if (this.enviroment === '0') {
                    this.allClusterMiddleares.dev.minio = []

                    val.map((item, index) => {
                        item.env = '0'
                        this.allClusterMiddleares.dev.minio.push(item)
                    })
                    // 合并配置项
                } else if (this.enviroment === '1') {
                    this.allClusterMiddleares.prod.minio = []

                    val.map((item, index) => {
                        item.env = '1'
                        this.allClusterMiddleares.prod.minio.push(item)

                    })
                } else if (this.enviroment === '2') {
                    this.allClusterMiddleares.test.minio = []

                    val.map((item, index) => {
                        item.env = '2'
                        this.allClusterMiddleares.test.minio.push(item)
                    })
                }

            }
        },
        nacosConfig(val, type) {


            if (val === 'cancel') {
                this.isIntegrate.nacosConfig = false
            } else if (1 === type) {

                if (this.enviroment === '0') {
                    val.nacosConfig.env = '0'
                    val.serverConfig.env = '0'
                    val.nacosConfig.properties = JSON.stringify(val.nacosConfig.property)
                    val.serverConfig.properties = JSON.stringify(val.serverConfig.property)

                    let temp = []

                    this.allMiddlewares.dev.map((item, index) => {

                        if (item.middlewareType === val.nacosConfig.middlewareType && item.env === val.nacosConfig.env && item.property.configType === val.nacosConfig.property.configType) {

                        } else if (item.middlewareType === val.serverConfig.middlewareType && item.env === val.serverConfig.env && item.property.configType === val.serverConfig.property.configType) {

                        } else {
                            temp.push(item)
                        }

                    })

                    temp.push(JSON.parse(JSON.stringify(val.nacosConfig)))
                    temp.push(JSON.parse(JSON.stringify(val.serverConfig)))

                    this.allMiddlewares.dev = temp

                } else if (this.enviroment === '1') {
                    val.nacosConfig.env = '1'
                    val.serverConfig.env = '1'
                    val.nacosConfig.properties = JSON.stringify(val.nacosConfig.property)
                    val.serverConfig.properties = JSON.stringify(val.serverConfig.property)
                    let temp = []

                    this.allMiddlewares.prod.map((item, index) => {

                        if (item.middlewareType === val.nacosConfig.middlewareType && item.env === val.nacosConfig.env && item.property.configType === val.nacosConfig.property.configType) {

                        } else if (item.middlewareType === val.serverConfig.middlewareType && item.env === val.serverConfig.env && item.property.configType === val.serverConfig.property.configType) {

                        } else {
                            temp.push(item)
                        }

                    })

                    temp.push(JSON.parse(JSON.stringify(val.nacosConfig)))
                    temp.push(JSON.parse(JSON.stringify(val.serverConfig)))

                    this.allMiddlewares.prod = temp


                } else if (this.enviroment === '2') {
                    val.nacosConfig.env = '2'
                    val.serverConfig.env = '2'
                    val.nacosConfig.properties = JSON.stringify(val.nacosConfig.property)
                    val.serverConfig.properties = JSON.stringify(val.serverConfig.property)
                    let temp = []

                    this.allMiddlewares.test.map((item, index) => {

                        if (item.middlewareType === val.nacosConfig.middlewareType && item.env === val.nacosConfig.env && item.property.configType === val.nacosConfig.property.configType) {

                        } else if (item.middlewareType === val.serverConfig.middlewareType && item.env === val.serverConfig.env && item.property.configType === val.serverConfig.property.configType) {

                        } else {
                            temp.push(item)
                        }

                    })

                    temp.push(JSON.parse(JSON.stringify(val.nacosConfig)))
                    temp.push(JSON.parse(JSON.stringify(val.serverConfig)))

                    this.allMiddlewares.test = temp


                }
            } else if (2 === type) {

                if (this.enviroment === '0') {
                    this.allClusterMiddleares.dev.nacos = []
                    this.allClusterMiddleares.dev.nacosServer = []
                    val.nacosConfig.map((item, index) => {
                        item.env = '0'
                        this.allClusterMiddleares.dev.nacos.push(item)
                    })
                    val.serverConfig.map((item, index) => {
                        item.env = '0'
                        this.allClusterMiddleares.dev.nacosServer.push(item)
                    })

                    // 合并配置项
                } else if (this.enviroment === '1') {
                    this.allClusterMiddleares.prod.nacos = []
                    this.allClusterMiddleares.prod.nacosServer = []
                    val.nacosConfig.map((item, index) => {
                        item.env = '1'
                        this.allClusterMiddleares.prod.nacos.push(item)
                    })
                    val.serverConfig.map((item, index) => {
                        item.env = '1'
                        this.allClusterMiddleares.prod.nacosServer.push(item)
                    })
                } else if (this.enviroment === '2') {
                    this.allClusterMiddleares.test.nacos = []
                    this.allClusterMiddleares.test.nacosServer = []
                    val.nacosConfig.map((item, index) => {
                        item.env = '2'
                        this.allClusterMiddleares.test.nacos.push(item)
                    })
                    val.serverConfig.map((item, index) => {
                        item.env = '2'
                        this.allClusterMiddleares.test.nacosServer.push(item)
                    })
                }


            }
        },
        nginxConfig(val, type) {

            if (val === 'cancel') {
                this.isIntegrate.nginxConfig = false

            } else if (1 === type) {
                if (this.enviroment === '0') {
                    val.env = '0'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig('dev', val)
                } else if (this.enviroment === '1') {
                    val.env = '1'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig('prod', val)
                } else if (this.enviroment === '2') {
                    val.env = '2'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig('test', val)

                }
            } else if (2 === type) {
                if (this.enviroment === '0') {
                    this.allClusterMiddleares.dev.nginx = []

                    val.map((item, index) => {
                        item.env = '0'
                        this.allClusterMiddleares.dev.nginx.push(item)
                    })
                    // 合并配置项
                } else if (this.enviroment === '1') {
                    this.allClusterMiddleares.prod.nginx = []

                    val.map((item, index) => {
                        item.env = '1'
                        this.allClusterMiddleares.prod.nginx.push(item)

                    })
                } else if (this.enviroment === '2') {
                    this.allClusterMiddleares.test.nginx = []

                    val.map((item, index) => {
                        item.env = '2'
                        this.allClusterMiddleares.test.nginx.push(item)
                    })
                }




            }
        },
        redisConfig(val, type) {


            if (val === 'cancel') {
                this.isIntegrate.redisConfig = false

            } else if (1 === type) {

                if (this.enviroment === '0') {
                    val.env = '0'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig('dev', val)
                } else if (this.enviroment === '1') {
                    val.env = '1'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig('prod', val)

                } else if (this.enviroment === '2') {
                    val.env = '2'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig('test', val)

                }
            } else if (2 === type) {
                if (this.enviroment === '0') {
                    this.allClusterMiddleares.dev.redis = []

                    val.map((item, index) => {
                        item.env = '0'
                        this.allClusterMiddleares.dev.redis.push(item)
                    })
                    // 合并配置项
                } else if (this.enviroment === '1') {
                    this.allClusterMiddleares.prod.redis = []

                    val.map((item, index) => {
                        item.env = '1'
                        this.allClusterMiddleares.prod.redis.push(item)

                    })
                } else if (this.enviroment === '2') {
                    this.allClusterMiddleares.test.redis = []

                    val.map((item, index) => {
                        item.env = '2'
                        this.allClusterMiddleares.test.redis.push(item)
                    })
                }


            }
        },
        rocketMqConfig(val, type) {

            if (val === 'cancel') {
                this.isIntegrate.rocketMqConfig = false

            } else if (1 === type) {
                if (this.enviroment === '0') {
                    val.env = '0'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig('dev', val)

                } else if (this.enviroment === '1') {
                    val.env = '1'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig('prod', val)

                } else if (this.enviroment === '2') {
                    val.env = '2'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig('test', val)

                }
            } else if (2 === type) {
                if (this.enviroment === '0') {
                    this.allClusterMiddleares.dev.rocketmq = []

                    val.map((item, index) => {
                        item.env = '0'
                        this.allClusterMiddleares.dev.rocketmq.push(item)
                    })
                    // 合并配置项
                } else if (this.enviroment === '1') {
                    this.allClusterMiddleares.prod.rocketmq = []

                    val.map((item, index) => {
                        item.env = '1'
                        this.allClusterMiddleares.prod.rocketmq.push(item)

                    })
                } else if (this.enviroment === '2') {
                    this.allClusterMiddleares.test.rocketmq = []

                    val.map((item, index) => {
                        item.env = '2'
                        this.allClusterMiddleares.test.rocketmq.push(item)
                    })
                }

            }
        },
        xxljobConfig(val, type) {

            if (val === 'cancel') {
                this.isIntegrate.xxljobConfig = false

            } else if (1 === type) {
                if (this.enviroment === '0') {
                    val.env = '0'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig('dev', val)


                } else if (this.enviroment === '1') {
                    val.env = '1'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig('prod', val)

                } else if (this.enviroment === '2') {
                    val.env = '2'
                    val.properties = JSON.stringify(val.property)
                    this.mergeConfig('test', val)

                }
            } else if (2 === type) {
                if (this.enviroment === '0') {
                    this.allClusterMiddleares.dev.xxljob = []

                    val.map((item, index) => {
                        item.env = '0'
                        this.allClusterMiddleares.dev.xxljob.push(item)
                    })
                    // 合并配置项
                } else if (this.enviroment === '1') {
                    this.allClusterMiddleares.prod.xxljob = []

                    val.map((item, index) => {
                        item.env = '1'
                        this.allClusterMiddleares.prod.xxljob.push(item)

                    })
                } else if (this.enviroment === '2') {
                    this.allClusterMiddleares.test.xxljob = []

                    val.map((item, index) => {
                        item.env = '2'
                        this.allClusterMiddleares.test.xxljob.push(item)
                    })
                }

            }
        },
        preStep() {
            if (this.steps.current !== 0) {
                this.steps.current -= 1;

            }

        },
        backStep() {
            if (this.steps.current !== 2) {
                this.steps.current += 1;
            }
        },
        // 保存
        handleSaveFormData() {
            // 对密码进行加密处理
            const jse = new this.$jsEncrypt();

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

            this.$refs.myForm.validate((valid) => {
                if (!valid) {
                    this.$message.error("请检查各项内容是否填写完整")
                } else {

                    let requestParam = {}
                    requestParam.projectName = this.formData.projectName
                    requestParam.projectNameEn = this.formData.projectNameEn
                    requestParam.packageName = "com.nbport." + this.formData.packageName
                    requestParam.version = this.formData.version
                    requestParam.storageAccount = this.formData.storageAccount

                    if (this.formData.storagePassword.length < 100) {
                        requestParam.storagePassword = jse.encrypt(this.formData.storagePassword)
                    }
                    requestParam.storageType = this.formData.storageType
                    requestParam.storageAddress = this.formData.storageAddress
                    requestParam.storageBranch = this.formData.storageBranch
                    requestParam.templateId = this.templateId

                    let middlewares = []

                    // 只配置集群
                    this.allMiddlewares.dev.map((item) => {
                        middlewares.push(item)
                    })
                    this.allMiddlewares.prod.map(item => {
                        middlewares.push(item)
                    })
                    this.allMiddlewares.test.map(item => {
                        middlewares.push(item)
                    })

                    // 取出集群数据

                    this.allClusterMiddleares.dev.database.map((item => {
                        middlewares.push(item)
                    }))
                    this.allClusterMiddleares.prod.database.map((item => {
                        middlewares.push(item)

                    }))
                    this.allClusterMiddleares.test.database.map((item => {
                        middlewares.push(item)

                    }))



                    // redis
                    this.allClusterMiddleares.dev.redis.map((item => {
                        middlewares.push(item)
                    }))
                    this.allClusterMiddleares.prod.redis.map((item => {
                        middlewares.push(item)

                    }))
                    this.allClusterMiddleares.test.redis.map((item => {
                        middlewares.push(item)

                    }))


                    // xxljob
                    this.allClusterMiddleares.dev.xxljob.map((item => {
                        middlewares.push(item)
                    }))
                    this.allClusterMiddleares.prod.xxljob.map((item => {
                        middlewares.push(item)

                    }))
                    this.allClusterMiddleares.test.xxljob.map((item => {
                        middlewares.push(item)

                    }))


                    // nginx
                    this.allClusterMiddleares.dev.nginx.map((item => {
                        middlewares.push(item)
                    }))
                    this.allClusterMiddleares.prod.nginx.map((item => {
                        middlewares.push(item)

                    }))
                    this.allClusterMiddleares.test.nginx.map((item => {
                        middlewares.push(item)

                    }))


                    // dubbo
                    this.allClusterMiddleares.dev.dubbo.map((item => {
                        middlewares.push(item)
                    }))
                    this.allClusterMiddleares.prod.dubbo.map((item => {
                        middlewares.push(item)

                    }))
                    this.allClusterMiddleares.test.dubbo.map((item => {
                        middlewares.push(item)

                    }))


                    // rocketmq

                    this.allClusterMiddleares.dev.rocketmq.map((item => {
                        middlewares.push(item)
                    }))
                    this.allClusterMiddleares.prod.rocketmq.map((item => {
                        middlewares.push(item)

                    }))
                    this.allClusterMiddleares.test.rocketmq.map((item => {
                        middlewares.push(item)

                    }))


                    // minio
                    this.allClusterMiddleares.dev.minio.map((item => {
                        middlewares.push(item)
                    }))
                    this.allClusterMiddleares.prod.minio.map((item => {
                        middlewares.push(item)

                    }))
                    this.allClusterMiddleares.test.minio.map((item => {
                        middlewares.push(item)

                    }))


                    // nacos
                    this.allClusterMiddleares.dev.nacos.map((item => {
                        middlewares.push(item)
                    }))
                    this.allClusterMiddleares.prod.nacos.map((item => {
                        middlewares.push(item)

                    }))
                    this.allClusterMiddleares.test.nacos.map((item => {
                        middlewares.push(item)

                    }))


                    // nacos
                    this.allClusterMiddleares.dev.nacosServer.map((item => {
                        middlewares.push(item)
                    }))
                    this.allClusterMiddleares.prod.nacosServer.map((item => {
                        middlewares.push(item)

                    }))
                    this.allClusterMiddleares.test.nacosServer.map((item => {
                        middlewares.push(item)

                    }))

                    requestParam.middlewares = middlewares

                    // console.log(JSON.stringify(requestParam));

                    if (this.action === 'add') {
                        addProject(requestParam).then(res => {
                            this.$refs.PromptBox.visible = true
                            this.$refs.PromptBox.init("添加成功")
                            this.visible = false
                            this.$emit("AddProjectModalVue")
                        }).catch(err => {
                            this.$message.error("添加失败")
                        })
                    } else if (this.action === 'edit') {
                        requestParam.projectId = this.currentEdit
                        editProject(requestParam).then(res => {
                            this.$refs.PromptBox.visible = true
                            this.$refs.PromptBox.init("更新成功")
                            this.visible = false
                            this.$emit("AddProjectModalVue")
                        }).catch(err => {
                            this.$message.error("更新失败")
                        })

                    } else if (action === 'copy') {
                        addProject(requestParam).then(res => {
                            this.$refs.PromptBox.visible = true
                            this.$refs.PromptBox.init("复制成功")
                            this.visible = false
                            this.$emit("AddProjectModalVue")
                        }).catch(err => {
                            this.$message.error("复制失败")
                        })
                    }

                }
            })
        },
        // 选择不集成的时候要把数据清除
        delClusterWhenNotIntegrate(env, type) {
            switch (type) {
                case '0':
                    this.allClusterMiddleares[env].database = []
                    break;
                case '1':
                    this.allClusterMiddleares[env].redis = []
                    break;
                case '2':
                    this.allClusterMiddleares[env].minio = []
                    break;
                case '3':
                    this.allClusterMiddleares[env].xxljob = []
                    break;
                case '4':
                    this.allClusterMiddleares[env].rocketmq = []
                    break;
                case '5':
                    this.allClusterMiddleares[env].dubbo = []
                    break;
                case '6':
                    this.allClusterMiddleares[env].nacos = []
                    this.allClusterMiddleares[env].nacosServer = []
                    break;
                case '7':
                    this.allClusterMiddleares[env].nginx = []
                    break;
                default:
                    break;
            }
        },
        // 不集成把数据清除
        delWhenNotIntegrate(type) {
            let res = []
            if (this.enviroment === '0') {
                this.allMiddlewares.dev.map((item, index) => {
                    if (item.middlewareType === type && item.env === '0') {
                    } else {
                        res.push(item)
                    }
                })
                this.allMiddlewares.dev = res
                this.delClusterWhenNotIntegrate('dev', type)

            } else if (this.enviroment === '1') {
                this.allMiddlewares.prod.map((item, index) => {
                    if (item.middlewareType === type && item.env === '1') {
                    } else {
                        res.push(item)
                    }
                })
                this.allMiddlewares.prod = res
                this.delClusterWhenNotIntegrate('prod', type)

            } else if (this.enviroment === '2') {
                this.allMiddlewares.test.map((item, index) => {
                    if (item.middlewareType === type && item.env === '2') {
                    } else {
                        res.push(item)
                    }
                })
                this.allMiddlewares.test = res
                this.delClusterWhenNotIntegrate('test', type)

            }
        },
        // 点击集成也弹出修改框
        handleEdit(value) {
            switch (value) {
                case 1:
                    this.$refs.databaseConfig.visible = true
                    this.$refs.databaseConfig.action = 'add'
                    this.$refs.databaseConfig.publicKey = this.publicKey
                    break;
                case 2:
                    this.$refs.redisConfig.visible = true
                    this.$refs.redisConfig.action = 'add'
                    this.$refs.redisConfig.publicKey = this.publicKey
                    break;
                case 3:
                    this.$refs.minioConfig.visible = true
                    this.$refs.minioConfig.action = 'add'
                    this.$refs.minioConfig.publicKey = this.publicKey
                    // this.$refs.minioConfig.verifyInput()
                    break;
                case 4:
                    this.$refs.xxljobConfig.visible = true
                    this.$refs.xxljobConfig.action = 'add'
                    this.$refs.xxljobConfig.publicKey = this.publicKey
                    break;
                case 5:
                    this.$refs.rocketMqConfig.visible = true
                    this.$refs.rocketMqConfig.action = 'add'
                    break;
                case 6:
                    this.$refs.dubboConfig.visible = true
                    this.$refs.dubboConfig.action = 'add'
                    break;
                case 7:
                    this.$refs.nacosConfig.visible = true
                    this.$refs.nacosConfig.action = 'add'
                    break;
                case 8:
                    this.$refs.nginxConfig.visible = true
                    this.$refs.nginxConfig.action = 'add'
                    break;
                default:
                    break;
            }
        },
        // 中间件切换
        middlerWareChange(e, value) {
            switch (value) {
                case 1:
                    if (e.target.value) {
                        this.$refs.databaseConfig.visible = true
                        this.$refs.databaseConfig.action = 'add'
                        this.$refs.databaseConfig.publicKey = this.publicKey

                    } else {
                        // 如果突然选择不集成了
                        this.delWhenNotIntegrate('0')
                    }
                    break;
                case 2:
                    if (e.target.value) {
                        this.$refs.redisConfig.visible = true
                        this.$refs.redisConfig.action = 'add'
                        this.$refs.redisConfig.publicKey = this.publicKey


                    } else {
                        this.delWhenNotIntegrate('1')

                    }
                    break;
                case 3:
                    if (e.target.value) {
                        this.$refs.minioConfig.visible = true
                        this.$refs.minioConfig.action = 'add'
                        this.$refs.minioConfig.publicKey = this.publicKey


                    } else {
                        this.delWhenNotIntegrate('2')

                    }
                    break;
                case 4:
                    if (e.target.value) {
                        this.$refs.xxljobConfig.visible = true
                        this.$refs.xxljobConfig.action = 'add'
                        this.$refs.xxljobConfig.publicKey = this.publicKey

                    } else {
                        this.delWhenNotIntegrate('3')

                    }
                    break;
                case 5:
                    if (e.target.value) {
                        this.$refs.rocketMqConfig.visible = true
                        this.$refs.rocketMqConfig.action = 'add'

                    } else {
                        this.delWhenNotIntegrate('4')

                    }
                    break;
                case 6:
                    if (e.target.value) {
                        this.$refs.dubboConfig.visible = true
                        this.$refs.dubboConfig.action = 'add'

                    } else {
                        this.delWhenNotIntegrate('5')

                    }
                    break;
                case 7:
                    if (e.target.value) {
                        this.$refs.nacosConfig.visible = true
                        this.$refs.nacosConfig.action = 'add'

                    } else {
                        this.delWhenNotIntegrate('6')

                    }
                    break;
                case 8:
                    if (e.target.value) {
                        this.$refs.nginxConfig.visible = true
                        this.$refs.nginxConfig.action = 'add'

                    } else {
                        this.delWhenNotIntegrate('7')

                    }
                    break;
                default:
                    break;
            }
        },
        // 获取所有模板
        getAllTemp() {
            getAllTempName().then((res) => {
                let results = res.result
                results.map((item, index) => {
                    this.allTempSel.push({ label: item.templateName, value: item.templateId })
                })
            })
        },
        getAllScript() {
            /*
            
            database middlewareType 0
            redis middlewareType 1
            minio middlewareType 2
            xxljob middlewareType 3
            rocketmq middlewareType 4
            dubbo middlewareType 5
            nacos middlewareType 6 
            nginx middlewareType 7
            
            */
            this.allScriptSel = []
            this.allScriptCate = JSON.parse(JSON.stringify(this.defaultAllScriptCate))
            getAllScriptInfo().then(res => {
                let result = res.result
                result.map((item, index) => {
                    // 将脚本按照类型分类
                    this.allScriptSel.push({ label: item.scriptName, value: item.scriptId })
                    if (item.middlewareType === '0') {
                        this.allScriptCate.database.push({ label: item.scriptName, value: item.scriptId })
                    } else if (item.middlewareType === '1') {
                        this.allScriptCate.redis.push({ label: item.scriptName, value: item.scriptId })
                    } else if (item.middlewareType === '2') {
                        this.allScriptCate.minio.push({ label: item.scriptName, value: item.scriptId })
                    } else if (item.middlewareType === '3') {
                        this.allScriptCate.xxljob.push({ label: item.scriptName, value: item.scriptId })
                    } else if (item.middlewareType === '4') {
                        this.allScriptCate.rocketmq.push({ label: item.scriptName, value: item.scriptId })
                    } else if (item.middlewareType === '5') {
                        this.allScriptCate.dubbo.push({ label: item.scriptName, value: item.scriptId })
                    } else if (item.middlewareType === '6') {
                        this.allScriptCate.nacos.push({ label: item.scriptName, value: item.scriptId })
                    } else if (item.middlewareType === '7') {
                        this.allScriptCate.nginx.push({ label: item.scriptName, value: item.scriptId })
                    }
                })
            })
        }


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

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

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

/deep/ .ant-input {
    font-size: 16px !important;
}

.ant-layout-header {
    background: fixed white;
}

.ant-pagination {
    text-align: right;
    margin-top: 20px;
}

.ant-layout-content {
    margin-top: 20px;
    /* // border: 1px solid red; */
}

.table-btn {
    text-align: right;
    margin-bottom: 20px;
}

.table-btn button {
    margin-left: 5px;
}

.templateSet .ant-row {
    margin-top: 20px;
}

// 定位
.databaseConfig {
    width: 300px;
    height: 40px;
    border-radius: 20px;
    text-align: center;
    background-color: #f0efef;
    font-size: 20px !important;
    line-height: 40px;
    font-weight: 500;
    position: relative;
    padding-left: 35px;

    & .showicon {
        position: absolute;
        left: 20px;
        top: 0px;
       
    }

    .active {
        color: green;
        font-size: 18px;
        vertical-align: middle;
    }

    .inActive {
        color: #006cff;
        font-size: 18px;
        vertical-align: middle;
    }
}

.head-content {
    text-align: center;

}

.head-content span:nth-child(1) {
    font-size: 28px;
    vertical-align: middle;
    color: #284f84;
}

.head-content span:nth-child(2) {
    font-size: 18px;
    vertical-align: middle;
    color: #284f84;
}

.head-content span:nth-child(3) {
    font-size: 18px;
    vertical-align: middle;
    color: #284f84;
}

.select-env {

    & span {
        font-size: 14px;
        font-weight: 800;


    }
}
</style>