<template>
  <el-popover
    ref="tree_node_popover"
    v-model="visible"
    :flg="`tree_node_popover_${data[props.value]}`"
    :popper-class="`app-tree-node-actions tree_node_popover_${data[props.value]}`"
    class="flex-1 h-100"
    placement="bottom"
    trigger="manual"
    width="100"
  >
    <!--    <i slot="reference" class="el-icon-more more-btn bigger-click-area" @contextmenu.prevent.stop="openPop" />-->
    <div slot="reference" class="app-tree-node flex-row-s-c h-100" @contextmenu.prevent.stop="openPop" @click="handleClick">
      <!-- tree node label-->
      <div :class="{ 'no-icon': !iconName, 'app-tree-node-label--disabled': disabled }" class="app-tree-node-label">
        <svg-icon v-if="iconName" :icon-class="iconName" :style="{ color: data.iconColor || '#333' }" class-name="app-tree-node-icon" />
        <svg-icon
          :class="{ 'is-dir': !data.children || !data.children.length }"
          :icon-class="data.children && data.children.length ? 'wenjianjia1' : 'drxx49'"
          class="mr-5"
          icon-style="icon "
        />
        <div :title="label" class="app-tree-node-label-text">{{ label }}</div>
      </div>
      <!-- 操作按钮 -->
    </div>
    <div class="actions-wrap">
      <template v-for="(btn, index) in actions">
        <div v-if="showOrHide(btn, data)" :key="btn.type || index" class="action-btn fs-12" @click="onActionClick(btn)">
          <i v-if="btn.icon" :class="[btn.icon]" class="mr-5" />
          <span>{{ btn.label }}</span>
        </div>
      </template>
    </div>
  </el-popover>
</template>

<script>
export default {
  name: 'AppTreeNode',
  props: {
    data: {
      type: Object,
      default: null,
    },
    props: {
      type: Object,
      default: () => ({}),
    },
    label: {
      type: String,
      default: '节点',
    },
    // 图标
    icon: {
      type: String,
      default: null,
    },
    img: {
      type: String,
      default: null,
    },
    actions: {
      type: Array,
      default: () => [],
    },
    edit: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
    };
  },
  computed: {
    // 图标名称
    iconName() {
      if (this.icon) {
        return `${this.icon}`;
      }
      return null;
    },
    actionsVisible() {
      const { actions } = this;
      return actions?.length;
    },
  },
  mounted() {
    window.addEventListener('click', this.closeActions);
  },
  beforeDestroy() {
    window.removeEventListener('click', this.closeActions);
  },
  methods: {
    // onNodeClick() {
    //   this.closeActions();
    // },
    // // 双击节点
    // onNodeDBClick() {
    //   this.$emit('dblclick');
    // },
    showOrHide(btn, data) {
      return btn.showHide ? btn.showHide(data) : true;
    },
    openPop() {
      if (!this.actionsVisible) return;
      document.body.click();
      this.visible = true;
    },
    handleClick() {
      this.closeActions();
    },
    // 手动关闭popover
    closeActions() {
      this.$refs.tree_node_popover?.doClose();
      document.body.click();
    },
    // 按钮点击
    onActionClick(btn) {
      this.closeActions();
      this.$emit('node-action-click', {
        ...btn,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-popover__reference-wrapper {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.is-dir.icon {
  width: 0.9em;
  height: 0.9em;
}
.app-tree-node-label {
  display: flex;
  align-items: center;
}
.app-tree-node {
  display: flex;
  align-items: center;
  flex: 1;
  padding-right: 6px;
  max-width: 100%;
  overflow: hidden;

  .node-img {
    width: 32px;
    height: 32px;
    display: inline-block;
    margin-right: 6px;
    & > img {
      width: 100%;
      height: 100%;
      border-radius: 4px;
      object-fit: cover;
    }
  }
  &-label {
    flex: 1;
    display: flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    &--disabled {
      color: #cdd2da;
    }
    &.no-icon {
      // padding-left: 20px;
    }
    &-text {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
    }
  }
  &-icon {
    font-size: 13px;
    color: #4d4d4d;
    margin-right: 8px;
    display: inline-block;
  }
  .more-btn {
    display: inline-block;
    transform: rotate(-90deg);
    color: #999999;
  }
}
.actions-wrap {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 0;
  background-color: #fff;
  .action-btn {
    color: #505363;
    padding: 10px 16px;
    line-height: 14px;
    text-align: left;
    cursor: pointer;
    &:hover {
      background-color: #f2f4f7;
      color: #1890ff;
      font-weight: 500;
    }
  }
}
.bigger-click-area {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    bottom: -6px;
    right: -6px;
  }
}
</style>
<style lang="scss">
.app-tree-node-actions.el-popover {
  padding: 0;
  min-width: 80px;
}
</style>
