<template>
	<div>
		<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="GetInfo()" style="margin-left: 10px;">搜索</el-button>
		 
			</el-row>
		</div>
		<div v-if="AllUsedCount>0"  id="Bing" class="Bing"></div>
		<el-table  :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
			<el-table-column prop="department_name" label="科室" />
			<el-table-column prop="count" label="号源总数" />
			<el-table-column prop="used_count" label="使用量" />
			<el-table-column prop="used_rate" label="使用量占比" />
		</el-table>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,nextTick
	} from 'vue'
	import * as echarts from 'echarts';
	import {
		 adminPlanTongJi,GetServiceDateTime
	} from '@/api/api.js'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	
	let loading = ref(false)
	let tableData = ref([])
	let SearchInfo=ref({})
	let PlanAllCount=ref(0)
	let AllUsedCount=ref(0)
	//获取服务器时间
	const GetServiceDate = () => {
		GetServiceDateTime().then(res => {
			if (res.status) {
				let datetime = res.data.datetime.substr(0, 10)
				SearchInfo.value.dateRange = [datetime, datetime]
				GetInfo()
			}
		})
	}
	const GetInfo = () => {
		loading.value=true
		adminPlanTongJi({
			SearchInfo: SearchInfo.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				tableData.value=res.data.list
				PlanAllCount.value=res.data.allCount
				AllUsedCount.value=res.data.allUsedCount
				if(AllUsedCount.value>0){
								 nextTick(()=>{
									 DrawBing() 
								 })
								 
				}
			}else{
				ElMessage.error(res.msg)
			}
			
			
		})
			 
	}
	const DrawBing=()=>{
		var ChartBingCount = echarts.init(document.getElementById('Bing'));
		// 绘制图表
		ChartBingCount.setOption({
		  title: {
		     text: SearchInfo.value.dateRange[0]+'~'+SearchInfo.value.dateRange[1]+'全院号源使用量占比',
		     subtext: '号源总量 '+ PlanAllCount.value,
		     left: 'center'
		   },
		   tooltip: {
		     trigger: 'item'
		   },
		   legend: {
		     orient: 'vertical',
		     left: 'left'
		   },
		   series: [
		     {
		       name: 'Access From',
		       type: 'pie',
		       radius: '50%',
		       data: [
		         { value: PlanAllCount.value-AllUsedCount.value, name: '未占用' },
		         { value: AllUsedCount.value, name: '已预约' },
		      
		       ],
		       emphasis: {
		         itemStyle: {
		           shadowBlur: 10,
		           shadowOffsetX: 0,
		           shadowColor: 'rgba(0, 0, 0, 0.5)'
		         }
		       }
		     }
		   ]
		});
	}
	onMounted(() => {
		 GetServiceDate()
	})
</script>

<style scoped>
	.Bing{
		height: 400px;
		width: 100%;
	}
</style>