<template>
  <div>
    <manager-ui
      :loading="loading"
      ref="form"
      :show-add-btn="false"
      :query-model="queryParam"
      :query-items="queryItems"
      :static-data="staticData"
      :table-data="tableData"
      :show-pagination="false"
      @searchClick="searchClick"
      @resetForm="reset"
    >
      <template #extra>
        <el-row :gutter="10" style="margin:10px 5px">
          <el-col :span="5">
            <div class="extra">
              <AlertMenu
                :data="tree"
                @handleSelectOpen="queryParam.alarmType=$event;search()"
                @handleSelectChange="queryParam.alarmTypeSub=$event;search()"
                @handleMenuChange="extraStyle.height=$event"
              />
            </div>
          </el-col>
          <el-col :span="19">
            <div class="extra" style="min-height:200px">
              <div class="box-title">告警趋势统计</div>
              <ThreatTrendStatistics
                :daterange="queryParam.daterange"
                :data="lineData"
                :height="extraStyle.height.split('px')[0]-25+'px'"
              />
            </div></el-col>
        </el-row>
      </template>
      <template #center>
        <ThreatAlarmList
          ref="table"
          :table-data="tableData"
          @handlePageChange="search"
        />
      </template>
    </manager-ui>
  </div>
</template>
<script>
import moment from 'moment'
import AlertMenu from './components/AlertMenu'
import ThreatAlarmList from './components/ThreatAlarmList'
import ThreatTrendStatistics from './components/ThreatTrendStatistics'
import { getAlertList, getAlarmLine } from '../api/threatAlert'
import { getDatasourceType } from '@ability/views/alarmManagement/api/alarm-result'
export default {
  components: { AlertMenu, ThreatAlarmList, ThreatTrendStatistics },
  data() {
    return {
      loading: false,
      tree: [],
      lineData: {
        xData: [],
        barData: []
      },
      queryParam: {
        hostType: null,
        daterange: [moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')],
        hostIp: null,
        hostId: null,
        riskLevel: [],
        status: [],
        alertId: null,
        alarmType: null, // 告警大类 点击告警树的父节点
        alarmTypeSub: null, // 告警小类 点击告警数的子节点
        alertRule: null, // 告警规则
        alertSources: [] // 告警来源
      },
      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: 'alertId',
          label: '告警ID'
        },
        {
          type: 'input',
          span: 12,
          key: 'alertRule',
          label: '告警规则'
        },
        {
          type: 'select',
          span: 12,
          key: 'alertSources',
          placeholder: '请选择告警来源',
          label: '告警来源',
          multiple: true,
          option: 'datasourceType',
          optionLabel: 'dataName',
          optionValue: 'dataId'
        },
        {
          type: 'input',
          span: 12,
          key: 'hostIp',
          label: '主机IP'
        },
        // {
        //   type: 'input',
        //   span: 12,
        //   key: 'hostId',
        //   label: '主机ID'
        // },
        {
          type: 'select',
          span: 12,
          key: 'riskLevel',
          label: '风险等级',
          multiple: true,
          option: 'riskLevelList',
          optionLabel: 'label',
          optionValue: 'value'
        },
        {
          type: 'select',
          span: 12,
          key: 'status',
          label: '处理状态',
          multiple: true,
          option: 'statusList',
          optionLabel: 'label',
          optionValue: 'value'
        }
      ],
      tableData: [],
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      menus: [
        {
          text: '查看',
          command: 'detail',
          icon: 'el-icon-s-order'
          // ruleCode: 'roleManage_update'
        }
      ],
      staticData: {
        hostTypeList: [
          { label: '服务器', value: '1' },
          { label: '终端', value: '2' }
        ],
        riskLevelList: [
          { label: '轻微', value: '1' },
          { label: '低危', value: '2' },
          { label: '中危', value: '3' },
          { label: '高危', value: '4' },
          { label: '危急', value: '5' }
        ],
        alertTypeList: [],
        statusList: [
          { label: '未处理', value: '0' },
          { label: '已处理', value: '3' },
          { label: '已清除', value: '4' },
          { label: '已忽略', value: '5' },
          { label: '待审核', value: '6' }
        ],
        datasourceType: []
      },
      extraStyle: {
        height: '200px'
      }
    }
  },
  computed: {
    datasourceType() {
      return this.$store.state.alarm.datasourceType
    }
  },
  created: function() {
    this.$store.dispatch('alarm/getAllAlarmStaticList')
    getDatasourceType().then((resp) => {
      if (resp.data.returnCode == '0') {
        this.staticData.datasourceType = resp.data.data.list
      }
    })
  },
  mounted() {
    this.$refs.form.setQueryStrategies({ key: 'daterange', label: '日期范围', value: this.queryParam.daterange })
    if (this.$route.query.hostIp) {
      this.queryParam.hostIp = this.$route.query.hostIp
      this.$refs.form.setQueryStrategies({ key: 'hostIp', label: '主机IP', value: this.queryParam.hostIp })
    }
    if (this.$route.query.alarmName) {
      this.queryParam.alertRule = this.$route.query.alarmName
      this.$refs.form.setQueryStrategies({ key: 'alertRule', label: '告警规则', value: this.queryParam.alertRule })
    }
    //this.staticData.datasourceType = this.datasourceType
    this.search()
  },
  methods: {
    reset() {
      Object.assign(this.$data, this.$options.data())
      this.staticData.datasourceType = this.datasourceType
      this.search()
    },
    search() { // 获取查询数据
      this.loading = true
      const page = this.$refs.table.page
      const alarmResultMap = this.queryParam
      let one = getAlertList({ alarmResultMap, page }).then((resp) => {
        if (resp.data.returnCode == '0') {
          this.tableData = resp.data.data.list
          this.tree = resp.data.data.tree
          const { total } = resp.data.data.page
          page.total = total
        }
      })
      let two = this.getLineData()
      Promise.all([one, two])
        .then(() => this.loading = false)
        .catch(() => this.loading = false)
    },
    getLineData() {
      const page = this.$refs.table.page
      const alarmResultMap = this.queryParam
      return getAlarmLine({ alarmResultMap, page }).then(resp => {
        if (resp.data.returnCode == '0') {
          this.lineData = resp.data.data
        }
      })
    },
    searchClick() { // 点击查询按钮
      const page = this.$refs.table.page
      page.current = 1
      this.search()
    }
  }
}
</script>
<style lang="scss" scoped>
@import url('../style/threatPerception.scss');
</style>
