<template>
    <div>
        <Form :model="form" ref="formDataSource" :rules="rules" :label-width="120">
            <Form-item prop="serverCode" :label="$t('module.datasource.serverCode')">
                <Input v-model="form.serverCode" placeholder="" maxlength="30"></Input>
            </Form-item>
            <Form-item prop="serverName" :label="$t('module.datasource.serverName')">
                <Input v-model="form.serverName" placeholder="" maxlength="30"></Input>
            </Form-item>
            <Form-item prop="ipAddress" :label="$t('module.datasource.ipAddress')">
                <Input v-model="form.ipAddress" placeholder="" maxlength="100"></Input>
            </Form-item>
            <Form-item prop="httpPort" :label="$t('module.datasource.httpPort')">
                <Input :value="httpPort" placeholder="" maxlength="10"></Input>
            </Form-item>
            <Form-item prop="jmxPort" :label="$t('module.datasource.jmxPort')">
                <Input v-model="form.jmxPort" placeholder="" maxlength="10"></Input>
            </Form-item>
            <Form-item prop="serverDesc" :label="$t('module.datasource.serverDesc')">
                <Input v-model="form.serverDesc" placeholder="" maxlength="100"></Input>
            </Form-item>
        </Form>
    </div>
</template>
<script>
export default {
    components: {

    },
    data() {
        return {
            form: {
                serverCode: '',
                serverName: '',
                ipAddress: '',
                httpPort: '',
                jmxPort: '',
                serverDesc: ''
            },
            rules: {
                serverCode: [{ required: true, message: this.$t('module.datasource.warning.enterServerCode'), trigger: "blur" }],
                serverName: [{ required: true, message: this.$t('module.datasource.warning.enterServerName'), trigger: "blur" }]
            }
        }
    },
    computed: {

    },
    created: function () {
        this.$emit('SetTitle', this.$t('module.datasource.createDatasource'));
        this.$emit('SetPageActions', [
            {
                text: this.$t('common.save'),
                theme: "primary",
                icon: "md-create",
                handle: this.save
            }
        ])
    },
    beforeMount: function () {

    },
    mounted: function () {

    },
    beforeDestroy: function () {

    },
    destroyed: function () {

    },
    methods: {
        save() {
            this.$refs["formDataSource"].validate((valid) => {
                if (!valid) return;
                $store.dispatch('CreatDataSource', this.form).then((res) => {
                    if (!res.success) {
                        this.$Message.warning({
                            content: res.msg,
                            duration: 2
                        });
                        return;
                    }
                    this.$emit("Close");
                })
            })
        }
    },
    watch: {

    },
    directives: {

    }
}
</script>
