<template>
  <div class="filter-select">
    <div class="select-trigger flex-display-start" @click.stop="isOpen = !isOpen">
      <div class="selected-tags">
        <template v-if="selectedLabels.length > 0">
          <div
            v-for="(label, index) in selectedLabels"
            :key="modelValue[index]"
            class="tag-item flex-display-center"
          >
            <span>{{ label }}</span>
            <button class="tag-remove flex-display-center" @click.stop="removeValue(modelValue[index])">
              <svg class="icon-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="18" y1="6" x2="6" y2="18" />
                <line x1="6" y1="6" x2="18" y2="18" />
              </svg>
            </button>
          </div>
        </template>
        <span v-else class="placeholder text-tip-2 text-primary-50-clor">{{ placeholder || '请选择' }}</span>
      </div>
      <svg class="icon-sm dropdown-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polyline points="6 9 12 15 18 9" />
      </svg>
    </div>
    <div v-if="isOpen" class="dropdown-menu">
      <div
        v-for="option in options"
        :key="option.value"
        class="dropdown-item flex-display-start"
        :class="{ 'dropdown-item--selected': modelValue.includes(option.value) }"
        @click.stop="toggleOption(option.value)"
      >
        <span>{{ option.label }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import type { FilterOption } from '../api'

const props = defineProps<{
  options: FilterOption[]
  modelValue: string[]
  placeholder?: string
}>()

const emit = defineEmits<{
  'update:modelValue': [value: string[]]
}>()

// 下拉框展开状态
const isOpen = ref(false)

// 已选中的标签文字
const selectedLabels = computed(() => {
  return props.modelValue
    .map(v => props.options.find(opt => opt.value === v)?.label)
    .filter(Boolean) as string[]
})

// 切换选项选中状态
function toggleOption(value: string) {
  const index = props.modelValue.indexOf(value)
  if (index === -1) {
    emit('update:modelValue', [...props.modelValue, value])
  } else {
    emit('update:modelValue', props.modelValue.filter(v => v !== value))
  }
}

// 移除已选中的值
function removeValue(value: string) {
  emit('update:modelValue', props.modelValue.filter(v => v !== value))
}

// 点击外部关闭下拉框
function handleClickOutside(e: MouseEvent) {
  const target = e.target as HTMLElement
  if (!target.closest('.filter-select')) {
    isOpen.value = false
  }
}

// 组件挂载时添加事件监听
onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
.filter-select {
  position: relative;
  width: 420px;
}

.select-trigger {
  height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--bg-black-10);
  border-radius: var(--radius-4);
  background-color: var(--bg-white-100);
  justify-content: space-between;
  cursor: pointer;
}

.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.tag-item {
  gap: 4px;
  padding: 0 4px 0 8px;
  background-color: var(--bg-black-2);
  border-radius: var(--radius-4);
  font-size: 14px;
  line-height: 22px;
  color: var(--text-primary-80-color);
}

.tag-remove {
  width: 13px;
  height: 13px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-primary-50-color);
  transition: color 0.2s;
}

.tag-remove:hover {
  color: var(--text-primary-80-color);
}

.dropdown-arrow {
  flex-shrink: 0;
  width: 11px;
  height: 6px;
  margin-left: 8px;
  color: var(--text-primary-50-color);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background-color: var(--bg-white-100);
  border: 1px solid var(--bg-black-10);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-card);
  z-index: 10;
}

.dropdown-item {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-primary-80-color);
  cursor: pointer;
  gap: 8px;
  transition: background-color 0.2s;
}

.dropdown-item:hover {
  background-color: var(--bg-black-2);
}

.dropdown-item--selected {
  background-color: var(--color-primary-10);
  color: var(--color-primary-100);
}

.icon-xs {
  width: 13px;
  height: 13px;
}

.icon-sm {
  width: 16px;
  height: 16px;
}
</style>
