<template>
  <el-dropdown popper-class="custom-table-operate">
    <el-icon class="custom-table-operate__more">
      <template v-if="show">
        <More />
      </template>
    </el-icon>
    <template v-if="show" #dropdown>
      <el-dropdown-menu v-if="!isEmpty(actions)">
        <template v-for="item in actions" :key="item.name">
          <el-dropdown-item v-if="onPermission(item)" @click="item.event(data)">
            <el-button :type="item.type ?? 'primary'" :icon="formatterIcon(item)" :size="item.size" :disabled="item.disabled" text>
              {{ formatterName(item) }}
            </el-button>
          </el-dropdown-item>
        </template>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup name="custom-table-operate">
import { isEmpty } from '@/utils';

const props = defineProps({
  actions: { type: Array, default: () => [] },
  data: { type: Object, default: () => {} },
  show: { type: Boolean, default: true },
});

const onPermission = (row) => {
  if (row.auth === undefined) return true;
  return typeof row.auth === 'function' ? row.auth(props.data) : row.auth;
};

const formatterName = (row) => {
  return typeof row.name === 'function' ? row.name(props.data) : row.name;
};

const formatterIcon = (row) => {
  return typeof row.icon === 'function' ? row.icon(props.data) : row.icon;
};
</script>
<style lang="scss" scoped>
.custom-table-operate {
  &__more {
    padding: 20px 5px;
    font-size: 20px;
    color: var(--el-color-primary);
    cursor: pointer;
  }
  .el-button {
    &,
    &:hover &.is-text:hover,
    &.is-text:not(.is-disabled):hover {
      background: none !important;
    }
  }
}
</style>
