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

import ImageGalleryPicker from '#/components/form/components/image-gallery-picker.vue';

const props = withDefaults(
  defineProps<{
    multiple?: boolean;
    maxCount?: number;
    disabled?: boolean;
    /**
     * 限制可选择的文件类型（透传给 image-gallery-picker，按 xk_file.type / xk_file_type.value 过滤）
     * 例如图片：[0]；视频：[1]；文件：[6]；语音：[3]
     */
    acceptTypes?: number[];
  }>(),
  {
    multiple: false,
    maxCount: 1,
    disabled: false,
    acceptTypes: () => [] as number[],
  },
);

const emit = defineEmits<{
  select: [urls: string[]];
}>();

const galleryOpen = ref(false);

function openGallery() {
  if (props.disabled) {
    return;
  }
  galleryOpen.value = true;
}

function onSelect(urls: string[]) {
  emit('select', urls);
}
</script>

<template>
  <div class="gallery-pick-link-wrap">
    <a class="gallery-pick-link" :class="{ disabled }" @click.prevent="openGallery">从文件库选择</a>
    <ImageGalleryPicker
      v-model:open="galleryOpen"
      :multiple="multiple"
      :max-count="maxCount"
      :accept-types="acceptTypes"
      @select="onSelect"
    />
  </div>
</template>

<style scoped lang="scss">
.gallery-pick-link-wrap {
  margin-top: 8px;
}

.gallery-pick-link {
  font-size: 13px;
  color: #165dff;
  cursor: pointer;
  user-select: none;

  &:hover {
    color: #4080ff;
  }

  &.disabled {
    color: #c9cdd4;
    cursor: not-allowed;
    pointer-events: none;
  }
}

.dark .gallery-pick-link {
  color: #60a5fa;

  &:hover {
    color: #93c5fd;
  }

  &.disabled {
    color: #6b7280;
  }
}
</style>
