<!--
 * @Description: 脚本上传
 * @Author: xiaofengzhou
 * @Email: 2946471396@qq.com
 * @Date: 2022-08-06 15:40:30
 * @LastEditTime: 2022-10-18 16:19:07
 * @LastEditors: xiaofengzhou
-->

<template>
    <div>
        <a-modal :maskClosable="false" v-model:visible="visible" @ok="onOk" @cancel="onCancel" centered>
            <div class="head-content">
                <span class="iconfont icon-repo"></span>
                &nbsp;&nbsp;
                <span v-if="scriptAction === 'add'">上传新脚本库</span>
                <span v-else-if="scriptAction === 'edit'">更新脚本</span>
            </div>
            <a-form-model :model="script" :rules="rules" ref="scriptForm" layout="horizontal" v-bind="{
                labelCol: { span: 8 },
                wrapperCol: { span: 16 },
            }" :colon="true" labelAlign="left" style="text-align:center ;">
                <a-form-model-item label="脚本名称" prop="scriptName" v-bind="{}">
                    <a-input size="large" v-model="script.scriptName" placeholder="请输入脚本名称" />
                </a-form-model-item>
                <a-form-model-item label="中间件" prop="middlewareType" v-bind="{}">
                    <a-select size="large" v-model="script.middlewareType">
                        <a-select-option value="0">数据库脚本</a-select-option>
                        <a-select-option value="1">redis脚本</a-select-option>
                        <a-select-option value="2">minio脚本</a-select-option>
                        <a-select-option value="3">xxljob脚本</a-select-option>
                        <a-select-option value="4">rocketmq脚本</a-select-option>
                        <a-select-option value="5">dubbo脚本</a-select-option>
                        <a-select-option value="6">nacos脚本</a-select-option>
                        <a-select-option value="7">nginx脚本</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="是否支持集群安装" prop="clusterFlag" v-bind="{}">
                    <a-radio-group v-model="script.clusterFlag">
                        <a-radio value="0">是</a-radio>
                        <a-radio value="1" style="margin-left: 100px;">否</a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item label="文件上传">
                    <div :key="randomKey">
                        <a-upload-dragger name="file" :remove="onRemove" :beforeUpload="beforeUpload"
                            :customRequest="customUpload" @change="handleFileChange">
                            点击上传/拖拽到此区域
                        </a-upload-dragger>
                    </div>

                </a-form-model-item>
                <a-form-model-item label="备注" prop="remark" v-bind="{}">
                    <a-input size="large" v-model="script.remark" placeholder="请输入备注" />
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>

<script>
import { addScript, updateScript } from '../.././../../../packages/api/manage'
export default {
    data() {
        return {
            randomKey: 1,
            fileList: [],
            scriptAction: 'view',
            visible: false,
            defaultScript: {
                scriptUrl: '',
                scriptName: '',
                fileLocalPath: "",
                middlewareType: '',
                clusterFlag: '0',
                remark: ""

            },
            script: {
                scriptId: '',
                scriptUrl: '',
                scriptName: '',
                fileLocalPath: "",
                middlewareType: '',
                clusterFlag: '0',
                remark: ""
            },
            rules: {
                scriptName: [
                    {
                        required: true,
                        message: "脚本名称不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 255,
                        message: "脚本名称长度不能大于255",
                        trigger: "blur",
                    },
                ],
                middlewareType: [
                    {
                        required: true,
                        message: "中间件不能为空",
                        trigger: "change"
                    },

                ],
                remark: [
                    {
                        max: 255,
                        message: "备注长度不能大于200",
                        trigger: "blur",
                    },
                ]

            },
            uploadData: '',


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

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

    },
    methods: {
        // 初始化
        init(record, action) {

            this.uploadData = ""
            this.randomKey = Math.random()
            if (action === 'add') {
                this.scriptAction = 'add'
                this.script = Object.assign({}, this.defaultScript)

            } else if (action === 'edit') {
                this.script.scriptId = record.scriptId
                this.scriptAction = 'edit'
                this.script.scriptName = record.scriptName
                this.script.middlewareType = record.middlewareType
                this.script.remark=record.remark
            }
        },
        // 确认
        onOk() {

            this.$refs["scriptForm"].validate((valid) => {
                if (!valid) {
                } else {
                    if (this.scriptAction === 'add') {
                        if (this.uploadData === "") {
                            this.$message.error("请上传文件")
                        } else {
                            const formData = new FormData()
                            formData.append('scriptFile', this.uploadData.file)
                            formData.append("scriptName", this.script.scriptName)
                            formData.append("middlewareType", this.script.middlewareType)
                            formData.append('clusterFlag', this.script.clusterFlag)
                            formData.append('remark', this.script.remark)
                            addScript(formData).then(res => {
                                this.visible = false
                                this.$message.success("添加成功")
                                this.$emit("uploadScriptVue")
                            })
                        }
                    } else if (this.scriptAction === 'edit') {

                        // 编辑可以不上传
                        const formData = new FormData()
                        if (this.uploadData !== '') {
                            formData.append('scriptFile', this.uploadData.file)
                        }
                        formData.append("scriptName", this.script.scriptName)
                        formData.append("middlewareType", this.script.middlewareType)
                        formData.append('clusterFlag', this.script.clusterFlag)
                        formData.append('scriptId', this.script.scriptId)
                        formData.append('remark', this.script.remark)


                        updateScript(formData).then(res => {
                            this.visible = false
                            this.$message.success("更新成功")
                            this.$emit("uploadScriptVue")
                        })
                    }


                }
            })
        },
        // 取消
        onCancel() {
            this.uploadData = ""
            this.randomKey = Math.random()
        },
        // 文件控制
        handleFileChange(e) {
            if (e.fileList.length > 1) {
                this.$message.error("只能上传一个文件")
                e.fileList.pop()
            }
        },
        // 自定义上传
        customUpload(data) {
            this.uploadData = data
            setTimeout(
                () => {

                    data.onSuccess('200', data.file)
                }, 500)
        },
        // 文件类型控制
        beforeUpload(file) {
            const allowFormat = file.type === 'text/x-sh';
            if (!allowFormat) {
                this.$message.error("只允许上传sh脚本文件")
                this.randomKey = Math.random()
            }
            const fileSize = file.size / 1024 / 1024 < 10;
            if (!fileSize) {
                this.$message.error("脚本文件应小于10M")
                this.randomKey = Math.random()

            }
            return allowFormat && fileSize;
        },
        // 取消上传
        onRemove(e) {
            this.uploadData = ""
        }

    }
}
</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-content {
    text-align: center;
    margin-bottom: 30px;
}

.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;
}
</style>