<template>
    <Wraper :hidden="hidden" :refresh="refresh" :onOk="submit" :noFooter="isView">
        <a-form-model layout="vertical" :model="form" :rules="rules" ref="form">
            <a-form-model-item :label="$t('system.jobName')" prop="taskName">
                <a-input v-model="form.taskName" :disabled="isView" :placeholder="$t('input.placeholder')" />
            </a-form-model-item>
            <a-form-model-item :label="$t('task.schedulingRules')" prop="taskRule">
                <ACron v-model="form.taskRule" :disabled="isView" :placeholder="$t('input.placeholder')" />
            </a-form-model-item>
            <a-form-model-item :label="$t('task.implementClass')" prop="implementClass">
                <a-input
                    v-model="form.implementClass"
                    :disabled="isView"
                    :placeholder="$t('input.placeholder')"
                />
            </a-form-model-item>
            <a-form-model-item :label="$t('table.remark')" prop="remark">
                <a-textarea
                    v-model="form.remark"
                    :disabled="isView"
                    :rows="4"
                    :placeholder="$t('input.placeholder')"
                />
            </a-form-model-item>
        </a-form-model>
    </Wraper>
</template>

<script>
import { addTaskApi, updateTaskApi } from '@/api';
import ACron from '@/components/Acron/ACron.vue';
import { WraperMixins } from '@/components/table';

export default {
    components: { ACron },
    props: ['row'],
    mixins: [WraperMixins],
    data() {
        return {
            form: {},
            rules: {
                taskName: [{ required: true, message: this.$t('task.taskNameError') }],
                taskRule: [{ required: true, message: this.$t('task.taskRuleError') }],
            },
        };
    },
    computed: {
        isView() {
            return this.type === 'view';
        },
        isEdit() {
            return this.type === 'edit';
        },
    },
    mounted() {
        if (this.type) {
            this.form = { ...this.row };
        }
    },
    methods: {
        async submit() {
            await this.$refs.form.validate();
            if (this.type) return updateTaskApi({ ...this.form });
            return addTaskApi({ ...this.form });
        },
    },
};
</script>
