<template>
    <!-- 全局下拉框 -->
    <picker
        :mode="mode"
        :range="getRange"
        @change="onChange"
        :disabled="disabled"
        :value="mode == 'selector' ? getPickerValue : getVal"
        style="flex: auto"
    >
        <view class="picker" :class="{ placeholder: !!getVal, disabled }" :style="getStyle">
            <text class="picker-value">{{ getVal }}</text>
            <view class="picker-icon">
                <view class="picker-icon-close" v-if="clearable && selectedValue && !disabled" @tap.stop="clear">
                    <up-icon name="close-circle-fill" color="#c0c4cc" size="36rpx"></up-icon>
                </view>
                <up-icon name="arrow-right" color="#86909C" size="36rpx"></up-icon>
            </view>
        </view>
    </picker>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import * as dictData from './dictData'
import { cloneDeep } from 'lodash'
import Day from '@/utils/dayjs'

const es = defineEmits(['update:modelValue', 'change'])
const ps = defineProps({
    // selector,date
    mode: {
        type: String,
        default: 'selector'
    },
    //显示为空的value值
    emptyValue: {
        type: [String, Number],
        default: ''
    },
    dictkey: {
        type: String,
        default: ''
    },
    modelValue: {
        type: [String, Number],
        default: ''
    },
    options: {
        type: Array,
        default: () => []
    },
    clearable: {
        type: Boolean,
        default: false
    },
    labelField: {
        type: String,
        default: 'label'
    },
    valueField: {
        type: String,
        default: 'value'
    },
    pickAlign: {
        type: String,
        default: 'left'
    },
    placeholder: {
        type: String,
        default: '请选择'
    },
    disabled: {
        type: Boolean,
        default: false
    }
})
const getStyle = computed(() => {
    let pickAlign = 'flex-start'
    if (ps.pickAlign == 'center') {
        pickAlign = 'center'
    } else if (ps.pickAlign == 'right') {
        pickAlign = 'flex-end'
    }
    return {
        justifyContent: pickAlign
    }
})
//获取options
const getOptions = computed(() => {
    if (ps.dictkey) {
        return cloneDeep(dictData[ps.dictkey])
    } else {
        if (ps.options && Object.prototype.toString.call(ps.options[0]) == '[object Object]') {
            return ps.options
        } else {
            return ps.options.map((item) => {
                return {
                    [ps.labelField]: item,
                    [ps.valueField]: item
                }
            })
        }
    }
})
const selectedValue = ref('') //显示的内容
watch(
    [() => ps.modelValue, () => ps.options],
    () => {
        if (ps.mode == 'selector') {
            const option = getOptions.value.find((option) => String(option[ps.valueField]) === String(ps.modelValue))
            if (option) {
                selectedValue.value = option[ps.labelField]
            } else {
                selectedValue.value = ''
            }
        } else {
            selectedValue.value = ps.modelValue
        }
    },
    { immediate: true }
)

const getRange = computed(() => {
    return getOptions.value.map((option) => option[ps.labelField])
})
const onChange = (event) => {
    if (ps.mode == 'selector') {
        const index = event.detail.value
        selectedValue.value = getOptions.value[index][ps.labelField]
        const value = getOptions.value[index][ps.valueField] !== '' ? getOptions.value[index][ps.valueField] : ps.emptyValue
        es('update:modelValue', value)
        es('change', value)
    } else {
        selectedValue.value = String(Day(event.detail.value).valueOf())
        es('update:modelValue', selectedValue.value || ps.emptyValue)
        es('change', selectedValue.value || ps.emptyValue)
    }
}
const getVal = computed(() => {
    if (ps.mode == 'selector') {
        return selectedValue.value || ps.placeholder
    } else {
        //日期
        return uni.$tool.timeStampFormat(selectedValue.value, { format: 'YYYY-MM-DD' }) || ps.placeholder
    }
})
const getPickerValue = computed(() => {
    const index = getOptions.value.findIndex((option) => String(option[ps.valueField]) === String(ps.modelValue))
    return index > 0 ? index : 0
})

//清空值
const clear = () => {
    selectedValue.value = ''
    es('update:modelValue', ps.emptyValue)
    es('change', ps.emptyValue)
}
</script>
<style lang="scss" scoped>
.picker {
    line-height: 48rpx;
    display: flex;
    align-items: center;
    &-value {
        color: #1d2129;
    }
    &.placeholder {
        color: #86909c;
    }
    &.disabled {
        background: #f5f7fa;
    }
    &-icon {
        display: flex;
        align-items: center;
        &-close {
            margin-left: 4rpx;
        }
    }
}
</style>
