<template>
    <div>
        <el-dialog v-dialog-drag class="dialog" title="修改任务内容" :visible.sync="dialogVisible" width="25%">
            <el-divider></el-divider>
            <el-form ref="form" :model="form" label-position="left" label-width="75px">
                <el-form-item label="任务名称：" prop="name">
                    <el-input v-model="form.taskName"></el-input>
                </el-form-item>
                <el-form-item label="任务组名：" prop="groupName">
                    <el-input v-model="form.taskGroupName"></el-input>
                </el-form-item>
                <el-form-item label="调用方法：" prop="method">
                    <div style="display: flex;">
                        <el-tooltip effect="light" content="提示信息" placement="top-start">
                            <i class="el-icon-question" style="padding: 13px 5px 0 0;"></i>
                        </el-tooltip>
                        <el-input class="method" v-model="form.method"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label-width="90px" label="cron表达式：" prop="cron_expression">
                    <el-input class="cron_xepression" v-model="form.cron_expression"></el-input>
                </el-form-item>
                <el-button type="text" style="margin:0px 0 0 330px;" @click="innerVisible = true">生成表达式</el-button>
            </el-form>
            <div slot="footer">
                <el-button @click="resetForm('form')">重置</el-button>
                <el-button type="primary" @click="submitForm('form')">确认</el-button>
            </div>
            <el-dialog v-dialog-drag class="innerDialog" title="cron 表达式生成器" :visible.sync="innerVisible" width="30%"
                append-to-body>
                <el-divider></el-divider>
                <div style="width: 95%; margin:20px 0 0 2.5%;">
                    <el-tabs v-model="activeName" type="border-card">
                        <el-tab-pane label="秒"></el-tab-pane>
                        <el-tab-pane label="分钟" name="min">
                            <el-form ref="innerForm1" :model="innerForm1">
                                <el-form-item>
                                    <el-radio-group v-model="radio">
                                        <el-radio :label="1">秒，允许的通配符[,...*/]</el-radio>
                                        <el-radio :label="2">
                                            周期从
                                            <span slot="num1"><el-input-number v-model="num1" :min="1"
                                                    :max="59"></el-input-number></span>
                                            <span>至</span>
                                            <span slot="num2"><el-input-number v-model="num2" :min="1"
                                                    :max="59"></el-input-number></span>
                                            <span>秒</span>
                                        </el-radio>
                                        <el-radio :label="3">
                                            从
                                            <span slot="num1"><el-input-number v-model="num1" :min="1"
                                                    :max="59"></el-input-number></span>
                                            <span>秒开始，每</span>
                                            <span slot="num2"><el-input-number v-model="num2" :min="1"
                                                    :max="59"></el-input-number></span>
                                            <span>秒执行一次</span>
                                        </el-radio>
                                        <el-radio :label="4">
                                            指定 <span>
                                                <el-select v-model="value" placeholder="请选择">
                                                    <el-option value="">

                                                    </el-option>
                                                </el-select>
                                            </span>
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="小时"></el-tab-pane>
                        <el-tab-pane label="日"></el-tab-pane>
                        <el-tab-pane label="周"></el-tab-pane>
                        <el-tab-pane label="月"></el-tab-pane>
                        <el-tab-pane label="年"></el-tab-pane>
                    </el-tabs>
                </div>
                <el-form ref="innerForm2" :model="innerForm2">
                </el-form>
                <div>
                    <el-scrollbar style="height: 100%;">
                        <el-form ref="innerForm3" :model="innerForm3">
                        </el-form>
                    </el-scrollbar>
                </div>
                <div slot="footer">
                    <el-button @click="resetForm('form')">重置</el-button>
                    <el-button @click="innerVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm('form')">确认</el-button>
                </div>
            </el-dialog>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            innerVisible: false,
            activeName: 'min',
            radio: 2,
            num1: 1,
            num2: 1,
            form: {
                name: '',
                groupName: '',
                method: '',
                cron_expression: ''
            },
            innerForm1: {

            },
            innerForm2: {

            },
            innerForm3: {

            }
        }
    },
    methods: {
        handleNodeClick() {

        },
        cronExpression() {
            this.$refs.cron_expression.dialogVisible = true;
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //
                }
            })
        }
    }

}
</script>
<style lang="less" scoped>
/deep/.el-dialog {
    height: 500px !important;
}

.el-radio {
    margin-top: 20px;
}

.el-input-number {

    // width: 100px !important;
    // height: 30px !important;
    /deep/.el-input__inner {
        width: 180px !important;
        height: 40px !important;
    }
}

/deep/.el-tabs__content {
    height: 200px;
    padding: 0;
}

.el-form {
    .el-form-item {
        margin: 20px 0 0 40px;
        width: 400px;

        /deep/.el-form-item__label {
            padding: 0;
            font-size: 15px;
        }

        /deep/.el-input__inner {
            width: 300px;
            height: 30px;
        }

        .method {
            /deep/.el-input__inner {
                width: 281px !important;
            }
        }

        .cron_xepression {
            /deep/.el-input__inner {
                width: 285px !important;
            }
        }

    }
}



/deep/.el-dialog {
    height: 30vh;
}

/deep/.el-dialog__title {
    margin-right: 330px;
}

/deep/.el-dialog__headerbtn {
    font-size: 25px;
}

/deep/.el-dialog__body {
    padding: 0;
}

/deep/.el-divider--horizontal {
    display: block;
    height: 1px;
    width: 95%;
    margin: 0;
    margin-left: 2.5%;
}

/deep/.el-dialog__footer {
    margin-top: 60px;
    text-align: center;
}

.el-button {
    width: 100px;
    height: 30px;
    text-align: center;
    margin: 30px;
    padding: 5px;
}
</style>
