<template>
  <div>
    <manager-ui
      :loading="loading"
      ref="form"
      :show-add-btn="false"
      :query-model="queryParam"
      :query-items="queryItems"
      :static-data="staticData"
      :show-pagination="false"
      @searchClick="searchClick"
      @resetForm="reset"
    >
      <template #extra>
        <el-row :gutter="10" style="margin:10px 5px">
          <el-col :span="8"><div class="extra"><div class="box-title">主机聚合</div><HostAggregationList ref="HostAggregationList" :qurey-param="queryParam" /></div></el-col>
          <el-col :span="8"><div class="extra"><div class="box-title">规则分类TOP10</div><RuleClassificationStatistics :data="barData" /></div></el-col>
          <el-col :span="8"><div class="extra"><div class="box-title">关联趋势</div><AlarmTrendStatistics :data="trendData" /></div></el-col>
        </el-row>
      </template>
      <template #center>
        <ThreatCorrelationList
          ref="table"
          :table-data="tableData"
          @handlePageChange="search"
        />
      </template>
    </manager-ui>
  </div>
</template>
<script>
import moment from 'moment'
import HostAggregationList from './components/HostAggregationList'
import RuleClassificationStatistics from './components/RuleClassificationStatistics'
import AlarmTrendStatistics from '../components/AlarmTrendStatistics'
import ThreatCorrelationList from '../components/ThreatCorrelationList'
import { getCorrelationList, getAggregationStatistics } from '../api/threatCorrelation'
export default {
  components: { ThreatCorrelationList, HostAggregationList, RuleClassificationStatistics, AlarmTrendStatistics },
  data() {
    return {
      loading: false,
      queryParam: {
        hostType: null,
        daterange: [moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')],
        ip: null,
        hostId: null,
        status: null,
        category: null
      },
      queryItems: [
        {
          type: 'select',
          span: 12,
          key: 'hostType',
          label: '主机类型',
          option: 'hostTypeList',
          optionLabel: 'label',
          optionValue: 'value'
        },
        {
          type: 'datetime',
          dataType: 'datetimerange',
          span: 12,
          key: 'daterange',
          label: '日期范围',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          format: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          type: 'input',
          span: 12,
          key: 'ip',
          label: '主机IP'
        },
        {
          type: 'input',
          span: 12,
          key: 'hostId',
          label: '主机ID'
        },
        {
          type: 'select',
          span: 12,
          key: 'category',
          label: '规则分类',
          option: 'categoryKeyList',
          optionLabel: 'label',
          optionValue: 'value'
        },
        {
          type: 'select',
          span: 12,
          key: 'status',
          label: '关联状态',
          option: 'statusList',
          optionLabel: 'label',
          optionValue: 'value'
        }
      ],
      tableData: [],
      trendData: [],
      barData: {
        xData: [],
        yData: []
      },
      menus: [
        {
          text: '查看',
          command: 'detail',
          icon: 'el-icon-s-order'
          // ruleCode: 'roleManage_update'
        }
      ],
      staticData: {
        hostTypeList: [
          { label: '服务器', value: '1' },
          { label: '终端', value: '2' }
        ],
        categoryKeyList: [
          { label: '攻击关联', value: 'cc_killchain' },
          { label: 'APT情报关联', value: 'cc_apt' },
          { label: '拒绝服务攻击关联', value: 'cc_ddos' },
          { label: '自定义关联', value: 'cc_custom' }
        ],
        statusList: [
          { label: '关联中', value: '0' },
          { label: '关联完成', value: '1' }
        ]
      }
    }
  },
  mounted() {
    this.$refs.form.setQueryStrategies({ key: 'daterange', label: '日期范围', value: this.queryParam.daterange })
    this.search()
  },
  methods: {
    reset() {
      Object.assign(this.$data, this.$options.data())
      this.search()
      this.$refs.HostAggregationList.search({
        ip: this.queryParam.ip,
        status: this.queryParam.status,
        hostId: this.queryParam.hostId,
        category: this.queryParam.category,
        hostType: this.queryParam.hostType,
        startTime: this.queryParam.daterange
          ? this.queryParam.daterange[0]
          : this.queryParam.daterange,
        endTime: this.queryParam.daterange
          ? this.queryParam.daterange[1]
          : this.queryParam.daterange,
        currentPage: 1,
        pageSize: 5
      })
    },
    searchClick() {
      this.search()
      this.$refs.HostAggregationList.search()
    },
    search() {
      this.loading = true
      const page = this.$refs.table.page
      const params = {
        ip: this.queryParam.ip,
        status: this.queryParam.status,
        hostId: this.queryParam.hostId,
        category: this.queryParam.category,
        hostType: this.queryParam.hostType,
        startTime: this.queryParam.daterange ? this.queryParam.daterange[0] : this.queryParam.daterange,
        endTime: this.queryParam.daterange ? this.queryParam.daterange[1] : this.queryParam.daterange,
        currentPage: page.current,
        pageSize: page.size
      }
      // 获取列表数据
      let one = getCorrelationList(params).then((resp) => {
        if (resp.data.returnCode == '0') {
          this.tableData = resp.data.data.records
          const { total } = resp.data.data
          page.total = total
        }
      })
      // 获取规则分类top10、关联趋势
      let two = getAggregationStatistics(params).then((resp) => {
        if (resp.data.returnCode == '0') {
          const xData = resp.data.data.categoryAgg.map(obj => obj.category)
          const yData = resp.data.data.categoryAgg.map(obj => obj.count)
          this.barData.xData = xData
          this.barData.yData = yData
          const trendData = resp.data.data.dateAgg.map(obj => { return { count: obj.count, timestamp: moment(obj.date).format('x') * 1 } })
          this.trendData = trendData
        }
      })
      Promise.all([one, two])
        .then(() => this.loading = false)
        .catch(() => this.loading = false)
    }
  }
}
</script>
<style lang="scss" scoped>
@import url('../style/threatPerception.scss');
.extra{
  border: 1px solid #f4f4f4;
  height: 250px;
  .box-title{
    font-size:14px;
    padding: 0 5px;
    line-height: 25px;
    height: 25px;
  }
}
</style>
