<template>
	<div>
		<el-row :gutter="14">
			<el-col :xl="10" :lg="10" :md="10" :sm="24" :xs="24">
				<el-row :gutter="20">
					<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
						<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
							<div class="flex align-center justify-around" style="position: relative;padding-left: 40px;height: calc(36vh - 100px);">
								<div class="sTitleSty" style="font-size: 1.2rem;letter-spacing: 4px;">报警管理</div>
								<div>
									<div class="reportSty"><div><span>9</span></div></div>
									<div class="text-center text-bold margin-top-sm">警告总数</div>
								</div>
								<div class="text-sm">
									<div v-for="(items,indexs) in tabEquipment" :key="indexs" 
										class="margin-bottom pointer" @click="handleChange(items.type)">
										<el-button circle type="primary" :plain="!equipmentType[items.type]">
											<svg-icon :icon-class="items.type"/>
										</el-button>
										<span class="margin-left-xs">{{ items.name }}</span>
									</div>
								</div>
							</div> 
						</el-card>
					</el-col>
					<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
						<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
							<div style="position: relative;padding-left: 40px;">
								<div class="sTitleSty" style="font-size: 1.2rem;letter-spacing: 4px;">{{alarmProportion.title}}</div>
								<pie-circular-chart :name="alarmProportion.name" :data="alarmProportion.data" height="calc(36vh - 100px)"/>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<el-card class="box-card cardSty margin-top" :body-style="{ padding: '10px !important' }">
					<div class="text-center margin-bottom-sm text-xl text-bold">{{alarmRepoData.name}}</div>
					<bar-chart name="HostPressure" :data="alarmRepoData" height="calc(64vh - 127px)"/>
				</el-card>
			</el-col>
			<el-col :xl="14" :lg="14" :md="14" :sm="24" :xs="24">
				<el-form ref="refuelRecordsRef" :model="refuelForm" label-width="0">
					<el-row>
						<el-col :xl="16" :lg="16" :md="16" :sm="24" :xs="24">
							<div class="flex text-xs">
								<div v-for="(item,index) in tabEquipment" :key="index" 
									class="margin-right pointer" @click="handleChange(item.type)">
									<el-button circle type="primary" :plain="!equipmentType[item.type]">
										<svg-icon :icon-class="item.type"/>
									</el-button>
									<span class="margin-left-xs text-black">{{ item.name }}</span>
								</div>
								<el-form-item label="" class="margin-right">
									<el-date-picker
										v-model="refuelForm.compilationDate"
										type="daterange"
										range-separator="~"
										start-placeholder="开始日期"
										end-placeholder="结束日期">
									</el-date-picker>
								</el-form-item>
								<el-button type="primary">查询</el-button>
							</div>
						</el-col>
						<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
							<div class="flex justify-end text-xs">
								<div>
									<el-button circle><elIcon><RefreshRight/></elIcon></el-button>
									<span class="margin-left-xs text-black">刷新</span>
								</div>
								<div class="margin-lr">
									<el-button circle type="primary"><elIcon><Download/></elIcon></el-button>
									<span class="margin-left-xs text-black">导出</span>
								</div>	
								<div @click="handleAddSet">
									<el-button circle type="success"><elIcon><Setting/></elIcon></el-button>
									<span class="margin-left-xs text-black">设置</span>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-form>
				<el-table :data="alarmLogData" stripe style="width: 100%"
					height="calc(100vh - 190px)"
					:cell-style="{ fontSize: '0.75rem' }"
					@row-click="handleRowClick"
					:row-class-name="rowClassName"
					:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
					<el-table-column label="id" width="80" align="center">
						<template #default="scope">
							<span style="color: #0672fc;" :style="{ opacity: scope.row.deviceName?1:0 }" class="text-bold text-sm">{{scope.$index+1}}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="deviceName" label="设备名称"></el-table-column>
					<el-table-column align="center" prop="content" label="内容"></el-table-column>
					<el-table-column align="center" prop="alarmValue" label="数值"></el-table-column>
					<el-table-column align="center" prop="alarmTime" label="报警时间"></el-table-column>
					<el-table-column align="center" prop="alarmPosi" label="报警位置"></el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<alarm-set-drawer ref="AlarmSetDrawerRef"/>
	</div>
</template>

<script setup>
	import { reactive } from "vue";
	const { proxy } = getCurrentInstance();
	import AlarmSetDrawer from "@/components/AlarmSetting"
	import BarChart from "@/components/Echarts/BarChart";
	import pieCircularChart from "@/components/Echarts/pieCircularChart";
	const clickedRowIndex = ref(null);
	const alarmLogData = ref([]);
	
	const data = reactive({
		tabEquipment: [{
			name: "机舱",
			type: "engineRoom"
		},{
			name: "发电机",
			type: "alternator"
		},{
			name: "锅炉",
			type: "boiler"
		}],
		equipmentType: {
			"engineRoom": true,
			"alternator": true,
			"boiler": true
		},
		refuelForm: {},
		alarmRepoData: {
			name: "报警统计",
			xAxis: ["一月", "二月", "三月", "四月", "五月", "六月"],
			data: [{
				name: '主机',
				type: 'bar',
				color: "#ffa300",
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '发电机',
				type: 'bar',
				color: "#0672fc",
				data: [10, 14, 18, 19, 13, 10]
			},{
				name: '锅炉',
				type: 'bar',
				color: "#00ffd9",
				data: [15.28, 42.4, 31.8, 21.9, 11.3, 10.6]
			}],
		},
		alarmProportion: {
			title: "报警占比",
			name: "alarmPropCons",
			data: [{
				value: 10,
				name: "主机"
			},{
				value: 20,
				name: "辅机"
			},{
				value: 30,
				name: "锅炉"
			}]
		}
	});
	const { refuelForm, alarmProportion, alarmRepoData, tabEquipment, equipmentType } = toRefs(data);
	const handleChange = function(val){
		let _sta = equipmentType.value[val];
		equipmentType.value[val] = _sta == undefined?true:!_sta;
	}
	const handleAddSet = function(){
		proxy.$refs["AlarmSetDrawerRef"].show()
	}
	const handleRowClick = function(row, event, column) {
		clickedRowIndex.value = alarmLogData.value.indexOf(row);
	};
	const rowClassName = function({rowIndex}) {
		if (clickedRowIndex.value === rowIndex) {
	        return 'highlight-row';
		}
	}
	const getList = function(){
		alarmLogData.value = [{
			deviceName: "主机转速",
			content: "主机转速过高",
			alarmTime: "2024-06-20 15:35:36",
			alarmPosi: "",
			alarmValue: "2999"
		},{
			deviceName: "机油温度",
			content: "机油温度过高",
			alarmTime: "2024-06-02 09:16:36",
			alarmPosi: "",
			alarmValue: "106"
		},{
			deviceName: "主机转速",
			content: "主机转速过高",
			alarmTime: "2024-06-20 15:35:36",
			alarmPosi: "",
			alarmValue: "2999"
		},{
			deviceName: "主机转速",
			content: "主机转速过高",
			alarmTime: "2024-06-20 15:35:36",
			alarmPosi: "",
			alarmValue: "2999"
		},{
			deviceName: "主机转速",
			content: "主机转速过高",
			alarmTime: "2024-06-20 15:35:36",
			alarmPosi: "",
			alarmValue: "2999"
		},{
			deviceName: "主机转速",
			content: "主机转速过高",
			alarmTime: "2024-06-20 15:35:36",
			alarmPosi: "",
			alarmValue: "2999"
		},{
			deviceName: "主机转速",
			content: "主机转速过高",
			alarmTime: "2024-06-20 15:35:36",
			alarmPosi: "",
			alarmValue: "2999"
		},{
			deviceName: "主机转速",
			content: "主机转速过高",
			alarmTime: "2024-06-20 15:35:36",
			alarmPosi: "",
			alarmValue: "2999"
		}];
		proxy.setBlankData(alarmLogData.value, 21);
	}
	getList()
</script>


<style scoped lang="scss">
	
</style>