<template>
    <el-form-item>
        <el-select v-model="summaryType" @change="changeSummaryType">
            <el-option :label="props.monthName" value="30"></el-option>
            <el-option :label="props.dayName" value="50"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item>
        <el-date-picker
            :type="summaryType == '30' ? 'monthrange' : 'daterange'"
            v-model="rangeTime"
            :clearable="false"
            range-separator="-"
            :value-format="summaryType == '30' ? 'YYYY-MM' : 'YYYY-MM-DD'"
            @change="changeTime"
            :disabled-date="disabledDate"
            @calendar-change="calendarChange"
        />
    </el-form-item>
</template>

<script lang="ts" setup>
    import moment from 'moment';

    const props = defineProps({
        monthName: {
            type: String,
            default: '按月'
        },
        dayName: {
            type: String,
            default: '按日'
        },
        daysLimit: {
            type: Boolean,
            default: false
        }
    })

    const summaryType = defineModel()
    const queryParams = defineModel<any>('queryParams')

    const emits = defineEmits(['changeSummary'])

    const rangeTime = ref([moment().subtract(12, 'months').format('YYYY-MM'), moment().format('YYYY-MM')])
    const changeTime = (val) => {
        queryParams.value.beginCycleTime = val ? (summaryType.value == '30' ? (val[0] + '-01') : val[0]) : ''
        queryParams.value.endCycleTime = val ? (summaryType.value == '30' ? moment(val[1]).endOf('month').format('YYYY-MM-DD') : val[1]) : ''
    }
    const changeSummaryType = (val) => {
        if(val == '30'){
            rangeTime.value = [moment().subtract(12, 'months').format('YYYY-MM'), moment().format('YYYY-MM')]
            queryParams.value.beginCycleTime = moment().subtract(12, 'months').format('YYYY-MM') + '-01'
            queryParams.value.endCycleTime = moment().endOf('month').format('YYYY-MM-DD')
        }else {
            rangeTime.value = [moment().subtract(14, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
            queryParams.value.beginCycleTime = moment().subtract(14, 'days').format('YYYY-MM-DD')
            queryParams.value.endCycleTime = moment().format('YYYY-MM-DD')
        }
        emits('changeSummary', val)
    }
    const resetTime = () => {
        summaryType.value = '30'
        rangeTime.value = [moment().subtract(12, 'months').format('YYYY-MM'), moment().format('YYYY-MM')]
    }

    const selectTime = ref(null)
    const calendarChange = (date) => {
        if(!date[1]){
            selectTime.value = date[0]
        }else{
            selectTime.value = null
        }
    }

    const disabledDate = (time) => {
        if(summaryType.value == '50' && props.daysLimit && selectTime.value){
            const startDate = new Date(selectTime.value);
            const maxEndDate = new Date(startDate.getTime() + 14 * 24 * 60 * 60 * 1000);
            const minEndDate = new Date(startDate.getTime() - 14 * 24 * 60 * 60 * 1000);
            return time.getTime() > maxEndDate.getTime() || time.getTime() < minEndDate.getTime();
        }
        return false;
    }

    defineExpose({
        resetTime
    })
</script>