<template>
  <div>
    <add-page-layout>
      <div slot="Header-Content">
        <span>预警通报规则 {{ opType }}</span>
        <i class="el-icon-close close" @click="$router.go(-1)" />
      </div>
      <div slot="Form-Content">
        <div style="margin:15px">
          <el-row style="margin-top:20px">
            <el-form
              ref="form"
              :model="form.warningRule"
              label-width="140px"
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="规则名称:"
                    :rules="[ { required: true, message: '规则名称不能为空', trigger: 'change'}]"
                    prop="ruleName"
                  >
                    <el-input
                      v-model="form.warningRule.ruleName"
                      placeholder="请输入"
                      :disabled="disabled"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="数据源:" prop="dataSource">
                    <el-select v-model="form.warningRule.dataSource" :disabled="disabled">
                      <el-option v-for="item in statics.dataSource" :key="item.dataId" :label="item.dataName" :value="item.dataId" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="有效开始时间：" prop="startTime" label-width="145px">
                    <el-date-picker
                      v-model="form.warningRule.startTime"
                      :disabled="disabled"
                      class="reset-clear"
                      type="datetime"
                      :clearable="true"
                      placeholder="请选择开始时间"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      @change="timeDealStart"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="有效结束时间："
                    prop="endTime"
                    label-width="145px"
                  >
                    <el-date-picker
                      v-model="form.warningRule.endTime"
                      :disabled="disabled"
                      class="reset-clear"
                      type="datetime"
                      :clearable="true"
                      placeholder="请选择结束时间"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      @change="timeDealEnd"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="匹配规则：" prop="warningRuleDetailsList" :rules="[{ required: true, message: '请填写匹配规则' ,trigger: 'blur'}]">
                    <div v-for="(item,index) in keyWords" :key="index">
                      <el-row>
                        <el-col>
                          <el-row>
                            <el-col :span="4">
                              <el-form-item label="目标字段:" label-width="70px">
                                <el-select v-model="item.fieldId" :disabled="disabled">
                                  <el-option v-for="item in statics.fieldList" :key="item.fieldId" :label="item.fieldName" :value="item.fieldId" />
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="4">
                              <el-form-item label="运算类型:" label-width="70px">
                                <el-select v-model="item.operation" :disabled="disabled">
                                  <el-option v-for="item in statics.operation" :key="item.dataId" :label="item.dataName" :value="item.dataId" />
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="4">
                              <el-form-item label="运算值:" label-width="70px">
                                <el-input v-model="item.startValue" :disabled="disabled" />
                              </el-form-item>
                            </el-col>
                            <el-col v-if="item.operation=='12'" :span="4">
                              <el-form-item label="结束值:" label-width="70px">
                                <el-input v-model="item.endValue" :disabled="disabled" />
                              </el-form-item>
                            </el-col>
                            <el-col :span="3">
                              <icon v-if="keyWords.length>1" class="retrievalPointer" name="minus" @click.native="delInput(index)" />
                              <icon class="retrievalPointer" name="plus" @click.native="addInput()" />
                            </el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="规则描述:" prop="ruleDescription">
                    <el-input
                      v-model="form.warningRule.ruleDescription"
                      :disabled="disabled"
                      type="textarea"
                      :autosize="{ minRows: 2 }"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="输出方式:" prop="outputWay">
                    <el-select v-model="form.warningRule.outputWay" :disabled="disabled" @change="changeOutWay">
                      <el-option v-for="item in statics.outputWay" :key="item.dataId" :label="item.dataName" :value="item.dataId" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col v-if="false" :span="12">
                  <el-form-item label="输出目标:" prop="outputTarget">
                    <el-select v-model="form.warningRule.outputTarget" :disabled="disabled" @change="changeOutWay">
                      <el-option v-for="item in statics.outputTarget" :key="item.dataId" :label="item.dataName" :value="item.dataId" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="重复触发间隔(h)：" prop="timeInterval">
                    <el-input-number
                      v-model="form.warningRule.timeInterval"
                      :min="0"
                      :disabled="disabled"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="发送时间范围：" prop="dayScope">
                    <el-select
                      v-model="form.warningRule.sendDay"
                      multiple
                      style="width: 100%"
                      :disabled="disabled"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in statics.dayScope"
                        :key="item.value"
                        multiple
                        :label="item.label"
                        :value="item.value"
                        style="width: 100%"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="输出时间范围:" prop="timeRange">
                    <el-input
                      v-model="form.warningRule.timeRange"
                      placeholder="格式12:12:12-15:25:36周期24小时多段用,分割"
                      :disabled="disabled"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="输出规则：" prop="warningRuleOutputList" :rules="[{ required: true, message: '请填写输出' ,trigger: 'blur'}]">
                    <div v-for="(item,index) in outWords" :key="index">
                      <el-row>
                        <el-col>
                          <el-row>
                            <el-col :span="4">
                              <el-form-item label="目标字段:" label-width="70px">
                                <el-select v-model="item.destField" :disabled="disabled">
                                  <el-option v-for="item in statics.destField" :key="item.dataId" :label="item.dataName" :value="item.dataId" />
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="4">
                              <el-form-item label="输出类型:" label-width="70px">
                                <el-select v-model="item.destType" :disabled="disabled">
                                  <el-option v-for="item in statics.destType" :key="item.dataId" :label="item.dataName" :value="item.dataId" />
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col v-if="item.destType=='0'" :span="4">
                              <el-form-item label="源字段:" label-width="70px">
                                <el-select v-model="item.srcField" :disabled="disabled">
                                  <el-option v-for="item in statics.fieldList" :key="item.fieldId" :label="item.fieldName" :value="item.fieldId" />
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col v-if="item.destType=='1'" :span="4">
                              <el-form-item label="输出值:" label-width="70px" :disabled="disabled">
                                <el-input v-model="item.srcValue" :disabled="disabled" />
                              </el-form-item>
                            </el-col>
                            <el-col :span="3">
                              <icon v-if="outWords.length>1" class="retrievalPointer" name="minus" @click.native="delOutput(index)" />
                              <icon class="retrievalPointer" name="plus" @click.native="addOutput()" />
                            </el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col style="text-align: center">
                  <div style="margin: 0 auto 10px auto">
                    <el-button
                      v-show="opType == '新增'"
                      v-loading="buttonLoading"
                      type="primary"
                      icon="check"
                      @click="add"
                    ><icon name="check" />提交</el-button>
                    <el-button
                      v-show="opType == '编辑'"
                      v-loading="buttonLoading"
                      type="primary"
                      icon="check"
                      @click="upd"
                    ><icon name="check" />修改</el-button>
                    <el-button
                      type="reset"
                      @click="$router.go(-1)"
                    ><icon name="reply" />返回</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </el-row>
        </div>
        <!--逻辑规则-->
      </div>
    </add-page-layout>
  </div>
</template>

<script>
import { addWarningRule, getWarningRuleById, updateWarningRuleInfo, getFieldList } from './api/warning-rule'

export default {
  name: 'WraningRuleEdit',
  data() {
    return {
      opType: '新增',
      oper: '',
      buttonLoading: false,
      form: {
        warningRule: {
          ruleId: '', // 规则id
          ruleName: '', // 规则名称
          startTime: null, // 有效开始时间
          endTime: null, // 有效结束时间
          ruleDescription: '', // 规则描述
          timeInterval: '', // 发送时间间隔
          sendDay: [], // 发送日期
          timeRange: '', // 发送时间范围
          dataSource: null, // 数据源
          outputWay: '0', // 输出方式
          outputTarget: null, // 输出目标
          outputDescription: null, // 输出描述
          warningRuleDetailsList: [], // 预警规则
          warningRuleOutputList: []// 输出规则
        }
      },
      statics: {
        destField: [
          {
            dataId: '0',
            dataName: '发生时间'
          },
          {
            dataId: '1',
            dataName: '攻击源ip'
          },
          {
            dataId: '2',
            dataName: '攻击目标ip'
          },
          {
            dataId: '3',
            dataName: '攻击类型'
          },
          {
            dataId: '4',
            dataName: '攻击小类'
          },
          {
            dataId: '5',
            dataName: '风险等级'
          },
          {
            dataId: '6',
            dataName: '攻击次数'
          },
          {
            dataId: '7',
            dataName: '预警描述'
          }
        ],
        destType: [
          {
            dataId: '0',
            dataName: '字段'
          },
          {
            dataId: '1',
            dataName: '字符串'
          },
          {
            dataId: '2',
            dataName: '字符串通配符'
          }
        ],
        dayScope: [
          {
            label: '周一',
            value: 1
          },
          {
            label: '周二',
            value: 2
          },
          {
            label: '周三',
            value: 3
          },
          {
            label: '周四',
            value: 4
          },
          {
            label: '周五',
            value: 5
          },
          {
            label: '周六',
            value: 6
          },
          {
            label: '周日',
            value: 7
          }
        ],
        outputTarget: [
          {
            dataId: '1',
            dataName: '用户'
          },
          {
            dataId: '2',
            dataName: '角色'
          }
        ],
        outputWay: [
          {
            dataId: '0',
            dataName: '预警通报'
          },
          {
            dataId: '1',
            dataName: '告警'
          },
          {
            dataId: '2',
            dataName: '工单'
          },
          {
            dataId: '3',
            dataName: '短信'
          },
          {
            dataId: '4',
            dataName: '邮件'
          }
        ],
        fieldList: [],
        dataSource: [
          {
            dataId: '19',
            dataName: '攻击监测日志'
          }, {
            dataId: '10',
            dataName: 'TCP|UDP审计日志'
          }, {
            dataId: '11',
            dataName: 'HTTP审计日志'
          }, {
            dataId: '12',
            dataName: '邮件审计日志'
          }, {
            dataId: '13',
            dataName: '文件审计日志'
          }, {
            dataId: '14',
            dataName: 'SSL审计日志'
          }, {
            dataId: '15',
            dataName: 'FTP审计日志'
          }, {
            dataId: '16',
            dataName: 'DNS审计日志'
          }, {
            dataId: '17',
            dataName: 'NFS审计日志'
          }, {
            dataId: '18',
            dataName: 'SMB审计日志'
          }
        ],
        operation: [
          {
            dataId: '1',
            dataName: '等于'
          },
          {
            dataId: '2',
            dataName: '不等于'
          },
          {
            dataId: '3',
            dataName: '大于'
          },
          {
            dataId: '4',
            dataName: '小于'
          },
          {
            dataId: '5',
            dataName: '大于等于'
          },
          {
            dataId: '6',
            dataName: '小于等于'
          },
          {
            dataId: '7',
            dataName: '包含'
          },
          {
            dataId: '8',
            dataName: '不包含'
          },
          {
            dataId: '12',
            dataName: '范围'
          }
        ]
      },
      disabled: false,
      keyWords: [{
        id: '',
        ruleId: '',
        fieldId: '',
        operation: '',
        startValue: '',
        endValue: ''
      }],
      outWords: [{
        id: '',
        ruleId: '',
        destField: '',
        destType: '',
        srcField: '',
        srcValue: ''
      }]
    }
  },
  computed: {},
  watch: {
    'form.warningRule.dataSource': function(newValue, oldValue) {
      if (oldValue != null) {
        this.form.warningRule.warningRuleDetailsList = []
        this.keyWords = [{
          id: '',
          ruleId: '',
          fieldId: '',
          operation: '',
          startValue: '',
          endValue: ''
        }]
      }

      getFieldList(newValue).then(
        resp => {
          if (resp.data.returnCode == '0') {
            this.statics.fieldList = resp.data.data
          }
        },
        error => {
          this.$message.error(error.message)
        }
      )
    }
  },
  created: function() {
    console.log(this.$route)
    this.oper = this.$route.params.oper
    const id = this.$route.params.id
    if (this.oper == 'detail') {
      this.disabled = true
      this.opType = '查看'
    } else if (this.oper == 'add') {
      this.disabled = false
      this.opType = '新增'
    } else if (this.oper == 'modify') {
      this.disabled = false
      this.opType = '编辑'
    }
    if (this.oper != 'add') {
      this.backRuleById(this.$route.params.id)
    } else {
      this.form.warningRule.ruleId = id
    }
  },
  mounted() {
  },
  methods: {
    changeDataSource() {
      this.form.warningRule.warningRuleDetailsList = []
      this.keyWords = [{
        id: '',
        ruleId: '',
        fieldId: '',
        operation: '',
        startValue: '',
        endValue: ''
      }]

      getFieldList(this.form.warningRule.dataSource).then(
        resp => {
          if (resp.data.returnCode == '0') {
            this.statics.fieldList = resp.data.data
          }
        },
        error => {
          this.$message.error(error.message)
        }
      )
    },
    changeOutWay() {
      this.form.warningRule.warningRuleOutputList = []
      this.outWords = [{
        id: '',
        ruleId: '',
        destField: '',
        destType: '',
        srcField: '',
        srcValue: ''
      }]
    },
    delInput(index) {
      this.keyWords.splice(index, 1)
    },
    addInput() {
      var temp = {
        id: '',
        ruleId: '',
        fieldId: '',
        operation: '',
        startValue: '',
        endValue: ''
      }
      this.keyWords.push(temp)
    },
    delOutput(index) {
      this.outWords.splice(index, 1)
    },
    addOutput() {
      var temp = {
        id: '',
        ruleId: '',
        destField: '',
        destType: '',
        srcField: '',
        srcValue: ''
      }
      this.outWords.push(temp)
    },
    // 添加
    add: function() {
      if (this.keyWords[0].fieldId != '' && this.keyWords[0].operation != '' && this.keyWords[0].startValue != '') {
        this.form.warningRule.warningRuleDetailsList = this.keyWords
      }
      if (this.outWords[0].destField != '' && this.outWords[0].destType != '') {
        this.form.warningRule.warningRuleOutputList = this.outWords
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          this.buttonLoading = true
          this.form.warningRule.ruleId = null
          addWarningRule(this.form).then(
            resp => {
              if (resp.data.returnCode == '0') {
                this.$router.push({ name: 'warningRule' })
                this.$message.success('新增成功!')
              }
              this.buttonLoading = false
            },
            error => {
              this.buttonLoading = false
              this.$message.error(error.message)
            }
          )
        } else {
          return false
        }
      })
    },
    // 修改
    upd: function() {
      if (this.keyWords[0].fieldId !== '') {
        this.form.warningRule.warningRuleDetailsList = this.keyWords
      }
      if (this.outWords[0].destField !== '') {
        this.form.warningRule.warningRuleOutputList = this.outWords
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          this.buttonLoading = true
          updateWarningRuleInfo(this.form).then(
            resp => {
              // console.log(resp)
              if (resp.data.returnCode == '0') {
                this.$router.push({ name: 'warningRule' })
                this.$message.success('修改成功!')
              }
              this.buttonLoading = false
            },
            error => {
              this.buttonLoading = false
              this.$message.error(error.message)
            }
          )
        } else {
          return false
        }
      })
    },
    backRuleById: function(param) {
      console.log(param)
      getWarningRuleById(param).then(
        resp => {
          if (resp.data.returnCode == '0') {
            var list = resp.data.data
            this.form.warningRule = Object.assign(this.form.warningRule, list)
            console.log(list.sendDayList)
            this.form.warningRule.sendDay = list.sendDayList
            this.keyWords = this.form.warningRule.warningRuleDetailsList
            this.outWords = this.form.warningRule.warningRuleOutputList
          }
        },
        error => {
          this.$message.error(error.message)
        }
      )
    },
    // 开始时间
    timeDealStart: function(value) {
      if (
        this.form.warningRule.startTime >
          this.form.warningRule.endTime
      ) {
        this.$message.error('开始时间不能大于结束时间')
        this.form.warningRule.startTime = null
        return false
      }
    },
    // 时间结束
    timeDealEnd: function(value) {
      if (
        this.form.warningRule.startTime >
          this.form.warningRule.endTime
      ) {
        this.$message.error('开始时间不能大于结束时间')
        this.form.warningRule.endTime = null
        return false
      }
    }
  }
}
</script>
<style>
  .alarm-rule-matchType,
  .alarm-rule-operation,
  .alarm-rule-key,
  .alarm-rule-rangekey {
    width: 100px;
  }
  .alarm-rule-field {
    width: 100px;
    margin-left: 10px;
  }
  .alarm-rule-arrow {
    width: 30px;
  }
</style>
<style scoped>
  /* @import url(../../css/layoutStyle.css); */

  .sub-title {
    height: 20px;
    line-height: 30px;
    padding-left: 10px;
    color: #000;
  }
  .rule-rename {
    height: 30px;
    text-align: center;
    line-height: 30px;
  }
  .rowBorder .colBorder {
    line-height: 50px;
    border: 1px solid #cbced4;
  }

  .margin-top-20 {
    margin-top: 20px;
  }

  .logicClass {
    padding-left: 50px;
    width: 100%;
    line-height: 50px;
  }
  .edit_dev >>> .el-transfer-panel {
    width: 300px;
  }
</style>
