<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 #alarmType>
        <el-form-item label="告警类型:">
          <el-select v-model="queryParam.alarmType" placeholder="请选择">
            <el-option-group
              v-for="group in staticData.alertTypeList"
              :key="group.dataId"
              :label="group.dataName"
            >
              <el-option
                v-for="item in group.subTypes"
                :key="item.dataId"
                :label="item.dataName"
                :value="item.dataId"
              />
            </el-option-group>
          </el-select>
        </el-form-item>
      </template>
      <template #extra>
        <div class="extra" style="border:0">
          <el-row type="flex" align="middle" justify="space-between">
            <el-col class="risk-tag" :span="4" style="background:#f7f7f7">
              <el-row
                class="risk-tag__content"
                type="flex"
                align="middle"
              >
                <el-col class="risk-tag__img"><img style="width:50px" src="@ability/assets/img/risk-host.png"></el-col>
                <el-col class="risk-tag__text">
                  <div class="risk-tag__text--title">风险主机数量</div>
                  <div class="risk-tag__text--num" style="color:#909399">{{ total }}</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col
              v-for="item in riskHostCount"
              :key="item.severity"
              :span="4"
              class="risk-tag"
              :style="{background:item.severity==1?'#F2F7FF'
                :item.severity==2?'#FEF7EC'
                  :item.severity==3?'#FFF5F0'
                    :'#FDF2F1'}"
            >
              <el-row
                class="risk-tag__content"
                type="flex"
                align="middle"
                @click="queryParam.riskLevel=item.severity+'';searchClick()"
              >
                <el-col class="risk-tag__img">
                  <img v-if="item.severity==1" src="@ability/assets/img/alarm1.png" @click="queryParam.riskLevel=[item.severity+''];searchClick()">
                  <img v-else-if="item.severity==2" src="@ability/assets/img/alarm2.png" @click="queryParam.riskLevel=[item.severity+''];searchClick()">
                  <img v-else-if="item.severity==3" src="@ability/assets/img/alarm3.png" @click="queryParam.riskLevel=[item.severity+''];searchClick()">
                  <img v-else src="@ability/assets/img/alarm4.png" @click="queryParam.riskLevel=[item.severity+''];searchClick()">
                </el-col>
                <el-col class="risk-tag__text">
                  <div class="risk-tag__text--title">风险等级<b
                    :style="{color:item.severity==1?'#1989FA'
                      :item.severity==2?'#F4A324'
                        :item.severity==3?'#F56C6C'
                          :'#FF0000'}"
                  >({{ item.severity==1?'低危'
                    :item.severity==2?'中危'
                      :item.severity==3?'高危'
                        :'危急' }})</b></div>
                  <div
                    class="risk-tag__text--num"
                    :style="{color:item.severity==1?'#1989FA'
                      :item.severity==2?'#F4A324'
                        :item.severity==3?'#F56C6C'
                          :'#FF0000'}"
                  >{{ item.count }}</div>
                </el-col>
              </el-row>
            </el-col>
            <!-- <el-col :span="4">风险主机数量: {{ total }}</el-col>
            <el-col :span="4">主机风险等级分布</el-col>
            <el-col v-for="item in riskHostCount" :key="item.severity" :span="4"><el-row type="flex" align="middle"><el-col :span="12"><RiskTag :level="item.severity" @click="queryParam.riskLevel=item.severity+'';searchClick()" /></el-col><el-col :span="12">{{ item.count }}</el-col></el-row></el-col> -->
          </el-row>
        </div>
      </template>
      <template #center>
        <RiskHostList
          ref="table"
          :table-data="tableData"
          :daterange="queryParam.daterange"
          @handlePageChange="search"
        />
      </template>
    </manager-ui>
  </div>
</template>
<script>
import RiskTag from '../components/RiskTag'
import RiskHostList from './components/RiskHostList'
import moment from 'moment'
import { getRiskHostList, getRiskHostSum, getAlertTypeList } from '../api/riskHost'
export default {
  components: { RiskTag, RiskHostList },
  data() {
    return {
      loading: false,
      riskHostCount: [
        {
          severity: 1, // 低危
          count: 0
        },
        {
          severity: 2, // 中危
          count: 0
        },
        {
          severity: 3, // 高危
          count: 0
        },
        {
          severity: 4, // 危急
          count: 0
        }
      ],
      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,
        riskLevel: [],
        alarmType: null,
        status: 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: 'select',
          span: 12,
          key: 'riskLevel',
          label: '风险等级',
          multiple: true,
          option: 'riskLevelList',
          optionLabel: 'label',
          optionValue: 'value'
        },
        {
          type: 'slot',
          span: 12,
          key: 'alarmType',
          slot: 'alarmType',
          label: '告警类型'
        }
      ],
      tableData: [],
      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' }
        ],
        alertTypeList: []
      }
    }
  },
  watch: {
    'queryParam.alarmType': {
      handler(val) {
        const key = 'alarmType'
        const value = this.staticData.alertTypeList
          .map(obj => obj.subTypes)
          .flat()
          .find(obj => obj.dataId === val).dataName
        this.$refs.form.setQueryStrategies({ key, label: '告警类型', value })
      }
    }
  },
  mounted() {
    this.$refs.form.setQueryStrategies({ key: 'daterange', label: '日期范围', value: this.queryParam.daterange })
    this.search()
    this.getStatics()
  },
  methods: {
    getStatics() {
      getAlertTypeList().then(resp => {
        if (resp.data.returnCode == '0') {
          this.staticData.alertTypeList = resp.data.data
        }
      })
    },
    reset() {
      Object.assign(this.$data, this.$options.data())
      this.getStatics()
      this.search()
    },
    search() { // 获取查询数据
      this.loading = true
      const page = this.$refs.table.page
      const params = {
        ip: this.queryParam.ip,
        riskLevel: this.queryParam.riskLevel,
        alarmType: this.queryParam.alarmType,
        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 = getRiskHostList(params).then((resp) => {
        if (resp.data.returnCode == '0') {
          this.tableData = resp.data.data.records
          const { total } = resp.data.data
          page.total = total
          this.total = total
        }
      })
      
      // 获取风险主机数量统计
      let two = getRiskHostSum(params).then((resp) => {
        if (resp.data.returnCode == '0') {
          this.riskHostCount = resp.data.data
        }
      })
      Promise.all([one, two])
        .then(() => this.loading = false)
        .catch(() => this.loading = false)
    },
    searchClick() { // 点击查询按钮
      const page = this.$refs.table.page
      page.current = 1
      this.search()
    }
  }
}
</script>
<style lang="scss" scoped>
@import url('../style/threatPerception.scss');
.extra{
  margin:10px;
  line-height: 24px;
}
.risk-tag{
  height: 85px;
  .risk-tag__content{
    position: relative;
    top: 50%;
    margin-top: -27.8px;
  }
  .risk-tag__img{
    text-align: center;
    img{
      width: 45px;
      height: 50px;
      cursor: pointer;
    }
  }
  .risk-tag__text{
    .risk-tag__text--title{
      font-size: 14px;
      overflow: hidden;
      white-space: nowrap;
    }
    .risk-tag__text--num{
      font-size: 20px;
      margin-top:10px;
    }
  }
}
</style>
