
<template>
  <div class="threat-correlation-detail">
    <manager-detail
      :default-span="24"
      :detail-data="data"
      :static-data="staticData"
      :query-model="queryModel"
      :command="command"
      title="详情"
      border
      @close="$router.push({path:'/asp/threatCorrelation'})"
    >
      <template slot="correlationStage">
<!--        <div style="font-size: 14px;margin-bottom:20px">-->
<!--          该关联有-->
<!--          <span class="count">{{ queryModel.stepList.length }}</span> 阶段,-->
<!--          已完成第 <span class="count">{{ queryModel.level }}</span> 阶段-->
<!--        </div>-->
        <el-steps :active="queryModel.level" align-center finish-status="success">
          <el-step v-for="item in queryModel.stepList" :key="item.index">
            <template slot="title">
              <el-badge :hidden="item.index!==index" is-dot>
                <el-button
                  :disabled="!item.done"
                  type="text"
                  @click="handleClickStage(item.index)"
                >{{ item.name }}</el-button></el-badge>
            </template></el-step>
        </el-steps>
      </template>
      <template slot="event">
        <ThreatEventList ref="ThreatEventList" :table-data="queryModel.tableData" @handlePageChange="handleClickStage(index)" />
      </template>
    </manager-detail>
  </div>
</template>
<script>
import { getCorrelationDetail, getEventList } from '../api/threatCorrelation'
import ThreatEventList from '../components/ThreatEventList'// 事件列表
import moment from 'moment'
export default {
  components: {
    ThreatEventList
  },
  props: {
    id: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      index: null,
      command: 'detail',
      queryModel: {
        // 关联信息
        kcId: '',
        correlationTime: '',
        category: '',
        rule: '',
        firstSeen: '',
        lastSeen: '',
        hostIp: '',
        status: '',
        probeName: '',
        // 关联阶段
        level: 0,
        levelTotal: 0,
        // 事件列表
        tableData: [],
        // 步骤
        stepList: []
      },
      data: [
        {
          title: '关联信息',
          _key: 'correlationInformation',
          render: false,
          queryItems: [
            {
              span: 12,
              key: 'kcId',
              label: '关联ID'
            },
            {
              span: 12,
              key: 'correlationTime',
              label: '关联时间'
            },
            {
              span: 12,
              key: 'category',
              label: '规则分类'
            },
            {
              span: 12,
              key: 'rule',
              label: '规则名称'
            },
            {
              span: 12,
              key: 'firstSeen',
              label: '首次发现时间'
            },
            {
              span: 12,
              key: 'lastSeen',
              label: '最近发现时间'
            },
            {
              span: 12,
              key: 'hostIp',
              label: '受害主机'
            },
            {
              span: 12,
              type: 'select',
              key: 'status',
              label: '状态',
              option: 'statusList',
              optionLabel: 'label',
              optionValue: 'value'
            },
            // {
            //   span: 12,
            //   key: 'probeName',
            //   label: '逻辑探针组'
            // }
          ]
        },
        {
          title: '关联阶段',
          _key: 'correlationStage',
          render: true
        },
        {
          title: '攻击阶段',
          _key: 'event',
          render: true
        }
      ]
    }
  },
  computed: {
    staticData() {
      return {
        statusList: [
          { label: '关联完成', value: 1 },
          { label: '关联中', value: 0 }
        ]
      }
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    handleClickStage(index) {
      this.index = index
      const params = {
        kcId: this.id,
        step: this.index,
        currentPage: this.$refs.ThreatEventList.page.current,
        pageSize: this.$refs.ThreatEventList.page.size
      }
      getEventList(params).then((resp) => {
        if (resp.data.returnCode == '0') {
          this.queryModel.tableData = resp.data.data.records
          this.$refs.ThreatEventList.page.total = resp.data.data.total
        }
      })
    },
    search() {
      getCorrelationDetail(this.id).then((resp) => {
        if (resp.data.returnCode == '0') {
          Object.assign(this.queryModel, resp.data.data)
          this.queryModel.correlationTime = moment(resp.data.data.timestamp).format('YYYY-MM-DD HH:mm:ss')
        }
      })
      this.handleClickStage(null)
    }
  }
}
</script>
<style>

</style>
<style lang="scss">
.threat-correlation-detail {
  .count {
    font-size: 24px;
    color: #1ea1f3;
  }
  .el-step__head.is-success{
    color: #F56C6C;
    border-color: #F56C6C;
  }
  .el-step__title{
    .el-button--text{
     font-size: 14px;
    }
  }
  .el-step__title.is-process{
    .el-button--text{
    color: #303133;
    }
  }
  .el-step__title.is-success{
    color: #F56C6C;
    .el-button--text{
      color: #F56C6C;
    }
    .el-button--text:hover{
      color: #ff9f9f;
    }
  }
  .el-step__title.is-wait{
    .el-button.is-disabled, .el-button.is-disabled:hover, .el-button.is-disabled:focus{
      color:#C0C4CC;
    }
  }

}
</style>

