<template>
  <manager-table
    :column-items="columnItems"
    :table-data="tableData"
    :pagination="page"
    :show-download-btn="false"
    @search="$emit('handlePageChange')"
  >
    <template #correlationTime="{scope}">
      {{ formatTimestamp(scope.row.timestamp) }}
    </template>
    <template #categoryLabel="{scope}">
      <el-tag v-for="(item,index) in scope.row.categoryLabel" :key="index" size="mini" :style="index===scope.row.categoryLabel.length?{}:{'margin-right':'2px'}">1</el-tag>
    </template>
    <template #hostType="{scope}">
      {{ scope.row.hostType==1?'服务器':'终端' }}
    </template>
    <template #correlationStage="{scope}">
      <el-progress
        :text-inside="true"
        :stroke-width="20"
        :percentage="scope.row.level/scope.row.levelTotal*100"
        :format="(percentage)=>scope.row.level+'/'+scope.row.levelTotal"
        color="#F56C6C"
      />
    </template>
    <template #status="{scope}">
      <span v-if="scope.row.status=='1'" style="color:#F56C6C"><i class="el-icon-circle-check" style="margin-right:2px" />关联完成</span>
      <span v-else style="color:#E6A23C"><i class="el-icon-circle-close" style="margin-right:2px" />关联中</span>
    </template>
    <template #operate="{scope}">
      <el-context-menu
        :menus="menus"
        :scope="scope"
        :default="3"
        @oper="clickRow"
      />
    </template>
  </manager-table>
</template>

<script>
import moment from 'moment'
export default {
  name: 'ThreatCorrelationList',
  props: {
    tableData: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
      columnItems: [
        {
          _key: 'correlationTime',
          prop: 'correlationTime',
          label: '关联时间',
          render: true
        },
        {
          _key: 'hostType',
          prop: 'hostType',
          label: '主机类型',
          render: true
        },
        {
          _key: 'category',
          prop: 'category',
          label: '规则分类'
        },
        {
          _key: 'hostIp',
          prop: 'hostIp',
          label: '主机IP'
        },
        {
          _key: 'correlationStage',
          prop: 'correlationStage',
          label: '关联阶段',
          render: true
        },
        {
          _key: 'rule',
          prop: 'rule',
          label: '告警规则'
        },
        {
          _key: 'status',
          prop: 'status',
          label: '关联状态',
          render: true
        },
        {
          _key: 'operate',
          prop: 'operate',
          label: '操作',
          render: true,
          align: 'center'
        }
      ],
      menus: [
        {
          text: '查看',
          command: 'detail',
          icon: 'el-icon-s-order'
          // ruleCode: 'roleManage_update'
        }
      ],
      page: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  methods: {
    formatTimestamp(timestamp) {
      return moment(timestamp).format('YYYY-MM-DD HH:mm:ss')
    },
    clickRow(command, scope) { // 点击上下菜单
      if (command === 'detail') {
        const path = `#/asp/threatCorrelation/detail/${scope.row.kcId}`
        window.open(path, '_blank')
      }
    }
  }
}
</script>

<style>

</style>
