<style scoped>
.expand-row {
  margin-bottom: 16px;
}
</style>
<style>
 .alarm-result-detail .el-dialog__header{
   height: 55px;
 }
</style>
<template>
  <div class="alarm-result-detail">
    <el-row
      v-show="expandType==='Detail'"
      style="margin-bottom:10px"
    >
      <el-card shadow="hover">
        <p slot="header">
          关联告警图
          <span style="font-size: 10px;color: #2d8cf0;">&nbsp;&nbsp;(点击右侧告警，查看告警详细和告警下挂事件关联信息)</span>
        </p>
        <!--        <div-->
        <!--          id="echart_relation"-->
        <!--          style="width:100%;height:300px;"-->
        <!--        />-->
      </el-card>
    </el-row>
    <el-row v-show="alertData.length>0 && expandType === 'Detail'">
      <p style="line-height: 40px;font-size: 14px;font-weight: 700;">{{ alertName }} 告警的详细信息：</p>
      <!-- <Table :loading="loading"
             :columns="alertColumn"
             :data="alertData"
             style="border-right:none"></Table> -->
      <el-table
        tooltip-effect="dark"
        :data="alertData"
        stripe
        border
      >
        <el-table-column
          prop="merge_alert_id"
          label="告警编号"
          show-overflow-tooltip
        />
        <el-table-column
          label="告警来源"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ toCase(
              scope.row.alert_source,
              datasourceType,
              "dataId",
              "dataName"
            ) }}
          </template>
        </el-table-column>
        <el-table-column
          label="告警大类"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ toCase(
              scope.row.alert_type,
              bigdataAlarmType,
              "dataId",
              "dataName"
            ) }}
          </template>
        </el-table-column>
        <el-table-column
          label="告警小类"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ toCase(
              scope.row.alert_type_sub,
              bigdataAlarmType,
              "dataId",
              "dataName"
            ) }}
          </template>
        </el-table-column>
        <el-table-column
          label="攻击链阶段"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ toCase(
              scope.row.attack_stage,
              attackType,
              "dataId",
              "dataName"
            ) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="dst_ip"
          label="目的IP"
          show-overflow-tooltip
        />
        <el-table-column
          label="告警等级"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ toCase(
              scope.row.alert_level,
              alarmLevels,
              "dataId",
              "dataName"
            ) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="event_count"
          label="关联事件数"
          show-overflow-tooltip
        />
        <el-table-column
          prop="occur_time"
          label="发生时间"
          show-overflow-tooltip
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="clickMergerDetail(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row
      v-show="(eventList.length>0 && expandType === 'Detail') || expandType != 'Detail'"
      class="expand-row"
    >
      <el-row v-show=" expandType === 'Detail'">
        <p style="line-height: 40px;font-size: 14px;font-weight: 700;">{{ alertName }} 告警关联事件信息：</p>
      </el-row>
      <!-- <Table :loading="loading"
             :columns="eventColumn"
             :data="eventList"
             style="border-right:none"></Table> -->
      <el-table
        tooltip-effect="dark"
        :data="eventList"
        stripe
        border
      >
        <el-table-column
          prop="event_name"
          label="事件名称"
          show-overflow-tooltip
        />
        <el-table-column
          prop="src_ip"
          label="源ip"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <assetAssociate :asset-ip="scope.row.src_ip" :business-id="businessId"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="src_port"
          label="源端口"
          show-overflow-tooltip
        />
        <el-table-column
          prop="dst_ip"
          label="目的ip"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <assetAssociate :asset-ip="scope.row.dst_ip" :business-id="businessId"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="dst_port"
          label="目的端口"
          show-overflow-tooltip
        />
        <el-table-column
          prop="create_time"
          label="发生时间"
          show-overflow-tooltip
        />
        <el-table-column
          label="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="clickEventDetail(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total,prev, pager, next,jumper"
        :page-size="page.size"
        :current-page.sync="page.current"
        :total="page.total"
        @current-change="handlePageChange"
      />
    </el-row>

    <!-- <el-row type="flex"
            justify="end"
            align="middle">
      <Page v-if="page.total > page.size"
            :total="page.total"
            :page-size="page.size"
            show-elevator
            show-total
            @on-change="handlePageChange"
            :current="page.current"
            style="padding: 10px;"></Page>
    </el-row> -->

    <manager-dialog
      :visible.sync="eventDetailDialog"
      width="70%"
      :modal="false"
      :append-to-body="true"
      title="事件详细信息"
    >
      <el-row>
        <el-row class="borderTable">
          <table style="width:100%">
            <template v-for="(item,index) in eventData">
              <tr v-if="index==0">
                <td style="width:10%">{{ eventData[index].name }}</td>
                <td  colspan="3">{{ eventData[index].value }}</td>
              </tr>
              <tr
                v-if="(index+1)%2==0"
                :key="index"
              >
                <template v-if="eventData[index]">
                  <template v-if="eventData[index+1]">
                    <td style="width:10%">{{ eventData[index].name }}</td>
                    <td>{{ eventData[index].value }}</td>
                  </template>
                  <template v-if="eventData[index+1]==null">
                    <td style="width:10%">{{ eventData[index].name }}</td>
                    <td colspan="3">{{ eventData[index].value }}</td>
                  </template>
                </template>
                <template v-if="eventData[index+1]">
                  <td style="width:10%">{{ eventData[index+1].name }}</td>
                  <td>{{ eventData[index+1].value }}</td>
                </template>
              </tr>
            </template>
          </table>
        </el-row>
      </el-row>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="eventDetailDialog=false">关闭</el-button>
      </span>
    </manager-dialog>

    <manager-dialog
      :visible.sync="mergerAlertDetailDialog"
      width="1200"
      title="被归并告警的详细信息"
    >
      <el-row>
        <el-row
          class="borderTable"
          style="width:100%"
        >
          <table>
            <tr>
              <td>告警编号</td>
              <td>{{ mergerAlertDetail.alert_id }}</td>
              <td>告警名称</td>
              <td>{{ mergerAlertDetail.alert_name }}</td>
              <td>告警来源</td>
              <td>{{ mergerAlertDetail.alert_source|toCase(datasourceType ,'dataId','dataName') }}</td>
            </tr>
            <tr>
              <td>告警等级</td>
              <td>{{ mergerAlertDetail.alert_level|toCase(alarmLevels ,'dataId','dataName') }}</td>
              <td>告警大类</td>
              <td>{{ mergerAlertDetail.alert_type|toCase(bigdataAlarmType ,'dataId','dataName') }}</td>
              <td>告警小类</td>
              <td>{{ mergerAlertDetail.alert_type_sub|toCase(bigdataAlarmType ,'dataId','dataName') }}</td>
            </tr>
            <tr>
              <td>目的IP</td>
              <td>{{ mergerAlertDetail.dst_ip }}</td>
              <td>目的端口</td>
              <td>{{ mergerAlertDetail.dst_port }}</td>
              <td>攻击链阶段</td>
              <td>{{ mergerAlertDetail.attack_stage|toCase(attackType ,'dataId','dataName') }}</td>
            </tr>
            <tr>
              <td>源IP</td>
              <td>{{ mergerAlertDetail.src_ip }}</td>
              <td>源端口</td>
              <td>{{ mergerAlertDetail.src_port }}</td>
              <td>规则ID</td>
              <td>{{ mergerAlertDetail.rule_id }}</td>
            </tr>
            <tr>
              <!-- <td>归并后告警编号</td>
              <td>{{mergerAlertDetail.merge_alert_id}}</td> -->
              <td>发生时间</td>
              <td>{{ mergerAlertDetail.occur_time }}</td>
<!--              <td>更新时间</td>-->
<!--              <td>{{ mergerAlertDetail.update_time }}</td>-->
              <td>进程名称</td>
              <td>{{ mergerAlertDetail.process_name }}</td>
              <td>恶意域名家族</td>
              <td>{{ mergerAlertDetail.class_dga }}</td>
            </tr>
            <tr>
              <td>可信度</td>
              <td>{{ mergerAlertDetail.reliability }}</td>
              <td>协议</td>
              <td>{{ mergerAlertDetail.procotol }}</td>
              <td>漏洞编号</td>
              <td><a @click="getVulDetailInfo(mergerAlertDetail.vul_id)">{{ mergerAlertDetail.vul_id }}</a></td>
            </tr>
            <tr>
              <td>关联事件数</td>
              <td>{{ mergerAlertDetail.event_count }}</td>
              <td>关联事件类型数</td>
              <td>{{ mergerAlertDetail.event_type_count }}</td>
              <td>关联威胁</td>
              <td><a @click="getThreatDetailInfo(mergerAlertDetail.threat_type,mergerAlertDetail.threat_assoc_id)">{{ mergerAlertDetail.threat_assoc_id }}</a></td>
            </tr>
            <tr>
              <td>流量大小(byte)</td>
              <td>{{ mergerAlertDetail.flow_count }}</td>
              <td>开始时间</td>
              <td>{{ mergerAlertDetail.start_date }}</td>
              <td>结束时间</td>
              <td>{{ mergerAlertDetail.end_date }}</td>
            </tr>
            <tr>
              <td>文件名</td>
              <td>{{ mergerAlertDetail.file_name }}</td>
              <td>特征码</td>
              <td colspan="3">{{ mergerAlertDetail.signature }}</td>
            </tr>
            <tr>
              <td>payload特征码：</td>
              <td colspan="5">{{ mergerAlertDetail.payload }}</td>
            </tr>
          </table>
        </el-row>
      </el-row>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="mergerAlertDetailDialog=false">关闭</el-button>
      </span>
    </manager-dialog>

    <manager-dialog
      :visible.sync="otherDetailInfoDialog"
      width="800"
      :title="otherDetailInfoTitle"
    >
      <el-row style="margin-top:20px">
        <el-row class="borderTable">
          <table style="width:100%">
            <template v-for="(item,index) in otherDetailInfo">
              <tr
                v-if="index%2==0"
                :key="index"
              >
                <template v-if="otherDetailInfo[index]">
                  <template v-if="otherDetailInfo[index+1]">
                    <td>{{ otherDetailInfo[index].name }}</td>
                    <td>{{ otherDetailInfo[index].value }}</td>
                  </template>
                  <template v-if="otherDetailInfo[index+1]==null">
                    <td colspan="2">{{ otherDetailInfo[index].name }}</td>
                    <td colspan="2">{{ otherDetailInfo[index].value }}</td>
                  </template>
                </template>
                <template v-if="otherDetailInfo[index+1]">
                  <td>{{ otherDetailInfo[index+1].name }}</td>
                  <td>{{ otherDetailInfo[index+1].value }}</td>
                </template>
              </tr>
            </template>

          </table>
        </el-row>
      </el-row>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="otherDetailInfoDialog=false">关闭</el-button>
      </span>
    </manager-dialog>
  </div>
</template>

<script>
import echarts from 'echarts3'
import { queryEventDetail, queryEventOrMultiAlert, threatIntelligence, getVulInfo } from '../api/alarm-result'
import assetAssociate from './../assetAssociate'
export default {
  name: 'AlarmResultDetailExpand',
  components: {
    assetAssociate: assetAssociate
  },
  props: {
    row: {
      type: Object,
      default: function() {
        return {}
      }
    },
    expandType: {
      type: String,
      default: ''
    },
    businessId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      eventData: [],
      eventDetailDialog: false,
      otherDetailInfoDialog: false,
      otherDetailInfoTitle: null,
      otherDetailInfo: [],
      eventColumn: [
        {
          key: 'event_name',
          title: '事件名称'
        },
        {
          key: 'src_ip',
          title: '源ip'
        },
        {
          key: 'src_port',
          title: '源端口'
        },
        {
          key: 'dst_ip',
          title: '目的ip'
        },
        {
          key: 'dst_port',
          title: '目的端口'
        },
        {
          key: 'create_time',
          title: '发生时间'
        },
        {
          title: '操作',
          align: 'center',
          width: 190,
          key: 'handle',
          render: (h, params) => {
            return h('div', [
              // 查看按钮
              h(
                'ctsi-button',
                {
                  // style: {
                  //   margin: "0 5px",
                  //   display:
                  //     this.expandType != "EventDetail"
                  //       ? "inline-block"
                  //       : "none"
                  // },
                  props: {
                    code: '',
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.clickEventDetail(params.row)
                    }
                  }
                },
                '查看'
              )])
          }
        }
      ],
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      mergerAlertDetailDialog: false,
      mergerAlertDetail: {
        event_count: null,
        event_type_count: null,
        alert_id: null,
        alert_level: null,
        alert_name: null,
        alert_source: null,
        alert_type: null,
        attack_stage: null,
        cve_id: null,
        dst_ip: null,
        dst_port: null,
        file_name: null,
        merge_alert_id: null,
        occur_time: null,
        process_name: null,
        procotol: null,
        reliability: null,
        Threat_type: null,
        signature: null,
        src_ip: null,
        src_port: null,
        threat_assoc_id: null,
        update_time: null,
        rule_id: null,
        end_date: null,
        start_date: null,
        flow_count: null,
        class_dga: null,
        payload: null
      },
      alertColumn: [
        {
          key: 'merge_alert_id',
          title: '告警编号'
        },
        {
          key: 'alert_source',
          title: '告警来源',
          render: (h, params) => {
            const ret = this.toCase(
              params.row.alert_source,
              this.datasourceType,
              'dataId',
              'dataName'
            )
            return h('span', {}, ret)
          }
        },
        {
          key: 'alert_type',
          title: '告警大类',
          render: (h, params) => {
            const ret = this.toCase(
              params.row.alert_type,
              this.bigdataAlarmType,
              'dataId',
              'dataName'
            )
            return h('span', {}, ret)
          }
        },
        {
          key: 'alert_type_sub',
          title: '告警小类',
          render: (h, params) => {
            const ret = this.toCase(
              params.row.alert_type_sub,
              this.bigdataAlarmType,
              'dataId',
              'dataName'
            )
            return h('span', {}, ret)
          }
        },
        {
          key: 'attack_stage',
          title: '攻击链阶段',
          render: (h, params) => {
            const ret = this.toCase(
              params.row.attack_stage,
              this.attackType,
              'dataId',
              'dataName'
            )
            return h('span', {}, ret)
          }
        },
        {
          key: 'dst_ip',
          title: '目的IP'
        },
        {
          key: 'alert_level',
          title: '告警等级',
          render: (h, params) => {
            const ret = this.toCase(
              params.row.alert_level,
              this.alarmLevels,
              'dataId',
              'dataName'
            )
            return h('span', {}, ret)
          }
        },
        {
          key: 'event_count',
          title: '关联事件数'
        },
        {
          key: 'occur_time',
          title: '发生时间'
        },
        {
          title: '操作',
          align: 'center',
          width: 190,
          key: 'handle',
          render: (h, params) => {
            return h('div', [
              // 查看按钮
              h(
                'ctsi-button',
                {
                  style: {
                    margin: '0 5px',
                    display:
                      this.expandType != 'EventDetail'
                        ? 'inline-block'
                        : 'none'
                  },
                  props: {
                    code: '',
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.clickMergerDetail(params.row)
                    }
                  }
                },
                '查看'
              )])
          }
        }
      ],
      eventList: [],
      alertList: [],
      alertName: '',
      merge_alert_id: null,
      mainChart: null,
      echartData: {
        name: '',
        children: []
      }
    }
  },
  computed: {
    alertData: function() {
      if (this.alertList && this.merge_alert_id) {
        const temp = this.alertList.filter(item => {
          return item.merge_alert_id == this.merge_alert_id
        })
        if (temp) {
          this.alertName = temp[0].alert_name
        }
        return temp
      } else {
        return []
      }
    },
    alarmLevels() {
      return this.$store.state.alarm.ruleLevel
    },
    attackType() {
      return this.$store.state.alarm.attackType
    },
    bigdataAlarmType() {
      return this.$store.state.alarm.newAlarmType
    },
    datasourceType() {
      return this.$store.state.alarm.datasourceType
    }
  },
  watch: {},
  mounted() {
    this.quertAlertEventOrMultiAlert()
  },
  methods: {
    clickMergerDetail: function(row) {
      this.mergerAlertDetail = row
      this.mergerAlertDetailDialog = true
    },
    handlePageChange: function(param) {
      this.page.current = param
      this.quertAlertEventOrMultiAlert()
    },
    initEchart: function() {
      this.mainChart = echarts.init(
        document.getElementById('echart_relation'),
        'infographic'
      )

      const option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            data: [this.echartData],
            top: '1%',
            left: '20%',
            bottom: '1%',
            right: '20%',
            symbolSize: 13,
            expandAndCollapse: false,
            label: {
              normal: {
                position: 'left', // 标签的位置
                verticalAlign: 'middle', // 文字垂直对齐方式，默认自动。可选：top，middle，bottom
                align: 'right', // 文字水平对齐方式，默认自动。可选：top，center，bottom
                fontSize: 9
              }

            },
            leaves: {
              label: {
                position: 'bottom',
                align: 'middle',
                fontSize: 14
              }
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      }
      this.mainChart.setOption(option)
      this.mainChart.on('click', this.clickFun)
    },
    clickFun(param) {
      if (typeof param.seriesIndex == 'undefined') {
        return
      }
      if (param.type == 'click') {
        if (param.data.is_master) {
          this.eventList = []
          this.alertData = []
          this.merge_alert_id = null
        } else {
          this.merge_alert_id = param.data.merge_alert_id
          this.quertAlertEventList(param.data)
        }
      }
    },
    clickEventDetail(row) {
      const temp = { AlarmEventMap: null }
      temp.AlarmEventMap = row
      queryEventDetail(temp)
        .then(resp => {
          if (resp.data.returnCode == '0') {
            this.eventData = resp.data.data.list
            this.eventDetailDialog = true
          } else {
            this.$message.error(resp.data.returnMsg)
          }
        })
    },
    quertAlertEventOrMultiAlert() {
      if (this.expandType) {
        this.loading = true
        const temp = { AlarmDetailMap: null, page: null }
        temp.page = this.page
        temp.AlarmDetailMap = this.row
        queryEventOrMultiAlert(temp)
          .then(resp => {
            this.loading = false
            if (resp.data.returnCode == '0') {
              if (this.expandType === 'Detail') {
                this.echartData.name = this.row.alert_name
                this.echartData.is_master = true
                this.echartData.children = []
                this.alertList = resp.data.data.list
                for (const temp in resp.data.data.list) {
                  const children = {}
                  children.name = resp.data.data.list[temp].alert_name
                  children.is_master = false
                  children.index_name = resp.data.data.list[temp].index_name
                  children.merge_alert_id =
                    resp.data.data.list[temp].merge_alert_id
                  this.echartData.children.push(children)
                }
                this.initEchart()
              } else {
                this.eventList = resp.data.data.list
                this.page.total = resp.data.data.page.total
              }
            } else {
              this.$message.error(resp.data.returnMsg)
            }
          })
      }
    },
    getThreatDetailInfo(threatType, threatAssocId) {
      const temp = { threat_assoc_id: null, threat_type: null }
      temp.threat_assoc_id = threatAssocId
      temp.threat_type = threatType
      threatIntelligence(temp)
        .then(resp => {
          if (resp.data.returnCode == '0') {
            if (resp.data.data && resp.data.data.list) {
              this.otherDetailInfo = resp.data.data.list
              this.otherDetailInfoDialog = true
              this.otherDetailInfoTitle = '威胁情报详细信息'
            }
          } else {
            this.$message.error(resp.data.returnMsg)
          }
        })
    },
    getVulDetailInfo(vulId) {
      getVulInfo(vulId)
        .then(resp => {
          if (resp.data.returnCode == '0') {
            if (resp.data.data && resp.data.data.list) {
              this.otherDetailInfo = resp.data.data.list
              this.otherDetailInfoDialog = true
              this.otherDetailInfoTitle = '漏洞详细信息'
            }
          } else {
            this.$message.error(resp.data.returnMsg)
          }
        })
    },
    quertAlertEventList(param) {
      const temp = { AlarmDetailMap: {}, page: null }
      temp.page = this.page
      temp.AlarmDetailMap.merge_alert_id = param.merge_alert_id
      temp.AlarmDetailMap.index_name = param.index_name
      queryEventOrMultiAlert(temp)
        .then(resp => {
          if (resp.data.returnCode == '0') {
            this.eventList = resp.data.data.list
            this.page.total = resp.data.data.page.total
          } else {
            this.$message.error(resp.data.returnMsg)
          }
        })
    },
    toCase: function(input, source, keyName, valueName) {
      if (!(source instanceof Array) || !source.length) return input
      for (const e of source) {
        if (e[keyName] == input) return e[valueName]
      }
      return input
    }
  }
}
</script>

<style scoped>
.borderTable table {
  border-right: 1px solid #dcdee2;
  border-bottom: 1px solid #dcdee2;
  border-collapse: collapse;
}

.borderTable table td {
  border-left: 1px solid #dcdee2;
  border-top: 1px solid #dcdee2;
  width: 200px;
  height: 45px;
  padding-left: 10px;
  vertical-align: middle;
  text-align: center;
}
.borderTable table td:nth-child(odd) {
  font-weight: bold;
  background-color: #f8f8f9;
  vertical-align: middle;
  text-align: center;
}
</style>
