<script setup>
import moment from 'moment'
import { showToast } from 'vant'
import {ref} from 'vue'

const props=defineProps({
    show:{
        type:Boolean,
        default:false
    }
})
const emits=defineEmits(['update:show','select'])

function handleClose(){
    emits('update:show',false)
}

const minDate=new Date(1970, 0, 1)
const maxDate=moment().add(10,'years')._d
const startDate=ref(moment().format('YYYY-MM-DD').split('-'))
const endDate=ref(moment().format('YYYY-MM-DD').split('-'))

function handleConfirmDate(){
    const isBefore=moment(endDate.value).isBefore(startDate.value,'day')
    if(isBefore){
        showToast('开始日期不能晚于结束日期')
        return
    }
    emits('select',[startDate.value.join('-'),endDate.value.join('-')])
    handleClose()
}

</script>

<template>
    <van-popup 
        :show="props.show"
        position="bottom"
        round
        next-step-text="下一步"
        @click-overlay="handleClose"
        @click-close-icon="handleClose"
    >
        <van-picker-group
            title="选择日期"
            :tabs="['开始日期', '结束日期']"
            @confirm="handleConfirmDate"
            @cancel="handleClose"
        >
            <van-date-picker
                v-model="startDate"
                :min-date="minDate"
                :max-date="maxDate"
            />
            <van-date-picker 
                v-model="endDate" 
                :min-date="minDate" 
                :max-date="maxDate" 
            />
        </van-picker-group>
    </van-popup>
</template>