<template>
    <view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'">
        <view v-if="label" class="uni-combox__label" :style="labelStyle">
            <text>{{label}}</text>
        </view>
        
        <view class="uni-combox__input-box">
            <view v-if='!isShowInput' @click="handleShowInput" class="wraper-inpu-text" >
                <text v-if="selectText" class="wrper-text-vlaue">{{ selectText }}</text>
                <text v-else class="wrper-text-placeholder">{{ placeholder }}</text>
            </view>

            <input v-else class="uni-combox__input" focus type="text" :placeholder="placeholder" ref="input" placeholder-class="uni-combox__input-plac" v-model="inputVal" @input="onInput" @focus="onFocus" @blur="onBlur" />
            <uni-icons :type="showSelector ? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector">
            </uni-icons>
        </view>
        
        <view class="uni-combox__selector" v-if="showSelector">
            <view class="uni-popper__arrow"></view>
            <scroll-view scroll-y="true" class="uni-combox__selector-scroll">
                <view class="loading" v-if="loading">
                    {{ loadingText }}
                </view>
                <view class="uni-combox__selector-empty" v-else-if="filterCandidatesLength === 0">
                    <text>{{emptyTips}}</text>
                </view>
                <view class="uni-combox__selector-item" :class="{'color-main': item.value === modelValue}" v-for="item in filterCandidates" :key="item.value" 
                @click="onSelectorClick(item)">
                    <text>{{ item.label }}</text>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script setup>
    import { ref, computed, watch, nextTick } from 'vue';
    const prop = defineProps({
        modelValue: {
            type: [String, Number],
            default: ''
        },
        modelLabel: {
            type: [String, Number],
            default: ''
        },
        border: {
            type: Boolean,
            default: true
        },
        label: {
            type: String,
            default: ''
        },
        labelWidth: {
            type: String,
            default: 'auto'
        },
        placeholder: {
            type: String,
            default: '请选择'
        },
        candidates: {
            type: Array,
            default () {
                return []
            }
        },
        emptyTips: {
            type: String,
            default: '无匹配项'
        },
        remote: Boolean, // 其中的选项是否从服务器远程加载
        remoteMethod: Function,
        loading: Boolean,
        loadingText: {
            type: String,
            default: 'Loading'
        }
    });
    
    const isShowInput = ref(false);
    const showSelector = ref(false);
    const inputVal = ref('');
    const selectText = ref('');
    
    
    const labelStyle = computed(() => {
        if (prop.labelWidth === 'auto') {
            return ""
        }
        return `width: ${prop.labelWidth}`
    })
    
    const configs = computed(() => ({
      remote: prop.remote,
      loading: prop.loading,
        candidates: prop.candidates
    }))
    //    modelValue: prop.modelValue

    const filterCandidates = ref([])
    
    let timer = null;
    watch(configs, () => {
        if (!prop.remote) {
            filterCandidates.value = prop.candidates;
        }
    });
    
    const handleConfirm = async () => {
        const res = await new Promise((resolve) => {
            // 外部必须resolve
            prop.remoteMethod?.(inputVal.value, resolve)
        })
        
        filterCandidates.value = res;
    }
    
    const filterCandidatesLength = computed(() => {
        return filterCandidates.value.length
    });
    
    const emit = defineEmits(['update:modelValue', 'update:modelLabel', 'input', 'select']);
    
    const toggleSelector = () => {
        showSelector.value = !showSelector.value
    }
    
    const onSelectorClick = (item)=> {
        // inputVal.value = item.label;
        selectText.value = item.label;
        // console.log(selectText.value, 'selectText.value')
        showSelector.value = false;
        isShowInput.value = false;
        emit('update:modelValue', item.value);
        emit('update:modelLabel', item.label);
        emit('select', item)
    };
    
    const onInput = ()=> {
        clearTimeout(timer);
        timer = setTimeout(()=>{
            showSelector.value = true;
            handleConfirm();
            emit('input', inputVal.value);
        }, 500);
    }
    
    const handleShowInput = () => {
        isShowInput.value = true;
        // inputVal.value = selectText.value;
        if (inputVal.value.length) {
            showSelector.value = true;
        }
    }
    
    const onFocus = () => {
        
    }
    
    const onBlur = () => {
        setTimeout(() => {
            showSelector.value = false;
            isShowInput.value = false;
        }, 153)
    }
    
</script>

<style lang="scss" scoped>
    .uni-combox {
        font-size: 14px;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        padding: 6px 10px;
        position: relative;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        // height: 40px;
        flex-direction: row;
        align-items: center;
        // border-bottom: solid 1px #DDDDDD;
    }

    .uni-combox__label {
        font-size: 16px;
        line-height: 22px;
        padding-right: 10px;
        color: #999999;
    }

    .uni-combox__input-box {
        position: relative;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex: 1;
        flex-direction: row;
        align-items: center;
        .wraper-inpu-text {
            flex: 1;
            line-height: 22px;
            text-align: right;
            margin-right: 10rpx;
        }
        .wrper-text-placeholder {
            // font-size: 12px;
            color: #999;
        }
    }

    .uni-combox__input {
        flex: 1;
        font-size: 14px;
        height: 22px;
        line-height: 22px;
        text-align: right;
        margin-right: 10rpx;
    }

    .uni-combox__input-plac {
        font-size: 14px;
        color: #999;
    }

    .uni-combox__selector {
        /* #ifndef APP-NVUE */
        box-sizing: border-box;
        /* #endif */
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        width: 100%;
        background-color: #FFFFFF;
        border: 1px solid #EBEEF5;
        border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        z-index: 2;
        padding: 4px 0;
    }

    .uni-combox__selector-scroll {
        /* #ifndef APP-NVUE */
        max-height: 200px;
        box-sizing: border-box;
        /* #endif */
    }

    .uni-combox__selector-empty,
    .uni-combox__selector-item {
        /* #ifndef APP-NVUE */
        display: flex;
        cursor: pointer;
        /* #endif */
        line-height: 36px;
        font-size: 14px;
        text-align: center;
        // border-bottom: solid 1px #DDDDDD;
        padding: 0px 10px;
    }

    .uni-combox__selector-item:hover {
        background-color: #f9f9f9;
    }

    .uni-combox__selector-empty:last-child,
    .uni-combox__selector-item:last-child {
        /* #ifndef APP-NVUE */
        border-bottom: none;
        /* #endif */
    }

    // picker 弹出层通用的指示小三角
    .uni-popper__arrow,
    .uni-popper__arrow::after {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 6px;
    }

    .uni-popper__arrow {
        filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
        top: -6px;
        left: 10%;
        margin-right: 3px;
        border-top-width: 0;
        border-bottom-color: #EBEEF5;
    }

    .uni-popper__arrow::after {
        content: " ";
        top: 1px;
        margin-left: -6px;
        border-top-width: 0;
        border-bottom-color: #fff;
    }

    .uni-combox__no-border {
        border: none;
    }
</style>