<template>
  <draggable ghost-class="menu__ghost"
             class="menu__ul"
             :class="{'menu__ul--simple':type==1}"
             :group="{ name: 'layer' }"
             v-model="list"
             :list="nav"
             item-key="index">
    <template #item="{ element }">
      <div :key="element.index"
           v-show="validGroup(element)"
           class="menu__folder"
           :ref="common.NAME+element.index"
           @click.stop="handleSetActive(element,false)"
           @mouseover.stop="mouseOver(element)"
           @mouseout.stop="mouseOut(element)"
           v-if="element.children">
        <div v-contextmenu="{id:contain.menuId,event:contain.handleContextMenu,value:element}"
             :class="['menu__item--folder',{'is-active':handleGetActive(element),'is-over': contain.activeOverIndex===element.index}]">
          <i class="iconfont icon-fold"
             @click.stop="openFolder(element)"
             :class="{'is-active':element.menu}"></i>
          <i class="iconfont icon-folder"
             @click.stop="handleSetActive(element)"></i>
          <span class="menu__label"
                v-if="element.isname">
            <input type="text"
                   @keyup.enter="element.isname=false"
                   v-if="element.isname"
                   v-model="element.name">
          </span>
          <span v-else
                @dblclick="handleChangeName(element)"
                class="menu__name">{{element.name}}</span>
          <span class="menu__menu">
            <el-icon :class="{'is-active':element.auto==true}"
                     @click.stop="contain.handleParams('auto',element)">
              <el-icon-video-play></el-icon-video-play>
            </el-icon>
            <el-icon :class="{'is-active':element.grid==true}"
                     @click.stop="contain.handleParams('grid',element)">
              <el-icon-grid></el-icon-grid>
            </el-icon>
            <i class="iconfont icon-buxianshi"
               :class="{'is-active':element.display==true}"
               @click.stop="contain.handleParams('display',element)"></i>
            <el-icon :class="{'is-active':element.lock===true}"
                     @click.stop="contain.handleParams('lock',element)">
              <el-icon-lock />
            </el-icon>
          </span>
        </div>
        <div :key="'list'+element.index"
             class="menu__list"
             v-show="element.menu">
          <layer :count="count+1"
                 :type="type"
                 :key="element.index"
                 :nav="element.children"></layer>
        </div>
      </div>
      <div v-else
           v-show="validGroup(element)"
           :key="element.index"
           v-contextmenu="{id:contain.menuId,event:contain.handleContextMenu,value:element}"
           @click.stop="handleSetActive(element)"
           :class="['menu__item',{'is-active':handleGetActive(element),'is-over': contain.activeOverIndex===element.index}]"
           @mouseover.stop="mouseOver(element)"
           @mouseout.stop="mouseOut(element)">
        <span class="menu__icon">
          <i :class="'iconfont '+element.icon"></i>
        </span>
        <span class="menu__label"
              v-if="element.isname">
          <input type="text"
                 @keyup.enter="element.isname=false"
                 v-if="element.isname"
                 v-model="element.name">
        </span>
        <span v-else
              @dblclick="handleChangeName(element)"
              class="menu__label">{{element.name}}</span>
        <span class="menu__menu">
          <i class="iconfont icon-buxianshi"
             :class="{'is-active':element.display==true}"
             @click.stop="contain.handleParams('display',element)"></i>
          <el-icon :class="{'is-active':element.lock===true}"
                   @click.stop="contain.handleParams('lock',element)">
            <el-icon-lock />
          </el-icon>
        </span>
      </div>
    </template>
  </draggable>
</template>

<script>
import vuedraggable from 'vuedraggable';
import common from '@/config'
export default {
  name: 'layer',
  inject: ["contain"],
  components: {
    draggable: vuedraggable
  },
  props: {
    type: {
      type: Number,
      default: 1,
    },
    count: {
      type: Number,
      default: 1,
    },
    nav: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    list () {
      return this.nav
    }
  },
  data () {
    return {
      common,
    }
  },
  methods: {
    validGroup (item) {
      if (this.validatenull(item.group)) return true
      return item.group == this.contain.group
    },
    mouseOver (item) {
      this.contain.activeOverIndex = item.index
    },
    mouseOut (item) {
      this.contain.activeOverIndex = undefined
    },
    handleGetActive (item) {
      return this.contain.active.includes(item.index);
    },
    handleSetActive (item, type = true) {
      if (item.children && type) {
        let active = []
        const deepList = (list) => {
          list.forEach(ele => {
            if (ele.children) deepList(ele.children)
            else active.push(ele.index)
          })
        }
        deepList(item.children)
        this.contain.selectNav(active);
      } else {
        this.contain.selectNav(item.index);
      }
    },
    handleChangeName (item) {
      item.isname = !item.isname
    },
    openFolder (item) {
      item.menu = !item.menu
      item.isname = false;
    },
    handleRefresh () {
      const deepList = (list) => {
        list.forEach(ele => {
          if (ele.children) {
            ele.menu = false
            deepList(ele.children)
          }
        })
      }
      deepList(this.nav);
    }
  }
}
</script>

<style>
</style>