<template>
	<div style="padding: 6px;">
		<el-row :gutter="6" style="height: 100%;">
			<el-col :span="6">
				<div style="margin-bottom: 6px;" class="el-card">
					<div class="carTitle">证书总览</div>
					<div class="flex flex-wrap" style="height: calc(50vh - 85px);">
						<div class="flex flex-direction align-center justify-center" style="height: 50%;width: 50%;" 
							v-for="(item,index) in statisLi" :key="index">
							<div :style="'font-size: 54px;font-weight: bold;color:'+item.colr">{{item.num}}</div>
							<div class="text-df">{{item.name}}</div>
						</div>
					</div>
				</div>
				<div class="el-card">
					<div class="carTitle">报警详情</div>
					<div class="text-sm text-grey padding-sm" style="height: calc(50vh - 85px);overflow-y: auto;">
						<p v-for="(wani,wanind) in warmList" :key="wanind">
							{{wanind+1}}、证书
							<span class="text-el-primary text-bold">{{"《"+wani.certificateName+"》"}}</span>
							{{wani.nextTime<0?"已于":"将于"}}
							<span class="text-el-primary">{{wani.certificateEffectiveDate}}</span>
							过期,请留意及时更新！</p>
					</div>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="el-card">
					<div class="carTitle">证书列表</div>
					<el-table :data="tableData" height="calc(100vh - 130px)" border style="width: 100%">
						<el-table-column align="center" prop="certificateName" label="证书名称"></el-table-column>
						<el-table-column align="center" prop="certificateIssueDate" label="签发日期"></el-table-column>
						<el-table-column align="center" label="证书有效期">
							<template #default="scope">
								{{(isNaN(scope.row.certificateEffectiveDate) && !isNaN(Date.parse(scope.row.certificateEffectiveDate)))?scope.row.certificateEffectiveDate:"长期"}}
							</template>
						</el-table-column>
						<el-table-column align="center" sortable prop="nextTime" label="到期剩余天数">
							<template #default="scope">
								<span v-if="scope.row.nextTime == '长期'">长期</span>
								<span v-else :class="scope.row.nextTime<0?'text-red':''">{{scope.row.nextTime}}</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-col>
			<el-col :span="6">
				<div style="margin-bottom: 6px;" class="el-card">
					<div class="carTitle">有效期总览</div>
					<div ref="carPeriod" style="height: calc(50vh - 85px)" />
				</div>
				<div style="height:calc(50% - 3px);" class="el-card">
					<div class="carTitle">证书分布</div>
					<div ref="carDistribution" style="height: calc(50vh - 85px)" />
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import * as echarts from 'echarts';
	const { proxy } = getCurrentInstance();
	const store = useStore();
	import { onMounted } from 'vue';
	import { listCertificate } from "@/api/certificate/certificate";
	const loading = ref(true);
	const carPeriod = ref(null);
	const carDistribution = ref(null);
	const nowTime = new Date().getTime();
	var commandstatsIntance;
	var usedmemoryInstance;
	const data = reactive({
		statisLi: [{"name":"证书总数","num":0,"colr":"#008dd4"},
				   {"name":"正常期限","num":0,"colr":"#00d42a"},
				   {"name":"即将到期","num":0,"colr":"#d1d400"},
				   {"name":"已过期","num":0,"colr":"#d40000"}],
		tableData: [],
		warmList:[]
	});
	const { statisLi, tableData, warmList } = toRefs(data);
	/** 查询证书列表 */
	function getList() {
	    loading.value = true;
	    listCertificate({
			pageNum: 1,
			pageSize: 9999
		}).then(response => {
			let _obj = response.rows;
			let dataList = [0, 0, 0, 0, 0],_warm = [];
			let carDistr = [{"name":"船舶证书","value":0},
						   {"name":"船员证书","value":0}];
			_obj.map((item,index)=>{
				if(isNaN(item.certificateEffectiveDate) && !isNaN(Date.parse(item.certificateEffectiveDate))){
					let time = getDaysBetween(nowTime,item.certificateEffectiveDate);
					item.nextTime = time;
					if (time > 365) {
						dataList[1] += 1;
					} else if (time > 31 && time < 366) { 
						dataList[2] += 1;
					} else if (time > -1 && time < 32) {
						dataList[3] += 1;
						_warm.push(item);
					} else if (time < 0) {
						_warm.push(item);
						dataList[4] += 1;
					}
				}else{
					dataList[0] += 1;
					item.nextTime = "长期";
				}
				if (item.certificateCategory == 1) {
					carDistr[0].value += 1;
				} else{
					carDistr[1].value += 1;
				}
			});
			statisLi.value[0].num = _obj.length;
			statisLi.value[1].num = dataList[0]+dataList[1]+dataList[2];
			statisLi.value[2].num = dataList[3];
			statisLi.value[3].num = dataList[4];
			tableData.value = _obj;
			warmList.value = _warm;
			commandstatsIntance = echarts.init(carDistribution.value, "macarons");
			commandstatsIntance.setOption({
				tooltip: {
					trigger: "item",
					formatter: "{a} <br/>{b} : {c} 个({d}%)"
				},
				legend: {
					top: "bottom",
					textStyle: {
						color: "#000"
					}
				},
				series: [{
					name: "证书分布",
					type: "pie",
					radius: '50%',
					center: ["50%", "40%"],
					itemStyle: {
						label: {
							formatter: '{d}%'
						}
					},
					data: carDistr,
					animationEasing: "cubicInOut",
					animationDuration: 1000
			    }]
			});
			usedmemoryInstance = echarts.init(carPeriod.value, "macarons");
			usedmemoryInstance.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow' 
					}
				},
				grid: {
					top: '8%',
					left: '0%',
					right: '0%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
				    type: 'category',
				    data: ['长期','>365天', '32-365天', '<32天', '已过期'],
					axisLine: {
						lineStyle: {
							color: '#000'
						}
					},
				},
				yAxis: {
				    type: 'value',
					axisLine: {
						show: false,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#747474'
						}
					},
					axisLabel: {
						formatter: function() {
							return "";
						}
					},
					
				},
				series: [{
					data: dataList,
					name:  '实时数据',
					type: 'bar',
					barWidth: '45%',
					itemStyle: {
						label: {
							color: '#fff'
						},
						color: function(params) {
							var colorList = [
								['#00d42a', '#00d42a'],
								['#00d42a', '#00d42a'],
								['#d1d400', '#d1d400'],
								['#d1d400', '#d1d400'],
								['#d40000', '#d40000']
							];
							var index = params.dataIndex;
							if (params.dataIndex >= colorList.length) {
								index = params.dataIndex - colorList.length;
							}
							return new echarts.graphic.LinearGradient(0, 0, 0, 1,
								[{
										offset: 0,
										color: colorList[index][0]
									},
									{
										offset: 1,
										color: colorList[index][1]
									}
								]);
						}
					},
					label: {
						show: true,
						position: 'top',
						color: '#fff',
						formatter: function(params) {
							var list =["个","个", "个", "个", "个"];
							var index = params.dataIndex;
							if (params.dataIndex >= list.length) {
								index = params.dataIndex - list.length;
							}
							return dataList[index] + list[index]
						}
					}
				}]
			})
			loading.value = false;
	    });
	}
	const getDaysBetween = function(date1, date2) {
		var days = "";
		var endDate = new Date(date2.replace(/-/g,'/')).getTime();
		days = parseInt((endDate - date1) / (1*24 * 60 * 60 * 1000));
		return days;
	};
	
	watch(()=>store.state.settings.sideTheme, (newValue) => {
		let _ais = (newValue.indexOf("dark") != -1)?"#fff":"#000";
		commandstatsIntance.setOption({legend:{textStyle: {	color: _ais}}});
		usedmemoryInstance.setOption({xAxis:{axisLine: {lineStyle:{color: _ais}}}});
	});
	onMounted(() => {
		getList();
	})
</script>

<style lang='scss' scoped>
	.carTitle{
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		padding: 4px 0;
		color: #fff;
		background-color: var(--el-menu-bg-color);
	}
</style>