<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form>
        <el-form-item>
          <el-input v-model="listQuery.key" placeholder="KEY" style="width: 150px" size="small" clearable @keyup.enter.native="handleFilter" />
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleFilter">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="list" size="small" fit highlight-current-row>
      <el-table-column type="index" align="center" label="序号" />
      <el-table-column :show-overflow-tooltip="true" label="KEY" prop="key" />
      <el-table-column label="VALUE" prop="value">
        <template slot-scope="scope">
          <div style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
            {{ scope.row.value }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130px" align="center">
        <template slot-scope="scope">
          <el-popover
            :ref="scope.$index"
            placement="top"
            width="180"
          >
            <p>确定删除本条数据吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[scope.$index].doClose()">
                取消
              </el-button>
              <el-button type="primary" size="mini" @click="subDelete(scope.$index, scope.row.key)">
                确定
              </el-button>
            </div>
            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="totalCount>0" :total="totalCount" :page-num.sync="listQuery.pageNum" :page-row.sync="listQuery.pageRow" @pagination="getList" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  name: 'Redis',
  components: { Pagination },
  data() {
    return {
      totalCount: 0,
      list: [],
      listQuery: {
        pageNum: 1,
        pageSize: 20
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.api({
        url: '/redis/list',
        method: 'get',
        params: this.listQuery
      }).then(data => {
        this.list = data.list
        this.totalCount = data.total
      })
    },
    handleFilter() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    subDelete(index, key) {
      this.api({
        url: '/redis/delByKey',
        method: 'post',
        data: { key }
      }).then(() => {
        this.$refs[index].doClose()
        this.getList()
        this.$notify({
          title: '删除成功',
          type: 'success',
          duration: 2500
        })
      })
    }
  }
}
</script>
