<template>
  <ul
    class="dg-contextmenu vue-contextmenu-listWrapper"
    :class="'vue-contextmenuName-' + contextMenuData.menuName"
    @contextmenu.stop=""
  >
    <li v-for="item in contextMenuData.menulists" :key="item.btnName" class="context-menu-list">
      <div v-if="item.children && item.children.length > 0" class="has-child">
        <div class="parent-name btn-wrapper-simple" :class="{ 'no-allow': item.disabled ? item.disabled : false }">
          <i :class="item.icoName ? item.icoName : ''" class="nav-icon-fontawe"></i>
          <span class="nav-name-right">{{ item.btnName }}</span>
          <i class="icon"></i>
        </div>
        <Tree :itemchildren="item.children" :float="floatDirection" @childhandler="fnHandler" />
      </div>
      <div v-else>
        <div
          class="no-child-btn btn-wrapper-simple"
          :class="{ 'no-allow': item.disabled ? item.disabled : false }"
          @click.stop="item.disabled === true ? '' : fnHandler(item, $event)"
        >
          <i :class="item.icoName ? item.icoName : ''" class="nav-icon-fontawe"></i>
          <span class="nav-name-right">{{ item.btnName }}</span>
        </div>
      </div>
    </li>
  </ul>
</template>
<script>
import Tree from './DgTree.vue'
export default {
  name: 'DgContextmenu',
  components: {
    Tree,
  },
  props: {
    contextMenuData: {
      type: Object,
      requred: false,
      default() {
        return {
          menuName: null,
          axis: {
            x: null,
            y: null,
          },
          menulists: [
            {
              fnHandler: '',
              icoName: '',
              btnName: '',
              fn: '',
            },
          ],
        }
      },
    },
    transferIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      floatDirection: 'float-statue-1',
    }
  },
  watch: {
    'contextMenuData.axis'(val) {
      var x = val.x
      var y = val.y
      var innerWidth = window.innerWidth
      var innerHeight = window.innerHeight
      var _this = this
      var index = _this.transferIndex
      var menuName = 'vue-contextmenuName-' + _this.contextMenuData.menuName
      var menu = document.getElementsByClassName(menuName)[index]
      menu.style.display = 'block'
      var menuHeight = this.contextMenuData.menulists.length * 30
      var menuWidth = 150
      menu.style.top = (y + menuHeight > innerHeight ? innerHeight - menuHeight : y) + 'px'
      menu.style.left = (x + menuWidth > innerWidth ? innerWidth - menuWidth : x) + 'px'
      document.addEventListener(
        'mouseup',
        function (e) {
          // 解决mac电脑在鼠标右键后会执行mouseup事件
          if (e.button === 0) {
            menu.style.display = 'none'
          }
        },
        false
      )
      if (x + 2 * menuWidth > innerWidth && y + 2 * menuHeight > innerHeight) {
        this.floatDirection = 'float-status-4'
      }
      if (x + 2 * menuWidth < innerWidth && y + 2 * menuHeight > innerHeight) {
        this.floatDirection = 'float-status-1'
      }
      if (x + 2 * menuWidth > innerWidth && y + 2 * menuHeight < innerHeight) {
        this.floatDirection = 'float-status-3'
      }
      if (x + 2 * menuWidth < innerWidth && y + 2 * menuHeight < innerHeight) {
        this.floatDirection = 'float-status-2'
      }
    },
  },
  methods: {
    fnHandler(item) {
      if (item.fn) item.fn(item, event)
      else this.$emit(item.fnHandler, item, event)
    },
  },
}
</script>
