<!--
 * @Description: 项目发布
 * @Author: xiaofengzhou
 * @Email: 2946471396@qq.com
 * @Date: 2022-08-06 19:47:03
 * @LastEditTime: 2022-10-31 15:05:21
 * @LastEditors: xiaofengzhou
-->

<template>
    <div>
        <a-modal :maskClosable="false" v-model:visible="visible" @cancel="onCancle" @ok="onOk">
            <div class="head">
                <span class="iconfont icon-screen-code-line head-icon"></span>
                &nbsp;&nbsp;
                <span class="head-text">项目发布</span>

            </div>
            <div class="change-content">
                <a-button @click="changeStandOrCluster(0)" class="change-btn" :class="!isActive ? 'active' : ''">单机配置
                </a-button>
                <a-button @click="changeStandOrCluster(1)" class="change-btn" :class="isActive ? 'active' : ''">集群配置
                </a-button>
            </div>
            <div v-show="standOrCluster">
                <div style="text-align: center;"><span>Jenkins配置</span></div>
                <a-form-model :style="{ width: '100%' }" layout="horizontal" v-bind="{
                    labelCol: { span: 8 },
                    wrapperCol: { span: 14 },
                }" :colon="true" labelAlign="right" :model="publishConfig.property" :rules="jenkinsRules"
                    ref="jenkinsConfig">
                    <a-form-model-item label="jenkins地址" prop="address" v-bind="{}">
                        <a-input size="large" v-model="publishConfig.property.address" placeholder="请输入jenkins地址" />
                    </a-form-model-item>
                    <a-form-model-item label="jenkins端口号" prop="port" v-bind="{}">
                        <a-input size="large" v-model="publishConfig.property.port" placeholder="请输入jenkins端口号" />
                    </a-form-model-item>
                    <a-form-model-item label="jenkins账号" prop="account" v-bind="{}">
                        <a-input size="large" v-model="publishConfig.property.account" placeholder="请输入jenkins账号" />
                    </a-form-model-item>
                    <a-form-model-item label="jenkins密码" prop="password" v-bind="{}">
                        <a-input size="large" type="password" v-model="publishConfig.property.password"
                            placeholder="请输入jenkins密码" @click="clearInput" />
                    </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: 8 },
                    wrapperCol: { span: 14 },
                }" :colon="true" labelAlign="right" :model="serverConfig.property" :rules="serverRules"
                    ref="jenkinsServerConfig">
                    <a-form-model-item label="ip地址" prop="address" v-bind="{}">
                        <a-input size="large" v-model="serverConfig.property.address" placeholder="请输入ip地址" />
                    </a-form-model-item>
                    <a-form-model-item label="部署服务器用户名" prop="account" v-bind="{}">
                        <a-input size="large" v-model="serverConfig.property.account" placeholder="请输入部署服务器用户名" />
                    </a-form-model-item>
                    <a-form-model-item label="部署服务器密码" prop="password" v-bind="{}">
                        <a-input size="large" type="password" v-model="serverConfig.property.password"
                            placeholder="请输入部署服务器密码" @click="clearInputServer" />
                    </a-form-model-item>
                    <a-form-model-item label="部署地址" prop="path" v-bind="{}">
                        <a-input size="large" v-model="serverConfig.property.path" placeholder="请输入部署地址" />
                    </a-form-model-item>

                </a-form-model>
            </div>
            <div v-show="!standOrCluster" style="height:500px;overflow:scroll">

                <div v-for="(item, index) in jenkinsClusterConfig">
                    <div style="text-align: center;"><span>jenkins配置</span></div>
                    <a-form-model :style="{ width: '100%' }" layout="horizontal" v-bind="{
                        labelCol: { span: 8 },
                        wrapperCol: { span: 14 },
                    }" :colon="true" labelAlign="right" :model="item.property" :rules="jenkinsRules"
                        ref="jenkinsClusterConfig">
                        <a-form-model-item label="jenkins地址" prop="address" v-bind="{}">
                            <a-input v-model="item.property.address" placeholder="请输入jenkins地址" />
                        </a-form-model-item>
                        <a-form-model-item label="jenkins端口号" prop="port" v-bind="{}">
                            <a-input v-model="item.property.port" placeholder="请输入jenkins端口号" />
                        </a-form-model-item>
                        <a-form-model-item label="jenkins账号" prop="account" v-bind="{}">
                            <a-input v-model="item.property.account" placeholder="请输入jenkins账号" />
                        </a-form-model-item>
                        <a-form-model-item label="jenkins密码" prop="password" v-bind="{}">
                            <a-input v-model="item.property.password" placeholder="请输入jenkins密码" />
                        </a-form-model-item>
                    </a-form-model>
                </div>
                <div style="text-align: center;">
                    <button @click="expandJenkinsRegisterForm" style="border: none;background:none">
                        <span class="iconfont icon-roundadd" style="color:#284f84;font-size: 20px;"></span>
                    </button>
                </div>
                <div v-for="(item, index) in jenkinsServerClusterConfig">
                    <div style="text-align: center;"><span>服务器配置</span></div>

                    <a-form-model :style="{ width: '100%' }" layout="horizontal" v-bind="{
                        labelCol: { span: 8 },
                        wrapperCol: { span: 14 },
                    }" :colon="true" labelAlign="right" :model="item.property" :rules="jenkinsRules"
                        ref="jenkinsServerClusterConfig">
                        <a-form-model-item label="ip地址" prop="address" v-bind="{}">
                            <a-input v-model="item.property.address" placeholder="请输入ip地址" />
                        </a-form-model-item>
                        <a-form-model-item label="部署服务器用户名" prop="account" v-bind="{}">
                            <a-input v-model="item.property.account" placeholder="请输入部署服务器用户名" />
                        </a-form-model-item>
                        <a-form-model-item label="部署服务器密码" prop="password" v-bind="{}">
                            <a-input v-model="item.property.password" placeholder="请输入部署服务器密码" />
                        </a-form-model-item>
                        <a-form-model-item label="部署地址" prop="path" v-bind="{}">
                            <a-input v-model="item.property.path" placeholder="请输入部署地址" />
                        </a-form-model-item>

                    </a-form-model>
                </div>
                <div class="add-btn-container">
                    <button @click="expandJenkinsConfigForm" class="add-btn">
                        <span class="iconfont icon-roundadd add-btn-span"></span>
                    </button>
                </div>
            </div>

        </a-modal>
        <RealeaseDetailsVue ref="RealeaseDetailsVue" v-on="$listeners" v-bind="$attrs"/>
    </div>
</template>

<script>
import RealeaseDetailsVue from './RealeaseDetails.vue'
import { addPublishConfig, getPublishConfig } from '../../../../../packages/api/manage'

export default {
    components: {
        RealeaseDetailsVue
    },
    data() {
        return {
            publicKey: "",
            isInstallClusster: [{ label: '是', value: true }, { label: '否', value: false }],
            isConfigClutser: false,
            isActive: false,

            projectId: '',
            visible: false,
            standOrCluster: true,
            defaultPublishConfig: {
                projectId: '',

                property: {
                    address: '',
                    port: '',
                    account: '',
                    password: ''
                },
                properties: '',
                propertiesType: '0'
            },
            defaultServerConfig: {
                projectId: '',

                property: {
                    address: '',
                    account: '',
                    password: '',
                    path: ''
                },
                properties: '',
                propertiesType: '1'
            },
            publishConfig: {
                projectId: "",

                property: {
                    address: '',
                    port: '',
                    account: '',
                    password: ''
                },
                properties: '',
                propertiesType: '0'
            },
            serverConfig: {
                projectId: "",

                property: {
                    address: '',
                    account: '',
                    password: '',
                    path: ''
                },
                properties: '',
                propertiesType: '1'
            },
            jenkinsClusterConfig:
                [
                    {
                        projectId: "",
                        property: {
                            address: '',
                            port: '',
                            account: '',
                            password: ''
                        },
                        properties: '',
                        propertiesType: '0'

                    }
                ]
            ,
            defaultJenkinsClusterConfig:
                [
                    {
                        projectId: "",
                        property: {
                            address: '',
                            port: '',
                            account: '',
                            password: ''
                        },
                        properties: '',
                        propertiesType: '0'

                    }
                ]
            ,
            jenkinsServerClusterConfig:
                [
                    {

                        projectId: '',

                        property: {
                            address: '',
                            account: '',
                            password: '',
                            path: ''
                        },
                        properties: '',
                        propertiesType: '1'
                    }
                ]
            ,
            defaultJenkinsServerClusterConfig:
                [
                    {

                        projectId: '',

                        property: {
                            address: '',
                            account: '',
                            password: '',
                            path: ''
                        },
                        properties: '',
                        propertiesType: '1'
                    }
                ]
            ,
            jenkinsRules: {
                address: [
                    {
                        required: true,
                        message: "jenkins地址不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "jenkins地址长度不能大于255",
                        trigger: "blur",
                    },
                ],
                port: [
                    {
                        required: true,
                        message: "jenkins端口号不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "jenkins端口号长度不能大于255",
                        trigger: "blur",
                    },
                ],
                account: [
                    {
                        required: true,
                        message: "jenkins账号不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "jenkins账号长度不能大于255",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "jenkins密码不能为空",
                        trigger: "blur",
                    },

                ],
                path: [
                    {
                        required: true,
                        message: "部署地址不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "部署地址长度不能大于255",
                        trigger: "blur",
                    },
                ]

            },
            serverRules: {
                address: [
                    {
                        required: true,
                        message: "ip地址不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "ip地址长度不能大于255",
                        trigger: "blur",
                    },
                ],
                account: [
                    {
                        required: true,
                        message: "部署服务器用户名不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "部署服务器用户名长度不能大于255",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "部署服务器密码不能为空",
                        trigger: "blur",
                    },

                ],
                path: [
                    {
                        required: true,
                        message: "部署地址不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "部署地址长度不能大于255",
                        trigger: "blur",
                    },
                ],

            },
            dataSource: {},

        }
    },
    methods: {
        clearInput() {
            if (this.publishConfig.property.password.length > 100) {
                this.publishConfig.property.password = ""

            }
        },
        clearInputServer() {
            if (this.serverConfig.property.password.length > 100) {
                this.serverConfig.property.password = ""

            }
        },
        // 初始化
        init(record) {
            this.reset()
            this.projectId = record.projectId
            this.getPublishConfig()
            this.dataSource = record
        },
        reset() {
            this.serverConfig = JSON.parse(JSON.stringify(this.defaultServerConfig))
            this.publishConfig = JSON.parse(JSON.stringify(this.defaultPublishConfig))
            this.jenkinsClusterConfig = JSON.parse(JSON.stringify(this.defaultJenkinsClusterConfig))
            this.jenkinsServerClusterConfig = JSON.parse(JSON.stringify(this.defaultJenkinsServerClusterConfig))
        },
        // 确定
        onOk() {
            const jse = new this.$jsEncrypt();

            jse.setPublicKey(this.$store.getters.publicKey);
            if (!this.standOrCluster) {

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

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

                        })
                    }
                    if (flag) {
                        resolve()
                    }
                })
                Promise.all([p3, p4]).then(() => {
                    this.publishConfig.projectId = this.dataSource.projectId
                    this.serverConfig.projectId = this.dataSource.projectId
                    let requestParam = []
                    this.jenkinsClusterConfig.map((item) => {
                        if (item.property.password.length < 100) {
                            item.property.password = jse.encrypt(item.property.password)

                        }
                        item.projectId = this.dataSource.projectId
                        item.properties = JSON.stringify(item.property)
                        requestParam.push(item)
                    })
                    this.jenkinsServerClusterConfig.map((item) => {
                        if (item.property.password.length < 100) {
                            item.property.password = jse.encrypt(item.property.password)

                        }
                        item.projectId = this.dataSource.projectId
                        item.properties = JSON.stringify(item.property)
                        requestParam.push(item)
                    })
                    // console.log(JSON.stringify(requestParam));

                    addPublishConfig(requestParam).then(res => {
                        this.visible = false
                        this.$refs.RealeaseDetailsVue.visible = true
                        this.$refs.RealeaseDetailsVue.init(this.dataSource)

                    })
                })
            } else {
                let p1 = new Promise((resolve, reject) => {
                    this.$refs["jenkinsConfig"].validate((valid) => {
                        if (!valid) {
                        } else {
                            resolve()
                        }
                    })
                })
                let p2 = new Promise((resolve, reject) => {
                    this.$refs["jenkinsServerConfig"].validate((valid) => {
                        if (!valid) {
                        } else {
                            resolve()
                        }
                    })
                })
                Promise.all([p1, p2]).then(() => {
                    // 发布项目
                    // 构建请求参数
                    if (this.publishConfig.property.password.length < 100) {
                        this.publishConfig.property.password = jse.encrypt(this.publishConfig.property.password)

                    }
                    if (this.serverConfig.property.password.length < 100) {
                        this.serverConfig.property.password = jse.encrypt(this.serverConfig.property.password)

                    }

                    this.publishConfig.projectId = this.dataSource.projectId
                    this.serverConfig.projectId = this.dataSource.projectId
                    this.publishConfig.properties = JSON.stringify(this.publishConfig.property)
                    this.serverConfig.properties = JSON.stringify(this.serverConfig.property)
                    let requestParam = []
                    requestParam.push(this.serverConfig)
                    requestParam.push(this.publishConfig)
                    // console.log(JSON.stringify(requestParam));

                    addPublishConfig(requestParam).then(res => {
                        this.visible = false
                        this.$refs.RealeaseDetailsVue.visible = true
                        this.$refs.RealeaseDetailsVue.init(this.dataSource)

                    })
                })

            }

        },
        // 取消
        onCancle() {

        },
        getPublishConfig() {
            // 把集群数据清空

            // 从接口获取已经保存的集群数据
            getPublishConfig(this.projectId).then(res => {
                let result = res.result
                if (result.length > 2) {
                    this.jenkinsClusterConfig = []
                    this.jenkinsServerClusterConfig = []
                    // 说明是集群配置
                    result.map((item, index) => {

                        if (item.propertiesType === '1') {
                            // 服务器配置
                            // 密码不做自动填充
                            // item.property.password=""
                            this.jenkinsServerClusterConfig.push({ property: item.property, propertiesType: '1' })
                        } else if (item.propertiesType === '0') {
                            // item.property.password=""
                            this.jenkinsClusterConfig.push({ property: item.property, propertiesType: '0' })
                        }
                    })
                } else {
                    let flag = false
                    result.map((item, index) => {
                        // 密码不做填充

                        if (item.propertiesType === '1') {
                            flag = true
                            // 服务器配置
                            // this.serverConfig.property = item.property
                            this.serverConfig.property = item.property
                            // 密码不做自动填充
                            // this.serverConfig.property.password = ""

                        } else if (item.propertiesType === '0') {
                            this.publishConfig.property = item.property
                            // port后端返回数值，转换为字符串
                            this.publishConfig.property.port = this.publishConfig.property.port + ""
                            // 密码不做自动填充
                            // this.publishConfig.property.password=""
                        }
                    })

                    // 再做一次校验
                    if (flag) {

                        setTimeout(() => {
                            this.$refs["jenkinsConfig"].validate((valid) => {
                                if (!valid) {
                                } else {

                                    resolve()
                                }
                            })
                            this.$refs["jenkinsServerConfig"].validate((valid) => {
                                if (!valid) {
                                } else {
                                    resolve()
                                }
                            })
                        }, 500)


                    }
                }

            })
        },
        // 切换集群单机
        changeStandOrCluster(val) {
            if (val === 1) {
                this.standOrCluster = false
                this.isActive = true

            } else {
                this.standOrCluster = true
                this.isActive = false

            }
        },
        // 集群扩展
        expandJenkinsRegisterForm() {
            this.jenkinsClusterConfig.push(
                {

                    projectId: "",
                    property: {
                        address: '',
                        port: '',
                        account: '',
                        password: ''
                    },
                    properties: '',
                    propertiesType: '0'
                }
            )
        },
        // 集群扩展
        expandJenkinsConfigForm() {
            this.jenkinsServerClusterConfig.push(
                {
                    projectId: "",
                    property: {
                        address: '',
                        account: '',
                        password: '',
                        path: ''
                    },
                    properties: '',
                    propertiesType: '1'

                }
            )
        }

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