<template>
  <div>
    <Submenu :name="`${parentName}`" @mouseenter.native="mouseEnter($event, children)"
             @mouseleave.native="mouseOut($event, children)" v-if="drawer">

      <template slot="title">
        <!--用阿里库图标替换-->
        <!--      <common-icon :style="{color:(parentItem && parentItem.searchFlag)?'orange':''}" :type="parentItem.icon || ''"/>-->
        <icon :color="(parentItem && parentItem.searchFlag)?'orange':''" size="10"
              :custom="'iconfont iconfont ' + parentItem.icon"
              :style="{'padding-left':'20px'}"></icon>
        <span :style="{color:(parentItem && parentItem.searchFlag)?'orange':'','padding-left':'10px'}">{{
            showTitle(parentItem)
          }}</span>
      </template>
    </Submenu>

    <Submenu :name="`${parentName}`" v-if="!drawer">
      <template slot="title">
<!--        <common-icon :type="parentItem.icon || ''"/>-->
        <icon size="10"
              :custom="'iconfont iconfont ' + parentItem.icon"></icon>
        <span :style="(searchText && showTitle(parentItem).includes(searchText) ? 'color: orange;':'')">{{
            showTitle(parentItem)
          }}</span>
        <Icon type="md-arrow-dropdown" />
      </template>
      <template v-for="item in children" v-if="item.meta.title && item.meta.menuType != 2">
        <template v-if="item.children && item.children.length === 1">
          <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item" :search-text="searchText"></side-menu-item>
          <menu-item v-else :name="getNameOrHref(item, true)" :key="`menu-${item.children[0].name}`">
            <common-icon :type="item.children[0].icon || ''"/><span> :style="(searchText && showTitle(item.children[0]).includes(searchText) ? 'color: orange;':'')"{{ showTitle(item.children[0]) }}</span></menu-item>
        </template>
        <template v-else>
          <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item" :search-text="searchText"></side-menu-item>
          <menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`">
            <common-icon :type="item.icon || ''"/><span :style="(searchText && showTitle(item).includes(searchText) ? 'color: orange;':'')">{{ showTitle(item) }}</span></menu-item>
        </template>
      </template>
    </Submenu>
  </div>
</template>
<script>
  import mixin from './mixin'
  import itemMixin from './item-mixin'

  export default {
    name: 'SideMenuItem',
    mixins: [mixin, itemMixin],
    props: {
      //筛选条件
      searchText: {
        type: String
      }
    },
    computed: {
      /**
       * @desc   : 菜单类型
       * @author : 洪旭东
       * @date   : 2023-08-11 15:46
       */
      drawer(){
        return this.$store.state.app.menuType === 'drawer'
      },
    },
    methods: {
      getClass(item) {
        if (item.name === this.$route.name) {
          return 'a5 ivu-menu-item-active ivu-menu-item-selected'
        } else {
          return 'a6'
        }
      },
      /**
       * @desc   : 鼠标移入事件
       * @author : 张潇木
       * @date   : 2022-5-18 14:20
       */
      mouseEnter(event, children) {
        this.$emit('enter', event, children)
      },

      /**
       * @desc   : 鼠标移出事件
       * @author : 张潇木
       * @date   : 2022-5-18 14:20
       */
      mouseOut(event, children) {
        this.$emit('out', event, children)
      },
      /**
       * @desc   : 搜索高亮标题
       * @author : 洪旭东
       * @date   : 2023-08-14 09:06
       */
      highLightTitle (item) {

      }
    }
  }
</script>
<style scoped>
  .a5 {
    /*color: #fff !important;*/
    /*z-index: 2 !important;*/
    /*background: #2d8cf0 !important;*/
  }
</style>
