<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 v-if="monthNameList.length>0" id="MonthCount" class="MonthCount"></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-column prop="break_appointment" label="爽约" />
		<el-table-column prop="break_appointment_rate" 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 //总数量
	//获取服务器时间
	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
				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,
			  barMaxWidth: 60
		    }
		  ]
		});
	}
	 
	onMounted(()=>{
		 GetServiceDate()
		
	})
</script>

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