<template>
	<el-row :gutter="6">
		<el-col :md="12" :sm="24">
			<el-card shadow="hover">
				<template #header>
					<div class="card-header">
						<span>今日事件</span>
						<el-button @click="moreEvent" type="primary" text>更多</el-button>
					</div>
				</template>
				<scTable ref="table" :apiObj="apiObj" :params="params" row-key="id" fit stripe hideDo  :height="tableHeight">
					<el-table-column label="事件种类">
					<template #default="scope">
						<el-span v-for="item in scope.row.cates_" :key="item.id" :label="item.name" :value="item.id">{{
						item.name }}/</el-span>
					</template>
					</el-table-column>
					<el-table-column label="发生区域" prop="area_.name"></el-table-column>
					<el-table-column label="当事人" prop="employee_.name">
					<template #default="scope">
						<span v-if="scope.row.employee && scope.row.obj_cate == 'people'">{{ scope.row.employee_.name }}</span>
						<span v-else>未知人员</span>
					</template>
					</el-table-column>
					<el-table-column label="发生时间" prop="create_time"></el-table-column>
				</scTable>
        	</el-card>
		</el-col>
		<el-col :md="12" :sm="24">
			<el-card shadow="hover">
				<template #header>
				<div class="card-header">
					<span>今日事件统计</span>
				</div>
				</template>
				<scEcharts id="totalEchart" height="360px" :option="option3"></scEcharts>
			</el-card>
		</el-col>
	</el-row>
</template>

<script>
	import scEcharts from "@/components/scEcharts";
	export default {
		title: "关于项目",
		icon: "el-icon-setting",
		description: "点个星星支持一下",
		components: {
			scEcharts,
		},
		data() {
			return {
				apiObj:null,
				dutyAgg: [],
				postOptions: [],
				option3: null,
				divHeight:null,
      			tableHeight:null,
			}
		},
		created() {
			this.apiObj = this.$API.ecm.event.list;
			var craeteTime = this.$TOOL.dateFormat(
			new Date().toLocaleDateString(),
			"yyyy-MM-dd"
			);

			this.postOptions = [];
			this.$API.ecm.event.cateAgg.req({ completed: false, start_create: craeteTime })
			.then((res) => {
				res.details.forEach((itemI, indexI) => {
				this.postOptions.push({ value: itemI.count, name: itemI.cate__name });
				});
			});
			this.option3 = {
			title: {},
			tooltip: {
				trigger: "item",
			},
			legend: {
				left: 'center'
			},
			series: [
				{
				name: "事件分类",
				type: "pie",
				radius: ["40%", "70%"],
				center: ["50%", "60%"],
				label: {
					formatter: '{c}',
					position: 'inside',
					color: 'white'
				},
				data: this.postOptions,
				},
			],
			};
		},
		mounted(){
			let height1 = document.getElementsByClassName('widgets-content')[0].clientHeight;
			console.log(height1)
			let bottomHeight = height1-138-120;
			this.tableHeight = bottomHeight/2-10;
			this.divHeight = bottomHeight/2+'px';
			
			document.getElementById('totalEchart').style.height = this.divHeight
		},
		methods: {
			moreEvent() {
				this.$router.push({
					name: "event",
					query: {},
				});
			},
		},
	}
</script>

<style scoped>
	.item-background p {color: #999;margin-top:10px;line-height: 1.8;}
</style>
