<template>
  <el-menu @mouseenter="handleMouseEnter"
           @mouseleave="handleMouseLeave"
           :default-active="text"
           :mode="option.mode"
           :collapse="option.collapse"
           :background-color="option.backgroundColor"
           :text-color="option.textColor"
           :active-text-color="option.activeTextColor"
           :unique-opened="option.uniqueOpened"
           :collapse-transition="option.collapseTransition">
    <template v-for="item in dataChart"
              :key="item.index">
      <el-menu-item v-if="!item.children"
                    @dblclick="handleDblClick(item)"
                    @click="handleClick(item)"
                    :index="item.index">
        <el-icon v-if="item.icon">
          <component :is="item.icon" />
        </el-icon>
        <span>{{ item.title }}</span>
      </el-menu-item>
      <el-sub-menu v-else
                   :index="item.index">
        <template #title>
          <el-icon v-if="item.icon">
            <component :is="item.icon" />
          </el-icon>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item v-for="child in item.children"
                      @dblclick="handleDblClick(child)"
                      @click="handleClick(child)"
                      :key="child.index"
                      :index="child.index">
          <el-icon v-if="child.icon">
            <component :is="child.icon" />
          </el-icon>
          <span>{{ child.title }}</span>
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script>
export default {
  name: 'menu',
  props: {
    option: {
      type: Object
    }
  },
  data () {
    return {
      text: ''
    }
  }
}
</script>
