<template>
  <a-card>
    <div :class="$style.header">
      <a-button @click="clearCache">全部清除</a-button>
    </div>
    <a-table :data-source="cacheList" :columns="columns" :row-key="'name'" :pagination="false">
      <template slot="action" slot-scope="record">
        <a-button @click="clearCache(record)">清除</a-button>
      </template>
    </a-table>
  </a-card>
</template>

<script>
import { Modal, message } from 'ant-design-vue'
import ControlService from './control-service'
import components from './_import-components/sd-high-cache-manage-import'

export default {
  name: 'SdHighCacheManage',
  metaInfo: {
    title: '高速缓冲管理',
  },
  components,
  data() {
    const columns = [
      {
        title: '缓冲名字',
        dataIndex: 'name',
      },
      {
        title: '对象个数',
        dataIndex: 'size',
      },
      {
        name: 'operate',
        title: '操作',
        scopedSlots: { customRender: 'action' },
      },
    ]
    return {
      cacheList: [],
      columns,
    }
  },
  created() {
    this.getCacheList()
  },
  methods: {
    // 获取高速缓冲管理列表
    getCacheList() {
      const data = {
        contextPath: '',
      }
      ControlService.getCacheList(data).then((res) => {
        let cacheInfo = res.data
        cacheInfo = cacheInfo || {}
        const cacheList = []
        for (const key in cacheInfo) {
          cacheList.push({
            name: key,
            size: cacheInfo[key],
          })
        }
        this.cacheList = cacheList
      })
    },
    // 清除缓存
    clearCache(record) {
      const data = {
        name: record.name ? record.name : '',
      }
      Modal.confirm({
        title: '清除高速缓存',
        content: data.name
          ? `确认要清除缓冲${data.name}的所有数据？`
          : '清除所有缓存数据可能会导致: 在线用户直接退出或无法保存, 首次登陆时间过长等严重问题, 确认要清除所有的缓冲数据？',
        okText: '确定',
        okType: 'danger',
        onOk: () => {
          if (data.name) {
            ControlService.removeCache(data).then((res) => {
              if (res.data) {
                message.success('清除成功')
                this.getCacheList()
              } else {
                message.error('清除失败')
              }
            })
          } else {
            Modal.confirm({
              title: '清除高速缓存',
              content: '清除所有缓存数据可能会导致严重的无法预测的后果, 请再次确认!',
              okText: '确定',
              okType: 'danger',
              onOk: () => {
                ControlService.removeCache(data).then((res) => {
                  if (res.data) {
                    message.success('清除成功')
                    this.getCacheList()
                  } else {
                    message.error('清除失败')
                  }
                })
              },
            })
          }
        },
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  float: right;
  margin: 3px 0;
  :global(.ant-btn) {
    margin: 5px 0 5px 10px;
  }
}
</style>
