<template>
    <!-- 全局日期控件 -->
    <view class="date">
        <wu-calendar
            ref="calendar"
            :mode="mode"
            :insert="false"
            :color="color"
            :confirmColor="confirmColor"
            @confirm="confirm"
            maskClick
            lunar
            slideSwitchMode="vertical"
            rangeSameDay
            :startText="startText"
            :endText="endText"
            operationPosition="bottom"
            confirmFullDate
            :date="defaultValue"
        ></wu-calendar>
        <view class="date-content" :class="getPickerClass" @tap="open" :style="getStyle">
            <text class="date-value">{{ getLabelValue }}</text>
            <view class="date-icon">
                <view class="date-icon-close" v-if="clearable && !showPlaceholder && !disabled" @tap.stop="clear">
                    <up-icon name="close-circle-fill" color="#c0c4cc" size="36rpx"></up-icon>
                </view>
                <global-icon icon="calendar" color="#86909C"></global-icon>
            </view>
        </view>
    </view>
</template>

<script setup>
import { computed, ref, watchEffect } from 'vue'
import Day from 'mocp/utils/dayjs'

const es = defineEmits(['update:startTime', 'update:endTime', 'change'])
const ps = defineProps({
    //日历模式single,range,multiple
    mode: {
        type: String,
        default: 'range'
    },
    //显示为空的value值
    emptyValue: {
        type: [String, Number],
        default: ''
    },
    startTime: {
        type: [String, Number],
        default: ''
    },
    endTime: {
        type: [String, Number],
        default: ''
    },
    modelValue: {
        type: [String, Number],
        default: ''
    },
    clearable: {
        type: Boolean,
        default: false
    },
    placeholder: {
        type: String,
        default: '请选择日期范围'
    },
    disabled: {
        type: Boolean,
        default: false
    },
    pickAlign: {
        type: String,
        default: 'left'
    },
    rangeSeparator: {
        type: String,
        default: '至'
    },
    format: {
        type: String,
        default: 'YYYY/MM/DD'
    },
    startText: {
        type: String,
        default: '开始'
    },
    endText: {
        type: String,
        default: '结束'
    },
    confirmText: {
        type: String,
        default: '确认'
    },
    color: {
        type: String,
        default: '#165dff'
    },
    confirmColor: {
        type: String,
        default: '#165dff'
    }
})
//获取下拉框样式
const getStyle = computed(() => {
    let pickAlign = 'flex-start'
    if (ps.pickAlign == 'center') {
        pickAlign = 'center'
    } else if (ps.pickAlign == 'right') {
        pickAlign = 'flex-end'
    }
    return {
        justifyContent: pickAlign
    }
})
//下拉框显示的内容
const labelValue = ref('')
const getLabelValue = computed(() => {
    if (labelValue.value) {
        return labelValue.value
    } else {
        return ps.placeholder
    }
})
//获取下拉框class
const showPlaceholder = computed(() => {
    return !labelValue.value || labelValue.value == ps.emptyValue
})
const getPickerClass = computed(() => {
    return {
        disabled: ps.disabled,
        placeholder: showPlaceholder.value
    }
})
const calendar = ref()
const open = () => {
    calendar.value?.open()
}
//设置初始值
const defaultValue = ref([Day().format('YYYY-MM-DD'), ''])
watchEffect(() => {
    if (ps.modelValue && ps.modelValue != ps.emptyValue) {
        if (ps.mode == 'range') {
            const range = ps.modelValue.split(ps.rangeSeparator)
            labelValue.value = ps.modelValue.join(ps.rangeSeparator)
            defaultValue.value = [Day(range[0]).format('YYYY-MM-DD'), Day(range[1]).format('YYYY-MM-DD')]
        }
    } else if (ps.startTime && ps.endTime) {
        labelValue.value = Day(ps.startTime).format('YYYY-MM-DD') + ps.rangeSeparator + Day(ps.endTime).format('YYYY-MM-DD')
        defaultValue.value = [Day(ps.startTime).format('YYYY-MM-DD'), Day(ps.endTime).format('YYYY-MM-DD')]
    }
})
//点击确定按钮
const confirm = (e) => {
    if (ps.mode == 'range') {
        const { after, before } = e.range
        labelValue.value = Day(before).format(ps.format) + ps.rangeSeparator + Day(after).format(ps.format)
        es('update:startTime', Day(before).valueOf())
        es('update:endTime', Day(after).valueOf())
        es('change', [Day(before).valueOf(), Day(after).valueOf()])
    }
}
//点击清空按钮
const clear = () => {
    labelValue.value = ''
    defaultValue.value = ''
    es('update:startTime', ps.emptyValue)
    es('update:endTime', ps.emptyValue)
    es('change', [ps.emptyValue, ps.emptyValue])
}
</script>
<style lang="scss" scoped>
.date {
    flex: auto;
    &-content {
        display: flex;
        align-items: center;
        line-height: 48rpx;
        &.placeholder {
            .date-value {
                color: $mocp-text-3;
            }
        }
        &.disabled {
            background: #f5f7fa;
        }
    }
    &-value {
        color: $mocp-text-4;
        margin-right: 8rpx;
    }
    &-icon {
        display: flex;
        align-items: center;
        &-close {
            margin-left: 4rpx;
        }
    }
}
</style>
