<template>
  <manager-table
    :column-items="columnItems"
    :table-data="tableData"
    :pagination="page"
    :show-download-btn="false"
    @search="$emit('handlePageChange')"
  >
    <template #alarmList="{scope}">
      <el-tag v-for="(item,index) in scope.row.alarmList" :key="index" size="mini" :style="index===scope.row.alarmList.length?{}:{'margin-right':'2px'}">{{ item.name }}</el-tag>
    </template>
    <template #hostType="{scope}">
      {{ scope.row.hostType==1?'服务器':'终端' }}
    </template>
    <template #riskLevel="{scope}">
      <RiskTag :level="scope.row.riskLevel" />
    </template>
    <template #operate="{scope}">
      <el-context-menu
        :menus="menus"
        :scope="scope"
        :default="3"
        @oper="clickRow"
      />
    </template>
  </manager-table>
</template>

<script>
import RiskTag from '../../components/RiskTag'
export default {
  name: 'RiskHostList',
  components: { RiskTag },
  props: {
    tableData: {
      required: true,
      type: Array
    },
    daterange: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      columnItems: [
        {
          _key: 'hostIp',
          prop: 'hostIp',
          label: '受害主机IP'
        },
        {
          _key: 'hostType',
          prop: 'hostType',
          label: '主机类型',
          render: true
        },
        {
          _key: 'alarmList',
          prop: 'alarmList',
          label: '告警类型',
          render: true,
          width: '400'
        },
        {
          _key: 'startTime',
          prop: 'startTime',
          label: '首次发现时间'
        },
        {
          _key: 'endTime',
          prop: 'endTime',
          label: '最近发现时间'
        },
        {
          _key: 'alarmTotal',
          prop: 'alarmTotal',
          label: '告警量'
        },
        {
          _key: 'riskLevel',
          prop: 'riskLevel',
          label: '风险等级',
          render: true
        },
        {
          _key: 'operate',
          prop: 'operate',
          label: '操作',
          render: true
        }
      ],
      menus: [
        {
          text: '查看',
          command: 'detail',
          icon: 'el-icon-s-order'
          // ruleCode: 'roleManage_update'
        }
      ],
      page: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  methods: {
    clickRow(command, scope) { // 点击上下菜单
      if (command === 'detail') {
        const path = `#/asp/riskHost/detail/${scope.row.hostId}?startTime=${this.daterange[0]}&endTime=${this.daterange[1]}`
        window.open(path, '_blank')
      }
    }
  }
}
</script>

<style>

</style>
