<template>
    <view class="filter" @click="handleTogglePicker">
        <text class="text">{{ parseDate }}</text>
    </view>
    <u-datetime-picker
        :show="isVisiblePicker"
        v-model="curDate"
        mode="year-month"
        :closeOnClickOverlay="true"
        :maxDate="maxDate"
        @confirm="handleConfirmDate"
        @cancel="handleClose"
        @close="handleClose"
    ></u-datetime-picker>
</template>

<script setup lang="ts">
import { ref, unref, computed } from 'vue'
import { formatDate } from '@/utils/util'

const props = defineProps({
    bindingDate: {
        type: Number
    },
    format: {
        type: String
    },
    concatName: {
        type: String
    }
})

const emit = defineEmits(['update:bindingDate'])

const maxDate = new Date().getTime()

const isVisiblePicker = ref(false)
const curDate = ref(Date.now())
const parseDate = computed(() => formatDate(unref(curDate), props.format, props.concatName))

const handleTogglePicker = () => {
    handleToggle()
}
/**确认 */
const handleConfirmDate = ({ value }) => {
    handleToggle()
    emit('update:bindingDate', value)
}
/**取消 */
const handleClose = () => {
    handleToggle()
}
/**切换显示日期弹框 */
function handleToggle() {
    isVisiblePicker.value = !isVisiblePicker.value
}
</script>
<style lang="scss" scoped>
.filter {
    .text {
        display: flex;
        align-items: center;
        color: #7f7f7f;
        font-size: 28rpx;

        &::after {
            content: '';
            width: 0;
            height: 0;
            margin: 14rpx 0 0 12rpx;
            border-top: 14rpx solid #7f7f7f;
            border-right: 14rpx solid transparent;
            border-bottom: 14rpx solid transparent;
            border-left: 14rpx solid transparent;
        }
    }
}
</style>
