<template lang="pug">
    el-dialog( :close-on-click-modal='false'  :visible.sync='visible' :append-to-body='true' :before-close="handleClose")
        div.title-bold(slot='title') {{dataForm.id ? '修改' :'新增'}}
        el-form(:model='dataForm' :rules='dataRule' ref='dataForm' label-width='100px')
            el-row(:span='24')
                el-col(:span='24')
                    el-form-item(label='数据源url:', prop='url')
                        el-input(v-model='dataForm.url', placeholder='请填写数据源url（包含地址端口以及参数）' clearable)
                el-col(:span='12')
                    el-form-item(label='用户名:', prop='username')
                        el-input(v-model='dataForm.username', placeholder='请填写数据源用户名' clearable)
                el-col(:span='12' )
                    el-form-item(label='密码:', prop='password')
                        el-input(, v-model='dataForm.password', placeholder='密码' clearable)
                el-col(:span='12' )
                    el-form-item(label='数据源ip:', prop='ip')
                        el-input(v-model='dataForm.ip', placeholder='请填写数据源服务器ip' clearable)
                el-col(:span='12')
                    el-form-item(label='数据源端口:', prop='port')
                        el-input(v-model='dataForm.port', placeholder='请填写数据源端口' clearable)
                el-col(:span='24')
                    el-form-item(label='说明信息:', prop='detail')
                        el-input(v-model='dataForm.detail' type="textarea" placeholder='请填写手机号码' clearable)
        div(slot='footer' align='center')
            el-button(type='danger' plain size='medium' @click='handleClose') 取消
            el-button(type='primary' size='medium' @click='dataFormSubmit()' v-prevent-re-click) 保存
</template>

<script>
    export default {
        data() {
            return {
                clickFlag: false,
                visible: false,
                dataForm: {},
                dataRule: {
                    url: [
                        { required: true, message: '数据源url不能为空', trigger: ['change', 'blur'] },
                        { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: ['change', 'blur'] }
                    ],
                    username: [
                        { required: true, message: '数据源用户名不能为空', trigger: ['change', 'blur'] },
                        { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: ['change', 'blur'] }
                    ],
                    password: [
                        { required: true, message: '密码不能为空', trigger: ['change', 'blur'] },
                        { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: ['change', 'blur'] }
                    ],
                    ip: [
                        { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: ['change', 'blur'] }
                    ],
                    port: [
                        { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: ['change', 'blur'] }
                    ],
                    detail: [
                        { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: ['change', 'blur'] }
                    ]
                }
            }
        },
        mounted() {
        },
        methods: {
            init(row) {
                this.visible = true
                this.dataForm = { ...row }
            },
            //关闭前
            handleClose() {
                this.visible = false
                this.clickFlag = false
                this.$refs.dataForm.resetFields()
            },
            // 表单提交
            dataFormSubmit() {
                this.$refs['dataForm'].validate(valid => {
                    if (valid) {
                        this.clickFlag = true
                        this.$http({
                            url: this.$http.rtAdornUrl(
                                `/sysDatasource/${!this.dataForm.id ? 'save' : 'update'}`
                            ),
                            method: 'post',
                            data: this.dataForm
                        }).then(data => {
                            console.log(data)
                            if (data && data.code === 0) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    duration: 1500,
                                    onClose: () => {
                                        this.handleClose()
                                        this.$emit('refreshdatalist')
                                    }
                                })
                            }
                        }).catch(data => {
                            this.$message.error(data.msg)
                        })
                    }
                })
            }
        }
    }
</script>
<style>
    .el-table__header {
        width: 100% !important;
    }

    .el-table__body {
        width: 100% !important;
    }
</style>