<template>
    <div class="p-4">
        <div class="backup-header">
            <div class="search-box">
                <div class="search-item">
                    <div class="search-name">数据库：</div>
                    <a-input v-model:value="searchValue" placeholder="输入关键字查询" allow-clear />
                </div>
                <div class="search-item">
                    <div class="search-name">备份时间：</div>
                    <a-range-picker style="width: 400px" v-model:value="searchDate" :disabled-date="disabledDate"
                        :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss" />
                </div>
                <div class="search-item">
                    <div class="search-name">恢复状态：</div>
                    <a-radio-group v-model:value="searchStatus" style="display: flex;">
                        <a-radio :value="0">未恢复</a-radio>
                        <a-radio :value="1">已恢复</a-radio>
                    </a-radio-group>
                </div>
            </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="backup-body">
            <BasicTable @register="registerTable">
                <template #action="{ record }">
                    <TableAction :actions="[
                        {
                            label: '恢复',
                            tooltip: '恢复',
                            onClick: handleRestore.bind(null, record),
                        }
                    ]" />
                </template>
            </BasicTable>
        </div>
        <DataRestoreModal @register="registerModal" @success="onSubmit"></DataRestoreModal>
    </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs, computed, onMounted } from 'vue';
// 导入表格组件，表格事件
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useModal } from '/@/components/Modal';
import { Button, message } from 'ant-design-vue';
import moment from 'moment'
import { getBackupsList } from '/@/api/sys/dataBackUp';
import DataRestoreModal from './DataRestoreModal.vue';

export default defineComponent({
    name: 'dataRestore',
    components: { BasicTable, TableAction, Button, DataRestoreModal },
    setup() {
        const [registerModal, { openModal }] = useModal();
        // 搜索数据
        const data = reactive({
            searchValue: "",//查询值
            searchDate: [],
            searchStatus: 0,
        });
        // 禁选时间
        const disabledDate = (current) => {
            return current && current > moment().endOf('day');
        };
        //获取所有备份数据
        const getDataBackUp = () => {
            return new Promise((resolve, reject) => {
                let params = {
                    keyStr: data.searchValue,
                    sfhf: data.searchStatus,
                    satrttime: data.searchDate.length ? moment(data.searchDate[0]).format('YYYY-MM-DD HH:mm:ss') : null,
                    endtime: data.searchDate.length ? moment(data.searchDate[1]).format('YYYY-MM-DD HH:mm:ss') : null
                }
                getBackupsList(params).then((res) => {
                    if (res.resp_code === 0 && res.datas) {
                        resolve(res.datas.pageData)
                    }
                    else {
                        resolve([])
                        message.error(res.resp_msg)
                    }
                })
            })
        }
        //表格列
        const columns = [
            {
                title: '数据库IP',
                align: 'center',
                dataIndex: 'dbIp',
                key: 'dbIp',
            },
            {
                title: '数据库名称',
                align: 'center',
                dataIndex: 'dbName',
                key: 'dbName',
            },
            {
                title: '备份说明',
                align: 'center',
                dataIndex: 'bfsm',
                key: 'bfsm'
            },
            {
                title: '备份人',
                align: 'center',
                dataIndex: 'czr',
                key: 'czr'
            },
            {
                title: '备份时间',
                align: 'center',
                dataIndex: 'czsj',
                key: 'czsj'
            },
            {
                title: '恢复时间',
                align: 'center',
                dataIndex: 'hfsj',
                key: 'hfsj'
            },
            {
                title: '恢复人',
                align: 'center',
                dataIndex: 'hfr',
                key: 'hfr'
            },
            {
                title: '恢复说明',
                align: 'center',
                dataIndex: 'hfjgsm',
                key: 'hfjgsm'
            },
            {
                title: '恢复结果',
                align: 'center',
                dataIndex: 'hfjg',
                key: 'hfjg'
            },
        ];
        // 重置
        const resetTable = () => {
            data.searchValue = '';
            data.searchDate = [];
            data.searchStatus = 0;
            reload();
        }
        // 查询
        const searchTable = () => {
            reload();
        }
        // 备份数据恢复
        const handleRestore = (record) => {
            openModal(true, {
                bfFid: record.dbid
            })
        }
        // 弹窗确认
        const onSubmit = () => {
            reload();
        }
        const [registerTable, { reload }] = useTable({
            title: '数据备份列表', //'菜单列表'
            api: getDataBackUp, //加载数据，暂时没有接口用假数据
            columns: columns,
            useSearchForm: false,     //开启搜索区域
            bordered: false,
            showTableSetting: true,  // 显示表格设置
            showIndexColumn: true,
            pagination: {
                hideOnSinglePage: false
            },
            rowKey: (record) => record.fid,
            actionColumn: {
                width: 200,
                title: '操作',
                dataIndex: 'action',
                slots: { customRender: 'action' },
            },
            rowSelection: {
                type: 'checkbox',
            },
            tableSetting: {
                redo: true,
                size: true,
                setting: false,
                fullScreen: false
            },
        });
        return {
            disabledDate,
            columns,
            ...toRefs(data),
            // func
            registerTable,
            registerModal,
            resetTable,
            searchTable,
            handleRestore,
            onSubmit
        };
    },
});
</script>

<style lang="less" scoped>
.p-4 {
    height: 100%;

    .backup-header {
        // padding: 10px;
        padding: 0 20px;
        width: 100%;
        height: 70px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .search-box {
            display: flex;

            .search-item {
                display: flex;
                align-items: center;
                margin-left: 20px;

                &:first-child {
                    margin-left: 0;
                }

                .search-name {
                    margin-right: 10px;
                    // width: 100px;
                    white-space: nowrap
                }
            }
        }

        .handle-btns {
            // margin-right: 20px;
            display: flex;
            align-items: center;

            .label {
                width: 150px;
            }

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

    .backup-body {
        padding: 0 30px;
        margin-top: 20px;
        width: 100%;
        // height: 800px;
        height: calc(100% - 90px);
        background-color: #fff;

        .body-header {
            display: flex;
            height: 80px;
            width: 100%;
            justify-content: space-between;
            align-items: center;

            .item-title {
                height: 40px;
                line-height: 40px;
                font-size: 16px;
                user-select: none;
            }

            .table-btns {
                .btn {
                    margin-right: 10px;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }

        .body-content {
            padding-bottom: 20px;
            height: calc(100% - 80px);

            a {
                margin-right: 10px;
            }
        }
    }
}
</style>