<template>
  <div>
    <el-row>
      <!-- <AutoComplete v-model="mergerDEtailSearchInput"
                    placeholder="查找内容"
                    :data="searchInputData"
                    style="width:275px;margin:5px"
                    clearable
                    :filter-method="filterMethod"
                    @on-search="mergerDetailSearch"
                    @on-clear="mergerDetailClear"></AutoComplete> -->
      <el-autocomplete
        v-model="mergerDEtailSearchInput"
        class="inline-input"
        style="width:275px;margin:5px"
        :fetch-suggestions="querySearch"
        placeholder="查找内容"
        :trigger-on-focus="false"
        @select="mergerDetailSearch"
      />
      <el-button
        icon="el-icon-search"
        style="margin-left: 10px;"
        size="20"
        @click="quertAlertMergeInfo"
      />
      <el-button
        icon="el-icon-help"
        style="margin-left: 10px;color:#d0d3d7"
        size="20"
        @click="helpInfo"
      />
    </el-row>
    <el-row
      class="margin-top-10 searchable-table-con1"
      style="width:100%"
    >
      <!-- <Table :columns="mergerColumns"
             @on-expand="onExpand"
             :data="mergerTableData"
             :loading="loading"
             style="border-right:none"></Table> -->
      <el-table
        tooltip-effect="dark"
        :data="mergerTableData"
        stripe
        border
        @expand-change="onExpand"
      >
        <el-table-column v-if="(this.pData.alertSource == '4'||this.pData.alertSource == '9' )&&!this.pData.alertName.startsWith('端口异常流量')" type="expand">
          <template
            slot-scope="scope"
          >
            <alarmResultDetailExpand
              :row="scope.row"
              :business-id="pData.businessId"
              :expand-type="expandType"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="merge_alert_id"
          label="告警编号"
          show-overflow-tooltip
        />
        <el-table-column
          prop="alert_name"
          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
          label="告警等级"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ toCase(scope.row.alert_level,
                      alarmLevels,
                      "dataId",
                      "dataName") }}
          </template>
        </el-table-column>
        <el-table-column
          prop="dst_ip"
          label="目的IP"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <assetAssociate :asset-ip="scope.row.dst_ip" :business-id="pData.businessId"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="src_ip"
          label="源IP"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <assetAssociate :asset-ip="scope.row.src_ip" :business-id="pData.businessId"/>
          </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="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="clickMergerDetail(scope.row)"
            >查看</el-button>
            <!-- <el-button type="text"
                       v-if="scope.row.alert_source === '4'"
                       @click="clickMergerRow(scope.row,'Detail')">
              {{scope.row._expanded ? "收起告警" : "关联告警"}}
            </el-button>
            <el-button type="text"
                       v-if="scope.row.alert_source === '9'"
                       @click="clickMergerRow(scope.row,'Event')">
              {{scope.row._expanded ? "收起事件" : "关联事件"}}
            </el-button> -->
            <el-button
              v-if="displayType !== 'attackType'"
              type="text"
              @click="clickMergerRowAttack(scope.row)"
            >
              追溯
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total,prev, pager, next,jumper"
        :page-size="mergerPage.size"
        :current-page.sync="mergerPage.current"
        :total="mergerPage.total"
        @current-change="handleMergerPageChange"
      />
      <!-- <el-row type="flex"
              justify="end"
              align="middle">

        <Page v-if="mergerPage.total > mergerPage.size"
              :total="mergerPage.total"
              :page-size="mergerPage.size"
              @on-change="handleMergerPageChange"
              show-elevator
              show-total
              :current="mergerPage.current"
              style="padding: 10px;"></Page>
      </el-row> -->
    </el-row>

    <!-- 被归并告警的详细信息 -->
    <manager-dialog
      :visible.sync="mergerAlertDetailDialog"
      :modal="false"
      width="1000"
      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><ruleAssociate :rule-id="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="flowDetailDialog"
      width="1000"
      title="话单详细信息"
    >
      <el-row>
        <el-col
          :span="4"
          :offset="20"
          align="right"
        >
          <el-button
            size="small"
            type="primary"
            @click="download()"
          >下载PCAP包</el-button>
        </el-col>
      </el-row>
      <el-collapse
        v-show="isHttp==true"
        v-model="defaultCollapse"
        style="margin-top:10px"
      >
        <el-collapse-item
          title="General"
          name="1"
        >

          <div>
            <div>Request URL:</div>
            <div>{{ independent.url }}</div>
          </div>
          <div>
            <div>Request Method:</div>
            <div>{{ independent.http_method }}</div>
          </div>
          <div>
            <div>Status Code:</div>
            <div>{{ independent.response_code }}</div>
          </div>
          <div>
            <div>Remote Address:</div>
            <div>{{ independent.src_ip + ":" + independent.src_port }}</div>
          </div>
          <!-- <div><div>Referrer Policy: </div>{{independent.response_code}}</div> -->
        </el-collapse-item>
        <el-collapse-item
          title="Response Headers"
          name="2"
        >

          <!-- <div><div>Access-Control-Allow-Credentials: </div>{{independent.accept}}</div> -->
          <div>
            <div>Access-Control-Allow-Origin:</div>
            <div>http://localhost:{{ independent.src_port }}</div>
          </div>
          <!-- <div><div>Access-Control-Expose-Headers: </div>{{independent.src_port}}</div> -->
          <div>
            <div>Cache-Control:</div>
            <div>{{ independent.connection }}</div>
          </div>
          <div>
            <div>Content-Type:</div>
            <div>{{ independent.content_type }}</div>
          </div>
          <div>
            <div>Date:</div>
            <div>{{ independent.ackArrivaltime }}</div>
          </div>
          <!-- <div><div>Expires: </div>{{independent.expires}}</div> -->
          <div>
            <div>Pragma:</div>
            <div>{{ independent.pragma }}</div>
          </div>
          <!-- <div><div>Transfer-Encoding: </div>{{independent.src_port}}</div>
            <div><div>Vary: </div>{{independent.origin}}</div>
            <div><div>Vary: </div>{{independent.referer}}</div>
            <div><div>X-Content-Type-Options: </div>{{independent.user_agent}}</div>
            <div><div>X-Frame-Options: </div>{{independent.referer}}</div>
          <div><div>X-XSS-Protections: </div>{{independent.user_agent}}</div>-->
          <div>
            <div>Response:</div>
            <div>{{ independent.response }}</div>
          </div>
        </el-collapse-item>
        <el-collapse-item
          title="Request Headers"
          name="3"
        >

          <div>
            <div>Accept:</div>
            <div>{{ independent.accept }}</div>
          </div>
          <div>
            <div>Accept-Encoding:</div>
            <div>{{ independent.acceptEncoding }}</div>
          </div>
          <div>
            <div>Accept-Language:</div>
            <div>{{ independent.acceptLanguage }}</div>
          </div>
          <!-- <div><div>Authorization:</div>{{independent.dst_ip}}</div> -->
          <div>
            <div>Connection:</div>
            <div>{{ independent.connection }}</div>
          </div>
          <div>
            <div>Content-Length:</div>
            <div>{{ independent.contentLength }}</div>
          </div>
          <div>
            <div>Content-Type:</div>
            <div>{{ independent.content_type }}</div>
          </div>
          <div>
            <div>Host:</div>
            <div>{{ independent.src_ip + ":" + independent.src_port }}</div>
          </div>
          <div>
            <div>Origin:</div>
            <div>{{ independent.origin }}</div>
          </div>
          <div>
            <div>Referer:</div>
            <div>{{ independent.Referer }}/</div>
          </div>
          <div>
            <div>User-Agent:</div>
            <div>{{ independent.user_agent }}</div>
          </div>
          <div>
            <div>Request:</div>
            <div>{{ independent.request }}</div>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-row style="margin-top:20px">
        <el-row class="borderTable">
          <table style="width:100%">
            <template v-for="(item,index) in flowData">
              <tr
                v-if="index%2==0"
                :key="index"
              >
                <template v-if="flowData[index]">
                  <template v-if="flowData[index+1]">
                    <td>{{ flowData[index].name }}</td>
                    <td>{{ flowData[index].value }}</td>
                  </template>
                  <template v-if="flowData[index+1]==null">
                    <td>{{ flowData[index].name }}</td>
                    <td colspan="3">{{ flowData[index].value }}</td>
                  </template>
                </template>
                <template v-if="flowData[index+1]">
                  <td>{{ flowData[index+1].name }}</td>
                  <td>{{ flowData[index+1].value }}</td>
                </template>
              </tr>
            </template>
          </table>
        </el-row>
      </el-row>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="flowDetailDialog=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 alarmResultDetailExpand from './../alarmResultDetailExpand'
import assetAssociate from './../assetAssociate'
import ruleAssociate from './../ruleAssociate'
import { queryAlarmDetail, getVulInfo, threatIntelligence, queryEventOrMultiAlert } from '../api/alarm-result'

export default {
  name: 'AlarmResultMergeList',
  components: {
    alarmResultDetailExpand: alarmResultDetailExpand,
    assetAssociate: assetAssociate,
    ruleAssociate: ruleAssociate
  },
  props: {
    pData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    refreshTag: {
      type: Boolean,
      default: true
    },
    displayType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      alertSource: null,
      alertName: null,
      mergerPage: {
        current: 1,
        size: 10,
        total: 0
      },
      mergerAttackTypeListDialog: false,
      otherDetailInfoDialog: false,
      otherDetailInfoTitle: null,
      otherDetailInfo: [],
      flowData: [],
      defaultCollapse: ['1', '2', '3'],
      isHttp: false,
      expandType: null,
      independent: {
        url: null,
        http_method: null,
        response_code: null,
        src_ip: null,
        src_port: null,
        src_port: null,
        connection: null,
        content_type: null,
        ackArrivaltime: null,
        pragma: null,
        origin: null,
        referer: null,
        user_agent: null,
        referer: null,
        user_agent: null,
        request: null,
        accept: null,
        acceptEncoding: null,
        acceptLanguage: null,
        connection: null,
        contentLength: null,
        content_type: null,
        src_ip: null,
        src_port: null,
        origin: null,
        Referer: null,
        user_agent: null,
        response: null,
        pacpMD5: null
      },
      flowDetailDialog: false,

      mergerDEtailSearchInput: '',
      mergerAlertDetailDialog: false,
      searchInputData: [],
      mergerTableData: [],
      loading: false,
      mergerAlertDetail: {
        event_count: null,
        event_type_count: null,
        alert_id: null,
        alert_level: null,
        alert_name: null,
        alert_source: null,
        alert_type: null,
        alert_type_sub: 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
      },
      mergerColumns: [
        {
          type: 'expand',
          width: 1,
          render: (h, params) => {
            return h(alarmResultDetailExpand, {
              // style: {
              //     display: this.mergerNextType != "EventDetail" ? "inline-block" : "none"
              // },
              props: {
                row: params.row,
                expandType: this.expandType
              }
            })
          }
        },
        {
          key: 'merge_alert_id',
          title: '告警编号'
        },
        {
          key: 'alert_name',
          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: 'alert_level',
          title: '告警等级',
          render: (h, params) => {
            const ret = this.toCase(
              params.row.alert_level,
              this.alarmLevels,
              'dataId',
              'dataName'
            )
            return h('span', {}, ret)
          }
        },
        {
          key: 'dst_ip',
          title: '目的IP'
        },
        {
          key: 'src_ip',
          title: '源IP'
        },
        {
          key: 'event_count',
          title: '关联事件数'
        },
        {
          key: 'occur_time',
          title: '发生时间'
        },
        {
          title: '操作',
          align: 'center',
          width: 230,
          key: 'handle',
          render: (h, params) => {
            return h('div', [
              // 查看按钮
              h(
                'ctsi-button',
                {
                  style: {
                    margin: '0 5px'
                  },
                  props: {
                    code: '',
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.clickMergerDetail(params.row)
                    }
                  }
                },
                '查看'
              ),
              h(
                'ctsi-button',
                {
                  style: {
                    margin: '0 5px',
                    display:
                      params.row.alert_source === '4' ? 'inline-block' : 'none'
                  },
                  props: {
                    code: '',
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.clickMergerRow(params.row, 'Detail')
                    }
                  }
                },
                params.row._expanded ? '收起告警' : '关联告警'
              ),
              h(
                'ctsi-button',
                {
                  style: {
                    margin: '0 5px',
                    display:
                      params.row.alert_source === '9' ? 'inline-block' : 'none'
                  },
                  props: {
                    code: '',
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.clickMergerRow(params.row, 'Event')
                    }
                  }
                },
                params.row._expanded ? '收起事件' : '关联事件'
              ),
              h(
                'ctsi-button',
                {
                  style: {
                    margin: '0 5px',
                    display: this.displayType === 'attackType'
                      ? 'none'
                      : 'inline-block'
                  },
                  props: {
                    code: '',
                    type: 'primary',
                    size: 'small',
                    loading: params.row.buttonLoading
                  },
                  on: {
                    click: () => {
                      this.clickMergerRowAttack(params.row)
                    }
                  }
                },
                '追溯'
              )
            ])
          }
        }
      ]
    }
  },
  computed: {
    allStaticList() {
      var newList = [
        ...this.alarmLevels,
        ...this.datasourceType,
        ...this.bigdataAlarmType,
        ...this.attackType
      ]
      return newList
    },
    attackType() {
      return this.$store.state.alarm.attackType
    },
    bigdataAlarmType() {
      return this.$store.state.alarm.newAlarmType
    },
    datasourceType() {
      return this.$store.state.alarm.datasourceType
    },
    alarmLevels() {
      return this.$store.state.alarm.ruleLevel
    }
  },
  watch: {
    pData: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.quertAlertMergeInfo()
        }
      },
      immediate: true,
      deep: true
    },
    refreshTag: function() {
      this.quertAlertMergeInfo()
    }
  },
  mounted() {
  },
  methods: {
    clickMergerRowAttack: function(row) {
      row.buttonLoading = true
      this.$emit('traceBack', row)
    },
    onExpand(row, status) {
      // this.expend(row, status);
      const type = row.alert_source === '4' ? 'Detail'
        : row.alert_source === '9' ? 'Event' : ''
      if (type.length !== 0) {
        this.clickMergerRow(row, type)
      }
    },
    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)
          }
        })
    },
    filterMethod(value, option) {
      return option.toUpperCase().indexOf(value.toUpperCase()) !== -1
    },
    quertAlertMergeInfo(type) {
      const temp = { alarmResultMap: null, page: null }
      temp.page = this.mergerPage
      temp.alarmResultMap = this.pData
      this.alertSource = temp.alarmResultMap.alertSource
      this.alertName = temp.alarmResultMap.alertName
      temp.alarmResultMap.searchInfo = this.mergerDEtailSearchInput
      if (type === 'attackList') {
        temp.alarmResultMap.type = type
        temp.alarmResultMap.merge_alert_id = this.mergerAttackTypeListRow.merge_alert_id
        temp.alarmResultMap.attack_stage = this.mergerAttackTypeListRow.attack_stage
      }
      this.loading = true
      queryAlarmDetail(temp)
        .then(resp => {
          this.loading = false
          if (resp.data.returnCode == '0') {
            this.mergerTableData = resp.data.data.list.filter(
              (item, index) => {
                item._expanded = false
                item.buttonLoading = false
                return item
              }
            )
            this.mergerPage.total = resp.data.data.page.total
          } else {
            this.$message.error(resp.data.returnMsg)
          }
        })
    },
    handleMergerPageChange(pageNum) {
      this.mergerPage.current = pageNum
      this.quertAlertMergeInfo()
    },
    mergerDetailClear: function() {
      this.mergerDetailSearch(null)
      this.mergerDEtailSearchInput = ''
      this.quertAlertMergeInfo()
    },
    clickMergerRow: function(row, type) {
      console.log('type' + type)
      this.expandType = type
      if (row._expanded) {
        this.expend(row, false)
      } else {
        this.expend(row, true)
      }
    },
    querySearch(queryString, cb) {
      const mergerTableData = this.mergerTableData
      const results = queryString ? mergerTableData.filter(this.createFilter(queryString)) : mergerTableData
      cb(results)
    },
    createFilter(queryString) {
      return (mergerTableData) => {
        return (mergerTableData.merge_alert_id.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    mergerDetailSearch: function(value) {
      if (value) {
        const temp = this.toImage(value, this.allStaticList, 'dataName')
        this.searchInputData = !value ? [] : [temp]
      } else {
        this.searchInputData = []
      }
    },
    clickMergerDetail: function(row) {
      // 流安全且为EventDetail
      if (row.alert_source === '2') {
        this.quertAlertEventOrMultiAlert(row, 'flowData')
      } else if (row.alert_source === '10'){
        let routeData = this.$router.resolve({
          name: 'fence',
          query: { uuid: row.uuid,occurTime: row.occur_time }
        })
        window.open(routeData.href, "_blank");
      } else {
        this.mergerAlertDetail = row
        this.mergerAlertDetailDialog = true
      }
    },
    quertAlertEventOrMultiAlert(row, type) {
      const temp = { AlarmDetailMap: null, page: null }
      temp.page = this.mergerPage
      temp.AlarmDetailMap = row
      queryEventOrMultiAlert(temp)
        .then(resp => {
          if (resp.data.returnCode == '0') {
            if (type === 'flowData') {
              if (resp.data.data && resp.data.data.list.length > 0) {
                this.flowData = resp.data.data.list
                this.isHttp = resp.data.data.isHttp
                this.flowDetailDialog = true
              } else {
                this.$message.info('暂时无法查找到详单，显示简略信息')
                this.mergerAlertDetail = row
                this.mergerAlertDetailDialog = true
              }
            } else if (type === 'eventDetail') {
              this.EventListData = resp.data.data
              // 触发展开事件
              this.expend(row, true)
            }
            if (resp.data.data.independent.length > 0) {
              this.independent = resp.data.data.independent[0]
            }
          } else {
            this.$message.error(resp.data.returnMsg)
          }
        })
    },
    // 下载
    download: function() {
      if (this.independent.pacpMD5 != '') {
        var elemIF = document.createElement('iframe')
        elemIF.src =

          '/static/' +
          this.independent.pacpMD5
        elemIF.style.display = 'none'
        document.body.appendChild(elemIF)
      } else {
        this.$message.info('pacp路径不存在')
      }
    },
    expend(row, status) {
      console.log(row)
      console.log(status)
      // if (status)
      // {

      //   this.mergerTableData.splice();
      //   this.mergerTableData.filter((item, index) => {
      //     if (item.merge_alert_id == row.merge_alert_id)
      //     {
      //       console.log(true)
      //       item._expanded = true;
      //     } else
      //     {
      //       console.log(false)
      //       item._expanded = false;
      //     }
      //     return item;
      //   });
      // } else
      // {
      //   this.mergerTableData.splice();
      //   this.mergerTableData.filter((item, index) => {
      //     item._expanded = false;
      //     return item;
      //   });
      //   this.EventListData = {};
      // }
    },
    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
    },
    toImage: function(input, source, valueName) {
      if (!(source instanceof Array) || !source.length) return input
      for (const e of source) {
        if (e[valueName].indexOf(input) != -1) return e[valueName]
      }
      return input
    },
    helpInfo: function() {
      // this.$Notice.open({
      //   title: "全局搜索说明",
      //   desc: "",
      //   duration: 60,
      //   render: h => {
      //     return h("div", [
      //       h(
      //         "div",
      //         {
      //           style: {
      //             "line-height": "20px"
      //           }
      //         },
      //         "1.搜索框可自动联想静态数据"
      //       ),
      //       h(
      //         "div",
      //         {
      //           style: {
      //             "line-height": "20px"
      //           }
      //         },
      //         "2.IP查询会进行源目的IP模糊匹配：如：192.168"
      //       ),
      //       h(
      //         "div",
      //         {
      //           style: {
      //             "line-height": "20px"
      //           }
      //         },
      //         "3.日期查询格式为2020-06-28~2020-06-29"
      //       ),
      //       h(
      //         "div",
      //         {
      //           style: {
      //             "line-height": "20px"
      //           }
      //         },
      //         "4.时间查询格式为2020-06-28 00:00:00~2020-06-28 01:00:00"
      //       )
      //     ]);
      //   }
      // });
      this.$message({
        showClose: true,
        dangerouslyUseHTMLString: true,
        message: `
          <div style="line-height:20px">
          1.搜索框可自动联想静态数据
          </div>
          <div style="line-height:20px">
          2.IP查询会进行源目的IP模糊匹配：如：192.168
          </div>
          <div style="line-height:20px">
          3.日期查询格式为2020-06-28~2020-06-29
          </div>
          <div style="line-height:20px">
          4.时间查询格式为2020-06-28 00:00:00~2020-06-28 01:00:00
          </div>
          `
      })
    }
  }
}
</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>
