<template>
	<div class="Dashboard"  v-loading="loading">
		<div class="head">
			<el-row>
		 
				<el-form-item style="margin-left: 8px;">
					 
						<el-date-picker v-model="searchInfo.dateRange" value-format="YYYY-MM-DD" type="daterange"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
					 
				</el-form-item>
			  
				<el-form-item> 
					<el-button type="primary" style="margin-left: 20px;" @click="GetInfo">搜索</el-button>
				</el-form-item>
		
			</el-row>
			 
		</div>
		<!-- <el-alert show-icon  title="因未对接体检数据接口,以下数据均为演示.报表内容和类型可根据需求调整" type="warning" :closable="false"  style="margin-bottom: 20px;"/> -->
		<el-row class="row1" :gutter="20">
			<el-col :span="12">
				<div id="JiGouCount" class="MonthCount"></div>
			</el-col>
			<el-col :span="12">
				<!-- <div id="TypeCount" class="TypeCount"></div> -->
				<div id="JiGouCountByMonth" class="TypeCount"></div>
			</el-col>
		</el-row>
		<el-row class="row2">
			<el-col :span="24">
				<div class="title">各体检机构体检量统计</div>
				<el-table  :data="tableData" style="width: 100%;" show-summary row-key="id">
					<!-- <el-table-column prop="id" label="Id" width="100" /> -->
					<el-table-column prop="org_name" label="机构名称" />
					<el-table-column prop="count" label="数量" />
				</el-table>
			<!-- 	<div class="page">
					<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
						:page-sizes="[15, 50, 100, 200]" layout="total,sizes, prev, pager, next" :total="total"
						@size-change="PageSizeChange" @current-change="PageCurrentChange" />
				</div> -->
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		AppointmentCount,AppointmentCountByMonth,GetHealthOrganizationEnableList,
		PingTaiPushGetList,
		PingTaiPushCountByOrg,
		PingTaiPushCountByMonth
	} from '@/api/api.js'
	import * as echarts from 'echarts';
	let loading = ref(false)
	let tableData = ref([])
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	const PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		GetUserList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetUserList()
	}
	const GetList=()=>{
		
	}
	let searchInfo=ref({});
	//获取体检机构预约登记数量
	const GetJiGouAppointmentCount=()=>{
		loading.value=true
		PingTaiPushCountByOrg({searchInfo:searchInfo.value}).then(res => {
			loading.value=false
			if (res.status) {
				  AppointmentZhuZhuangTu(res.data)
				  tableData.value=res.data.list
				  searchInfo.value.dateRange=[res.data.dateRange[0],res.data.dateRange[1]]
			} else {
				ElMessage.error(res.msg)
			}
			
		})
	}
	//获取体检机构预约登记数量（按月）
	const GetJiGouAppointmentCountByMonth=()=>{
		PingTaiPushCountByMonth({searchInfo:searchInfo.value}).then(res => {
			if (res.status) {
				  AppointmentZheXianTu(res.data)
			} else {
				ElMessage.error(res.msg)
			}
			
		})
	}
	//绘制预约柱状图
	const AppointmentZhuZhuangTu=(resdata)=>{
		let jigou_list=[];
		let count_list=[];
		resdata.list.forEach((v,i)=>{
			jigou_list.push(v.org_name)
			count_list.push(v.count)
		})
		var ChartJiGouCount = echarts.init(document.getElementById('JiGouCount'));
		// 绘制图表
		ChartJiGouCount.setOption({
		  title: {
		    text: resdata.dateRange[0].substr(0,10)+'~'+resdata.dateRange[1].substr(0,10)+'体检数量统计'
		  },
		  tooltip: {
			  trigger:'axis',
			  axisPointer:{
				  type:'shadow',
				  shadowStyle:{
					  color:'rgba(74,211,164,0.15)',
					  width:"1"
				  }
			  }
		  },
		  xAxis: {
		    data: jigou_list
		  },
		  yAxis: {},
		  series: [
		    {
		      name: '数量',
		      type: 'bar',
		      data: count_list
		    }
		  ]
		});
	}
	//绘制预约折线图
	const AppointmentZheXianTu=(resdata)=>{
		let month_list=[];
		let count_list=[];
		resdata.list.forEach((v,i)=>{
			let month = v.month.slice(5);  // 截取从索引5开始到末尾的字符串
			
			// 去掉前导零
			if (month.startsWith('0')) {
			    month = month.slice(1);
			}
			month_list.push(month+'月')
			count_list.push(v.count)
		})
		var JiGouCountByMonth = echarts.init(document.getElementById('JiGouCountByMonth'));
		// 绘制图表
		JiGouCountByMonth.setOption({
		  title: {
		    text: resdata.dateRange[0].substr(0,7)+'~'+resdata.dateRange[1].substr(0,7)+'体检数量走势'
		  },
		  tooltip: {
		  			  trigger:'axis',
		  			  axisPointer:{
		  				  type:'shadow',
		  				  shadowStyle:{
		  					  color:'rgba(74,211,164,0.15)',
		  					  width:"1"
		  				  }
		  			  }
		  },
		  xAxis: {
		    data: month_list
		  },
		  yAxis: {},
		  series: [
		    {
		      name: '数量',
		      type: 'line',
		      data: count_list
		    }
		  ]
		});
	}
	const GetInfo=()=>{
		GetJiGouAppointmentCount()
		GetJiGouAppointmentCountByMonth()
	}
 
	onMounted(()=>{
		GetJiGouAppointmentCount()
		GetJiGouAppointmentCountByMonth()
		// var ChartTypeCount = echarts.init(document.getElementById('TypeCount'));
		// ChartTypeCount.setOption(
		// 	{
		// 		title: {
		// 		  text: '2023-01-01~2023-06-30体检行业分类统计'
		// 		},
		// 	  tooltip: {
		// 	    trigger: 'item'
		// 	  },
		// 	  legend: {
		// 	    top: '5%',
		// 	    left: 'center'
		// 	  },
		// 	  series: [
		// 	    {
		// 	      name: '数量',
		// 	      type: 'pie',
		// 	      radius: ['40%', '70%'],
		// 	      avoidLabelOverlap: false,
		// 	      label: {
		// 	        show: false,
		// 	        position: 'center'
		// 	      },
		// 	      emphasis: {
		// 	        label: {
		// 	          show: true,
		// 	          fontSize: 40,
		// 	          fontWeight: 'bold'
		// 	        }
		// 	      },
		// 	      labelLine: {
		// 	        show: false
		// 	      },
		// 	      data: [
		// 	        { value: 1048, name: '食品类' },
		// 	        { value: 735, name: '化妆品类' },
		// 	        { value: 580, name: '公共场所类' },
		// 	        { value: 484, name: '生活饮用水类' },
		// 	        { value: 300, name: '消毒产品生产类' }
		// 	      ]
		// 	    }
		// 	  ]
			
		// })
		
	})

</script>

<style scoped>
	.Dashboard{
		padding: 20px;
	}
	.MonthCount{
		height: 400px;
		width: 100%;
	}
	.TypeCount{
		height: 400px;
		width: 100%;
	}
	.row1 .el-col{
		 
		 
		/* background-color: #ccc; */
	}
	.row1 .el-col div{
		padding: 20px;
		 border: 1px solid #ccc;
		background-color: #f6f6f6;
	}
	.row2{
		margin-top: 20px;
	}
	.row2 .el-col{
		padding: 20px;
		 border: 1px solid #ccc;
	}
	.row2 .title{
		font-size: 18px;
		font-weight: 900;
		margin-bottom: 10px;
	}
	.page {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}
</style>