<template>
  <div class="system">
    <div class="system-config-form basicForm">
      <el-form :model="auditlog"  label-width="180px" size="small" ref="auditlogForm" :rules="auditlogRules" :validate-on-rule-change="false">
        <!--operation log-->
        <div class="system-title">{{$t('config.operationlog.operationlog')}}</div>
        <el-form-item :label="$t('config.system.monitor.metrics_storage_retention')" prop="operation_log_retention" style="padding-bottom: 15px;">
          <el-input v-model.number="auditlog.operation_log_retention">
            <template slot="append"><span >{{$t('config.system.basic.day')}}</span></template>
          </el-input>
          <div class="el-form-item__tip">{{$t('config.system.basic.passPeriodValue')}}</div>
        </el-form-item>
        <!--web terminal log-->
        <div class="system-title system-title-border">{{$t('config.terminallog.terminallog')}}</div>
        <el-form-item :label="$t('config.system.monitor.metrics_storage_retention')" prop="terminal_record_local_retention">
          <el-input v-model.number="auditlog.terminal_record_local_retention">
            <template slot="append"><span >{{$t('config.system.basic.day')}}</span></template>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('config.system.monitor.metrics_storage_type')" prop="terminal_storage_type">
          <el-select v-model="auditlog.terminal_storage_type" popper-class="right-box-select-top right-public-box-dropdown-top">
            <el-option :label="$t('config.system.monitor.local')" value="1"></el-option>
            <el-option :label="$t('config.system.monitor.s3')" value="2"></el-option>
          </el-select>
        </el-form-item>
        <transition name="el-zoom-in-top">
          <div v-show="auditlog.terminal_storage_type == 2">
            <el-form-item :label="$t('asset.endpoint')" prop="terminal_storage_s3_endpoint" :rules=" [ { required: auditlog.terminal_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
              <el-input v-model="auditlog.terminal_storage_s3_endpoint">
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('config.system.monitor.metrics_storage_s3_bucket')" prop="terminal_storage_s3_bucket" :rules=" [ { required: auditlog.terminal_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
              <el-input v-model="auditlog.terminal_storage_s3_bucket">
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('config.system.monitor.metrics_storage_s3_access_key')" prop="terminal_storage_s3_access_key" :rules=" [ { required: auditlog.terminal_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
              <el-input v-model="auditlog.terminal_storage_s3_access_key">
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('config.terminallog.key')" prop="terminal_storage_s3_secret_access_key" :rules=" [ { required: auditlog.terminal_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastElement">
              <el-input v-model="auditlog.terminal_storage_s3_secret_access_key" type="password" auto-complete="new-password" >
              </el-input>
            </el-form-item>
          </div>
        </transition>
        <el-form-item>
          <button id="system-monitor-save" v-has="'system_basic_edit'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal nz-btn-style-normal"  type="button" @click="saveSetInfo('auditlog','auditlogForm')">{{$t('overall.save')}}</button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import systemMixin from '../../common/mixin/system/systemMixin'
import routerPathParams from '../../common/mixin/routerPathParams'

export default {
  name: 'auditlog',
  mixins: [systemMixin, routerPathParams],
  components: {
  },
  data () {
    return {
      switchTab: 'auditlog',
      tag: '',
      auditlog: {
        operation_log_retention: '',
        terminal_record_local_retention: '',
        terminal_storage_type: '',
        terminal_storage_s3_endpoint: '',
        terminal_storage_s3_bucket: '',
        terminal_storage_s3_access_key: '',
        terminal_storage_s3_secret_access_key: ''
      },
      auditlogRules: {
        operation_log_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
        terminal_record_local_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
        terminal_storage_type: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
        metrics_storage_type: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
      }
    }
  },
  mounted () {
    this.querySetInfo(this.switchTab)
  },
  methods: {

  }
}
</script>
