<template>
    <div class="box">
        <div class="toolBar">
            <div class="toolBar-top">
                <div
                    class="checkbox"
                    v-for="item in tableData"
                    :key="item.tableId"
                    @click="toolBar_xx(item)"
                    v-bind:class="{on: item.tableOpt}"
                ></div>
            </div>
            <div class="toolBar-bottom">
                <span
                    class="beifen"
                    v-privilege="'569580281221222400BACKUP'"
                    @click="backVisible = true"
                ></span>
                <span
                    class="huanyuan"
                    v-privilege="'569580281221222400REDUCTION'"
                    @click="backUpList"
                ></span>
            </div>
        </div>
        <el-dialog
            title="备份所有表数据"
            :visible.sync="backVisible"
            width="40%"
        >
            <p>是否备份当前所有表数据？</p>
            <el-input
                type="textarea"
                placeholder="详细信息，最多只允许输入20个字符。"
                maxlength="100"
                show-word-limit
                v-model="textMemo"
            ></el-input>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="backVisible = false"
                    :loading="buttonLoading"
                >取 消</el-button>
                <el-button
                    type="primary"
                    @click="backUpRoles"
                    :loading="buttonLoading"
                >确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="数据还原"
            :visible.sync="restoreVisible"
            width="40%"
            :close-on-click-modal="doNotClose"
            :show-close="doNotClose"
        >
            <div
                class="box-tab"
                v-show="!buttonLoading"
            >
                <span
                    v-bind:class="{on:dialogBoxShow}"
                    class="box-tab-but"
                    @click="dialogBoxShow = true"
                >默认</span>
                <span
                    v-bind:class="{on:!dialogBoxShow}"
                    class="box-tab-but"
                    @click="dialogBoxShow = false"
                >指定时间</span>
            </div>
            <div v-show="dialogBoxShow">
                <el-table stripe
                    ref="singleTable"
                    :data="restoreData"
                    highlight-current-row
                    @current-change="selsChange"
                >
                    <el-table-column
                        align="center"
                        label="备份时间"
                        prop="flashbackTime"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        label="备份人"
                        prop="updUserCode"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        label="备注"
                        prop="memo"
                    ></el-table-column>
                </el-table>
            </div>
            <div
                class="box-content"
                v-show="!dialogBoxShow"
            >
                <el-date-picker
                    v-model="dialogBoxDate"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期"
                    :disabled="buttonLoading"
                ></el-date-picker>
            </div>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    @click="recordAction()"
                    :loading="buttonLoading"
                >还原</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            tableData: [
                {
                    tableId: "SYS_USER,SYS_USER_ROLE",
                    // tableName:'用户',
                    tableOpt: true
                },
                {
                    tableId: "SYS_ROLE,SYS_AUTHORIZE",
                    // tableName:'角色',
                    tableOpt: true
                },
                {
                    tableId: "SYS_ORG",
                    // tableName:'机构',
                    tableOpt: true
                },
                {
                    tableId: "SYS_MENU",
                    // tableName:'菜单',
                    tableOpt: true
                }
            ],
            arrID: null,
            restoreData: [],
            backLoading: false,
            buttonLoading: false,
            backVisible: false,
            restoreVisible: false,
            doNotClose: true,
            activId: "",
            textMemo: "",
            dialogBoxShow: true,
            dialogBoxDate: ""
        };
    },
    mounted () {
        // this.getRecorList();
    },
    methods: {
        // 选中事件切换
        selsChange (val) {
            if (this.buttonLoading) {
                this.$refs.singleTable.setCurrentRow(this.arrID);
            } else {
                this.arrID = val;
            }
        },
        // 还原 备份 校验
        recordAction (type) {
            let that = this;
            // 获取选中的还原项目
            let txt = [];
            for (let i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].tableOpt) {
                    txt.push(this.tableData[i].tableId);
                }
            }
            let flashbackTime = "";
            // 还原选中备份记录
            if (that.dialogBoxShow) {
                if (this.arrID === null) {
                    this.$message.error("请选择一条备份记录");
                    return;
                } else {
                    flashbackTime = that.arrID.flashbackTime;
                }
            } else {
                if (that.dialogBoxDate === "") {
                    this.$message.error("请选择还原时间");
                    return;
                } else {
                    flashbackTime = that.dialogBoxDate;
                }
            }
            let nowDate = new Date();
            let selDate = new Date(flashbackTime);
            if (nowDate - selDate < 180000) {
                this.$message.error("只能选择3分钟之前的备份进行还原");
                return;
            }
            that.buttonLoading = true;
            that.doNotClose = false;
            let tabIds = "";
            for (let i = 0; i < txt.length; i++) {
                if (i === 0) {
                    tabIds = txt[i];
                } else {
                    tabIds = tabIds + "," + txt[i];
                }
            }
            let parmID = that.activId ? that.activId : tabIds;
            that.axios
                .post(
                    "pass/v1/sysbackups/restoreData/" +
                    flashbackTime +
                    "?tableName=" +
                    parmID
                )
                .then(res => {
                    if (res.code === "0") {
                        that.$message.success("还原成功");
                        that.restoreVisible = false;
                        that.getRecorList();
                    } else {
                        that.$message.error(res.message);
                    }
                    that.buttonLoading = false;
                    that.doNotClose = true;
                })
                .catch(res => {
                    that.buttonLoading = false;
                    that.doNotClose = true;
                });
        },
        // 获取备份记录列表
        getRecorList () {
            let that = this;
            this.arrID = null;
            that.axios
                .get("pass/v1/sysbackups/selectAll/")
                .then(res => {
                    if (res.code === "0") {
                        let arrData = [];
                        for (let i = 0; i < res.data.length; i++) {
                            arrData.push({
                                flashbackTime: res.data[i].flashbackTime,
                                updUserCode:
                                    res.data[i].updUserCode === null
                                        ? res.data[i].crtUserCode
                                        : res.data[i].updUserCode,
                                memo: res.data[i].memo
                            });
                        }
                        that.restoreData = arrData;
                    } else {
                        that.$message.error(res.message);
                    }
                })
                .catch(res => {
                    console.log(res);
                });
        },
        // 备份
        backUpRoles () {
            let that = this;
            that.buttonLoading = true;
            that.axios
                .post("pass/v1/sysbackups/backupData/?memo=" + that.textMemo)
                .then(res => {
                    if (res.code === "0") {
                        that.$message.success("备份成功");
                        that.getRecorList();
                        that.backVisible = false;
                        that.textMemo = "";
                    } else {
                        that.$message.error(res.message);
                    }
                    that.buttonLoading = false;
                })
                .catch(res => {
                    that.buttonLoading = false;
                });
        },
        backUpList (item) {
            let quantity = 0;
            for (let i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].tableOpt) {
                    quantity++;
                }
            }
            if (quantity === 0) {
                this.$message.error("至少选择一项要还原的项目");
                return;
            }
            this.activId = item ? item.tableId : "";
            this.getRecorList();
            this.restoreVisible = true;
            this.dialogBoxShow = true;
            this.dialogBoxDate = "";
        },
        toolBar_xx (obj) {
            obj.tableOpt = !obj.tableOpt;
        }
    }
};
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    .toolBar {
        text-align: center;
        width: 100%;
        height: 20px;
        margin-bottom: 20px;
        .el-checkbox-group {
            display: inline-block;
            margin-right: 10px;
        }
        .toolBar-top {
            margin-top: 100px;
            margin-bottom: 80px;
            .checkbox {
                display: inline-block;
                width: 120px;
                height: 60px;
                cursor: pointer;
                margin: 0 20px;
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
            .checkbox:nth-of-type(1) {
                background-image: url("../../../assets/img/backup/用户-未选中状态.png");
            }
            .checkbox:nth-of-type(2) {
                background-image: url("../../../assets/img/backup/角色-未选中状态.png");
            }
            .checkbox:nth-of-type(3) {
                background-image: url("../../../assets/img/backup/机构-未选中状态.png");
            }
            .checkbox:nth-of-type(4) {
                background-image: url("../../../assets/img/backup/菜单-未选中状态.png");
            }
            .on:nth-of-type(1) {
                background-image: url("../../../assets/img/backup/用户-选中状态.png");
            }
            .on:nth-of-type(2) {
                background-image: url("../../../assets/img/backup/角色-选中状态.png");
            }
            .on:nth-of-type(3) {
                background-image: url("../../../assets/img/backup/机构-选中状态.png");
            }
            .on:nth-of-type(4) {
                background-image: url("../../../assets/img/backup/菜单-选中状态.png");
            }
        }
        .toolBar-bottom {
            .beifen,
            .huanyuan {
                display: inline-block;
                width: 100px;
                height: 50px;
                cursor: pointer;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin: 0 30px;
            }
            .beifen {
                background-image: url("../../../assets/img/backup/备份.png");
            }
            .huanyuan {
                background-image: url("../../../assets/img/backup/还原.png");
            }
        }
    }
    .box-tab {
        position: absolute;
        top: 0;
        left: 0;
        margin: 20px;
        .box-tab-but {
            display: inline-block;
            line-height: 24px;
            margin-right: 20px;
            font-size: 12px;
            cursor: pointer;
        }
        .on {
            color: #70baf2;
        }
        .box-tab-but:hover {
            color: #70baf2;
        }
    }
    .box-content {
        text-align: center;
    }
}
</style>
