<template>
  <div>
    <manager-detail
      :default-span="24"
      :detail-data="data"
      :static-data="staticData"
      :query-model="queryModel"
      :command="command"
      border
      title="详情"
      @close="$router.push({path:'/asp/riskHost'})"
    >
      <template
        slot="assetWeight"
      >
        <el-progress
          :stroke-width="12"
          :percentage="queryModel.assetWeight*20"
          :format="(percentage)=>percentage/20+'/5'"
          style="width:200px;line-height:2"
        />
      </template>
      <template
        slot="riskLevel"
      >
        <RiskTag :level="queryModel.riskLevel" />
      </template>
      <template
        slot="alarmList"
      >
        <el-tag v-for="(item,index) in queryModel.alarmList" :key="index" size="mini" style="margin-right:5px">{{ item.name }}</el-tag>
      </template>
      <template slot="alarmTotal">
        {{ queryModel.alarmTotal }}
        <!-- <el-button type="primary" style="margin-left:10px" size="mini">查看</el-button> -->
      </template>
      <template slot="event">
        <el-button type="primary" size="mini">查看</el-button>
      </template>
<!--      <template slot="otherInfomation">-->
<!--        <el-collapse v-model="activeNames">-->
<!--          <el-collapse-item :title="'账号信息 - '+queryModel.accountList.length" name="1">-->
<!--            <el-table :data="queryModel.accountList">-->
<!--              <el-table-column prop="appName" label="应用名称" />-->
<!--              <el-table-column prop="appUser" label="用户" />-->
<!--            </el-table>-->
<!--          </el-collapse-item>-->
<!--          <el-collapse-item :title="'服务 - '+queryModel.serviceList.length" name="2">-->
<!--            <el-table :data="queryModel.serviceList">-->
<!--              <el-table-column prop="" label="服务名称" />-->
<!--              <el-table-column prop="" label="协议" />-->
<!--              <el-table-column prop="" label="端口" />-->
<!--            </el-table>-->
<!--          </el-collapse-item>-->
<!--          <el-collapse-item :title="'软件信息 - '+queryModel.softwareList.length" name="3">-->
<!--            <el-table :data="queryModel.softwareList">-->
<!--              <el-table-column prop="softwareName" label="软件名称" />-->
<!--              <el-table-column prop="softwareType" label="软件类别" />-->
<!--              <el-table-column prop="" label="版本" />-->
<!--            </el-table>-->
<!--          </el-collapse-item>-->
<!--          <el-collapse-item :title="'域名信息 - '+queryModel.domainList.length" name="4">-->
<!--            <el-table :data="queryModel.domainList">-->
<!--              <el-table-column prop="" label="域名" />-->
<!--            </el-table>-->
<!--          </el-collapse-item>-->
<!--        </el-collapse>-->
<!--      </template>-->
      <template slot="hostAlert">
        <div>
          <div class="box-title">主机行为活跃度</div>
          <div><HostActivityStatistics width="100%" height="300px" :chart-data="queryModel.ruleHis" /></div>
        </div>
        <div>
          <div class="box-title">主机行为</div>
          <div class="timeline">
            <el-timeline :reverse="true">
              <el-timeline-item
                v-for="(item,index) in queryModel.alertList"
                :key="index"
                type="danger"
                size="large"
                :timestamp="formatTimestamp(item.timestamp)"
                placement="top"
              >
                <div class="timeline-item-conent">
                  <el-row :gutter="20">
                    <el-col :span="10">
                      <div class="title">
                        <span style="cursor: pointer" @click="toTheatAlert(item)">{{ item.alarmTagName +' - '+item.classification }}</span>
                        <b class="danger">{{ ' '+ item.alarmTotal }} 次</b>
                      </div>
                      <div class="title" v-if="item.alarmName!=null">
                        <span style="cursor: pointer">规则:{{ item.alarmName }}</span>
                      </div>
                      <div class="title" v-if="item.attackStageName!=null">
                        <span style="cursor: pointer">攻击阶段:{{ item.attackStageName }}</span>
                      </div>
                      <br>
                      <div class="content">
                        {{ item.startTime+' - '+item.endTime }}
                        <br>
                        <span v-if="item.description!=null && item.description!=''">描述:{{ item.description }}</span>
                        <br>
                        <span v-if="item.suggestion!=null && item.suggestion!=''">建议:{{ item.suggestion }}</span>
                      </div>
                    </el-col>
                    <el-col :span="14">
                      <ProcessBack :item="item" />
                    </el-col>
                  </el-row>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>

      </template>
      <template slot="realTimeCorrelation">
        <ThreatCorrelationList
          ref="table"
          :table-data="queryModel.tableData"
          @handlePageChange="search"
        />
      </template>
    </manager-detail>
  </div>
</template>
<script>
import moment from 'moment'
import RiskTag from '../components/RiskTag'
import ThreatCorrelationList from '../components/ThreatCorrelationList'
import HostActivityStatistics from './components/HostActivityStatistics'
import ProcessBack from '../components/ProcessBack'
import { getRiskHostDetail, getHostAlarmList } from '../api/riskHost'
import { getCorrelationList } from '../api/threatCorrelation'
export default {
  components: {
    RiskTag, ThreatCorrelationList, HostActivityStatistics, ProcessBack
  },
  props: {
    id: {
      type: [Number, String],
      required: true
    },
    startTime: {
      type: String,
      required: true
    },
    endTime: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      command: 'detail',
      activeNames: [],
      queryModel: {
        // 主机信息riskHost
        hostIp: null,
        hostName: null,
        hostId: null,
        hostType: null,
        assetWeight: null,
        findWay: null,
        probeName: null,
        os: null,
        mac: null,
        owner: null,
        describe: null,
        // 其他信息otherInformation
        serviceList: [],
        accountList: [],
        domainList: [],
        softwareList: [],
        // 威胁信息threatInformation
        startTime: null,
        endTime: null,
        riskLevel: '',
        alarmTotal: null,
        alarmList: null,
        // 主机告警hostAlert
        alertList: [],
        ruleHis: [],
        // 实时关联realTimeCorrelation
        tableData: []
      },
      data: [
        {
          title: '主机信息',
          _key: 'riskHost',
          render: false,
          queryItems: [
            {
              span: 12,
              key: 'hostIp',
              label: '主机IP'
            },
            {
              span: 12,
              key: 'hostName',
              label: '主机名称'
            },
            {
              span: 12,
              key: 'hostId',
              label: '主机ID'
            },
            {
              span: 12,
              key: 'hostType',
              label: '主机类型',
              type: 'select',
              option: 'hostTypeList',
              optionLabel: 'label',
              optionValue: 'value'
            },
            // {
            //   span: 12,
            //   type: 'slot',
            //   slot: 'assetWeight',
            //   label: '资产值'
            // },
            {
              span: 12,
              key: 'findWay',
              label: '识别方式'
            },
            // {
            //   span: 12,
            //   key: 'probeName',
            //   label: '逻辑探针组'
            // },
            {
              span: 12,
              key: 'os',
              label: '操作系统'
            },
            // {
            //   span: 12,
            //   key: 'mac',
            //   label: 'Mac地址'
            // },
            // {
            //   span: 12,
            //   key: 'owner',
            //   label: '所有者'
            // },
            // {
            //   span: 24,
            //   key: 'describe',
            //   label: '描述'
            // }
          ]
        },
        // {
        //   title: '其他信息',
        //   _key: 'otherInfomation',
        //   render: true
        // },
        {
          title: '威胁信息',
          _key: 'threatInformation',
          render: false,
          queryItems: [
            {
              span: 12,
              key: 'startTime',
              label: '首次发现时间'
            },
            {
              span: 12,
              key: 'endTime',
              label: '最近发现时间'
            },
            {
              span: 12,
              slot: 'riskLevel',
              type: 'slot',
              label: '风险等级'
            },
            {
              span: 12,
              slot: 'alarmTotal',
              type: 'slot',
              label: '告警量'
            },
            {
              span: 24,
              slot: 'alarmList',
              type: 'slot',
              label: '告警标签'
            }
            // {
            //   span: 24,
            //   slot: 'event',
            //   type: 'slot',
            //   label: '威胁事件'
            // }
          ]
        },
        {
          title: '主机告警',
          _key: 'hostAlert',
          render: true
        },
        {
          title: '实时关联',
          _key: 'realTimeCorrelation',
          render: true
        }
      ]
    }
  },
  computed: {
    staticData() {
      return {
        hostTypeList: [
          { label: '服务器', value: 1 },
          { label: '终端', value: 2 }
        ]
      }
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    toTheatAlert(item) {
      let path = `#/asp/threatAlert?hostIp=${item.hostIp}&alarmName=${item.alarmName}`
      window.open(path, '_blank')
    },
    formatTimestamp(timestamp) {
      return moment(timestamp).format('YYYY-MM-DD HH:mm:ss')
    },
    search() {
      const page = this.$refs.table.page
      // 获取详情
      getRiskHostDetail({ hostId: this.id, startTime: null, endTime: null }).then((resp) => {
        if (resp.data.returnCode == '0') {
          console.log(resp.data.data)
          Object.assign(this.queryModel, resp.data.data)
        }
      })
      // 获取主机告警行为
      getHostAlarmList({ hostId: this.id, startTime: null, endTime: null }).then((resp) => {
        if (resp.data.returnCode == '0') {
          const arr = resp.data.data.ruleHis.map(obj => {
            return obj.timestampList.map(item => [item.timestamp, obj.alarmRuleName, item.count])
          }).flat()
          this.queryModel.alertList = resp.data.data.alarmList
          this.queryModel.ruleHis = arr
        }
      })
      // 获取威胁关联列表
      getCorrelationList({
        hostId: this.id,
        startTime: null,
        endTime: null,
        currentPage: page.current,
        pageSize: page.size
      }).then((resp) => {
        if (resp.data.returnCode == '0') {
          this.queryModel.tableData = resp.data.data.records
          const { total } = resp.data.data
          page.total = total
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import url('../style/threatPerception.scss');
.timeline-item-conent{
  padding: 10px;
  background: rgba(238, 238, 238, 0.3);
}

</style>
<style>
.timeline .el-timeline-item__timestamp{
  font-size: 16px;
  line-height: 25px;
  height: 25px;
  color: #303133;
  font-weight: 700;
}
</style>
