<template>
    <div class="monitor-cache-list">
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card style="height: calc(100vh - 90px)">
                    <div slot="header">
                        <span>{{ $t('system.cache.list.093478-0') }}</span>
                        <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-refresh-right" @click="refreshCacheNames()"></el-button>
                    </div>
                    <el-table ref="cacheTable" v-loading="loading" :data="cacheNames" :border="false" :height="tableHeight" highlight-current-row @row-click="getCacheKeys" style="width: 100%">
                        <el-table-column :label="$t('system.cache.list.093478-1')" width="55" align="center" type="index"></el-table-column>
                        <el-table-column :label="$t('system.cache.list.093478-2')" align="left" prop="cacheName" :show-overflow-tooltip="true" :formatter="nameFormatter"></el-table-column>
                        <el-table-column :label="$t('remark')" align="left" prop="remark" :show-overflow-tooltip="true" />
                        <el-table-column :label="$t('opation')" width="65" align="center">
                            <template slot-scope="scope">
                                <el-button size="small" type="text" icon="el-icon-delete" @click.stop="handleClearCacheName(scope.row)" v-hasPermi="['monitor:cache:remove']">{{ $t('del') }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>

            <el-col :span="8">
                <el-card style="height: calc(100vh - 90px)">
                    <div slot="header">
                        <span>{{ $t('system.cache.list.093478-3') }}</span>
                        <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-refresh-right" @click="refreshCacheKeys()"></el-button>
                    </div>
                    <el-table ref="keyTable" v-loading="subLoading" :data="cacheKeys" :border="false" :height="tableHeight" highlight-current-row @row-click="handleCacheValue" style="width: 100%">
                        <el-table-column :label="$t('system.cache.list.093478-1')" width="60" align="center" type="index"></el-table-column>
                        <el-table-column :label="$t('system.cache.list.093478-4')" align="left" :show-overflow-tooltip="true" :formatter="keyFormatter"></el-table-column>
                        <el-table-column :label="$t('opation')" width="65" align="center">
                            <template slot-scope="scope">
                                <el-button size="small" type="text" icon="el-icon-delete" @click.stop="handleClearCacheKey(scope.row)" v-hasPermi="['monitor:cache:remove']">{{ $t('del') }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>

            <el-col :span="8">
                <el-card :bordered="false" style="height: calc(100vh - 90px)">
                    <div slot="header">
                        <span>{{ $t('system.cache.list.093478-5') }}</span>
                        <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-delete" @click="handleClearCacheAll()" v-hasPermi="['monitor:cache:remove']">
                            {{ $t('system.cache.list.093478-6') }}
                        </el-button>
                    </div>
                    <el-form :model="cacheForm">
                        <el-row :gutter="32">
                            <el-col :offset="1" :span="22">
                                <el-form-item :label="$t('system.cache.list.093478-7')" prop="cacheName">
                                    <el-input v-model="cacheForm.cacheName" :readOnly="true" />
                                </el-form-item>
                            </el-col>
                            <el-col :offset="1" :span="22">
                                <el-form-item :label="$t('system.cache.list.093478-8')" prop="cacheKey">
                                    <el-input v-model="cacheForm.cacheKey" :readOnly="true" />
                                </el-form-item>
                            </el-col>
                            <el-col :offset="1" :span="22">
                                <el-form-item :label="$t('system.cache.list.093478-9')" prop="cacheValue">
                                    <el-input v-model="cacheForm.cacheValue" type="textarea" :rows="8" :readOnly="true" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { listCacheName, listCacheKey, getCacheValue, clearCacheName, clearCacheKey, clearCacheAll } from '@/api/monitor/cache';

export default {
    name: 'CacheList',
    data() {
        return {
            cacheNames: [],
            cacheKeys: [],
            cacheForm: {},
            loading: true,
            subLoading: false,
            nowCacheName: '',
            tableHeight: window.innerHeight - 200,
        };
    },
    created() {
        this.getCacheNames();
    },
    methods: {
        /** 查询缓存名称列表 */
        getCacheNames() {
            this.loading = true;
            listCacheName().then((res) => {
                if (res.code === 200) {
                    this.cacheNames = res.data;
                    if (this.cacheNames && this.cacheNames.length > 0) {
                        this.$refs.cacheTable.setCurrentRow(this.cacheNames[0]);
                        this.getCacheKeys(this.cacheNames[0]);
                    }
                }
                this.loading = false;
            });
        },
        // 刷新缓存名称列表
        refreshCacheNames() {
            this.getCacheNames();
            this.$modal.msgSuccess(this.$t('system.cache.list.093478-10'));
        },
        // 清理指定名称缓存
        handleClearCacheName(row) {
            const cacheName = row.cacheName;
            this.$modal
                .confirm(this.$t('system.cache.list.093478-16', [cacheName.replace(/:/g, '')]))
                .then(function () {
                    return clearCacheName(cacheName);
                })
                .then((res) => {
                    if (res.code === 200) {
                        this.getCacheKeys();
                        this.$modal.msgSuccess(this.$t('system.cache.list.093478-12'));
                    } else {
                        this.$modal.msgError(this.$t('system.cache.list.093478-13'));
                    }
                })
                .catch(() => {});
        },
        /** 查询缓存键名列表 */
        getCacheKeys(row) {
            this.cacheKeys = []; // 清空数据
            this.cacheForm = {};
            const cacheName = row !== undefined ? row.cacheName : this.nowCacheName;
            if (cacheName === '') {
                return;
            }
            this.subLoading = true;
            listCacheKey(cacheName).then((res) => {
                if (res.code === 200) {
                    this.cacheKeys = res.data;
                    this.nowCacheName = cacheName;
                    if (this.cacheKeys && this.cacheKeys.length > 0) {
                        this.$refs.keyTable.setCurrentRow(this.cacheKeys[0]);
                        this.handleCacheValue(this.cacheKeys[0]);
                    }
                }
                this.subLoading = false;
            });
        },
        /** 刷新缓存键名列表 */
        refreshCacheKeys() {
            this.getCacheKeys();
            this.$modal.msgSuccess(this.$t('system.cache.list.093478-10'));
        },
        // 清理指定键名缓存
        handleClearCacheKey(cacheKey) {
            this.$modal
                .confirm(this.$t('system.cache.list.093478-16', [cacheKey]))
                .then(function () {
                    return clearCacheKey(cacheKey);
                })
                .then((res) => {
                    if (res.code === 200) {
                        this.getCacheKeys();
                        this.$modal.msgSuccess(this.$t('system.cache.list.093478-12'));
                    } else {
                        this.$modal.msgError(this.$t('system.cache.list.093478-13'));
                    }
                })
                .catch(() => {});
        },
        /** 列表前缀去除 */
        nameFormatter(row) {
            return row.cacheName.replace(':', '');
        },
        /** 键名前缀去除 */
        keyFormatter(cacheKey) {
            return cacheKey.replace(this.nowCacheName, '');
        },
        /** 查询缓存内容详细 */
        handleCacheValue(cacheKey) {
            getCacheValue(this.nowCacheName, cacheKey).then((response) => {
                this.cacheForm = response.data;
            });
        },
        // 清理全部缓存
        handleClearCacheAll() {
            this.$modal
                .confirm(this.$t('system.cache.list.093478-17'))
                .then(function () {
                    return clearCacheAll();
                })
                .then((res) => {
                    if (res.code === 200) {
                        this.$modal.msgSuccess(this.$t('system.cache.list.093478-14'));
                    } else {
                        this.$modal.msgError(this.$t('system.cache.list.093478-15'));
                    }
                })
                .catch(() => {});
        },
    },
};
</script>

<style lang="scss" scoped>
.monitor-cache-list {
    padding: 20px;

    ::v-deep .el-table::before {
        content: none;
    }
}
</style>
