<template>
  <div>
    <manager-table
      :column-items="columnItems"
      :table-data="tableData"
      :pagination="page"
      :show-download-btn="false"
      @search="$emit('handlePageChange')"
    >
      <template #expand="{scope}">
        <div style="padding:10px;background:rgb(245,247,250)"><AlarmDetailChart :id="scope.row.alertId" :row="scope.row" /></div>
      </template>
      <template #hostIp="{scope}">
        <assetAssociate :asset-ip="scope.row.hostIp" />
      </template>
      <template #riskLevel="{scope}">
        <RiskTag :level="scope.row.riskLevel" log />
      </template>
      <template #alarmTag="{scope}">
        <el-tag v-for="(item,index) in scope.row.alertTags" :key="index" size="mini" :style="index===scope.row.alertTags.length?{}:{'margin-right':'2px'}">{{ item }}</el-tag>
      </template>
      <template #hostType="{scope}">
        {{ scope.row.hostType==1?'服务器':'终端' }}
      </template>
      <template #alertTime="{scope}">
        {{ formatTimestamp(scope.row.alertTime) }}
      </template>
      <template #status="{scope}">
        <span
          v-if="scope.row.status === '0'"
          style="color:#F56C6C"
        ><i class="el-icon-circle-close" style="margin-right:2px" />未处理</span>
        <span
          v-else-if="scope.row.status === '3'"
          style="color:#67C23A"
        ><i class="el-icon-circle-check" style="margin-right:2px" />已处理</span>
        <span
          v-else-if="scope.row.status === '4'"
          style="color:#778899"
        ><i
          class="el-icon-remove-outline"
          style="margin-right:2px"
        />已清除</span>
        <span
          v-else-if="scope.row.status === '5'"
          style="color:#E6A23C"
        ><i
          class="el-icon-remove-outline"
          style="margin-right:2px"
        />已忽略</span>
        <span
          v-else
          style="color:#409EFF"
        ><i class="el-icon-document" style="margin-right:2px" />待审核</span>
      </template>
      <template #operate="{scope}">
        <el-context-menu
          :menus="menus"
          :scope="scope"
          :default="3"
          :visibles="[scope.row.status=='0'||scope.row.status=='6']"
          @oper="clickRow"
        />
      </template>
    </manager-table>
    <alarmResultDeal
      :type="dealType"
      :value="dealValue"
      @change="handleDealType"
      @refresh="handleDealRefresh"
    />
  </div>
</template>

<script>
import alarmResultDeal from '../../../alarmManagement/alarmResultDeal'
import assetAssociate from '../../../alarmManagement/assetAssociate'
import moment from 'moment'
import RiskTag from '../../components/RiskTag'
import AlarmDetailChart from './AlarmDetailChart'
export default {
  name: 'ThreatAlarmList',
  components: { RiskTag, AlarmDetailChart, alarmResultDeal, assetAssociate },
  props: {
    tableData: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
      dealType: '',
      dealValue: {},
      centerButtonVisible: true,
      columnItems: [
        {
          _key: 'expand',
          prop: 'expand',
          type: 'expand',
          render: true
        },
        {
          _key: 'hostIp',
          prop: 'hostIp',
          label: '主机IP',
          render: true,
          width: 110
        },
        {
          _key: 'hostType',
          prop: 'hostType',
          label: '主机类型',
          render: true
        },
        {
          _key: 'alertRule',
          prop: 'alertRule',
          label: '告警规则',
          width: 150
        },
        {
          _key: 'alarmTag',
          prop: 'alarmTag',
          label: '分类标签',
          render: true,
          width: 300
        },
        {
          _key: 'alertTime',
          prop: 'alertTime',
          label: '告警产生时间',
          render: true,
          width: 140
        },
        {
          _key: 'total',
          prop: 'total',
          label: '告警量'
        },
        {
          _key: 'riskLevel',
          prop: 'riskLevel',
          label: '风险等级',
          render: true
        },
        {
          _key: 'status',
          prop: 'status',
          label: '处理状态',
          render: true
        },
        {
          _key: 'operate',
          prop: 'operate',
          label: '操作',
          render: true
        }
      ],
      menus: [
        {
          text: '查看',
          command: 'detail',
          icon: 'el-icon-s-order'
          // ruleCode: 'roleManage_update'
        },
        {
          text: '处理',
          visible: true,
          command: 'handle',
          icon: 'el-icon-edit'
          // ruleCode: 'alarmManagement_deal'
        }
      ],
      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 = scope.row.alertSource != '2'
          ? '#/asp/alarmResultsDetail?id=' + scope.row.alertId
          : `#/asp/threatAlert/detail/${scope.row.alertId}`
        window.open(path, '_blank')
      } else if (command === 'handle') {
        this.handleDeal(scope.row)
      }
    },
    handleDealType() {
      this.dealValue = null
    },
    handleDealRefresh() {
      this.search()
    },
    // 指派
    handleAssign(row) {
      this.dealValue = row
      this.dealType = 'assign'
    },
    // 处理
    handleDeal(row) {
      // this.dealValue = row;
      // this.dealType = "dealAsk";
      let routeData = this.$router.resolve({
        name: 'alarmBatch',
        query: { statusTag: row.status, alertId: row.alertId, rectification: row.rectification }
      })
      window.open(routeData.href, "_blank");
    }
  }
}
</script>

<style>

</style>
