<template>
    <div class="ranges">
        <ul>
            <li @click="today">Hôm nay</li>
            <li @click="yesterday">Hôm qua</li>
            <li @click="thisMonth">Tháng này</li>
            <li @click="lastMonth">Tháng trước</li>
            <li @click="thisYear">Năm nay</li>
        </ul>
    </div>
</template>
<script setup>
import moment from "moment";

const emit = defineEmits(['changeDate']);

function today() {
    emit('changeDate', [moment().startOf('day').toDate(), moment().endOf('day').toDate()]);
}
function yesterday() {
    const yesterday = moment().subtract(1, 'days');
    emit('changeDate', [yesterday.startOf('day').toDate(), yesterday.endOf('day').toDate()]);
}
function thisMonth() {
    var start = moment().startOf('month').toDate();
    var end = moment().toDate();
    emit('changeDate', [start, end]);
}
function lastMonth() {
    var start = moment().subtract(1, 'months').startOf('month').toDate();
    var end = moment().subtract(1, 'months').endOf('month').toDate();
    emit('changeDate', [start, end]);
}
function thisYear() {
    var start = moment().startOf('year').toDate();
    var end = moment().endOf('day').toDate();
    emit('changeDate', [start, end]);
}
</script>