<template>
  <div>
    <div
      v-show="!centerButtonVisible"
      style="width: 1%;position: fixed;z-index: 999;bottom: 20px;"
    >
      <el-button
        shape="circle"
        icon="el-icon-s-unfold"
        size="large"
        type="primary"
        @click="centerButton('openBt')"
      />
    </div>
    <div
      v-show="centerButtonVisible"
      style="width: 83%;position: fixed;z-index: 999;bottom: 20px;text-align: center;"
    >
      <el-button-group>
        <el-button
          size="large"
          type="primary"
          icon="el-icon-arrow-left"
          @click="centerButton('closeBt')"
        >收缩
        </el-button>
        <!-- <el-button @click="centerButton('assign')"
                 size="large"
                 type="primary"
                 icon="el-icon-share"
                 :disabled="alarmCorrelationResult.statusTag=='3' || alarmCorrelationResult.statusTag=='4' || alarmCorrelationResult.statusTag=='5'">
        指派
      </el-button> -->
        <el-button
          size="large"
          type="primary"
          icon="el-icon-edit"
          :disabled="queryModel.status=='3' || queryModel.status=='4' || queryModel.status=='5'"
          @click="centerButton('deal')"
        >
          处理
        </el-button>
      </el-button-group>
    </div>

    <alarmResultDeal
      :type="dealType"
      :value="dealValue"
      @change="handleDealType"
      @refresh="handleDealRefresh"
    />
    <manager-detail
      :default-span="24"
      :detail-data="data"
      :static-data="staticData"
      :query-model="queryModel"
      :command="command"
      title="告警详情"
      border
      @close="$router.push({path:'/asp/threatAlert'})"
    >
      <template slot="hostIp">
        <assetAssociate :asset-ip="queryModel.hostIp" />
      </template>
      <template slot="status">
        <span
          v-if="queryModel.status === '0'"
          style="color:#F56C6C"
        ><i class="el-icon-circle-close" style="margin-right:2px" />未处理</span>
        <span
          v-else-if="queryModel.status === '3'"
          style="color:#67C23A"
        ><i class="el-icon-circle-check" style="margin-right:2px" />已处理</span>
        <span
          v-else-if="queryModel.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 slot="hostType">
        {{ queryModel.hostType=='2'?'主机':'终端' }}
      </template>
      <template slot="riskLevel">
        <RiskTag :level="queryModel.riskLevel" log />
      </template>
      <template slot="alertDetail">
        <AlarmDetailChart :id="id" :row="queryModel" />
        <ThreatEventList
          ref="table"
          style="margin-top:20px"
          :table-data="queryModel.tableData"
          @handlePageChange="search"
        />
      </template>
    </manager-detail>
  </div>
</template>
<script>
import alarmResultDeal from '../../alarmManagement/alarmResultDeal'
import assetAssociate from '../../alarmManagement/assetAssociate'
import AlarmDetailChart from './components/AlarmDetailChart'// 告警详情图表
import ThreatEventList from '../components/ThreatEventList'// 事件列表
import RiskTag from '../components/RiskTag'
import { getAlertDetail, getAlertEvent } from '../api/threatAlert'
export default {
  components: { AlarmDetailChart, ThreatEventList, alarmResultDeal, assetAssociate, RiskTag },
  props: {
    id: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      command: 'detail',
      dealType: '',
      dealValue: {},
      centerButtonVisible: true,
      queryModel: {
        // 资产 - 受害者asset
        hostIp: '',
        logicProbe: '',
        hostType: '',
        hostId: '',

        // 告警信息
        alarmCategory: '',
        alertRule: '',
        alertId: '',
        alertTime: '',
        firstTime: '',
        lastTime: '',
        total: null,
        riskLevel: '',
        reliability: '',
        status: '',

        // 告警描述及建议
        riskAnalysis: '',
        suggestion: '',

        // 趋势图
        trendData: [],

        // 饼图
        pieData: [],

        // 告警详情
        tableData: []
      },
      data: [
        {
          title: '资产 - 受害者',
          _key: 'asset',
          queryItems: [
            {
              span: 12,
              type: 'slot',
              slot: 'hostIp',
              label: '主机IP'
            },
            {
              span: 12,
              key: 'logicProbe',
              label: '逻辑探针'
            },
            {
              span: 12,
              key: 'hostType',
              label: '主机类型',
              type: 'select',
              option: 'hostTypeList',
              optionLabel: 'label',
              optionValue: 'value'
            },
            {
              span: 12,
              key: 'hostId',
              label: '主机ID'
            }
          ]
        },
        {
          title: '告警信息',
          _key: 'businessSystem',
          render: false,
          queryItems: [
            {
              span: 12,
              key: 'alarmCategory',
              label: '告警大类'
            },
            {
              span: 12,
              key: 'alertRule',
              label: '告警规则'
            },
            {
              span: 12,
              key: 'alertId',
              label: '告警ID'
            },
            {
              span: 12,
              key: 'alertTime',
              label: '告警产生时间'
            },
            {
              span: 12,
              key: 'firstTime',
              label: '首次发现时间'
            },
            {
              span: 12,
              key: 'lastTime',
              label: '最近发现时间'
            },
            {
              span: 12,
              key: 'total',
              label: '数量'
            },
            {
              span: 12,
              slot: 'riskLevel',
              label: '风险等级',
              type: 'slot'
            },
            {
              span: 12,
              key: 'reliability',
              label: '可信度',
              type: 'select',
              option: 'reliabilityList',
              optionLabel: 'label',
              optionValue: 'value'
            },
            {
              span: 12,
              type: 'slot',
              slot: 'status',
              label: '处理状态'
            }
          ]
        },
        {
          title: '告警描述及建议',
          _key: 'alertDescribe',
          render: false,
          queryItems: [
            {
              span: 24,
              key: 'riskAnalysis',
              label: '风险分析'
            },
            {
              span: 24,
              key: 'suggestion',
              label: '处理建议'
            }
          ]
        },
        {
          title: '告警详情',
          _key: 'alertDetail',
          render: true
        }
      ],
      staticData: {
        riskLevelList: [
          {
            value: '1',
            label: '轻微'
          },
          {
            value: '2',
            label: '低危'
          },
          {
            value: '3',
            label: '中危'
          },
          {
            value: '4',
            label: '高危'
          },
          {
            value: '5',
            label: '危急'
          }
        ],
        hostTypeList: [
          { label: '服务器', value: '1' },
          { label: '终端', value: '2' }
        ],
        reliabilityList: [
          {
            value: '1',
            label: '低可信'
          },
          {
            value: '2',
            label: '中可信'
          },
          {
            value: '3',
            label: '高可信'
          }
        ],
        statusList: [
          {
            value: '0',
            label: '未处理'
          },
          {
            value: '1',
            label: '已处理'
          }
        ]
      }
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    handleDealRefresh() {
      this.search()
    },
    handleDealType() {
      this.dealValue = null
    },
    centerButton(value) {
      if (value === 'close') {
        this.$router.back()
      } else if (value === 'assign') {
        // this.dealValue = this.alarmCorrelationResult
        this.dealType = 'assign'
      } else if (value === 'deal') {
        // this.dealValue = this.alarmCorrelationResult;
        // this.dealType = "dealAsk";
        this.$router.push({
          name: 'alarmBatch',
          query: { statusTag: this.queryModel.status, alertId: this.id, rectification: this.queryModel.suggestion }
        })
      } else if (value === 'openBt') {
        this.centerButtonVisible = true
      } else {
        this.centerButtonVisible = false
      }
    },
    // 查询
    search() {
      const page = this.$refs.table.page
      getAlertDetail(this.id).then((resp) => {
        if (resp.data.returnCode == '0') {
          Object.assign(this.queryModel, resp.data.data)
        }
      })
      getAlertEvent({
        alarmEventMap:
        {
          alarmUuid: this.id
        },
        page: {
          current: page.current,
          size: page.size
        }
      }).then((resp) => {
        if (resp.data.returnCode == '0') {
          this.queryModel.tableData = resp.data.data.list
          const { total } = resp.data.data.page
          page.total = total
        }
      })
    },
    // 关闭告警
    handleCloseAlert() {
      this.$confirm('确定关闭该告警?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '关闭成功!'
        })
      }).catch(() => {})
    },
    // 删除告警
    handleDeleteAlert() {
      this.$confirm('确定删除该告警?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {})
    }
  }
}
</script>
