<!--
  @description: 模糊查询redis弹框
  @Modifier: haofengxian
  @routerPath:
  @date: 2020-8-17-10:16
-->
<template>
  <!--模糊查询redis弹框-->
  <el-dialog
    v-dialogDrag
    :visible.sync="likeRedisDialogVisible"
    :close-on-click-modal="false"
    title="模糊查询Redis"
    width="840px"
    custom-class="el-dialog__body-p8"
  >
    <div class="mb10">
      <el-input v-model.trim="key" style="width:200px;margin-right:16px" />
      <el-button type="primary" @click="selectLike">
        模糊查询
      </el-button>
    </div>
    <table cellpadding="0" cellspacing="1" class="redisTable">
      <tr v-for="(keyName,index) in likeSelectRedisTableData" :key="index" height="35px">
        <td width="50px" align="center">
          key
        </td>
        <td class="value">
          {{ keyName }}
        </td>
        <td width="90px" align="center">
          <el-link @click="delred(keyName)">
            清除Redis
          </el-link>
        </td>
      </tr>
    </table>
  </el-dialog>
</template>

<script>
import { likeSelectRedis, delRedisByKey } from '@/api/bidding/bid'
export default {
  name: 'RedisLikeSelect',
  data() {
    return {
      loading: true,
      likeSelectRedisTableData: [], // 模糊查询key列表
      likeRedisDialogVisible: false, // 模糊查询弹框是否打开
      key: '' // redis的key值
    }
  },
  methods: {
    // 父组件触发打开弹框
    openLikeRedisDialog() {
      this.likeRedisDialogVisible = true
      this.likeSelectRedisKeys()
    },
    // 查询
    selectLike() {
      this.likeSelectRedisKeys()
    },
    // 获取模糊查询列表
    likeSelectRedisKeys() {
      likeSelectRedis(this.key).then(response => {
        this.loading = false
        this.likeSelectRedisTableData = response.data
      }).catch(() => {
        this.loading = false
      })
    },
    delred(key) {
      this.$confirm('是否删除该条redis？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        delRedisByKey(key).then(res => {
        }).catch(() => {
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped lang="less">
  .redisTable{
    width: 100%;
    tr{
      td {
        border: 1px solid #dcdfe6;
        line-height: 20px;
        &.value{
          padding: 0 5px;
        }
      }
      td:nth-child(odd) {
        background-color: #f7f9fc;
      }
    }
  }
</style>
