<template>
  <div class="alertMenu" :style="style">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      style="border:none"
      unique-opened
      @open="handleOpen"
      @select="handleSelect"
    >
      <el-submenu v-for="item in data" :key="item.key" :index="item.key">
        <template slot="title">
          <span style="margin-left:10px">{{ item.label }}</span>
          <el-tag effect="dark" type="danger" style="margin-left:5px">{{ item.num>999?'999+':item.num }}</el-tag>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="(childItem,childIndex) in item.children" :key="childIndex" :index="childItem.key">
            {{ childItem.label }}
            <span style="color:#f56c6c;margin-left:5px">{{ childItem.num }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'AlertMenu',
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      menu: [
        {
          label: '主机异常',
          num: 132,
          key: 'abnormalHost',
          children: [
            {
              label: '发现受控主机',
              num: 132,
              key: 'controlledHost'
            },
            {
              label: '发现代理软件',
              num: 132,
              key: 'agentSoftware'
            },
            {
              label: '弱口令',
              num: 132,
              key: 'weakPassword'
            },
            {
              label: '明文传输',
              num: 132,
              key: 'plaintextTransmission'
            }
          ]
        },
        {
          label: '遭受攻击',
          num: 1222,
          key: '',
          children: [
            {
              label: '遭受恶意文件攻击',
              num: 132,
              key: ''
            },
            {
              label: '遭受系统/应用漏洞攻击',
              num: 132,
              key: ''
            },
            {
              label: '遭受渗透工具攻击',
              num: 132,
              key: ''
            },
            {
              label: '遭受暴力破解',
              num: 132,
              key: ''
            },
            {
              label: '遭受DDOS攻击',
              num: 132,
              key: ''
            },
            {
              label: '遭受暴力破解成功',
              num: 132,
              key: ''
            },
            {
              label: '遭受WEB应用攻击',
              num: 132,
              key: ''
            }
          ]
        },
        {
          label: '风险外联',
          num: 4511,
          key: '',
          children: [
            {
              label: 'HTTPS隐蔽通道',
              num: 132,
              key: ''
            },
            {
              label: 'ICMP隐蔽通道',
              num: 132,
              key: ''
            },
            {
              label: 'DGA域名请求',
              num: 132,
              key: ''
            },
            {
              label: '发现远控软件',
              num: 132,
              key: ''
            },
            {
              label: 'DNS隐蔽隧道',
              num: 132,
              key: ''
            },
            {
              label: 'HTTP隐蔽隧道',
              num: 132,
              key: ''
            },
            {
              label: '情报外联',
              num: 132,
              key: ''
            },
            {
              label: '挖矿行为',
              num: 132,
              key: ''
            },
            {
              label: '发现勒索软件活动',
              num: 132,
              key: ''
            },
            {
              label: '恶意指纹发现',
              num: 132,
              key: ''
            },
            {
              label: '发现暗网通信',
              num: 132,
              key: ''
            },
            {
              label: '恶意外联流量发现',
              num: 132,
              key: ''
            }
          ]
        },
        {
          label: '对外攻击',
          num: 132,
          key: '',
          children: [
            {
              label: '恶意文件发现',
              num: 132,
              key: ''
            },
            {
              label: '暴力破解成功',
              num: 132,
              key: ''
            },
            {
              label: '系统/应用漏洞攻击',
              num: 132,
              key: ''
            },
            {
              label: '渗透工具攻击',
              num: 132,
              key: ''
            },
            {
              label: '扫描探测',
              num: 132,
              key: ''
            },
            {
              label: '暴力破解',
              num: 132,
              key: ''
            },
            {
              label: 'DDOS攻击',
              num: 132,
              key: ''
            }
          ]
        },
        {
          label: '横向扩散',
          num: 151,
          key: '',
          children: [
            {
              label: 'WEB应用攻击',
              num: 132,
              key: ''
            },
            {
              label: '而已文件发现',
              num: 132,
              key: ''
            },
            {
              label: '系统/应用漏洞攻击',
              num: 132,
              key: ''
            },
            {
              label: '明文传输',
              num: 132,
              key: ''
            }
          ]
        }
      ]
    }
  },
  computed: {
    style() {
      const height = this.menu.length * 40 + 'px'
      this.$emit('handleMenuChange', height)
      return {
        height,
        overflow: 'auto'
      }
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      this.$emit('handleSelectOpen', key)
    },
    handleSelect(key, keyPath) {
      this.$emit('handleSelectChange', key)
    }
  }
}
</script>

<style lang="scss">
.alertMenu{
  .el-submenu__title{
    height: 40px;
  }
  .el-menu-item-group__title{
    padding: 0;
  }
  .el-menu-item, .el-submenu__title {
    line-height: 40px;
  }
  .el-submenu .el-menu-item {
      height: 40px;
  }
}
</style>
