<template>
  <div id="menu-list">
    <a-menu mode="inline">
      <a-menu-item v-for="(v,i) in menuData" :key="i" @click="screenList(v.type)">
        <span>{{ v.title }}</span>
        <span>{{ v.nums || 0 }}</span>
      </a-menu-item>
    </a-menu>
  </div>

</template>

<script>
export default {
  props: {
    menuData: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  methods: {
    screenList(type) {
      this.$emit('screenList', type)
    }
  }
}
</script>
<style scoped lang='less'>
#menu-list {
    margin-top: 20px;
    height: calc(100vh - 260px);
    overflow: hidden;
  .ant-menu-inline {
    border: none;
  }

  /deep/.ant-menu-item {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    height: 56px;
    line-height: 56px;
  }
  .ant-menu-inline {
    .ant-menu-item {
      border-left: 3px solid #fff;
      border-bottom: 1px dashed #eee;
      margin: 0;
    }
    .ant-menu-item-selected {
      border-left: 3px solid #427ffd;
    }
    .ant-menu-item-active {
      background: #f0f7ff;
      border-left: 3px solid #427ffd;
    }
  }
  .ant-menu-inline .ant-menu-item::after,
  .ant-menu-vertical .ant-menu-item::after,
  .ant-menu-vertical-left .ant-menu-item::after,
  .ant-menu-vertical-right .ant-menu-item::after {
    border-right: none;
  }
}
</style>
