<template>
  <div>
    <el-card>
      <el-table :data="cacheList" border style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="name" label="描述" width="180">
        </el-table-column>
        <el-table-column prop="url" label="地址" width="500">
        </el-table-column>
        <el-table-column label="操作">
          <slot slot-scope="scope">
            <el-button type="primary" @click="clearCache(scope.row)">清除缓存</el-button>
          </slot>
        </el-table-column>
      </el-table>

      <!-- <div class="result">清除结果：{{ clearResult }}</div> -->
    </el-card>
  </div>
</template>

<script>
import { getClearCacheList, clearCache } from '@/api/effect'
export default {
  data() {
    return {
      getCacheListParam: {
        pageNum: 1,
        pageSize: 10
      },
      cacheList: [],
      clearCacheParams: {
        id: '',
        namespace: window.sessionStorage.getItem('env')
      },
      clearResult: ''
    }
  },
  created() {
    this.getCacheList()
  },
  methods: {
    getCacheList() {
      getClearCacheList(this.getCacheListParam).then((resp) => {
        this.cacheList = resp.data.data
      })
    },
    clearCache(row) {
      this.clearCacheParams.id = row.id
      clearCache(this.clearCacheParams).then((resp) => {
        this.clearResult = resp.data.data
        if (resp.data.data.code === '0000') {
          this.$message.success('缓存清除成功！')
        } else {
          this.$message.error('缓存清除失败！')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.result {
  margin-top: 20px;
}
</style>
