<template>
	<div class="app-container home" v-resize="resize">
		<div></div>
		<div>
			<el-card shadow="always">
				<search @picker-change="pickerChage" title="患者信息统计" type="1"></search>
			</el-card>
			<patient ref="patient"></patient>
		</div>
		<div>
			<el-card shadow="always">
				<search @picker-change="pickerChage" title="诊疗信息统计" type="2"></search>
			</el-card>
			<JM ref="JM"></JM>
		</div>
		<div>
			<el-card shadow="always">
				<search @picker-change="pickerChage" title="治疗类型统计" type="3"></search>
			</el-card>
			<XGZL ref="XGZL"></XGZL>
		</div>
		<div>
			<el-card shadow="always">
				<search @picker-change="pickerChage" title="随访统计" type="4"></search>
			</el-card>
			<follow ref="follow"></follow>
		</div>
	</div>
</template>

<script>
	import {
		getCodeImg,
		firstAidTest
	} from "@/api/login";
	import search from "@/views/indexCom/query";
	import patient from "@/views/indexCom/patient";
	import JM from "@/views/indexCom/JM";
	import XGZL from "@/views/indexCom/XGZL";
	import follow from "@/views/indexCom/follow";
	export default {
		name: "Index",
		components: {
			search,
			patient,
			JM,
			XGZL,
			follow
		},
		data() {
			return {};
		},
		async created() {
			// firstAidTest().then((res) => {
			//   console.log(res);
			// });
			const start = new Date();
			const end = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			await setTimeout(async () => {
				await this.$refs.patient.statistics([start, end], 4);
				await this.$refs.JM.statistics([start, end], 4);
				await this.$refs.XGZL.statistics([start, end], 4);
			});
		},
		methods: {
			resize() {
				console.log(111)
				this.$refs.patient.getRenew();
				this.$refs.JM.getRenew();
				this.$refs.XGZL.getRenew();
				this.$refs.follow.getRenew();
			},
			// 周 月 季 年
			radioChange(_data, _type, _timeType) {
				this.initial(_data, _type, _timeType);
			},
			// 时间
			pickerChage(_data, _type, _timeType) {
				this.initial(_data, _type, _timeType);
			},
			// 数据处理 查询类型判断参数
			initial(_data, _type, param) {
				if (_type == 1) {
					this.$refs.patient.statistics(_data, param);
				}
				if (_type == 2) {
					this.$refs.JM.statistics(_data, param);
				}
				if (_type == 3) {
					this.$refs.XGZL.statistics(_data, param);
				}
				if (_type == 4) {
					this.$refs.follow.statistics(_data, param);
				}
			},
		},
		directives: {
			// 使用局部注册指令的方式
			resize: {
				// 指令的名称
				bind(el, binding) {
					// el为绑定的元素，binding为绑定给指令的对象
					let width = "",
						height = "";

					function isReize() {
						const style = document.defaultView.getComputedStyle(el);
						if (width !== style.width) {
							binding.value(); // 关键
						}
						width = style.width;
					}
					el.__vueSetInterval__ = setInterval(isReize, 200);
				},
				unbind(el) {
					clearInterval(el.__vueSetInterval__);
				},
			},
		},
	};
</script>

<style scoped lang="scss">
	.home {
		background: #f3f5f9;
		min-height: 100vh;
	}

	.home {
		blockquote {
			padding: 10px 20px;
			margin: 0 0 20px;
			font-size: 17.5px;
			border-left: 5px solid #eee;
		}

		hr {
			margin-top: 20px;
			margin-bottom: 20px;
			border: 0;
			border-top: 1px solid #eee;
		}

		.col-item {
			margin-bottom: 20px;
		}

		ul {
			padding: 0;
			margin: 0;
		}

		font-family: "open sans",
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif;
		font-size: 13px;
		color: #676a6c;
		overflow-x: hidden;

		ul {
			list-style-type: none;
		}

		h4 {
			margin-top: 0px;
		}

		h2 {
			margin-top: 10px;
			font-size: 26px;
			font-weight: 100;
		}

		p {
			margin-top: 10px;

			b {
				font-weight: 700;
			}
		}

		.update-log {
			ol {
				display: block;
				list-style-type: decimal;
				margin-block-start: 1em;
				margin-block-end: 1em;
				margin-inline-start: 0;
				margin-inline-end: 0;
				padding-inline-start: 40px;
			}
		}
	}
</style>
<style scoped>
	>>>.el-card {
		margin-bottom: 16px;
	}

	>>>.el-card__body {
		padding: 10px 20px;
	}
</style>
