<template>
  <div class="top-nav">
    <el-menu class="nav"
             mode="horizontal"
             @mousedown="contain.handleInitActive">
      <template v-for="(item,index) in baseList">
        <el-sub-menu :index="index+''"
                     v-if="item.hidden!=1"
                     :key="index">
          <template #title>
            <el-tooltip effect="dark"
                        :content="item.name"
                        placement="top">
              <i :class="'nav__icon iconfont '+item.icon"></i>
            </el-tooltip>
          </template>
          <div style="width:390px">
            <template v-for="(citem,cindex) in item.children">
              <el-menu-item @click="handleAdd(citem.option,true)"
                            :key="cindex"
                            v-if="citem.hidden!=1"
                            class="menu-inline"
                            :index="`${index}-${cindex}`">
                <div class="usehove"
                     @dragend="dragend($event,citem.option)"
                     draggable="true">
                  <img :src="($router.options.base + citem.option.img).replace(/\/\//g, '/')"
                       class="inside-img">
                  <div class="bottom-text">{{citem.name}}</div>
                </div>
              </el-menu-item>
            </template>
          </div>
        </el-sub-menu>
      </template>

    </el-menu>
  </div>
</template>

<script>
import { uuid } from '@/utils/utils'
import { getList, addObj } from '@/api/nav'
export default {
  inject: ["contain"],
  data () {
    return {
      baseList: []
    }
  },
  computed: {
    // 计算属性可以在这里添加其他需要的属性
  },
  created () {
    getList({ all: true }).then(res => {
      this.baseList = res.data.data
      return this.$axios.get('/components.json')
    }).then(res => {
      let len = this.baseList.length;
      let children = this.baseList[len - 1].children
      console.log(children);
      this.baseList[len - 1].children = children.concat(res.data)
    })

  },
  methods: {
    dragend (e, option) {
      let parentRect = document.getElementById('container').getBoundingClientRect();
      let x = e.clientX - parentRect.left;
      let y = e.clientY - parentRect.top;
      this.handleAdd(option, true, x, y)
    },
    handleAdd (option, first = false, x, y) {
      let obj = this.deepClone(option);
      let index = uuid()
      obj.left = x || 0;
      obj.top = y || 0
      obj.index = index;
      obj.display = false;
      obj.lock = false;
      obj.group = this.contain.group
      if (first) {
        this.contain.nav.unshift(obj);
      } else {
        this.contain.nav.push(obj);
      }
      setTimeout(() => this.contain.selectNav(index))
    }
  }
}
</script>

<style lang='scss'>
.top-nav {
  .nav {
    height: 45px;
    line-height: 45px;
    overflow: hidden;
    border-color: var(--border-color-base);
    
    // 确保菜单使用主题颜色
    background-color: var(--bg-color-primary);
    
    .el-menu-item,
    .el-sub-menu__title {
      color: var(--text-color-primary);
      
      &:hover {
        background-color: var(--bg-color-hover);
        color: var(--primary-color);
      }
      
      &.is-active {
        color: var(--primary-color);
      }
    }
  }
  .nav__icon {
    margin-right: 5px;
  }
  .nav .el-submenu .el-submenu__title,
  .nav .el-menu-item {
    height: 45px;
    line-height: 45px;
    font-size: 12px;
  }

  .el-menu-item {
    height: 100px !important;
  }
}
.el-menu--horizontal {
  border: none;
  .menu-inline {
    text-align: center;
    display: inline-block !important;
  }
  .bottom-text {
    color: var(--text-color-disabled);
  }
  .inside-img {
    width: 110px;
    height: 70px;
    border: 2px solid transparent;
    box-sizing: border-box;
    border-radius: 5px;
  }
  .inside-img:hover {
    border-color: var(--primary-color);
  }
  .usehove:hover {
    .bottom-text {
      color: var(--text-color-primary);
      font-weight: bold;
    }
  }
}
</style>