<template>
	<view class="charts">
		<view class="search-item">
			<view class="search-item-filter">
				<vol-form ref="formRef" :form-options="searchFormOptions" :formFields="searchFormFields"></vol-form>
			</view>
			<vol-button type="primary" size="small" @click="initData">查询</vol-button>
		</view>
		<vol-title title="销售汇总"></vol-title>
		<view class="charts-item">
			<view style="width:100%; height:400rpx">
				<l-echart ref="chartRef"></l-echart>
			</view>
		</view>
	</view>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, nextTick } from 'vue'
import * as echarts from '../echarts.esm.min.js'
import { option } from './order-options.js'

const { proxy } = getCurrentInstance()
const chartRef = ref(null)
let chartOption = option

const searchFormFields = ref({ orderDate: [null, null] })
const searchFormOptions = ref([{
	title: '订单日期：',
	align: 'left',
	field: 'orderDate',
	range: true,
	type: 'date'
}])

const dateNow = proxy.base.getDate()
searchFormFields.value.orderDate[0] = proxy.base.addDays(dateNow, -3600)
searchFormFields.value.orderDate[1] = dateNow

const initData = async () => {
	const url = `api/demo_order/getTotal?beginDate=${searchFormFields.value.orderDate[0]}&endDate=${searchFormFields.value.orderDate[1]}`
	proxy.http.get(url, {}, true).then((res) => {
		const data = res.filter(x => x.orderType > 0).map((x) => {
			return { name: x.orderType, value: x.totalPrice }
		})
		chartOption.title.text = '合计金额'
		chartOption.title.subtext = data.reduce((sum, item) => sum + item.value, 0)
		chartOption.series[0].data = data
		nextTick(async () => {
			if (!chartRef.value) return
			const myChart = await chartRef.value.init(echarts)
			myChart.setOption(chartOption)
		})
	})
}

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