<template>
  <!-- <div> -->
  <div class="bi-morebutton">
    <el-dropdown
      trigger="click"
      size="medium"
      v-bind="$attrs"
    >
      <span
        class="el-button el-button--text el-button--medium"
        @click.stop=""
      >
        <slot>
          {{ buttonText }}<i class="el-icon-arrow-down el-icon--right"></i>
        </slot>
      </span>
      <el-dropdown-menu
        slot="dropdown"
        class="bi-morebutton-popper"
      >
        <template v-for="(item,index) in button">
          <template v-if="item.render">
            <el-dropdown-item
              :key="index"
              v-permission="item.permission"
              style="padding: 0;"
              :disabled="item.disabled"
            >
              <Item
                :scope="row"
                :render="item.render"
              />
            </el-dropdown-item>
          </template>

          <template v-else>
            <el-dropdown-item
              v-if="(item.show&&item.show(row))||!item.show"
              :key="index"
              v-permission="item.permission"
              :disabled="item.disabled"
              @click.native="()=>{
                item.handler&&item.handler({row,button:item})
              }"
            >
              {{ item.name }}
            </el-dropdown-item>
          </template>

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

</template>
<script>
import Item from './item'

export default {
  name: 'BiMoreButton',
  components: { Item },
  props: {
    button: {
      type: Array,
      default: () => {
        return []
      }
    },
    buttonText: {
      type: String,
      default: '更多操作'
    },
    row: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$el.querySelectorAll('.el-dropdown-menu li').length === 0) {
        this.$el.style.display = 'none'
      }
    })
  },
  methods: {
    handleOK() {}
  }
}
</script>
<style lang="scss" >
.bi-morebutton {
  display: inline-block;
}
</style>