<template>
	<div class="page">
		<el-card shadow="never">
			<el-form inline>
				<el-form-item label="选择产品：" prop="productKey">
					<el-select v-model="params.productKey" filterable placeholder="请选择产品" @change="productChange">
						<el-option v-for="item in productList" :key="item.key" :label="item.name" :value="item.key">
							<span style="float: left">{{ item.name }}</span>
							<span style="float: right; font-size: 13px">{{ item.key }}</span>
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="选择设备：" prop="deviceKey">
					<el-select v-model="params.deviceKey" filterable placeholder="请选择设备">
						<el-option v-for="item in deviceList" :key="item.key" :label="item.name" :value="item.key">
							<span style="float: left">{{ item.name }}</span>
							<span style="float: right; font-size: 13px; margin-left: 12px">{{ item.key }}</span>
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="选择属性：" prop="properties">
					<el-select v-model="params.properties" filterable placeholder="请选择属性" @change="propertyChange">
						<el-option v-for="item in propertyList" :key="item.key" :label="item.name" :value="item.key">
							<span style="float: left">{{ item.name }}</span>
							<span style="float: right; font-size: 13px; margin-left: 12px">{{ item.key }}</span>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="选择时间：" prop="dateRange">
					<el-date-picker
						v-model="dateRange"
						style="width: 360px"
						value-format="YYYY-MM-DD HH:mm:ss"
						date-format="YYYY-MM-DD"
						time-format="HH:mm"
						format="YYYY-MM-DD HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:clearable="false"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="聚合粒度：" prop="dateType">
					<el-radio-group v-model="params.dateType" @change="dateTypeChange">
						<el-radio-button label="1">5分钟</el-radio-button>
						<el-radio-button label="2">1小时</el-radio-button>
						<el-radio-button label="3">1天</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" class="ml10" @click="getData">
						<el-icon>
							<ele-Search />
						</el-icon>
						查询
					</el-button>
					<el-button type="primary" @click="handlePrintChart">
						<el-icon>
							<ele-Printer />
						</el-icon>
						打印图表
					</el-button>
				</el-form-item>
			</el-form>
			<div class="title">
				<el-icon style="margin-right: 5px">
					<ele-Histogram />
				</el-icon>
				指标聚合统计图
			</div>
			<Chart class="flex1" height="12vw" ref="chart" :autoLoading="false" style="margin-top: 20px" v-loading="loading"></Chart>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import api from '/@/api/device'
import dayjs from 'dayjs'
import Chart from '/@/components/chart/index.vue'
import { getLineOption } from '/@/components/chart/options'
import { printChart } from '/@/utils/print'

const productList = ref<any[]>([])
const deviceList = ref<any[]>([])
const propertyList = ref<any[]>([])
const chart = ref()
const loading = ref(false)
const propertyName = ref('')

// 聚合力度可选值为"5分钟"、"1小时"和"1天"，对应的最大时间范围为"一周"、"一个月"和"一年"。
const dateRange = ref([dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')])

const params = reactive({
	productKey: '',
	deviceKey: '',
	properties: '',
	dateType: '1',
	startDate: dateRange.value[0],
	endDate: dateRange.value[1],
})

watch(dateRange, () => {
	params.startDate = dateRange.value[0]
	params.endDate = dateRange.value[1]
})

function dateTypeChange(dateType: string) {
	switch (dateType) {
		case '1':
			dateRange.value = [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')]
			break
		case '2':
			dateRange.value = [dayjs().subtract(7, 'days').format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')]
			break
		case '3':
			dateRange.value = [dayjs().subtract(30, 'days').format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')]
			break
		default:
			break
	}

	getData()
}

api.product.getLists({ status: 1 }).then((res: any) => {
	productList.value = res.product || []
})

function getData() {
	const diffDay = dayjs(dateRange.value[1], 'YYYY-MM-DD HH:mm:ss').diff(dayjs(dateRange.value[0], 'YYYY-MM-DD HH:mm:ss'), 'days')
	if (params.dateType === '1' && diffDay > 7) return ElMessage('时间范围不能超过7天')
	if (params.dateType === '2' && diffDay > 31) return ElMessage('时间范围不能超过1个月')
	if (params.dateType === '3' && diffDay > 366) return ElMessage('时间范围不能超过一年')

	if (!params.productKey) return ElMessage('请选选择产品')
	if (!params.deviceKey) return ElMessage('请选选择设备')
	if (!params.properties) return ElMessage('请选选择属性')

	loading.value = true
	api.analysis
		.deviceIndicatorPolymerize(params)
		.then((data: any[]) => {
			const res = data || []
			chart.value.draw(
				getLineOption({
					datas: [res.map((item) => item.dataAverageValue), res.map((item) => item.dataMaxValue), res.map((item) => item.dataMinValue)],
					xAxis: res.map((item) => item.date),
					legend: [propertyName.value + '平均值', propertyName.value + '最大值', propertyName.value + '最小值'],
				})
			)
		})
		.finally(() => (loading.value = false))
}

function productChange(productKey: string) {
	params.deviceKey = ''
	params.properties = ''
	deviceList.value = []
	propertyList.value = []
	api.device.allList({ productKey }).then((res: any) => {
		deviceList.value = res.device
	})
	api.product.getpropertyList({ productKey }).then((res: any) => {
		propertyList.value = res
	})
}

function propertyChange(property: string) {
	propertyName.value = propertyList.value.find((item) => item.key === property)?.name
}

// 打印图表
const handlePrintChart = async () => {
	if (!chart.value) {
		ElMessage.warning('图表未加载')
		return
	}
	await printChart(chart.value.$el)
}
</script>
<style scoped>
.title {
	font-size: 14px;
	font-weight: bold;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	padding-bottom: 6px;
}
</style>
