<template>
  <manager-table
    :column-items="columnItems"
    :table-data="tableData"
    :pagination="page"
    :show-download-btn="false"
    @search="$emit('handlePageChange')"
  >
    <template #time="{scope}">
      {{ formatTimestamp(scope.row.timestamp) }}
    </template>
    <template #source="{scope}">
      <CountryFlag v-if="scope.row.srcInfo.src_ip_country_code" :country="scope.row.srcInfo.src_ip_country_code" size="small" />
      <span>{{ (scope.row.srcInfo.src_ip?scope.row.srcInfo.src_ip:'无')
        +(scope.row.srcInfo.src_port?':'+scope.row.srcInfo.src_port:'')
        +(scope.row.srcInfo.src_ip_tag?'['+scope.row.srcInfo.src_ip_tag+']':'')
      }}</span>
    </template>
    <template #target="{scope}">
      <CountryFlag v-if="scope.row.dstInfo.dst_ip_country_code" :country="scope.row.dstInfo.dst_ip_country_code" size="small" />
      <span>{{ (scope.row.dstInfo.dst_ip?scope.row.dstInfo.dst_ip:'无')
        +(scope.row.dstInfo.dst_port?':'+scope.row.dstInfo.dst_port:'')
        +(scope.row.dstInfo.dst_ip_tag?'['+scope.row.dstInfo.dst_ip_tag+']':'')
      }}</span>
    </template>
    <template #threatCategory="{scope}">
      <span>{{ (scope.row.classification?scope.row.classification:'无')+'/'+(scope.row.category?scope.row.category:'无') }}</span>
    </template>
    <template #severity="{scope}">
      <RiskTag :level="scope.row.severity" log />
    </template>
    <template #keyInfo="{scope}">
      <div v-for="name in Object.keys(scope.row.keyInfo)" :key="name">
        <template v-if="name!='app_proto-raw'">
          <el-tooltip effect="dark" placement="top" :content="t(name)+':'+(scope.row.keyInfo[name]?scope.row.keyInfo[name]:'无')" popper-class="threatEventListTolltipClass">
            <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ t(name)+':'+(scope.row.keyInfo[name]?scope.row.keyInfo[name]:'无') }}</div>
          </el-tooltip>
        </template>
      </div>
    </template>
    <template #status="{scope}">
      <div v-for="name in Object.keys(scope.row.responseStatus)" :key="name">
        {{ t(name)+':'+scope.row.responseStatus[name]?scope.row.responseStatus[name]:'无' }}
      </div>
    </template>
    <template #operate="{scope}">
      <el-context-menu
        :menus="menus"
        :scope="scope"
        :default="2"
        @oper="clickRow"
      />
    </template>
  </manager-table>
</template>

<script>
import CountryFlag from 'vue-country-flag'// 国旗组件
import RiskTag from './RiskTag'// 风险标签组件
import moment from 'moment'
import i18n from '@ability/utils/i18n'
export default {
  name: 'ThreatEventList',
  components: { CountryFlag, RiskTag },
  props: {
    tableData: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
      columnItems: [
        {
          _key: 'time',
          prop: 'time',
          label: '时间',
          render: true,
          width: 140
        },
        {
          _key: 'source',
          prop: 'source',
          label: '源信息',
          render: true
        },
        {
          _key: 'target',
          prop: 'target',
          label: '目的信息',
          render: true
        },
        {
          _key: 'threatCategory',
          prop: 'threatCategory',
          label: '威胁类别',
          render: true
        },
        {
          _key: 'severity',
          prop: 'severity',
          label: '风险等级',
          render: true
        },
        {
          _key: 'keyInfo',
          prop: 'keyInfo',
          label: '关键信息',
          render: true,
          width: '300'
        },
        {
          _key: 'status',
          prop: 'status',
          label: '响应状态',
          render: true
        },
        // {
        //   _key: 'correlationEvent',
        //   prop: 'correlationEvent',
        //   label: '关联事件'
        // }
        {
          _key: 'operate',
          prop: 'operate',
          label: '操作',
          width: 50,
          render: true
        }
      ],
      menus: [
        {
          text: '查看',
          command: 'detail',
          icon: 'el-icon-s-order'
          // ruleCode: 'roleManage_update'
        }
      ],
      page: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  methods: {
    t(val) {
      return i18n.zh[val]
    },
    formatTimestamp(timestamp) {
      return moment(timestamp).format('YYYY-MM-DD HH:mm:ss')
    },
    clickRow(command, scope) { // 点击上下菜单
      if (command === 'detail') {
        // this.$router.push({ name: 'riskHostDetail', params: { id: 1 }})
        let path = ''
        if (scope.row.eventSource == 1) path = `#/asp/fence?uuid=${scope.row.guid}&timestamp=${scope.row.timestamp}`
        else if (scope.row.eventSource == 2) path = `#/asp/logRetrieval?eventId=${scope.row.guid}&timestamp=${scope.row.timestamp}`
        window.open(path, '_blank')
      }
    }
  }
}
</script>

<style>
.threatEventListTolltipClass {
  max-width: 90%;
  max-height: 600px;
  overflow-y: auto;
}
</style>
