<template>
    <PageWrapper>
        <div class="cache-box">
            <el-card  header="缓存列表">
                <el-table empty-text="暂无数据" border :height="fwbHeight" :data="cacheNameData" row-key="cacheName"
                ref="cacheNameTable" highlight-current-row @row-click="onCheckedCacheName">
                    <el-table-column type="index" width="80" align="center" label="序号"></el-table-column>
                    <el-table-column show-overflow-tooltip align="center" label="缓存名称" prop="cacheName"
                        min-width="100"></el-table-column>
                    <el-table-column show-overflow-tooltip align="center" label="备注" prop="message"></el-table-column>
                    <el-table-column align="center" label="操作" width="60" fixed="right">
                        <template #default="{ row}">
                            <el-icon  :color="`var(--el-color-danger)`" size="16" @click.stop="handleDelete(row,'cacheName')" style="cursor: pointer;"><Delete /></el-icon>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card header="键名列表">
                <el-table empty-text="暂无数据" border :height="fwbHeight" :data="cacheKeyData"  row-key="cacheKey"
                ref="cacheKeyTable" highlight-current-row @row-click="onCheckedCachKey">
                    <el-table-column type="index" width="80" align="center" label="序号"></el-table-column>
                    <el-table-column show-overflow-tooltip align="center" label="缓存键名" prop="cacheKey" min-width="100"></el-table-column>
                    <el-table-column align="center" label="操作" width="60" fixed="right">
                        <template #default="{ row}">
                            <el-icon  :color="`var(--el-color-danger)`" size="16" @click.stop="handleDelete(row,'cacheKey')"  style="cursor: pointer;"><Delete /></el-icon>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card>
                <template #header>
                    <div class="clearfix">
                        <span>缓存内容</span>     
                        <el-button @click="clearAll" style="float: right; padding: 3px 0" type="text"><el-icon><RefreshRight/></el-icon>清理全部</el-button>
                    </div>
                </template>
                <el-form ref="form" :model="formData" label-width="80px" label-position="top" v-if="cacheKeyData.length > 0">
                    <el-form-item label="缓存名称：">
                        <el-input v-model="formData.cacheName"></el-input>
                    </el-form-item>
                    <el-form-item label="缓存键值：">
                        <el-input v-model="formData.cacheKey"></el-input>
                    </el-form-item>
                    <el-form-item label="缓存内容：">
                        <el-input v-model="formData.cacheValue" type="textarea"></el-input>
                    </el-form-item>
                </el-form>
                <div v-else>暂无数据</div>
            </el-card>
        </div>
    </PageWrapper>
</template>

<script lang="ts" setup>
import { ref, onMounted,nextTick,reactive } from 'vue';
import { getCacheNames, getCacheKeys, getCacheValue,deleteCacheName,deleteCacheKey,deleteCacheAll } from '@/api/monitor/caches';
import { message, confirm } from "@/utils/auth";

const cacheNameTable = ref()
const cacheKeyTable = ref()
const cacheNameData = ref([])
const cacheKeyData = ref([])
const formData = reactive({
    cacheKey:"",
    cacheName:"",
    cacheValue:"",
    message:''
})
const cacheName = ref('')
const cacheKey = ref('')
const fwbHeight = document.body.clientHeight -230

//选择缓存名
const onCheckedCacheName = (row) => {
    cacheName.value = row.cacheName
    loadCachekeys()
}
//选择缓存key
const onCheckedCachKey = (row) => {
    cacheKey.value = row.cacheKey
    loadCacheValue()
}

//加载缓存名列表
const loadCacheNames = async () => {
    const result = await getCacheNames();
    cacheNameData.value = result
    cacheName.value = result.length > 0 ? result[0].cacheName : ''
    if (cacheName.value) {
        nextTick(() => {
            cacheNameTable.value.setCurrentRow(result[0])
        })
        loadCachekeys()
    }
};
//加载缓存key列表
const loadCachekeys = async () => {
    let datas = []
    const result = await getCacheKeys(cacheName.value);
    result.map(item=>{
        datas.push({
            cacheKey:item.split(':')[1]
        })
    })
    cacheKeyData.value = datas
    cacheKey.value = datas.length > 0 ? datas[0].cacheKey : ''
    if (cacheKey.value) {
        nextTick(() => {
            cacheKeyTable.value.setCurrentRow(datas[0])
        })
        loadCacheValue()
    }
};
//加载缓存value列表
const loadCacheValue = async () => {
    const data = await getCacheValue({ cacheName: cacheName.value,cacheKey:cacheKey.value });
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
        formData[key] = data[key];
        }
    }
}
const handleDelete = async(row,type)=> {
  await confirm('确定要删除？');
  if(type=='cacheName') {
    await deleteCacheName(row.cacheName)
    message("删除成功");
    loadCacheNames()
  }else {
    await deleteCacheKey(row.cacheKey)
    message("删除成功");
    loadCachekeys()
  }
    
}
const clearAll = async()=> {
  await confirm('确定要清理全部？');
  await deleteCacheAll()
  loadCacheNames()
}
onMounted(() => {
    loadCacheNames()
})
</script>
<style lang="scss" scoped>
.cache-box {
    display: flex;

    >.el-card {
        flex: 1;
        &:nth-child(2) {
            margin:0 15px;
        }
    }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>