<template>
  <el-drawer
    class="es-simplicity-subMenus"
    direction="ltr"
    modal-class="es-simplicity-apps-modal"
    size="auto"
    :modal-append-to-body="false"
    :close-on-press-escape="false"
    :modal="false"
    :with-header="false"
    :wrapperClosable="false"
    :visible.sync="show"
  >
    <div
      class="es-simplicity-menus"
      :class="{ 'es-simplicity-menus-plus': mode == 'plus' }"
    >
      <div class="es-simplicity-menus-box" :style="{ width: width + 'px' }">
        <div class="es-simplicity-menus-title">
          <el-tooltip
            class="item"
            effect="dark"
            placement="right"
            :content="title || text"
            :auto="true"
          >
            <span class="es-simplicity-menus-title-text" v-if="!fold">{{
              title || text
            }}</span>
          </el-tooltip>
          <i
            class="es-icon-shouqi es-simplicity-menus-title-icon"
            v-show="!fold"
            @click="handleFold(true)"
          ></i>
          <i
            class="es-icon-zhankai es-simplicity-menus-title-icon"
            v-show="fold"
            @click="handleFold(false)"
          ></i>
        </div>
        <div v-if="collapse" class="es-simplicity-menus-scrollbar">
          <es-menu
            popperClass="es-simplicity_menus"
            :menu-class="
              fold
                ? 'es-simplicity_menus es-simplicity_menus-fold'
                : 'es-simplicity_menus'
            "
            :fourthTabs="true"
            :data="menus"
            :menuIcon="menuIcon"
            :color="color"
            :backgroundColor="backgroundColor"
            :show-title="false"
            :collapse="fold"
            @select="handleSelect"
          ></es-menu>
        </div>
        <menu-list
          v-else
          :active="actives[0]"
          :data="menus"
          :menuIcon="menuIcon"
          :color="color"
          :backgroundColor="backgroundColor"
          :fold="fold"
          :width="size"
          @menter="
            (res) => {
              this.getData(res, 0, true);
            }
          "
          @mleave="
            (res) => {
              this.getData(res, 0, false);
            }
          "
          @hover="handleHover"
          @command="handleCommand"
        ></menu-list>
      </div>
      <div
        class="es-simplicity-menus-view"
        @mouseleave="handleLeave"
        @mouseenter="handleEnter"
        v-show="subMenus.length"
      >
        <div
          class="es-simplicity-menus-box"
          v-for="(item, index) in subMenus"
          :key="item.id"
        >
          <div class="es-simplicity-menus-title">
            <span class="es-simplicity-menus-title-text">{{
              item.name || item.text || item.title
            }}</span>
          </div>
          <menu-list
            :active="actives[index + 1]"
            :data="[...item.children, ...item.fourthTabs]"
            :menuIcon="menuIcon"
            :color="color"
            :backgroundColor="backgroundColor"
            :width="size"
            @menter="
              (res) => {
                getData(res, index + 1, true);
              }
            "
            @mleave="
              (res) => {
                getData(res, index + 1, false);
              }
            "
            @command="handleCommand"
          ></menu-list>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import MenuList from './menu-list.vue';
export default {
  name: 'SubMenu',
  components: { MenuList },
  props: {
    mode: String,
    collapse: Boolean,
    title: String,
    closed: Boolean,
    color: {
      type: [String, Array],
      default: '#fff'
    },
    backgroundColor: {
      type: [String, Array],
      default() {
        return [
          '#FF9C52',
          '#2591F7',
          '#17C27B',
          '#1265D7',
          '#FFC724',
          '#E34D59'
        ];
      }
    },
    size: {
      type: Number,
      default: 220
    },
    visible: Boolean,
    text: String,
    menuIcon: String,
    children: {
      type: Array,
      default() {
        return [];
      }
    },
    fourthTabs: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      fold: this.closed,
      width: this.size,
      subMenus: [],
      isEnter: false,
      timer: null,
      actives: []
    };
  },
  computed: {
    menus() {
      return [...this.children, ...this.fourthTabs];
    },
    show: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
        return val;
      }
    }
  },
  watch: {
    closed(val) {
      this.fold = val;
      if (val) {
        this.width = 48;
      } else {
        this.width = this.size;
      }
    },
    visible(val) {
      val === false && (this.actives = []);
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleFold(res) {
      this.fold = res;
      if (res) {
        this.width = 48;
      } else {
        this.width = this.size;
      }
      this.$emit('update:closed', res);
    },
    handleCommand(res) {
      this.$emit('command', res);
    },
    handleSelect(res) {
      this.$emit('command', res.node);
    },
    getData(res, n, is) {
      this.isEnter = is;
      if (is) {
        this.actives.splice(n);
        if (this.actives[n]) {
          this.actives[n] = res.id;
        } else {
          this.actives.push(res.id);
        }
        this.subMenus.splice(n);
        let { children, fourthTabs } = res;
        if (
          (children && children.length) ||
          (fourthTabs && fourthTabs.length)
        ) {
          this.subMenus = this.subMenus.concat(res);
        }
      } else {
        if (n == 0) {
          clearTimeout(this.timer);
          this.timer = setTimeout(() => {
            if (res && !this.isEnter) {
              this.subMenus = [];
              this.actives = [];
            }
          }, 300);
        }
      }
    },
    handleHover(res) {
      this.isEnter = res;
      //if(this)
    },
    clearSubmenu() {
      this.$refs.menus.clearActive();
      this.subMenus = [];
    },
    handleLeave() {
      this.subMenus = [];
      this.actives = [];
    },
    handleEnter() {
      this.isEnter = true;
    }
  }
};
</script>

<style lang="scss" scoped></style>
