<template>
    <!-- 全局日期控件 -->
    <view class="date">
        <uni-datetime-picker
            v-model="defaultValue"
            :type="type"
            :start="start"
            :end="end"
            :returnType="returnType"
            :border="false"
            :rangeSeparator="rangeSeparator"
            :placeholder="placeholder"
            :startPlaceholder="startPlaceholder"
            :endPlaceholder="endPlaceholder"
            :disabled="disabled"
            :clearIcon="clearIcon"
            :hideSecond="hideSecond"
            @change="change"
            @show="show"
            @maskClick="maskClick"
        />
        <view class="date-icon">
            <up-icon name="arrow-right" color="#86909C"></up-icon>
        </view>
    </view>
</template>

<script setup>
import { ref, watch } from 'vue'

const es = defineEmits(['update:modelValue', 'change'])
const ps = defineProps({
    //是否时间戳
    timestamp: {
        type: Boolean,
        default: true
    },
    modelValue: {
        type: [String, Number, Array, Date],
        default: ''
    },
    //日历模式date,datetime,daterange,datetimerange
    type: {
        type: String,
        default: 'datetime'
    },
    start: {
        type: [String, Number],
        default: ''
    },
    end: {
        type: [String, Number],
        default: ''
    },
    returnType: {
        type: String,
        default: 'timestamp'
    },
    rangeSeparator: {
        type: String,
        default: '-'
    },
    placeholder: {
        type: String,
        default: '请选择日期'
    },
    startPlaceholder: {
        type: String,
        default: '请选择开始日期'
    },
    endPlaceholder: {
        type: String,
        default: '请选择结束日期'
    },
    disabled: {
        type: Boolean,
        default: false
    },
    clearIcon: {
        type: Boolean,
        default: true
    },
    hideSecond: {
        type: Boolean,
        default: false
    }
})
//设置初始值
const defaultValue = ref()
watch(
    () => ps.modelValue,
    () => {
        if (ps.modelValue) {
            if (ps.timestamp) {
                defaultValue.value = parseInt(ps.modelValue)
            } else {
                defaultValue.value = ps.modelValue
            }
        }
    },
    { immediate: true }
)
watch(defaultValue, (value) => {
    es('update:modelValue', value)
})
const change = (value) => {
    uni.$emit('$upload-show', {})
    es('change', value)
}
const show = () => {
    uni.$emit('$upload-hide', {})
}
const maskClick = () => {
    uni.$emit('$upload-show', {})
}
</script>
<style lang="scss" scoped>
.date {
    display: inline-flex;
    align-items: center;
}
</style>
