<template>
    <div class="distributed-list sidelip-box">
        <Form :model="taskInfo" :label-width="100" :rules="rules" ref="taskInfoForm">
            <Col span="16">
            <Form-Item :label="$t('module.distributedTask.taskName')" prop="jobName">
                <Input v-model="taskInfo.jobName" :placeholder="$t('module.distributedTask.enterName')" v-bind:readonly="isReadOnly"></Input>
            </Form-Item>
            </Col>
            <Col span="16">
            <Form-Item :label="$t('module.distributedTask.taskAlias')" prop="aliasName">
                <Input v-model="taskInfo.aliasName" :placeholder="$t('module.distributedTask.enterAlias')" v-bind:readonly="isReadOnly"></Input>
            </Form-Item>
            </Col>
            <Col span="16">
            <Form-Item :label="$t('module.distributedTask.taskDesc')" prop="description">
                <Input v-model="taskInfo.description" :placeholder="$t('module.distributedTask.enterDesc')"></Input>
            </Form-Item>
            </Col>
            <Col span="16">
            <Form-Item :label="$t('module.distributedTask.isOrNotAsync')">
                <RadioGroup v-model="taskInfo.sync">
                    <Radio label="1" v-bind:disabled="isReadOnly">{{$t('module.distributedTask.sync')}}</Radio>
                    <Radio label="0" v-bind:disabled="isReadOnly">{{$t('module.distributedTask.async')}}</Radio>
                </RadioGroup>
            </Form-Item>
            </Col>
            <Col span="16">
            <Form-Item :label="$t('module.distributedTask.taskClass')" prop="clazz">
                <!-- <Select v-model="taskInfo.clazz" style="width:200px" :placeholder="请输入任务类" v-bind:disabled="isReadOnly">
                        <Option v-for="item in clazzList" :value="item.key" :key="item.key">{{ item.value }}</Option>
                    </Select>-->
                <Input v-model="taskInfo.clazz" :placeholder="$t('module.distributedTask.enterClass')" v-bind:readonly="isReadOnly"></Input>
            </Form-Item>
            </Col>
            <Col span="16">
            <Form-Item :label="$t('module.distributedTask.jobExecutedMethod')" prop="jobExecutedMethod">
                <Input v-model="taskInfo.jobExecutedMethod" :placeholder="$t('module.distributedTask.enterMethod')" v-bind:readonly="isReadOnly"></Input>
            </Form-Item>
            </Col>
            <Col span="16">
            <Form-Item :label="$t('module.distributedTask.taskParam')" prop="jobParams">
                <Input v-model="taskInfo.jobParams" type="textarea" :rows="1" :placeholder="$t('module.distributedTask.enterParam')"></Input>
            </Form-Item>
            </Col>
            <Col span="16">
            <Form-Item :label="$t('module.distributedTask.dubboServe')">
                <Checkbox v-model="taskInfo.dubboJob"></Checkbox>
            </Form-Item>
            </Col>
            <Col span="18">
            <Form-Item :label="$t('module.distributedTask.timeExpression')" prop="cronExpression">
                <Row>
                    <Col span="18">
                    <Input type="text" v-model="taskInfo.cronExpression" :placeholder="$t('module.distributedTask.enterExpression')"></Input>
                    </Col>
                    <Col span="4" style="margin-left:10px;">
                    <Button type="ghost" @click="selectExpression">
                        <Icon type="plus-round"></Icon>
                        {{$t('module.distributedTask.format')}}</Button>
                    </Col>
                </Row>
                <Row style="border:1px solid #e3e8ee;padding:20px;border-radius:5px;" v-if="showCroMaker">
                    <Col span="24">
                    <CronMaker @changeCronExpression="changeCronExpression"></CronMaker>
                    </Col>
                </Row>
            </Form-Item>
            </Col>

            <Col span="16" class="run-modal-ftbButton">
            <Form-Item>
                <Button style="margin:10px 0" type="primary" @click="onSave()">{{$t('common.save')}}</Button>
                <!-- <Button type="primary" @click="reset()">清空</Button> -->
            </Form-Item>
            </Col>
        </Form>
    </div>
</template>
<style lang="less">
.distributed-list {
  .ivu-col-span-16 {
    margin-bottom: 10px;
  }
}
</style>

<script>
import CronMaker from '../../../components/CronMaker.vue'
export default {
    components: {
        CronMaker
    },
    props: {
        jobName: '',
        triggerName: '',
        groupName: ''
    },
    data() {
        const validateJobName = (rule, value, callback) => {
            if (value === '') {
                callback(new Error(this.$t('module.distributedTask.enterName')));
            } else if (value.length > 50) {
                callback(new Error(this.$t('module.distributedTask.maxFifty')));
            } else if (new RegExp("[\"\\/'&|*`,.;:$^#!@ ！：；，。“‘、／]").test(value)) {
                //^[^_][a-zA-Z0-9]*([a-zA-Z0-9][^_])+[^_]$
                callback(new Error(this.$t('module.distributedTask.noSpecialChar')));
            } else if (value.indexOf("\\") >= 0) {
                callback(new Error(this.$t('module.distributedTask.noSpecialChar')));
            }
            callback();
        };
        const validateClazz = (rule, value, callback) => {

            if (value === '') {
                callback(new Error(this.$t('module.distributedTask.enterClass')));
            } else if (value.length > 150) {
                callback(new Error(this.$t('module.distributedTask.maxOFZ')));
            } else if (!new RegExp("^[a-zA-Z0-9\.]+$").test(value)) {
                //^[^_][a-zA-Z0-9]*([a-zA-Z0-9][^_])+[^_]$
                callback(new Error(this.$t('module.distributedTask.onlyChar')));
            }
            callback();
        };
        const validateJobExecutedMethod = (rule, value, callback) => {

            if (value === '') {
                callback(new Error(this.$t('module.distributedTask.enterMethod')));
            } else if (value.length > 150) {
                callback(new Error(this.$t('module.distributedTask.maxOFZ')));
            } else if (!new RegExp("^[a-zA-Z0-9\.]+$").test(value)) {
                //^[^_][a-zA-Z0-9]*([a-zA-Z0-9][^_])+[^_]$
                callback(new Error(this.$t('module.distributedTask.onlyChar')));
            }
            callback();
        };
        // const validateJobParams = (rule, value, callback) => {
        //    if(!value) return;
        //    if (value.length > 200) {
        //         callback(new Error('任务类参数长度超过200个字符限制'));
        //     } else if (!new RegExp("^[a-zA-Z0-9\.]+$").test(value)) {
        //         //^[^_][a-zA-Z0-9]*([a-zA-Z0-9][^_])+[^_]$
        //         callback(new Error('任务类只能有a-zA-Z0-9及.组成'));
        //     }
        //     callback();
        // };
        const validateAliasName = (rule, value, callback) => {

            if (value.length > 50) {
                callback(new Error(this.$t('module.distributedTask.maxFifty')));
            }
            callback();
        };
        const validateDesc = (rule, value, callback) => {

            if (value === '') {
                callback(new Error(this.$t('module.distributedTask.enterDesc')));
            } else if (value.length > 200) {
                callback(new Error(this.$t('module.distributedTask.maxTH')));
            }
            callback();
        };

        return {
            clazzList: [],
            showCroMaker: false,
            isReadOnly: false,
            taskInfo: {
                jobName: "",
                jobParams: "",
                jobTrigger: '',
                jobGroup: '',
                aliasName: "",
                description: "",
                sync: "1",
                clazz: "",
                jobExecutedMethod: "",
                dubboJob: false,
                cronExpression: ""
            },
            rules: {
                aliasName: [{validator: validateAliasName, trigger: 'blur' }],
                jobName: [{ validator: validateJobName, trigger: 'blur', required: true }],
                description: [{ validator: validateDesc, trigger: 'blur', required: true }],
                clazz: [{ required: true, validator: validateClazz, trigger: "blur" }],
                jobExecutedMethod: [{ required: true, validator: validateJobExecutedMethod, trigger: "blur" }],
                // jobParams: [{ validator: validateJobParams, trigger: "blur" }],
                cronExpression: [{ required: true, message: this.$t('module.distributedTask.enterExpression'), trigger: "blur" }]
            }
        };
    },
    computed: {},
    created: function () {
        this.$emit("setTitle", this.jobName != "" ? this.$t('module.distributedTask.edit') : this.$t('module.distributedTask.create'));
        this.getTaskClassesList();
        this.loadTaskDetail();
    },
    beforeMount: function () { },
    mounted: function () { },
    beforeDestroy: function () { },
    destroyed: function () { },
    methods: {
        changeCronExpression(value) {
            this.taskInfo.cronExpression = value;
        },
        selectExpression() {
            this.showCroMaker = !this.showCroMaker;
        },
        loadTaskDetail() {

            if (this.jobName && this.groupName && this.triggerName) {
                this.isReadOnly = true;

                $store.dispatch('SYS_Schedule_GetTaskDetail', {
                    jobName: this.jobName,
                    groupName: this.groupName,
                    triggerName: this.triggerName
                }).then((response) => {
                    if (response.statusCode == '0') {

                        this.taskInfo = response.dataResult;

                    } else {
                        this.$Message.error(response.msg);
                    }
                })
            } else {
                this.isReadOnly = false;
            }

        },
        getTaskClassesList() {
            $store.dispatch('GetTaskClasses').then((response) => {
                if (response.statusCode == '0') {

                    this.clazzList = response.dataResult.taskClasses;

                } else {
                    this.$Message.error(response.msg);
                }
            })
        },
        onSave() {
            //   this.taskInfo.sync = this.taskInfo.sync == '1'? true: false;

            this.$refs["taskInfoForm"].validate((valid) => {

                console.log(this.taskInfo);
                if (valid) {
                    if (this.groupName) {
                        $store.dispatch('EditTask', this.taskInfo).then((response) => {
                            if (response.statusCode == '0') {
                                this.$Message.success(this.$t('common.updateSuccess'));
                                this.$emit("close");
                            } else {
                                this.$Message.error(response.msg);
                            }
                        })
                    } else {
                        //
                        $store.dispatch('AddTask', this.taskInfo).then((response) => {
                            if (response.statusCode == '0') {
                                this.$Message.success(this.$t('common.createSuccess'));
                                this.$emit("close");
                            } else {
                                //
                                let msg = '';
                                let errorMsgArray = response.msg.match(/\$\$([^$]*)\$\$/);
                                if (errorMsgArray && errorMsgArray.length >= 2) {
                                    msg = errorMsgArray[1];
                                } else {
                                    msg = response.msg;
                                }
                                this.$Message.error(msg);
                            }
                        })
                    }

                } else {
                    this.$Message.error(this.$t('common.formValidateFailed'));
                }
            })
        }
    },
    watch: {},
    directives: {}
};
</script>
<style>
.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content {
  height: 120px;
  margin-top: -16px;
}

.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
  background: #fff;
  padding: 16px;
}
.demo-tabs-style1 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
  border-color: transparent;
}

.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
  border-color: #fff;
}
</style>
