<!-- 业绩统计 -->
<!-- 业绩统计 -->
<!-- 业绩统计 -->
<!-- 业绩统计 -->
<!-- 业绩统计 -->
<template>
    <el-card>
        <el-form class="mb-[-16px]" :model="queryParams" label-width="80px">
            <el-col :span="6">
                <el-form-item label="时间筛选">
                    <el-date-picker v-model="date" type="daterange" value-format="YYYY-MM-DD" range-separator="-"
                        start-placeholder="开始时间" end-placeholder="结束时间" @change="deteToQuery" />
                </el-form-item>
            </el-col>
        </el-form>
    </el-card>
    <el-card :key="date">
        <template #header>
            配送订单统计
        </template>
        <v-charts style="height: 350px" :option="sendOption" :autoresize="true" />
    </el-card>

    <el-card :key="date">
        <template #header>
            配送订单统计
        </template>
        <sendData :query-params="queryParams" :key="date"></sendData>
    </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue"
import vCharts from 'vue-echarts'
import sendData from "../components/sendData.vue"
import { apidelivery } from '@/api/statistics'

const date = ref([])
const queryParams = reactive({
    start_time: "",
    end_time: "",
})

const deteToQuery = () => {
    queryParams.start_time = date.value[0]
    queryParams.end_time = date.value[1]
    initPage()
}

function getFirstAndLastDayOfCurrentMonth() {
    var today = new Date();
    var firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
    var lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
    var firstDayFormatted = formatDate(firstDay);
    var lastDayFormatted = formatDate(lastDay);
    return { firstDay: firstDayFormatted, lastDay: lastDayFormatted };
}

function formatDate(date) {
    var year = date.getFullYear();
    var month = (date.getMonth() + 1).toString().padStart(2, '0');
    var day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
}

date.value[0] = getFirstAndLastDayOfCurrentMonth().firstDay;
date.value[1] = getFirstAndLastDayOfCurrentMonth().lastDay;



const sendOption = reactive({
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
        },
        {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
        }
    ]

})

const getData = () => {

    apidelivery(queryParams).then(res => {
        console.log(res)
        sendOption.xAxis.data = res.statistics.range
        sendOption.series[0].data = res.statistics.data.order_amount
        sendOption.series[1].data = res.statistics.data.user_number
    })

}


const initPage = () => {
    getData()
}


onMounted(() => {
    deteToQuery()
})
</script>