<template>
    <ap-container>
        <ap-aside margin="1111" width="400px">
            <ap-aside-tree :options.sync="treeOptions" class="type-tree">
                <div slot="tree" slot-scope="scope" style="width: 100%;padding-right: 5px;font-size: 14px">
                    <div v-if="scope.data.type == 1" class="flex-justify-between" style="width: 100%">
                        <span class="ap-color-blue">{{ scope.data.fdName}}</span>
                        <span class="ap-color-yellow">{{ scope.data.count}}</span>
                    </div>
                    <span v-else>
                        {{ scope.data.fdName }}
                    </span>
                </div>
            </ap-aside-tree>
        </ap-aside>
        <ap-split-panel></ap-split-panel>
        <ap-container>
            <ap-header margin="1110">
                <el-form ref="tSysTaskPlanSearchForm" :model="tSysTaskPlanSearchForm"
                         :rules="tSysTaskPlanSearchFormRules"
                         :inline="true" class="layout-header-form" @submit.native.prevent="searchEvent">
                    <el-form-item label="搜索:" class="layout-header-form-item" prop="likeStr">
                        <el-input v-model="tSysTaskPlanSearchForm.likeStr" placeholder="计划名/邮箱"
                                  style="width: 250px"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="searchEvent">查询</el-button>

                <el-date-picker v-model="testDate" format="yyyy-MM-dd HH:mm:ss" value-format="timestamp" type="datetimerange" style="margin-left: 10px"></el-date-picker>
                <el-button type="primary" @click="initSchedule" icon="el-icon-exchange" style="margin-left: 10px;">生成调度时间表</el-button>

            </ap-header>
            <ap-main margin="0110">
                <ap-table ref="tSysTaskPlanScheduleTableRef" :options.sync="tSysTaskPlanTable">
                    <template #planName="slotProps">
                        <span style="cursor: pointer;" class="ap-color-blue" :data-id="slotProps.rowData.fdPlanId"
                              @click="openDetail($event)" >
                            {{ slotProps.rowData.fdName }}
                        </span>
                    </template>
                </ap-table>
            </ap-main>
        </ap-container>
       </ap-container>
</template>

<script>
export default {
    name: 'SysTaskPlanSchedule',
    data() {
        let tSysTaskPlanCols = [
            {
                prop: 'fdTime',
                label: '时间',
                type: 'datePicker',
                datePickerFormat: 'yyyy-MM-dd HH:mm:ss',
                width: 130,
            },{
                prop: 'fdName',
                label: '名称',
                width: "250",
                type: 'slot',
                slot: "planName",
            }, {
                prop: 'fdCron',
                label: 'cron',
                width: "100",
                type: 'input',
                showOverflowTooltip: true,
            }, {
                prop: 'fdCode',
                label: '编码',
                width: "100",
                type: 'input',
                showOverflowTooltip: true,
            }
        ];
        let tSysTaskPlanTable = {
            title: "调度计划时间表",
            columns: tSysTaskPlanCols,
            dataUrl: "/apt/sys/TSysTaskPlanSchedule/getTSysTaskPlanScheduleGridList",
            toolbarBtn: [ "refresh"],
            initData: true,
            params: () => {
                return {
                    likeStr: this.tSysTaskPlanSearchForm.likeStr,
                    typeIds: this.treeSelectedValues
                }
            }
        };
        let startDate = new Date();
        startDate.setHours(0, 0, 0, 0);
        let endDate = new Date();
        endDate.setDate(endDate.getDate() + 1);
        endDate.setHours(0, 0, 0, 0);
        return {
            // ----- 左侧树 -----
            treeOptions: this.getTreeOption(),
            tSysTaskPlanTypeForm: {},
            tSysTaskPlanTypeRules: {},
            treeSelectedValues: "",
            selectedId: "",
            typeList: [],
            // ----- 右侧 -----
            tSysTaskPlanTable: tSysTaskPlanTable,
            tSysTaskPlanSearchForm: {
                likeStr: ""
            },
            tSysTaskPlanSearchFormRules: {
                likeStr: [{min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}]
            },
            selectedPlanId: "",
            testDate: [startDate.getTime(), endDate.getTime()]
        }
    },
    methods: {
        // 左侧树：配置
        getTreeOption() {
            let treeOptions = {
                title: "调度计划",
                showCheckbox: true,
                onCheck: (data, node, comp, halfCheckedKeys, checkedKeys) => {
                    this.selectedId = data.fdId;
                    this.treeSelectedValues = halfCheckedKeys.concat(checkedKeys).join(",");
                    if (this.treeSelectedValues == null || this.treeSelectedValues == "") {
                        return;
                    }
                    this.$refs.tSysTaskPlanScheduleTableRef.refresh();
                },
                loadOptions: {
                    url: "/apt/sys/TSysTaskPlan/getSysTaskPlanList",
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    success: (response) => {
                        this.typeList = response.data;
                    },
                },
            };

            return treeOptions;
        },
        // 右侧：查询事件
        searchEvent() {
            // 表单rules认证
            this.$refs.tSysTaskPlanSearchForm.validate((valid) => {
                if (!valid) {
                    this.$message.error('搜索条件格式不正确！');
                    return false;
                }
                this.$refs.tSysTaskPlanScheduleTableRef.refresh();
            });
        },
        initSchedule() {
            if (this.testDate == null || this.testDate.length < 2) {
                this.$message.error("请选择需要执行的日期");
                return;
            }
            this.$request({
                url: '/apt/sys/TSysTaskPlanSchedule/initSchedule',
                method: 'post',
                data: {
                    startDate: this.testDate[0],
                    endDate: this.testDate[1],
                }
            }).then(response => {
                this.$message.success("操作成功！");
                this.$refs.tSysTaskPlanScheduleTableRef.refresh();
            })
        },
        openDetail(e) {
            this.$router.push('/sys/taskPlan?id=' +  e.target.getAttribute('data-id'));
        }
    }
}
</script>

<style scoped>
.type-tree /deep/ .el-tree-node__content {
    height: 20px;
}
</style>
