<template>
  <el-scrollbar class="es-simplicity-menus-scrollbar">
    <div
      class="es-simplicity-menus-lists"
      :class="{ 'is-fold': fold }"
      @mouseleave="handleOut(true)"
      @mouseenter="handleOut(false)"
    >
      <div
        v-for="(item, index) in data"
        class="es-simplicity-menus-item"
        :key="item.id"
        :class="{ 'is-fold': fold, 'is-active': active == item.id }"
        :title="fold ? item.text || item.name : ''"
        @click="handleClick(item)"
        @mouseenter="handleEnter(item)"
        @mouseleave="handleLeave(item)"
      >
        <template v-if="fold">
          <el-badge is-dot :hidden="!item.tips">
            <es-icon
              class="es-simplicity_apps-icon"
              :style="setStyle(index)"
              :contents="item.icons || item.icon || menuIcon"
            ></es-icon>
          </el-badge>
        </template>
        <template v-else>
          <es-icon
            class="es-simplicity_apps-icon"
            :style="setStyle(index)"
            :contents="item.icons || item.icon || menuIcon"
          ></es-icon>
          <div class="es-simplicity-menus-tips" v-if="item.tips">
            {{ item.tips > 99 ? '99+' : item.tips }}
          </div>
        </template>
        <div class="es-simplicity_apps-text" v-show="!fold">
          {{ item.text || item.name }}
        </div>
        <i
          class="es-icon-you es-simplicity-menus-item-icon"
          v-show="
            (item.children && item.children.length) ||
            (item.fourthTabs && item.fourthTabs.length)
          "
        ></i>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import util from 'eoss-ui/src/utils/util';
export default {
  name: 'MenuList',
  components: {},
  props: {
    active: String,
    menuIcon: String,
    color: [String, Array],
    backgroundColor: [String, Array],
    data: Array,
    fold: Boolean,
    width: Number,
    popover: Boolean,
    parent: Object
  },
  data() {
    return {
      defaultActive: this.active,
      show: false,
      height: document.body.offsetHeight - 44
    };
  },
  computed: {},
  watch: {
    popover() {
      if (this.$el.offsetHeight > this.height) {
        this.$el.style.height = this.height + 'px';
      } else {
        this.$el.style.height = '';
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    setStyle(num) {
      let obj = {};
      if (this.color) {
        obj.color = this.color;
        if (Array.isArray(this.color)) {
          obj.color = this.color[num % this.color.length];
        } else {
          obj.color = this.color;
        }
      }
      if (this.backgroundColor) {
        if (Array.isArray(this.backgroundColor)) {
          obj.backgroundColor =
            this.backgroundColor[num % this.backgroundColor.length];
        } else {
          obj.backgroundColor = this.backgroundColor;
        }
      }
      return obj;
    },
    handleClick(res) {
      this.defaultActive = res.id;
      if (res.url) {
        if (res.urlopenmode == 1) {
          util.win.open(res.url);
          return;
        } else if (res.urlopenmode == 2) {
          util.win.open(res.url, '_self');
          return;
        }
        this.$emit('command', res);
      }
    },
    handleEnter(res) {
      this.$emit('menter', res);
    },
    handleLeave(res) {
      this.$emit('mleave', res);
    },
    handleOut(res) {
      this.$emit('mout', res);
    }
  }
};
</script>

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