<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="CountMakeListFunc()" style="margin-left: 10px;">搜索</el-button>
	 
		</el-row>
	</div>
	<div v-if="KaiDanCount>0" id="MonthCount" class="MonthCount"></div>
	<el-table  :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
		<el-table-column prop="month" 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 {
		 CountMakeList,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 //总数量
	//获取服务器时间
	const GetServiceDate = () => {
		GetServiceDateTime().then(res => {
			if (res.status) {
				let datetime = res.data.datetime.substr(0, 10)
				searchInfo.value.dateRange = [datetime, datetime]
				CountMakeListFunc()
			}
		})
	}
	let AppointmentCount=ref(0);
	let KaiDanCount=ref(0);
	const CountMakeListFunc=()=>{
		loading.value = true
		CountMakeList({searchInfo:searchInfo.value}).then(res => {
			loading.value = false
			if (res.status) {
				tableData.value=res.data.MonthCountList
				KaiDanCount.value=res.data.Count
			 AppointmentCount.value=res.data.AppointmentCount
			 
			 if(KaiDanCount.value>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]+'开单检查量比',
		     subtext: '开单总量 '+ KaiDanCount.value,
		     left: 'center'
		   },
		   tooltip: {
		     trigger: 'item'
		   },
		   legend: {
		     orient: 'vertical',
		     left: 'left'
		   },
		   series: [
		     {
		       name: 'Access From',
		       type: 'pie',
		       radius: '50%',
		       data: [
		         { value: KaiDanCount.value-AppointmentCount.value, name: '未预约' },
		         { value: AppointmentCount.value, name: '已预约' },
		      
		       ],
		       emphasis: {
		         itemStyle: {
		           shadowBlur: 10,
		           shadowOffsetX: 0,
		           shadowColor: 'rgba(0, 0, 0, 0.5)'
		         }
		       }
		     }
		   ]
		});
	}
	 
	onMounted(()=>{
		 GetServiceDate()
		
	})
</script>

<style scoped>
	.page {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}
	.MonthCount{
		height: 400px;
		width: 100%;
	}
</style>