<template>
  <el-dropdown
    v-if="hasSlotContent"
    name="templateDropdown_"
    size="mini"
    class="template-dropdown"
    :split-button="splitButton"
    placement="bottom"
    :trigger="trigger"
    :class="{ 'hide-arrow': !isArrowShow }"
    @visible-change="(val) => $emit('visible-change', val)"
  >
    <slot name="genFirstBtn"></slot>
    <el-dropdown-menu slot="dropdown" class="dropdown_downdiv">
      <slot name="genManage"></slot>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
  export default {
    name: 'HtDropdown',
    componentName: 'HtDropdown',
    props: {
      splitButton: {
        type: Boolean,
        default: true,
      },
      trigger: {
        type: String,
        default: 'click',
      },
    },
    data() {
      return {
        isArrowShow: false,
        hasSlotContent: false,
      }
    },
    beforeUpdate() {
      this.hasSlotContent = this.checkForSlotContent()
    },
    created() {
      this.hasSlotContent = this.checkForSlotContent()
    },
    methods: {
      checkForSlotContent() {
        this.isArrowShow = false
        let firstBtnName = ''
        if (
          this.$slots.genFirstBtn &&
          this.$slots.genFirstBtn.length &&
          this.$slots.genFirstBtn[0].children
        ) {
          this.$slots.genFirstBtn[0].children.forEach((item) => {
            if (
              !firstBtnName &&
              item &&
              item.data &&
              item.data.attrs &&
              item.data.attrs.id
            ) {
              firstBtnName = item.data.attrs.id
            }
          })
        }
        if (this.$slots.genManage) {
          this.$slots.genManage.forEach((item, index) => {
            if (
              item &&
              item.data &&
              item.data.attrs &&
              item.data.attrs.id === firstBtnName
            ) {
              this.$slots.genManage[index].data.class = 'ht-dropdown-btn-hidden'
            } else if (
              item &&
              item.data &&
              item.data.attrs &&
              item.data.attrs.id &&
              item.data.attrs.id !== firstBtnName
            ) {
              // 如果下拉里没有可选项时 要隐藏下拉箭头 有可选项时下拉箭头展示
              this.isArrowShow = true
            }
          })
        }
        let checkForContent = (hasContent, node) => {
          return (
            hasContent ||
            (node.children &&
              node.children.length > 0 &&
              node.children[0] &&
              node.children[0].tag &&
              node.children[0].data &&
              node.children[0].data.attrs &&
              node.children[0].data.attrs.id)
          )
        }
        return (
          this.$slots.genFirstBtn &&
          this.$slots.genFirstBtn.reduce(checkForContent, false)
        )
      },
    },
  }
</script>
<style lang="scss" scoped>
  .slotChildren {
    ::v-deep .el-dropdown-menu__item {
      line-height: 27px;
      padding: 0 10px;
    }
  }
  .hide-arrow {
    ::v-deep .el-dropdown__caret-button {
      display: none;
    }
    ::v-deep {
      .el-button-group .el-button:first-child {
        border-radius: 8px !important;
      }
    }
  }
</style>

<style lang="scss">
  .ht-dropdown-btn-hidden {
    display: none !important;
  }
</style>
