<template>
	<div class="head">
		<el-row>
			<el-form-item>
				<el-date-picker style="margin-left: 8px; width: 300px" v-model="searchInfo.dateRange" type="daterange"
					range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" />
			</el-form-item>
			<el-button @click="countAppointmentTypeFunc()" style="margin-left: 10px;">搜索</el-button>

		</el-row>
	</div>
	<div  style="display: flex;">
		<div  style="margin-right: 10px;"  v-if="monthNameList.length>0">
			<div style="font-size: 18px;font-weight: 900;color: #666;">爽约率（时间范围内）</div>
			<table class="shuangyue_table" style="width: 200px;">
				<tr>
					<td>预约人数</td><td>{{YuYueCount}}</td>
				</tr>
				<tr>
					<td>爽约人数</td><td>{{ShuangYueCount}}</td>
				</tr>
				<tr>
					<td>爽约率</td><td>{{ShuangYueLv}}</td>
				</tr>
			</table>
		</div>
		<div v-if="monthNameList.length>0" id="MonthCount" class="MonthCount"></div>
	</div>
	


	<el-table :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
		<el-table-column prop="name" label="方式" />
		<el-table-column prop="count" label="数量" />
	</el-table>






</template>

<script setup>
	import {
		ref,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import * as echarts from 'echarts';
	import {
		countAppointmentType,
		GetServiceDateTime,
	} from '@/api/api.js'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	const groupList_new = computed(() => {
		return groupList.value.filter(item => (item.id == 2));
	});
	let loading = ref(false);
	let searchInfo = ref({
		name: ''
	})
	let Info = ref({
		id: null,
		name: '',
		status: 1
	})

	let dialogVisible = ref(false);

	//获取设备list
	let tableData = ref([])
	let monthData = ref();
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	let YuYueCount=ref(0)//预约总条数
	let ShuangYueCount=ref(0)//爽约条数
	let ShuangYueLv=ref('')//爽约率
	//获取服务器时间
	const GetServiceDate = () => {
		GetServiceDateTime().then(res => {
			if (res.status) {
				let datetime = res.data.datetime.substr(0, 10)
				searchInfo.value.dateRange = [datetime, datetime]
				countAppointmentTypeFunc()
			}
		})
	}
	let monthNameList = ref([]);
	let monthCountList = ref([]);
	const countAppointmentTypeFunc = () => {
		loading.value = true
		countAppointmentType({
			searchInfo: searchInfo.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				tableData.value = res.data.list
				monthData.value = res.data.monthList
				YuYueCount.value=res.data.yuYueAllCount
				ShuangYueCount.value=res.data.shuangYueCount
				ShuangYueLv.value=res.data.shuangYueLv
				
				monthNameList.value = [];
				monthCountList.value = [];
				monthData.value.forEach((v, i) => {
					monthNameList.value.push(v.month)
					monthCountList.value.push(v.count)
				})
				if (monthNameList.value.length > 0) {
					nextTick(() => {
						DrawMonth()
					})

				}

			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	const DrawMonth = () => {
		var ChartMonthCount = echarts.init(document.getElementById('MonthCount'));
		// 绘制图表
		ChartMonthCount.setOption({
			title: {
				text: searchInfo.value.dateRange[0] + '~' + searchInfo.value.dateRange[1] + '预约量统计（月）'
			},
			tooltip: {},
			xAxis: {
				data: monthNameList.value
			},
			yAxis: {},
			series: [{
				name: '数量',
				type: 'bar',
				data: monthCountList.value
			}]
		});
	}

	onMounted(() => {
		GetServiceDate()

	})
</script>

<style scoped lang="scss">
	.page {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}

	.MonthCount {
		height: 400px;
		width: 100%;
	}
	.shuangyue_table{
		border-collapse: collapse; /* 关键：合并边框 */
		border: 1px solid #ccc; /* 表格整体边框 */
		th, td {
		    border: 1px solid #ccc; /* 单元格边框 */
		    padding: 10px;
		    text-align: left;
		}
	}
</style>