<template>
  <div v-for="(item, index) in data" :key="item.id" @click="handleClick(item)">
    <div
      class="es-simplicity-menus-item"
      :class="{
        'is-active': active === item.id,
        'is-open': openId === item.id
      }"
    >
      <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>
      <div class="es-simplicity_apps-text">
        {{ item.text || item.name }}
      </div>
    </div>
    <lists
      v-if="
        (item.children && item.children.length) ||
        (item.fourthTabs && item.fourthTabs.length)
      "
      :menuIcon="menuIcon"
      :color="color"
      :backgroundColor="backgroundColor"
      :data="[...(item.children || []), ...(item.fourthTabs || [])]"
    ></lists>
  </div>
</template>

<script>
export default {
  name: 'Lists',
  components: {},
  props: {
    menuIcon: String,
    color: [String, Array],
    backgroundColor: [String, Array],
    data: Array
  },
  data() {
    return {
      active: '',
      openId: ''
    };
  },
  computed: {},
  watch: {},
  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.active = res.id;
      this.$emit('command', res);
    }
  }
};
</script>

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