<script lang="ts" setup>
interface Props {
  active?: boolean
}
withDefaults(
  defineProps<Props>(),
  {
    active: false
  }
)


const emit = defineEmits([
  'click',
  'edit',
  'remove'
])
</script>

<template>
  <div
    flex="~ justify-between"
    py="10px"
    px="14px"
    rounded-8px
    cursor-pointer
    class="group font-bold transition-colors-260 b b-solid"
    :class="[
      active
        ? 'c-primary b-primary'
        : 'hover:b-info/50 c-#303133 b-transparent'
    ]"
    @click="emit('click')"
  >
    <div
      flex="1"
      text-nowrap
      text-ellipsis
      overflow-x-hidden
      pr-6px
    >
      <slot></slot>
    </div>
    <div
      class="opacity-0 transition-colors-200 text-16"
      px="4"
      :class="[
        active
          ? 'opacity-100 c-primary/60 hover:c-primary'
          : 'group-hover:opacity-100 c-#303133/60 hover:c-primary'
      ]"
      flex="~ justify-center items-center"
      @click.stop="emit('edit')"
    >
      <div class="i-mingcute:pencil-2-line"></div>
    </div>
    <n-popconfirm
      @positive-click="emit('remove')"
    >
      <template #trigger>
        <div
          class="opacity-0 transition-colors-200 text-16"
          px="4"
          :class="[
            active
              ? 'opacity-100 c-primary/60 hover:c-primary'
              : 'group-hover:opacity-100 c-#303133/60 hover:c-primary'
          ]"
          flex="~ justify-center items-center"
          @click.stop
        >
          <div class="i-mingcute:delete-2-line"></div>
        </div>
      </template>
      确认删除？
    </n-popconfirm>
  </div>
</template>

<style lang="scss" scoped>

</style>
