<template>
    <view ref="selectRef" class="im-select" :class="selectClasses" @click="handleContainerClick">
        <!-- 选择器触发器 -->
        <view ref="triggerRef" class="im-select__trigger" :class="triggerClasses" @click.stop="handleTriggerClick">
            <!-- 前缀图标 -->
            <view v-if="prefixIcon" class="im-select__prefix-icon">
                <im-icon :name="prefixIcon" :size="iconSize + 16" />
            </view>

            <!-- 内容区域 -->
            <view class="im-select__value">
                <template v-if="isTagsMode">
                    <view class="im-select__tags">
                        <template v-if="selectedOptions.length > 0">
                            <view v-for="(option, index) in visibleTags" :key="String(index) + option.value"
                                class="im-select__tag">
                                <view class="im-select__tag-content">
                                    <text class="im-select__tag-text">
                                        {{ formatTagText(option.label) }}
                                    </text>
                                    <view v-if="!disabled && !readonly && !option.disabled" class="im-select__tag-close"
                                        @click.stop="handleTagRemove(option)">
                                        <im-icon name="close" :size="tagCloseSize" />
                                    </view>
                                </view>
                            </view>
                            <view v-if="hasMoreTags" class="im-select__tag-more">
                                <text>+{{ selectedOptions.length - maxTagCount }}</text>
                            </view>
                        </template>
                        <text v-else class="im-select__placeholder">
                            {{ placeholder }}
                        </text>
                    </view>
                </template>

                <template v-else>
                    <view v-if="hasSelection" class="im-select__selected">
                        <text v-if="isSingle" class="im-select__selected-text">
                            {{ selectedOptions[0]?.label }}
                        </text>
                        <text v-else-if="isMultiple" class="im-select__selected-text">
                            {{ getMultipleSelectedText() }}
                        </text>
                    </view>
                    <text v-else class="im-select__placeholder">
                        {{ placeholder }}
                    </text>
                </template>
            </view>

            <!-- 后缀图标区域 -->
            <view class="im-select__suffix">
                <!-- 已选择数量显示 -->
                <text v-if="showSelectedCount && isMultiple && selectedOptions.length > 0"
                    class="im-select__selected-count">
                    {{ selectedOptions.length }}
                </text>

                <!-- 清除按钮 -->
                <view v-if="clearable && hasSelection && !disabled && !readonly" class="im-select__clear"
                    @click.stop="handleClear">
                    <im-icon name="close" :size="iconSize" />
                </view>

                <!-- 后缀图标 -->
                <view v-if="suffixIcon" class="im-select__prefix-icon">
                    <im-icon :name="suffixIcon" :size="iconSize + 18" />
                </view>

                <!-- 下拉箭头 -->
                <view v-if="showArrow" class="im-select__arrow"
                    :class="{ 'im-select__arrow--active': dropdownVisible }">
                    <im-icon name="arrow-down" :size="iconSize" />
                </view>
            </view>
        </view>

        <!-- 下拉框 -->
        <view v-if="dropdownVisible" class="im-select__dropdown-mask" @click="handleMaskClick">
            <view ref="dropdownRef" class="im-select__dropdown" :class="dropdownClasses" :style="dropdownStyle"
                @click.stop>
                <!-- 搜索框 -->
                <view v-if="searchable" class="im-select__search">
                    <im-input v-model="searchValue" :placeholder="searchPlaceholder" size="small" clearable
                        prefix-icon="search" @input="handleSearchInput" @clear="handleSearchClear" />
                </view>

                <!-- 选项列表 -->
                <scroll-view class="im-select__options" :scroll-y="true" :scroll-with-animation="true"
                    :show-scrollbar="false">
                    <!-- 加载状态 -->
                    <view v-if="loading" class="im-select__loading">
                        <im-icon name="loading" spin :size="iconSize" />
                        <text class="im-select__loading-text">{{ loadingText }}</text>
                    </view>

                    <!-- 空状态 -->
                    <view v-else-if="filteredOptions.length === 0 && !loading" class="im-select__empty">
                        <!-- 允许创建新选项 -->
                        <view v-if="allowCreate && searchValue" class="im-select__create-option"
                            @click="handleCreateOption">
                            <im-icon name="plus" :size="iconSize" />
                            <text class="im-select__create-text">
                                {{ createText || `创建"${searchValue}"` }}
                            </text>
                        </view>
                        <text v-else class="im-select__empty-text">{{ emptyText }}</text>
                    </view>

                    <!-- 选项内容 -->
                    <template v-else>
                        <!-- 分组模式 -->
                        <template v-if="isGrouped">
                            <view v-for="group in groupedOptions" :key="group.value || group.label"
                                class="im-select__group">
                                <view v-if="group.label" class="im-select__group-label"
                                    :class="{ 'im-select__group-label--disabled': group.disabled }">
                                    {{ group.label }}
                                </view>
                                <view class="im-select__group-options">
                                    <view v-for="option in group.options" :key="option.value" class="im-select__option"
                                        :class="getOptionClasses(option)" :style="option.style"
                                        @click="handleOptionClick(option)">
                                        <!-- 多选模式复选框 -->
                                        <view v-if="isMultiple || isTagsMode" class="im-select__option-checkbox"
                                            :class="{ 'im-select__option-checkbox--checked': isOptionSelected(option) }">
                                            <im-icon v-if="isOptionSelected(option)" name="ok" :size="iconSize" />
                                        </view>

                                        <!-- 自定义选项渲染 -->
                                        <slot v-if="$slots.option" name="option" :option="option">
                                            <view class="im-select__option-content">
                                                <!-- 选项图标 -->
                                                <view v-if="option.icon" class="im-select__option-icon">
                                                    <im-icon :name="option.icon" :size="iconSize" />
                                                </view>

                                                <!-- 选项文本 -->
                                                <view class="im-select__option-text">
                                                    <text class="im-select__option-label">
                                                        {{ option.label }}
                                                    </text>
                                                    <text v-if="option.description"
                                                        class="im-select__option-description">
                                                        {{ option.description }}
                                                    </text>
                                                </view>

                                                <!-- 选中标记 -->
                                                <view v-if="isSingle && isOptionSelected(option)"
                                                    class="im-select__option-selected-icon">
                                                    <im-icon name="ok" :size="iconSize" />
                                                </view>
                                            </view>
                                        </slot>

                                        <!-- 选项内容 -->
                                        <view v-else class="im-select__option-content">
                                            <view v-if="option.icon" class="im-select__option-icon">
                                                <im-icon :name="option.icon" :size="iconSize" />
                                            </view>

                                            <view class="im-select__option-text">
                                                <text class="im-select__option-label">
                                                    {{ option.label }}
                                                </text>
                                                <text v-if="option.description" class="im-select__option-description">
                                                    {{ option.description }}
                                                </text>
                                            </view>

                                            <!-- 选中标记 -->
                                            <view v-if="isSingle && isOptionSelected(option)"
                                                class="im-select__option-selected-icon">
                                                <im-icon name="ok" :size="iconSize" />
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </template>

                        <!-- 普通模式 -->
                        <view v-else v-for="option in filteredOptions" :key="option.value" class="im-select__option"
                            :class="getOptionClasses(option)" :style="option.style" @click="handleOptionClick(option)">
                            <!-- 多选模式复选框 -->
                            <view v-if="isMultiple || isTagsMode" class="im-select__option-checkbox"
                                :class="{ 'im-select__option-checkbox--checked': isOptionSelected(option) }">
                                <im-icon v-if="isOptionSelected(option)" name="ok" :size="iconSize" />
                            </view>

                            <!-- 自定义选项渲染 -->
                            <slot v-if="$slots.option" name="option" :option="option">
                                <view class="im-select__option-content">
                                    <!-- 选项图标 -->
                                    <view v-if="option.icon" class="im-select__option-icon">
                                        <im-icon :name="option.icon" :size="iconSize" />
                                    </view>

                                    <!-- 选项文本 -->
                                    <view class="im-select__option-text">
                                        <text class="im-select__option-label">
                                            {{ option.label }}
                                        </text>
                                        <text v-if="option.description" class="im-select__option-description">
                                            {{ option.description }}
                                        </text>
                                    </view>

                                    <!-- 选中标记 -->
                                    <view v-if="isSingle && isOptionSelected(option)"
                                        class="im-select__option-selected-icon">
                                        <im-icon name="ok" :size="iconSize" />
                                    </view>
                                </view>
                            </slot>

                            <!-- 选项内容 -->
                            <view v-else class="im-select__option-content">
                                <view v-if="option.icon" class="im-select__option-icon">
                                    <im-icon :name="option.icon" :size="iconSize" />
                                </view>

                                <view class="im-select__option-text">
                                    <text class="im-select__option-label">
                                        {{ option.label }}
                                    </text>
                                    <text v-if="option.description" class="im-select__option-description">
                                        {{ option.description }}
                                    </text>
                                </view>

                                <!-- 选中标记 -->
                                <view v-if="isSingle && isOptionSelected(option)"
                                    class="im-select__option-selected-icon">
                                    <im-icon name="ok" :size="iconSize" />
                                </view>
                            </view>
                        </view>
                    </template>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import {
    ref,
    computed,
    watch,
    nextTick,
    onMounted,
    onUnmounted,
    CSSProperties
} from 'vue'
import ImIcon from '../im-icon/im-icon.vue'
import ImInput from '../im-input/im-input.vue'
import type { SelectOption, SelectOptionGroup, SelectProps,SelectEmits } from '../../types/components/select'

// Props 定义
const props = withDefaults(defineProps<SelectProps>(), {
    modelValue: undefined,
    options: () => [],
    mode: 'single',
    size: 'medium',
    placeholder: '请选择',
    disabled: false,
    readonly: false,
    clearable: true,
    searchable: false,
    searchPlaceholder: '请输入搜索内容',
    multiple: undefined,
    maxTagCount: 3,
    maxTagTextLength: 20,
    showArrow: true,
    bordered: true,
    round: false,
    shadow: false,
    animateArrow: true,
    dropdownWidth: undefined,
    dropdownMaxHeight: 300,
    virtualScroll: undefined,
    virtualItemHeight: 40,
    group: false,
    emptyText: '暂无数据',
    loading: false,
    loadingText: '加载中...',
    remote: undefined,
    remoteMethod: undefined,
    filterMethod: undefined,
    prefixIcon: undefined,
    suffixIcon: undefined,
    customStyle: () => ({}),
    customClass: '',
    error: undefined,
    success: undefined,
    warning: undefined,
    showSelectedCount: false,
    placement: 'bottom',
    dropdownAnimation: true,
    dropdownAnimationDuration: 200,
    scrollToSelected: true,
    allowCreate: undefined,
    createMethod: undefined,
    max: undefined,
    min: undefined
})

const emit = defineEmits<SelectEmits>()

// 响应式状态
const selectRef = ref<HTMLElement>()
const triggerRef = ref<HTMLElement>()
const dropdownRef = ref<HTMLElement>()
const dropdownVisible = ref(false)
const searchValue = ref('')
const dropdownPosition = ref({
    top: 0,
    left: 0,
    width: 0,
    direction: 'bottom' as 'top' | 'bottom'
})

// 分组的选项
const groupedOptions = computed<SelectOptionGroup[]>(() => {
    if (!props.group) return []
    return props.options as SelectOptionGroup[]
})

const isGrouped = computed(() => props.group && groupedOptions.value.length > 0)

// 计算属性
const isSingle = computed(() => props.mode === 'single')
const isMultiple = computed(() => props.mode === 'multiple' || props.multiple)
const isTagsMode = computed(() => props.mode === 'tags')
const hasSelection = computed(() => selectedOptions.value.length > 0)

const iconSize = computed(() => {
    switch (props.size) {
        case 'small': return 14
        case 'large': return 32
        default: return 24
    }
})

const tagCloseSize = computed(() => iconSize.value - 2)

// 选中的选项
const selectedOptions = computed<SelectOption[]>(() => {
    const value = props.modelValue
    if (!value) return []

    const values = Array.isArray(value) ? value : [value]
    const allOptions = flattenOptions.value

    return values
        .map(v => allOptions.find(opt => opt.value === v))
        .filter(Boolean) as SelectOption[]
})

// 扁平化的选项列表
const flattenOptions = computed<SelectOption[]>(() => {
    if (!props.group) {
        return (props.options || []) as SelectOption[]
    }

    const groups = (props.options || []) as SelectOptionGroup[]
    return groups.reduce<SelectOption[]>((acc, group) => {
        return [...acc, ...group.options]
    }, [])
})

// 过滤后的选项
const filteredOptions = computed<SelectOption[]>(() => {
    let options = flattenOptions.value

    // 本地搜索
    if (searchValue.value && props.searchable) {
        const query = searchValue.value.toLowerCase()

        if (props.filterMethod) {
            options = options.filter(opt => props.filterMethod!(query, opt))
        } else {
            options = options.filter(opt =>
                opt.label.toLowerCase().includes(query) ||
                opt.description?.toLowerCase().includes(query)
            )
        }
    }

    return options
})

// 标签模式下的可见标签
const visibleTags = computed(() => {
    if (!isTagsMode.value) return []

    const tags = selectedOptions.value
    if (tags.length <= props.maxTagCount) {
        return tags
    }

    return tags.slice(0, props.maxTagCount)
})

const hasMoreTags = computed(() =>
    isTagsMode.value && selectedOptions.value.length > props.maxTagCount
)

// 样式类名
const selectClasses = computed(() => ({
    'im-select--disabled': props.disabled,
    'im-select--readonly': props.readonly,
    'im-select--error': props.error,
    'im-select--success': props.success,
    'im-select--warning': props.warning,
    [`im-select--${props.size}`]: true,
    [props.customClass || '']: !!props.customClass
}))

const triggerClasses = computed(() => ({
    'im-select__trigger--bordered': props.bordered,
    'im-select__trigger--round': props.round,
    'im-select__trigger--shadow': props.shadow,
    'im-select__trigger--focus': dropdownVisible.value
}))

const dropdownClasses = computed(() => ({
    'im-select__dropdown--animation': props.dropdownAnimation,
    [`im-select__dropdown--${dropdownPosition.value.direction}`]: true
}))

const dropdownStyle = computed<CSSProperties>(() => {
    const styles: CSSProperties = {
        position: 'fixed',
        top: `${dropdownPosition.value.top}rpx`,
        left: `${dropdownPosition.value.left}rpx`,
        width: `${dropdownPosition.value.width}rpx`,
        maxHeight: typeof props.dropdownMaxHeight === 'number'
            ? `${props.dropdownMaxHeight * 2}rpx`
            : props.dropdownMaxHeight,
        zIndex: 10000
    }

    if (props.dropdownWidth) {
        styles.width = typeof props.dropdownWidth === 'number'
            ? `${props.dropdownWidth}rpx`
            : props.dropdownWidth
    }

    return styles
})

// 方法
const handleTriggerClick = async () => {
    if (props.disabled || props.readonly) return

    if (dropdownVisible.value) {
        closeDropdown()
    } else {
        await calculateDropdownPosition()
        dropdownVisible.value = true
        emit('dropdown-visible-change', true)
    }
}

const handleContainerClick = (event: Event) => {
    emit('focus', event)
}

const handleMaskClick = () => {
    closeDropdown()
}

const closeDropdown = () => {
    dropdownVisible.value = false
    searchValue.value = ''
    emit('dropdown-visible-change', false)
}

const handleClear = () => {
    if (props.disabled || props.readonly) return

    const newValue = isMultiple.value || isTagsMode.value ? [] : undefined
    emit('update:modelValue', newValue as any)
    emit('change', newValue as any)
    emit('clear')
}

const handleSearchInput = (value: string) => {
    searchValue.value = value
    emit('search', value)

    // 远程搜索
    if (props.remote && props.remoteMethod) {
        props.remoteMethod(value).then(options => {
            // 这里需要更新 options，可能需要通过 props 传递
        })
    }
}

const handleSearchClear = () => {
    searchValue.value = ''
}

const handleOptionClick = (option: SelectOption) => {
    if (option.disabled) return
    if (props.disabled || props.readonly) return

    const isSelected = isOptionSelected(option)

    if (isSingle.value) {
        // 单选模式
        if (!isSelected) {
            emit('update:modelValue', option.value)
            emit('change', option.value)
            emit('option-select', option)
        }
        closeDropdown()
    } else if (isMultiple.value || isTagsMode.value) {
        // 多选模式
        const currentValue = Array.isArray(props.modelValue) ? props.modelValue : []
        let newValue: any[]

        if (isSelected) {
            newValue = currentValue.filter(v => v !== option.value)
            emit('option-deselect', option)
        } else {
            // 检查最大数量限制
            if (props.max && currentValue.length >= props.max) {
                return
            }
            newValue = [...currentValue, option.value]
            emit('option-select', option)
        }

        emit('update:modelValue', newValue)
        emit('change', newValue)
    }
}

const handleTagRemove = (option: SelectOption) => {
    if (option.disabled || props.disabled || props.readonly) return

    const currentValue = Array.isArray(props.modelValue) ? props.modelValue : []
    const newValue = currentValue.filter(v => v !== option.value)

    emit('update:modelValue', newValue)
    emit('change', newValue)
    emit('tag-remove', option)
    emit('option-deselect', option)
}

const handleCreateOption = () => {
    if (!props.allowCreate || !searchValue.value) return

    let newOption: SelectOption
    if (props.createMethod) {
        newOption = props.createMethod(searchValue.value)
    } else {
        newOption = {
            value: searchValue.value,
            label: searchValue.value
        }
    }

    // 添加到选项列表
    const currentOptions = [...flattenOptions.value, newOption]
    // 注意：这里需要更新父组件的 options

    // 选中新创建的选项
    if (isSingle.value) {
        emit('update:modelValue', newOption.value)
        emit('change', newOption.value)
        emit('create', newOption)
        closeDropdown()
    } else {
        const currentValue = Array.isArray(props.modelValue) ? props.modelValue : []
        const newValue = [...currentValue, newOption.value]

        emit('update:modelValue', newValue)
        emit('change', newValue)
        emit('create', newOption)
    }
}

const handleConfirm = () => {
    closeDropdown()
}

const handleScroll = (event: any) => {
    // 处理虚拟滚动
    if (props.virtualScroll) {
        const { scrollTop: top } = event.detail
        // 实现虚拟滚动逻辑
    }
}


const isOptionSelected = (option: SelectOption) => {
    const value = props.modelValue
    if (!value) return false

    if (Array.isArray(value)) {
        return value.includes(option.value)
    }

    return value === option.value
}

const getOptionClasses = (option: SelectOption) => ({
    'im-select__option--selected': isOptionSelected(option),
    'im-select__option--disabled': option.disabled
})

const formatTagText = (text: string) => {
    if (text.length <= props.maxTagTextLength) {
        return text
    }
    return text.substring(0, props.maxTagTextLength) + '...'
}

const getMultipleSelectedText = () => {
    if (selectedOptions.value.length === 0) return ''

    if (selectedOptions.value.length === 1) {
        return selectedOptions.value[0].label
    }

    return `已选择 ${selectedOptions.value.length} 项`
}

// 计算下拉框位置
const calculateDropdownPosition = async () => {
    await nextTick()

    if (!triggerRef.value) return

    return new Promise((resolve) => {
        // 节点查询
        const query = uni.createSelectorQuery()

        // 获取触发器位置
        query.select('.im-select__trigger').boundingClientRect()

        // 获取滚动偏移（如果有）
        query.selectViewport().scrollOffset((e) => {
        })

        query.exec((res) => {
            if (res[0]) {
                const triggerRect = res[0]
                const scrollInfo = res[1]

                // 获取系统信息
                const systemInfo = uni.getSystemInfoSync()
                const viewportHeight = systemInfo.windowHeight

                // 计算可用空间
                const spaceBelow = viewportHeight - triggerRect.bottom
                const spaceAbove = triggerRect.top

                // 下拉框高度
                const dropdownHeight = Math.min(
                    typeof props.dropdownMaxHeight === 'number'
                        ? props.dropdownMaxHeight
                        : 300,
                    viewportHeight * 0.7
                )

                // 决定显示方向
                let top = 0
                let direction: 'top' | 'bottom' = 'bottom'

                // 考虑滚动偏移
                const scrollTop = scrollInfo ? scrollInfo.scrollTop : 0

                if (props.placement === 'top' || (spaceBelow < dropdownHeight && spaceAbove > spaceBelow)) {
                    // 显示在上方
                    direction = 'top'
                    top = triggerRect.top + scrollTop - dropdownHeight - 4
                } else {
                    // 显示在下方
                    direction = 'bottom'
                    top = triggerRect.bottom + scrollTop + 4
                }

                // 确保不会超出屏幕
                if (direction === 'top' && top < scrollTop) {
                    top = scrollTop + 4
                } else if (direction === 'bottom' && top + dropdownHeight > scrollTop + viewportHeight) {
                    top = scrollTop + viewportHeight - dropdownHeight - 4
                }

                // 确保 left 位置正确
                let left = triggerRect.left
                if (systemInfo.windowWidth && left + triggerRect.width > systemInfo.windowWidth) {
                    left = Math.max(0, systemInfo.windowWidth - triggerRect.width)
                }

                let width = triggerRect.width
                width *= 2
                top *= 2
                left *= 2

                dropdownPosition.value = {
                    top,
                    left,
                    width,
                    direction
                }

                resolve(null)
            }
        })
    })
}

// 监听窗口大小变化
const handleResize = () => {
    if (dropdownVisible.value) {
        calculateDropdownPosition()
    }
}

// 生命周期
onMounted(() => {
    // 检查是否有窗口大小变化监听
    if (uni.onWindowResize) {
        uni.onWindowResize(handleResize)
    }

    // 添加全局点击监听来关闭下拉框
    document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
    if (uni.offWindowResize) {
        uni.offWindowResize(handleResize)
    }

    document.removeEventListener('click', handleClickOutside)
})

// 点击外部关闭下拉框
const handleClickOutside = (event: Event) => {
    const target = event.target as HTMLElement
    if (!target.closest('.im-select') && dropdownVisible.value) {
        closeDropdown()
    }
}

// 监听值变化
watch(() => props.modelValue, () => {
    // 值变化处理
})

watch(dropdownVisible, (visible) => {
    if (!visible) {
        searchValue.value = ''
    }
})

// 暴露方法
defineExpose({
    open: async () => {
        if (!props.disabled && !props.readonly) {
            await calculateDropdownPosition()
            dropdownVisible.value = true
            emit('dropdown-visible-change', true)
        }
    },
    close: closeDropdown,
    focus: () => {
        // 触发 focus 事件
        emit('focus', new Event('focus'))
    },
    blur: () => {
        // 触发 blur 事件
        emit('blur', new Event('blur'))
    }
})
</script>

<style lang="scss" scoped>
.im-select {
    position: relative;
    display: inline-block;
    // width: 100%;
    font-size: 28rpx;
    line-height: 1.5;

    &--small {
        font-size: 24rpx;
    }

    &--large {
        font-size: 32rpx;
    }

    &--disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    &__trigger {
        display: flex;
        align-items: center;
        padding: 0 18rpx;
        background-color: #fff;
        border-radius: 12rpx;
        min-height: 72rpx;
        transition: all 0.2s ease;
        cursor: pointer;

        &--bordered {
            border: 2rpx solid #dcdfe6;
        }

        &--round {
            border-radius: 36rpx;
        }

        &--shadow {
            box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
        }

        &--focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 4rpx rgba(24, 144, 255, 0.1);
        }
    }

    &--disabled &__trigger {
        cursor: not-allowed;
        background-color: #f5f5f5;
    }

    &--error &__trigger {
        border-color: #ff4d4f;
    }

    &--success &__trigger {
        border-color: #52c41a;
    }

    &--warning &__trigger {
        border-color: #faad14;
    }

    &__prefix-icon {
        margin-right: 16rpx;
        display: flex;
        align-items: center;
        color: #999;
    }

    &__value {
        flex: 1;
        display: flex;
        align-items: center;
        min-width: 0;
        overflow: hidden;
    }

    &__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8rpx;
    }

    &__tag {
        display: inline-flex;
        align-items: center;
        padding: 4rpx 12rpx;
        background-color: #f0f9ff;
        border: 2rpx solid #c6e2ff;
        border-radius: 8rpx;
        font-size: 24rpx;
        line-height: 1;
    }

    &__tag-content {
        display: flex;
        align-items: center;
        gap: 8rpx;
    }

    &__tag-text {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #1890ff;
    }

    &__tag-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28rpx;
        height: 28rpx;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
            background-color: #f0f0f0;
        }
    }

    &__tag-more {
        display: inline-flex;
        align-items: center;
        padding: 4rpx 12rpx;
        background-color: #f5f5f5;
        border-radius: 8rpx;
        font-size: 24rpx;
        color: #999;
    }

    &__selected {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &__selected-text {
        color: #333;
    }

    &__placeholder {
        color: #c0c4cc;
    }

    &__suffix {
        display: flex;
        align-items: center;
        margin-left: 16rpx;
        gap: 8rpx;
    }

    &__selected-count {
        font-size: 24rpx;
        color: #999;
    }

    &__clear {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32rpx;
        height: 32rpx;
        color: #c0c4cc;
        cursor: pointer;
        transition: color 0.2s;

        &:hover {
            color: #999;
        }
    }

    &__arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s;
        color: #c0c4cc;

        &--active {
            transform: rotate(180deg);
        }
    }

    &__dropdown-mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        background-color: transparent;
    }

    &__dropdown {
        background-color: #fff;
        border-radius: 12rpx;
        box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.15);
        overflow: hidden;
        transition: all 0.2s ease;

        &--animation {
            animation: im-select-dropdown 0.2s ease;
        }
    }

    &__search {
        padding: 16rpx;
        border-bottom: 2rpx solid #f0f0f0;
    }

    &__options {
        max-height: 600rpx;
    }

    &__loading,
    &__empty {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 48rpx 24rpx;
        color: #999;
    }

    &__loading-content {
        display: flex;
        align-items: center;
        gap: 16rpx;
    }

    &__loading-text {
        font-size: 28rpx;
    }

    &__empty-text {
        font-size: 28rpx;
    }

    &__group {
        &-label {
            padding: 16rpx 24rpx;
            font-size: 24rpx;
            color: #909399;
            background-color: #fafafa;

            &--disabled {
                color: #c0c4cc;
            }
        }

        &-options {
            padding-left: 12px;
        }
    }

    &__option {
        display: flex;
        align-items: center;
        padding: 16rpx 24rpx;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
            background-color: #f5f5f5;
        }

        &--selected {
            background-color: #f0f9ff;
            color: #1890ff;
        }

        &--disabled {
            opacity: 0.5;
            cursor: not-allowed;

            &:hover {
                background-color: transparent;
            }
        }

        &-checkbox {
            width: 32rpx;
            height: 32rpx;
            margin-right: 16rpx;
            border: 2rpx solid #dcdfe6;
            border-radius: 6rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            &--checked {
                border-color: #1890ff;
                background-color: #1890ff;
                color: #fff;
            }
        }

        &-content {
            flex: 1;
            display: flex;
            align-items: center;
            min-width: 0;
        }

        &-icon {
            margin-right: 16rpx;
            display: flex;
            align-items: center;
            color: #999;
        }

        &-text {
            flex: 1;
            min-width: 0;
        }

        &-label {
            display: block;
            font-size: 28rpx;
            color: #333;
            line-height: 1.5;
        }

        &-description {
            display: block;
            font-size: 24rpx;
            color: #999;
            line-height: 1.3;
            margin-top: 4rpx;
        }

        &-selected-icon {
            margin-left: 16rpx;
            color: #1890ff;
        }
    }

    &__create-option {
        display: flex;
        align-items: center;
        padding: 16rpx 24rpx;
        // border-top: 2rpx solid #f0f0f0;
        color: #409eff;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
            background-color: #f5f7fa;
        }
    }

    &__create-text {
        margin-left: 8px;
        font-size: 14px;
    }

    @keyframes im-select-dropdown {
        from {
            opacity: 0;
            transform: translateY(-20rpx);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}
</style>