<template>
  <div>
    <add-page-layout>
      <div slot="Header-Content">
        <span>告警处置</span>
<!--        <i class="el-icon-close close" @click="$router.go(-1)" />-->
      </div>
      <div slot="Form-Content">
        <div class="process">
          <el-row class="process-top">
            <el-col :span="2" class="process-top-l">
              <p>处置流程：</p>
            </el-col>
            <el-col :span="22" class="process-top-r">
              <el-steps :space="200" :active="active" finish-status="success">
                <el-step v-for="item in steps" :key="item.nodeId" :title="item.nodeName" />
              </el-steps>
            </el-col>
          </el-row>

          <el-row class="step">
            <!-- 处理 -->
            <el-col v-if="active==1 " :span="16" :offset="2" class="step-main">
              <el-form ref="form" :model="form" label-width="120px">
                <el-row>
                  <el-form-item
                    v-show="!(this.active == this.steps.length)"
                  >
                    <el-radio-group v-model="form.dealStatus" @change="radioChangeHandle">
                      <el-radio
                        v-for="item in options"
                        :key="item.subNodeId"
                        :label="item.subNodeId"
                      >{{ item.subNodeName }}
                        <span v-if="item.subNodeId ==1 " style="color: #c6cccc;">
                          <el-popover placement="top-start" trigger="hover" popper-class="poptooltip" content="确认告警为误报并可创建告警过滤规则">
                            <i slot="reference" class="el-icon-question" style="color:orange;font-size:10px;cursor:pointer" />
                          </el-popover>
                        </span>
                        <span v-if="item.subNodeId ==2 " style="color: #c6cccc;">
                          <el-popover placement="top-start" trigger="hover" popper-class="poptooltip" content="直接清除告警，仅针对本次告警生效">
                            <i slot="reference" class="el-icon-question" style="color:orange;font-size:10px;cursor:pointer" />
                          </el-popover>
                        </span>
                        <span v-if="item.subNodeId ==3 " style="color: #c6cccc;">
                          <el-popover placement="top-start" trigger="hover" popper-class="poptooltip" content="确认已处理告警">
                            <i slot="reference" class="el-icon-question" style="color:orange;font-size:10px;cursor:pointer" />
                          </el-popover>
                        </span>
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-row>
                <div>
                  <el-form-item label="整改建议：">
                    <el-input v-model="rectification" type="textarea" disabled :autosize="{minRows:1}" />
                  </el-form-item>
                  <el-form-item v-if="this.show=='ins'">
                    <el-button
                      type="reset"
                      icon="circle-close"
                      @click="addFilterForm"
                    >新增告警过滤规则
                    </el-button>
                  </el-form-item>
                  <el-form-item
                    label="处理说明："
                    prop="resolvent"
                    :rules="[{ required: true, message: '填写解决办法',trigger: 'blur' }]"
                  >
                    <el-input v-model="form.resolvent" type="textarea" placeholder="请简略描述选择上述处理方式的原因或者处理过程" />
                  </el-form-item>
                </div>
                <el-form-item v-if="!(this.active == this.steps.length)" class="double_btn">
                  <el-button
                    type="reset"
                    icon="circle-close"
                    @click="resetForm"
                  >重置
                  </el-button>
                  <template>
                    <el-button type="primary" @click="updateDealStatus">提交</el-button>
                  </template>
                </el-form-item>
              </el-form>
            </el-col>
            <!-- 审核 -->
            <el-col v-if="active==2" :span="16" :offset="2" class="step-main">
              <el-form ref="form" :model="form" label-width="120px">
                <el-form-item
                  v-show="!(this.active == this.steps.length)"
                >
                  <el-radio-group v-model="form.dealStatus">
                    <el-radio
                      v-for="item in checkoptions"
                      :key="item.subNodeId"
                      :label="item.subNodeId"
                    >{{ item.subNodeName }}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <div>
                  <el-form-item label="整改建议：">
                    <el-input v-model="rectification" type="textarea" disabled :autosize="{minRows:1}" />
                  </el-form-item>
                  <el-form-item label="处理人：">
                    <el-input v-model="this.userName" disabled />
                  </el-form-item>
                  <el-form-item label="处理状态：">
                    <el-input v-model="this.nextStatusStr" disabled />
                    <el-button
                      v-if="filterFlag"
                      type="reset"
                      icon="circle-close"
                      @click="openFilterForm"
                    >告警过滤规则
                    </el-button>
                  </el-form-item>
                  <el-form-item label="处理说明：" prop="resolvent">
                    <el-input v-model="form.resolvent" type="textarea" :readonly="true" disabled />
                  </el-form-item>
                  <el-form-item label="审核意见：" prop="remark" :rules="[{ required: true, message: '填写审核意见',trigger: 'blur' }]">
                    <el-input v-model="form.remark" type="textarea" />
                  </el-form-item>
                </div>
                <el-form-item v-if="!(this.active == this.steps.length)" class="double_btn">
                  <template>
                    <el-button type="primary" @click="updateDealStatus">提交</el-button>
                  </template>
                </el-form-item>
              </el-form>
            </el-col>
            <!-- 完成 -->
            <el-col v-if="active==4 && iotTag" :span="16" :offset="2" class="step-main">
              <el-form ref="form" :model="form" label-width="120px">
                <el-form-item
                  v-show="!(this.active == this.steps.length)"
                >
                  <el-radio-group v-model="form.dealStatus">
                    <el-radio
                      v-for="item in checkoptions"
                      :key="item.subNodeId"
                      :label="item.subNodeId"
                    >{{ item.subNodeName }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <div>
                  <el-form-item label="处理说明：" prop="resolvent">
                    <el-input v-model="form.resolvent" type="textarea" :readonly="true" disabled />
                  </el-form-item>
                  <el-form-item label="审核意见：" prop="remark">
                    <el-input v-model="form.remark" type="textarea" :readonly="true" disabled />
                  </el-form-item>
                </div>
                <el-form-item v-if="!(this.active == this.steps.length)" class="double_btn" />
              </el-form>
            </el-col>

          </el-row>
        </div>
      </div>
    </add-page-layout>
    <manager-dialog
      :visible.sync="addFilterFormVisible"
      title="误报"
      width="80%"
      :styles="{top: '20px'}"
      :modal="false"
    >
      <el-form
        ref="filterForm"
        :model="filterForm.correlationFilterRuleDTO"
        label-width="120px"
      >
        <el-row style="color:red;margin:10px 10px">注：地址支持格式:①单个ip②192.168.0.1-192.168.0.100③192.168.9.1/24多个IP用英文,分割④多个端口用英文,分割</el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item
              label="规则名称:"
              :rules="[{ required: true, message: '规则名称不能为空', trigger: 'blur' }]"
              prop="ruleName"
            >
              <el-input
                v-model="filterForm.correlationFilterRuleDTO.ruleName"
                :disabled="filterFlag"
                placeholder="请输入..."
              />
            </el-form-item>
            <el-form-item
              label="告警等级:"
              :rules="[{ required: true, message: '告警等级不能为空', trigger: 'blur' }]"
              prop="alertLevel"
            >
              <el-select
                v-model="filterForm.correlationFilterRuleDTO.alertLevel"
                :disabled="filterFlag"
                @change="alertLevelChange"
              >
                <el-option
                  v-for="item in statics.alertLevel"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="开始时间:"
              prop="startTime"
            >
              <el-date-picker
                v-model="filterForm.correlationFilterRuleDTO.startTime"
                :disabled="filterFlag"
                type="datetime"
                placeholder="选择时间"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item
              label="结束时间:"
              prop="endTime"
            >
              <el-date-picker
                v-model="filterForm.correlationFilterRuleDTO.endTime"
                :disabled="filterFlag"
                type="datetime"
                placeholder="选择时间"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item
              label="源端口:"
              prop="srcPort"
            >
              <el-input
                v-model="filterForm.correlationFilterRuleDTO.srcPort"
                :disabled="filterFlag"
                placeholder="请输入..."
              />
            </el-form-item>
            <el-form-item
              label="源地址:"
              prop="srcIp"
            >
              <el-input
                v-model="filterForm.correlationFilterRuleDTO.srcIp"
                :disabled="filterFlag"
                placeholder="请输入..."
              />
            </el-form-item>
            <el-form-item
              label="目的端口:"
              prop="destPort"
            >
              <el-input
                v-model="filterForm.correlationFilterRuleDTO.destPort"
                :disabled="filterFlag"
                placeholder="请输入..."
              />
            </el-form-item>
            <el-form-item
              label="目的地址:"
              prop="dIp"
            >
              <el-input
                v-model="filterForm.correlationFilterRuleDTO.dIp"
                :disabled="filterFlag"
                placeholder="请输入..."
              />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-row>
              <el-col>
                <el-form-item label="告警名称：" prop="alertName" label-width="145px">
                  <el-input v-model="filterForm.correlationFilterRuleDTO.alertName" :disabled="filterFlag" type="textarea" :autosize="{minRows:1}" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="URL：" prop="url" label-width="145px">
                  <el-input v-model="filterForm.correlationFilterRuleDTO.url" :disabled="filterFlag" type="textarea" :autosize="{minRows:1}" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="文件名称：" prop="fileName" label-width="145px">
                  <el-input v-model="filterForm.correlationFilterRuleDTO.fileName" :disabled="filterFlag" type="textarea" :autosize="{minRows:1}" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="文件路径：" prop="filePath" label-width="145px">
                  <el-input v-model="filterForm.correlationFilterRuleDTO.filePath" :disabled="filterFlag" type="textarea" :autosize="{minRows:1}" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="应用名称：" prop="appName" label-width="145px">
                  <el-input v-model="filterForm.correlationFilterRuleDTO.appName" :disabled="filterFlag" type="textarea" :autosize="{minRows:1}" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="用户名称：" prop="userName" label-width="145px">
                  <el-input v-model="filterForm.correlationFilterRuleDTO.userName" :disabled="filterFlag" type="textarea" :autosize="{minRows:1}" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="时间范围：" prop="cycleTime" label-width="145px">
                  <el-input v-model="filterForm.correlationFilterRuleDTO.cycleTime" :disabled="filterFlag" placeholder="格式12:12:12-15:25:36周期24小时多段用,分割" type="textarea" :autosize="{minRows:1}" @change="cleartStart" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col
            :span="13"
            :offset="1"
          >
            <el-transfer
              v-model="filterForm.correlationFilterRuleDTO.ruleIds"
              :data="ruleDataList"
              :disabled="filterFlag"
              :titles="['待选告警规则', '已选告警规则']"
              filterable
              @change="transferChange"
            />
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="addFilterFormVisible=false">关闭</el-button>
        <el-button
          v-if="!filterFlag"
          type="primary"
          @click="addFilterRule"
        >确认</el-button>
      </div>
    </manager-dialog>
  </div>

</template>

<script>
import './bugHandleDetail.styl'
import { alarmDealNew, getAlarmStatusHisLast, getAlarmResultInfo, validCorrelationFilterRule, queryAllBigdataAssociationRules } from '../api/alarm-result'

export default {
  name: 'ProxyAlarmBatch',
  data() {
    return {
      alertId: '',
      rectification: '', // 整改建议
      userName: '', // 处理人
      nextStatusStr: '', // 处理状态
      steps: [
        { nodeId: 1, nodeName: '发现', flowId: 1, orderNum: 1 },
        { nodeId: 2, nodeName: '处理', flowId: 1, orderNum: 2 },
        { nodeId: 3, nodeName: '审核', flowId: 1, orderNum: 3 },
        { nodeId: 4, nodeName: '完成', flowId: 1, orderNum: 4 }
      ],
      options: [{ subNodeId: 1, subNodeName: '误报', nodeId: 2, subNodeCode: 'ins' },
        { subNodeId: 2, subNodeName: '清除', nodeId: 2, subNodeCode: 'del' },
        { subNodeId: 3, subNodeName: '处理', nodeId: 2, subNodeCode: 'deal' }
      ],
      checkoptions: [{ subNodeId: 1, subNodeName: '通过', nodeId: 3 },
        { subNodeId: 2, subNodeName: '不通过', nodeId: 3 }

      ],
      active: 1, // 当前所处-处置流程步骤
      show: '', // 显示对应的节点内容
      actionDo: '', // 当前节点请求地址
      rules: {},
      params: {},
      form: {
        ids: [],
        dealStatus: '', // 选择对应的选项
        resolvent: '', // 解决办法
        remark: '', // 审核意见
        processStatus: '', // 对应流程节点
        validFlag: false, // 是否新增过滤规则
        correlationFilterRuleDTO: {// 告警过滤规则详情
        }
      },
      addFilterFormVisible: false,
      ruleDataList: [],
      added: false,
      validFlag: false,
      filterFlag: false,
      // 新增过滤form
      filterForm: {
        correlationFilterRuleDTO: {
          ruleName: '', // 规则名称
          alertLevel: null, // 告警等级
          startTime: null, // 开始时间
          endTime: null, // 结束时间
          dIp: null,
          srcIp: null,
          ruleIds: [],
          destPort: null,
          srcPort: null,
          alertName: null,
          url: null,
          fileName: null,
          filePath: null,
          appName: null,
          userName: null,
          cycleTime: null
        }
      },
      // 告警规则
      ruleForm: {
        alarmRuleCorrelationMap: {
          ruleName: '',
          ruleIds: [],
          filterId: null // 新增、修改、查看
        }
      },
      statics: {
        listStyle: {
          width: '200px',
          height: '455px'
        },
        alertLevel: [
          {
            value: '1',
            label: '轻微'
          },
          {
            value: '2',
            label: '低级'
          },
          {
            value: '3',
            label: '中级'
          },
          {
            value: '4',
            label: '高级'
          },
          {
            value: '5',
            label: '严重'
          }
        ]
      }
    }
  },
  computed: {},
  activated() {
  },
  created: function() {
    this.alarmHandleTemplate()
  },
  methods: {
    radioChangeHandle: function(label) {
      var options = this.options
      options.map(item => {
        if (item.subNodeId == label) {
          this.show = item.subNodeCode
        }
      })
      this.form.dealStatus = label
      this.resetForm()
    },
    resetForm: function() {
      this.$refs['form'].resetFields()
      this.added = false
      this.validFlag = false
    },
    updateDealStatus() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.ids.push(this.alertId)
          this.form.validFlag = this.validFlag
          if (this.validFlag) {
            this.form.correlationFilterRuleDTO = JSON.parse(JSON.stringify(this.filterForm.correlationFilterRuleDTO))
          }
          alarmDealNew(this.form)
            .then(resp => {
              if (resp.data.returnCode == '0') {
                this.$message.success('处理成功')
                this.$router.push('/asp/alarmResults')
              } else {
                this.$message.error(resp.data.returnMsg)
              }
            })
            .catch(error => {
              if (error.response) {
                this.$message.error(error.response.data.detail)
              }
            })
        } else {
          return false
        }
      })
    },
    alarmHandleTemplate() {
      this.form.remark = ''
      this.form.resolvent = ''
      var statusTag = this.$route.query.statusTag
      this.alertId = this.$route.query.alertId
      this.rectification = this.$route.query.rectification
      // 查询最新告警状态信息
      getAlarmStatusHisLast(this.alertId)
        .then(resp => {
          if (resp.data.returnCode == '0') {
            this.params = resp.data.data
            if (statusTag == 6) {
              this.form.resolvent = this.params.remark
            }
            console.log(this.params.nextStatusTag)
            if (this.params.nextStatusTag == '5') {
              this.show = 'ins'
              this.nextStatusStr = '误报'
              if (this.params.filterJson != null) {
                this.filterFlag = true
                this.filterForm.correlationFilterRuleDTO = JSON.parse(this.params.filterJson)
              }
            } else if (this.params.nextStatusTag == '3') {
              this.nextStatusStr = '已处理'
            } else if (this.params.nextStatusTag == '4') {
              this.nextStatusStr = '已清除'
            }
            this.userName = this.params.userName
          } else {
            this.$message.error(resp.data.returnMsg)
          }
        })
        .catch(error => {
          if (error.response) {
            this.$message.error(error.response.data.detail)
          }
        })
      if (statusTag == '0') {
        this.active = 1
        this.form.processStatus = 2
        this.form.dealStatus = 1
        this.show = 'ins'
      } else if (statusTag == 6) {
        this.active = 2
        this.form.processStatus = 3
        this.form.dealStatus = 1
      }
    },
    addFilterForm() {
      if (!this.added) {
        // 查询详细信息和威胁信息  误报
        getAlarmResultInfo(this.alertId)
          .then(resp => {
            if (resp.data.returnCode == '0') {
              const temp = resp.data.data
              const ruleName = temp.dstIp != null ? temp.dstIp : (temp.srcIp != null ? temp.srcIp : temp.alertName)
              this.filterForm.correlationFilterRuleDTO.ruleName = '忽略' + ruleName + '的' +
                  temp.alertName
              this.filterForm.correlationFilterRuleDTO.dIp = temp.dstIp
              this.filterForm.correlationFilterRuleDTO.destPort =
                  temp.dstPort
              this.filterForm.correlationFilterRuleDTO.alertLevel =
                  temp.alertLevel + ''
              this.filterForm.correlationFilterRuleDTO.srcIp = temp.srcIp
              this.filterForm.correlationFilterRuleDTO.srcPort = temp.srcPort
              this.filterForm.correlationFilterRuleDTO.ruleIds = [temp.ruleId]
              this.filterForm.correlationFilterRuleDTO.alertName = temp.alertName
              this.filterForm.correlationFilterRuleDTO.url = temp.url
              this.filterForm.correlationFilterRuleDTO.fileName = temp.fileName
              this.filterForm.correlationFilterRuleDTO.filePath = temp.filePath
              this.filterForm.correlationFilterRuleDTO.appName = temp.appName
              this.filterForm.correlationFilterRuleDTO.userName = temp.userName
              this.getAllRules(temp.alertLevel + '')
              this.added = true
            } else {
              this.$message.error(resp.data.returnMsg)
            }
          })
          .catch(error => {
            if (error.response) {
              this.$message.error(error.response.data.detail)
            }
          })
      }
      this.addFilterFormVisible = true
    },
    openFilterForm() {
      if (!this.added) {
        // 查询详细信息和威胁信息  误报
        this.getAllRules(this.filterForm.correlationFilterRuleDTO.alertLevel)
        this.added = true
      }
      this.addFilterFormVisible = true
    },
    transferChange(newTargetKeys) {
      this.filterForm.correlationFilterRuleDTO.ruleIds = newTargetKeys
    },
    cleartStart: function(value) {
      this.filterForm.correlationFilterRuleDTO.startTime = null
      this.filterForm.correlationFilterRuleDTO.endTime = null
    },
    validateC(val) {
      if (val.correlationFilterRuleDTO.dIp) {
        const temp = val.correlationFilterRuleDTO.dIp.split(',')
        for (const i in temp) {
          if (!this.isIPAddress(temp[i])) {
            this.$message.error('目的地址填写不正确')
            return false
          }
        }
      }
      if (val.correlationFilterRuleDTO.srcIp) {
        const temp = val.correlationFilterRuleDTO.srcIp.split(',')
        for (const i in temp) {
          if (!this.isIPAddress(temp[i])) {
            this.$message.error('源地址填写不正确')
            return false
          }
        }
      }
      return true
    },
    isIPAddress: function(obj) {
      var regex = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/
      var matches = regex.exec(obj)
      if (matches == null) {
        return false
      }
      for (var i = 1; i < matches.length; i++) {
        if (matches[i] > 255 || matches[i] < 0) {
          return false
        }
      }
      return true
    },
    addFilterRule() {
      const rMsg = '校验成功'

      this.$refs.filterForm.validate(valid => {
        if (valid) {
          if (this.validateC(this.filterForm)) {
            this.filterForm.correlationFilterRuleDTO.filterId = null
            validCorrelationFilterRule(this.filterForm)
              .then(resp => {
                if (resp.data.returnCode == '0') {
                  this.addFilterFormVisible = false
                  this.$message.success(rMsg)
                  this.added = true
                  this.validFlag = true
                } else {
                  this.$message.error(resp.data.returnMsg)
                }
              })
              .catch(error => {
                if (error.resp) {
                  this.$message.error(error.resp.data.detail)
                }
              })
          } else {
            return false
          }
        } else {
          return false
        }
      })
    },
    alertLevelChange(value) {
      if (value) {
        this.getAllRules(value)
        this.filterForm.correlationFilterRuleDTO.ruleIds = []
      }
    },
    getAllRules: function(alertLevel) {
      // this.ruleForm.alarmRuleCorrelationMap.filterId = null;
      queryAllBigdataAssociationRules(alertLevel)
        .then(resp => {
          if (resp.data.returnCode == '0') {
            this.ruleDataList = resp.data.data
          } else {
            this.$message.error(resp.data.returnMsg)
          }
        })
        .catch(error => {
          if (error.response) {
            this.$message.error(error.response.data.detail)
          }
        })
    }

  }
}
</script>
<style lang="stylus">
  .poptooltip{
    font-size:13px !important;
    padding:6px !important;
  }
  .poptooltips{
    font-size:13px !important;
    padding:6px !important;
    width:300px;
  }
</style>

