<template>
  <div class="u-detail">
    <el-form ref="ruleForm" label-width="90px" label-suffix=":">
      <dg-row :gutter="20">
        <dg-col :span="12">
          <el-form-item label="方案名称">
            <div class="u-detail__text">{{ sizeForm.name }}</div>
          </el-form-item>
        </dg-col>
      </dg-row>
      <dg-row :gutter="20">
        <dg-col :span="12">
          <el-form-item label="方案状态">
            <div class="u-detail__text" v-translate="{ enum: 'ProgrammeStateEnum' }">{{ sizeForm.state }}</div>
          </el-form-item>
        </dg-col>
      </dg-row>
      <dg-row :gutter="20">
        <dg-col :span="12">
          <el-form-item label="创建时间">
            <div class="u-detail__text">
              {{ sizeForm.createTime | dateFormatter('YYYY-MM-DD HH:mm:ss') }}
            </div>
          </el-form-item>
        </dg-col>
      </dg-row>
      <dg-row :gutter="20">
        <dg-col :span="24">
          <el-form-item label="检测规则">
            <div v-if="sizeForm.type === 'JQBYTJBWZFX'">
              <p>鉴权时，必要条件不完整。</p>
              <div>
                鉴权类型：
                <dg-radio-group
                  v-model="form.authType"
                  enum="AuthenticationNecessaryParamEnum"
                  @change="setNecessaryParams"
                  call-off
                ></dg-radio-group>
              </div>
              <div class="form-inline">
                <label>必要参数：</label>
                <dg-checkbox-group
                  v-model="form.necessaryParams"
                  enum="AuthenticationNecessaryParamEnum"
                  disabled
                ></dg-checkbox-group>
              </div>
            </div>
            <div v-else>
              {{ ruleContent }}
            </div>
          </el-form-item>
        </dg-col>
      </dg-row>
      <dg-row :gutter="20">
        <dg-col :span="24">
          <el-form-item label="规则说明">
            <div class="u-detail__text">{{ sizeForm.ruleExplain }}</div>
          </el-form-item>
        </dg-col>
      </dg-row>
      <dg-row :gutter="20">
        <dg-col :span="24">
          <el-form-item label="风险内容">
            <div class="u-detail__text">{{ sizeForm.contentFormat }}</div>
          </el-form-item>
        </dg-col>
      </dg-row>
      <dg-row :gutter="20">
        <dg-col :span="24">
          <el-form-item label="处理意见">
            <div class="u-detail__text">{{ sizeForm.handleOpinion }}</div>
          </el-form-item>
        </dg-col>
      </dg-row>
      <div class="dg-layer-demo" v-footer>
        <dg-button @click="handleClose">关闭</dg-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'auth-risk-detail',
  props: {
    sizeForm: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      form: {
        necessaryParams: '',
        authType: ''
      },
      ruleContent: '',
      necessaryParams: []
    };
  },
  methods: {
    ruleText() {
      let str = '';
      const { type } = this.sizeForm;
      if (this.sizeForm.type === 'DSJPFJQFX') {
        str = '分钟内，鉴权次数超过';
      } else if (type === 'DSJPFHBMDMZFX') {
        str = '分钟内，命中红/白名单超过';
      } else if (type === 'YHCXYQFWFX') {
        str = '分钟内，持续越权访问超过';
      }
      return str;
    },
    init() {
      if (this.sizeForm.type === 'JQBYTJBWZFX') {
        this.necessaryParams = JSON.parse(this.sizeForm.ruleContent);
        if (Array.isArray(this.necessaryParams) && this.necessaryParams.length) {
          this.form.authType = this.necessaryParams[0].type;
          this.setNecessaryParams(this.form.authType);
        }
        return;
      }
      const { interval, frequency } = JSON.parse(this.sizeForm.ruleContent);
      const text = this.ruleText();
      this.ruleContent = interval + text + frequency + '次';
    },
    handleClose() {
      this.$emit('close');
    },
    setNecessaryParams(key) {
      const seleted = this.necessaryParams.find((item) => item.type === key);
      if (seleted) {
        this.form.necessaryParams = seleted.params
          .map((item) => {
            return item.name;
          })
          .join(',');
      }
    }
  },
  created() {
    this.init();
  }
};
</script>

<style lang="scss">
.u-detail {
  .el-form-item {
    margin-bottom: 10px;
  }
}
.form-inline {
  display: flex;
  label {
    min-width: 5.4em;
  }
}
</style>
