<template>
  <d-dropdown :visible="visible" :position="position" :align="align" @toggle="handleToggle">
    <slot name="trigger">
      <d-button class="btn-more" variant="text">
        <d-tooltip content="更多" position="top">
          <Icon name="gt-more-operate" :operable="true" />
        </d-tooltip>
      </d-button>
    </slot>
    <template #menu>
      <ul class="list-menu px-4">
        <template v-for="(opt, index) in moreOpts" :key="index">
          <OptionLink
            v-if="opt.type !== 'exit' || item.my_role?.access_level < 50"
            v-bind="item"
            class="list-menu-item"
            @click.prevent="opt.handle(item)"
          >
            <img v-if="opt.svg" :src="opt.svg" />
            <Icon v-else-if="opt.icon" class="icon" :style="{ color: opt.iconColor }" :name="opt.icon" :size="14" />
            <span>{{ opt.text }}</span>
          </OptionLink>
        </template>
      </ul>
    </template>
  </d-dropdown>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface IData {
  [propName: string]: any; // 数据  key 展示字段名 ： value  数据
}
const props = withDefaults(
  defineProps<{
    moreOpts?: IData[];
    position?: string[];
    align?: string;
    item?: any;
  }>(),
  {
    moreOpts: () => [],
    position: () => ['bottom-end', 'top-end'],
    align: 'start',
    item: {}
  }
);

const visible = ref(false);
const handleToggle = (isVisible?: boolean) => {
  visible.value = isVisible;
};
</script>

<style lang="scss" scoped>
.btn-more {
  border: none;
  background-color: #fff;

  .icon {
    transform: rotate(90deg);
  }
}
.list-menu {
  padding: 8px;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
}
</style>
