<template>
  <div class="ai-operate">
    <template v-if="filterBtns.length <= 3">
      <el-button
          v-for="(item, index) in filterBtns"
          :key="index"
          type="text"
          :title="item.text"
          @click="onClick(index)">
        {{ item.text }}
      </el-button>
    </template>
    <template v-else>
      <el-button
          v-for="(item, index) in list"
          :key="index"
          type="text"
          :title="item.text"
          @click="onClick(index)">
        {{ item.text }}
      </el-button>
      <el-dropdown
          trigger="click"
          @command="onDropClick">
        <el-button
            style="margin-left: 10px;"
            title="更多"
            type="text">
          更多
        </el-button>
        <el-dropdown-menu
            slot="dropdown">
          <el-dropdown-item
              v-for="(item, index) in moreList"
              :key="index"
              :command="index">
            {{ item.text }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </template>
  </div>
</template>

<script>
export default {
  name: 'AiOperate',

  props: {
    permissions: {
      type: Function,
      required: true
    },

    btns: {
      type: Array,
      required: true,
      default: () => []
    }
  },

  computed: {
    filterBtns() {
      return this.btns.filter(e => this.permissions(e.permissions))
    }
  },

  data() {
    return {
      list: [],
      moreList: []
    }
  },

  mounted() {
    this.filterBtns.forEach((item, index) => {
      if (index <= 1) {
        this.list.push(item)
      } else {
        this.moreList.push(item)
      }
    })
  },

  methods: {
    onClick(index) {
      this.$emit('on-click', index)
    },

    onDropClick(e) {
      this.onClick(e + 2)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
