<template>
    <BasicModal :maskClosable="false" :width="1430" @register="registerModal" v-bind="$attrs" title="定时备份任务" centered
        :showOkBtn="false" :showCancelBtn="false" wrapClassName="scheduled-task-modal" :footer="null">
        <div class="custom-content">
            <div class="right-header">
                <div class="search">
                    <span class="label">关键字：</span>
                    <a-input v-model:value="searchValue" placeholder="输入关键字查询" allow-clear />
                </div>
                <div class="handle-btns">
                    <a-button class="btn" @click="resetTable">重置</a-button>
                    <a-button class="btn" type="primary" @click="searchTable">查询</a-button>
                </div>
            </div>
            <div class="right-body">
                <BasicTable @register="registerTable">
                    <template #toolbar>
                        <Button type="primary" @click="handleAddTask">
                            新增任务
                        </Button>
                    </template>
                    <template #action="{ record }">
                        <TableAction :actions="[
                            {
                                label: '编辑',
                                tooltip: '编辑',
                                onClick: handleEditTask.bind(null, record),
                            },
                            {
                                label: '删除',
                                tooltip: '删除',
                                onClick: handleDelTask.bind(null, record),
                            }
                        ]" />
                    </template>
                </BasicTable>
            </div>
        </div>
    </BasicModal>
    <ScheduledTaskManageModal @register="registerManageModal"></ScheduledTaskManageModal>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch, computed } from 'vue';
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
// 导入表格组件，表格事件
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { Button, message } from 'ant-design-vue';
import { getScheduledTaskCL } from '/@/api/sys/dataBackUp';
import moment from 'moment';
import ScheduledTaskManageModal from './ScheduledTaskManageModal.vue';

export default defineComponent({
    name: 'scheduledTaskModal',
    components: { BasicModal, BasicTable, TableAction, Button, ScheduledTaskManageModal },
    setup(_, { emit }) {
        const searchValue = ref('')
        const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
            console.log(data)
            reload();
        });
        const [registerManageModal, { openModal: openManageModal }] = useModal();

        const getScheduledTaskData = () => {
            return new Promise((resolve, reject) => {
                let params = {
                    keyStr: searchValue.value
                }
                getScheduledTaskCL(params).then(res => {
                    if (res.resp_code === 0 && res.datas) {
                        let resData = res.datas.pageData;
                        resolve(resData)
                    }
                    else {
                        resolve([])
                        message.error(res.resp_msg)
                    }
                })
            })
        }
        //表格列
        const columns = [
            {
                title: '资源类型',
                align: 'center',
                dataIndex: 'type',
                key: 'type'
            },
            {
                title: '资源名称',
                align: 'center',
                dataIndex: 'SERVICENAME',
                key: 'SERVICENAME'
            },
            {
                title: '版本',
                align: 'center',
                dataIndex: 'VERSION_NAME',
                key: 'VERSION_NAME'
            },
            {
                title: '版本号',
                align: 'center',
                dataIndex: 'VERSION',
                key: 'VERSION'
            },
            {
                title: '操作时间',
                align: 'center',
                dataIndex: 'MODIFY_DATE',
                key: 'MODIFY_DATE'
            },
            {
                title: '操作人',
                align: 'center',
                dataIndex: 'USER_NAME',
                key: 'USER_NAME'
            }
        ];
        const [
            registerTable,
            { reload, collapseAll, getRowSelection, getSelectRowKeys, setSelectedRowKeys },
        ] = useTable({
            title: '定时备份任务列表',
            api: getScheduledTaskData,
            columns: columns,
            useSearchForm: false,
            bordered: false,
            showTableSetting: true,
            tableSetting: {
                redo: true,
                size: true,
                setting: false,
                fullScreen: false
            },
            showIndexColumn: true,
            pagination: {
                hideOnSinglePage: false
            },
            rowKey: (record) => record.fid,
            actionColumn: {
                width: 200,
                title: '操作',
                dataIndex: 'action',
                slots: { customRender: 'action' },
            }
        });
        //表格查询功能
        const searchTable = () => {
            reload()
        }
        //重置
        const resetTable = () => {
            searchValue.value = '';
            reload();
        }
        const handleAddTask = () => {
            openManageModal(true,{
                status:'add'
            });
        }
        const handleEditTask = () => {
            openManageModal(true,{
                status:'edit'
            });
        }
        const handleDelTask = () => {

        }
        return {
            searchValue,
            registerModal,
            registerManageModal,
            registerTable,
            resetTable,
            searchTable,
            handleAddTask,
            handleEditTask,
            handleDelTask
        };
    },
});
</script>
<style lang="less">
.scheduled-task-modal {

    .ant-modal-content {
        background-color: #eff0f5;

        .scroll-container .scrollbar__wrap {
            margin-bottom: 0 !important;
        }
    }
}
</style>
<style lang="less" scoped>
.custom-content {

    .right-header {
        margin-bottom: 10px;
        height: 74px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        background-color: #ffffff;
        border-radius: 6px;
        justify-content: space-between;

        .search {
            display: flex;
            align-items: center;

            .label {
                // width: 120px;
                margin-right: 10px;
                white-space: nowrap;
            }
        }

        .handle-btns {
            display: flex;
            align-items: center;

            .btn {
                margin-left: 10px;
            }
        }
    }

    .right-body {
        padding: 0 20px;
        height: calc(100% - 84px);
        background-color: #ffffff;
        border-radius: 6px;
    }
}
</style>