<template>
  <div class="redis-ops">
    <el-form ref="form" label-width="80px" :model="form" :rules="rules" style="margin-right: 20px;">
      <el-form-item :label="$t('pages.toolsOther.form.mode')">
        <el-radio v-model="model" label="CLEAR_KEYS">{{ $t('pages.toolsOther.redisOps.clearKey') }}</el-radio>
      </el-form-item>
      <el-form-item v-if="model === 'CLEAR_KEYS'" label="Key" prop="userId">
        <el-input v-model="form.userId" :placeholder="$t('pages.toolsOther.placeholder.enterKey')" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="formLoading" :loading="formLoading" @click="submit">{{ $t('pages.toolsOther.action.confirm') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { clearRedisKey } from '@/api/tools'
export default {
  name: 'ToolsOther',
  data() {
    return {
      model: 'CLEAR_KEYS',
      form: {
        key: ''
      },
      formLoading: false,
      formResult: {}
    }
  },
  computed: {
    rules() {
      return {
        key: [{
          required: true,
          message: this.$t('pages.toolsOther.validation.requiredField'),
          trigger: 'blur'
        }]
      }
    }
  },
  mounted() {
  },
  methods: {
    submit() {
      const that = this
      that.$refs.form.validate((valid) => {
        if (!valid) {
          console.error('error submit!!')
          return false
        }

        that.formLoading = true
        if (that.model === 'CLEAR_KEYS') {
          clearRedisKey(that.form.key).then(res => {
            that.formLoading = false
            that.$opsMessage.success()
          }).catch(er => {
            that.formLoading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
