<template>
	<div style="font-size: 14px;" class="padding-xs">
		<div class="margin-bottom-xs">
			<el-radio-group v-model="hostRadio" size="small" @change="changeTab">
				<el-radio-button label="0">所有设备</el-radio-button>
				<el-radio-button style="border-left: var(--el-border);" label="1" class="margin-lr-xs">主机报警</el-radio-button>
				<el-radio-button style="border-left: var(--el-border);" label="2" class="">发电机报警</el-radio-button>
				<el-radio-button style="border-left: var(--el-border);" label="3" class="margin-left-xs">锅炉报警</el-radio-button>
			</el-radio-group>
		</div>
		<el-row :gutter="5">
			<el-col :xs="24" :span="16">
				<el-card class="box-card margin-bottom-xs" :body-style="{ padding: '0' }">
					<div class="square">报警内容筛选</div>
					<el-form :model="queryParams" ref="queryRef" :inline="true" class="margin-tb-xs padding-lr">
						<el-row :gutter="5">
							<el-col :span="8" :xs="24">
								<el-form-item label="报警内容：" style="margin-bottom:0;">
									<el-input v-model="queryParams.name" @clear="searchData" clearable placeholder="内容关键字"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="16" :xs="24">
								<el-form-item label="报警时间：" style="margin-bottom: 0px;">
									<el-date-picker
										v-model="queryParams.searhDate"
										type="date"
										placeholder="选择日期">
									</el-date-picker>
									<el-button type="primary" @click="searchData" class="margin-left-xs">查询</el-button>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-card>
				<div style="border: 1px solid #20a884">
					<el-table :data="hisData"
						max-height="calc(100vh - 200px)"
						ref="singleTable"
						stripe
						:cell-style="{ padding: '8px 0',fontSize: '12px' }"
						:header-cell-style="{ padding: '2px 0',background: '#30B08E' }"
						header-cell-class-name="text-white text-bold bg-red">
						<el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
						<el-table-column align="center" prop="device" label="设备"></el-table-column>
						<el-table-column align="center" prop="content" label="内容"></el-table-column>
						<el-table-column align="center" prop="number" label="数值">
							<template #default="scope">
								<text style="padding: 2px 6px;background-color:#FF4F4F;" class="text-white">{{scope.row.number}}</text>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="creatTime" label="报警时间" width="200">
							<template #default="scope">
								 {{ parseTime(scope.row.creatTime, '{y}/{m}/{d} {h}:{d}:{s}') }}
							</template>
						</el-table-column>
						<el-table-column align="center" prop="record" label="报警记录" width="90">
							<template #default="scope">
								<svg-icon icon-class="record_1" class="text-df text-blue"/>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="screen" label="筛选" width="70">
							<template #default="scope">
								<div class="checkBox" @click="changeItem(scope.row)"
									:class="dataItem.id == scope.row.id?'checkBox_act':''"></div>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-col>
			<el-col :xs="24" :span="8">
				<el-card class="box-card" :body-style="{ padding: '10px' }">
					<div style="border-bottom: 1px solid #218066;" class="padding-xs text-center text-bold text-white margin-bottom-sm">
						<text style="padding: 2px 25px;" :style="'background-color:'+(dateType == 0?'#5470C6':'#20A884')" 
							@click="changeDate(0)" class="pointer">周</text>
						<text style="padding: 2px 25px;" :style="'background-color:'+(dateType == 1?'#5470C6':'#20A884')" 
							@click="changeDate(1)" class="margin-lr-sm pointer">月</text>
						<text style="padding: 2px 25px;" :style="'background-color:'+(dateType == 2?'#5470C6':'#20A884')" 
							@click="changeDate(2)" class="pointer">年</text>
					</div>
					<div>
						<div class="cardTitle">机舱报警占比</div>
						<pieChart :name="`shipType`" style="height:calc(50vh - 118px);" :data="shipTypeData"/>
					</div>
					<div>
						<div class="cardTitle">报警历史趋势</div>
						<lineChart :name="`shipOilTrend`" height="calc(50vh - 118px)" :data="oilTrendData"/>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	const store = useStore();   
	const { proxy } = getCurrentInstance();
	const hostRadio = ref(0);
	import pieChart from "@/components/Echarts/pieChart";
	import lineChart from "@/components/Echarts/wayBillChart/lineChart";
	const hisData = ref([]);
	const dateType = ref(0);
	const dataItem = ref({});
	var dataObj = [];
	var yearData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
	var monData = ['11/1', '11/2', '11/3', '11/4', '11/5', '11/6', '11/7', '11/8', '11/9', '11/10', '11/11', '11/12', '11/13', '11/14', '11/15', '11/16', '11/17', '11/18', '11/19', '11/20', '11/21'];
	var weekData = ["11/15", "11/16", "11/17", "11/18", "11/19", "11/20", "11/21"];
	const data = reactive({
		hostData: [{
			hostPower: { value: 83.4, name: "功率", unit: "kw", scalc: "90%", max: 600},
			hostSpeed: { value: 1053.4, name: "发电机转速", unit: "r/min", max: 2000},
			boosterSpeed: { value: 1053.4, name: "增压器转速", unit: "r/min", max: 2000},
			shipGas: { value: 7, name: "启动空气压力", unit: "", scalc: "90%", max: 10},
			pqTemp: {
				xAxis: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号'],
				data: [45.4, 69.4, 40.6, -54.4, -34.4, 15.4, 29.4, 15.6, 34.4, 61.4],
				show: true,
				splitShow: false,
				unit: "℃",
				title: "排气口温差"
			}
		},{
			hostPower: { value: 56.03, name: "功率", unit: "kw", scalc: "90%", max: 600},
			hostSpeed: { value: 0, name: "发电机转速", unit: "r/min", max: 2000},
			boosterSpeed: { value: 2607.5, name: "增压器转速", unit: "r/min", max: 2000},
			shipGas: { value: 2.6, name: "启动空气压力", unit: "", scalc: "90%", max: 10},
			pqTemp: {
				xAxis: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号'],
				data: [15.4, 29.4, 60.6,-34.4, 55.4, 29.4, 35.6, 34.4, -44.4, 61.4],
				show: true,
				splitShow: false,
				unit: "℃",
				title: "排气口温差"
			}
		}],
		queryParams: {
			type: 0
		},
		oilTrendData: {
			data: [{
				data: [ 515.96, 616.57, 422.44, 323.91, 527.96, 423.91, 527.96],
				name: "",
				type: 'line',
				showSymbol: false,
				"itemStyle": {
					"color": "#FAC858"
				}
			}],
			xAxis: ["11/15", "11/16", "11/17", "11/18", "11/19", "11/20", "11/21"]
		},
		shipTypeData: {
			sign: 'ring',
			data: [{ value: 7, name: '主机' },
				   { value: 5, name: '发电机' },
				   { value: 2, name: '舵机' },
				   { value: 1, name: '锚机' },
				   { value: 2, name: '锅炉' }]
		}
	 });
	 const {
	 	hostData,
		queryParams,
		oilTrendData,
		shipTypeData
	 } = toRefs(data);
	 const changeItem = function(_row){
		 dataItem.value = _row;
		 getDatas();
	 }
	const changeDate = function(val){
		dateType.value = val;
		getDatas()
	 }
	 const getDatas = function(){
		 let _xy = (dateType.value == 0?weekData:(dateType.value ==1?monData:yearData));
		 let _arr = [];
		 for(var i=0;i<_xy.length;i++){
			 _arr.push((Math.random()*700).toFixed(2));
		 }
		 oilTrendData.value = {
		 	data: [{
		 		data: _arr,
		 		name: "",
		 		type: 'line',
		 		showSymbol: false,
		 		"itemStyle": {
		 			"color": "#FAC858"
		 		}
		 	}],
		 	xAxis: _xy
		 };
	 }
	 const searchData = function(){
		 hisData.value = dataObj.filter((item,index) => { return (hostRadio.value == 0?(item.content.indexOf(queryParams.value.name) != -1):((item.content.indexOf(queryParams.value.name) != -1)&&(hostRadio.value == item.type))) });
	 }
	 const changeTab = function(val){
		queryParams.value.name = "";
		if(val == 0){
			hisData.value = dataObj;
		}else{
			hisData.value = dataObj.filter((item,index) => { return item.type == val });
		}
		dataItem.value = hisData.value[0];
		getDatas();
	 }
	const getList = function(){
		 dataObj = [{
			device: "锅炉",
			content: "锅炉水温过高",
			number: "94.3℃",
			creatTime: 1700635724000,
			id: 19,
			type: 3
		 },{
			device: "锅炉",
			content: "锅炉水温过高",
			number: "90.3℃",
			creatTime: 1700633288000,
			id: 13,
			type: 3
		 },{
			device: "锅炉",
			content: "锅炉水温过高",
			number: "98.3℃",
			creatTime: 1700632088000,
			id: 12,
			type: 3
		 },{
			device: "主机",
			content: "低温水进口压力报警",
			number: "12.3kPa",
			creatTime: 1700631646000,
			id: 11,
			type: 1
		 },{
			device: "主机",
			content: "出机温度过高",
			number: "95.4℃",
			creatTime: 1700624446000,
			id: 10,
			type: 1
		 },{
			device: "主机",
			content: "后进气温度报警",
			number: "98.3℃",
			creatTime: 1700624244000,
			id: 8,
			type: 1
		 },{
			device: "主机",
			content: "进机温度报警",
			number: "98.3℃",
			creatTime: 1700623916000,
			id: 7,
			type: 1
		 },{
			device: "发电机",
			content: "发电机水温过高",
			number: "94.3℃",
			creatTime: 1700623479000,
			id: 6,
			type: 2
		 },{
			device: "发电机",
			content: "发电机水温过高",
			number: "90.3℃",
			creatTime: 1700623256000,
			id: 5,
			type: 2
		 },{
			device: "主机",
			content: "进机温度报警",
			number: "98.3℃",
			creatTime: 1700619837000,
			id: 1,
			type: 1
		 },{
			device: "主机",
			content: "出机温度过高",
			number: "95.4℃",
			creatTime: 1700621933000,
			id: 3,
			type: 1
		 },{
			device: "锅炉",
			content: "锅炉水温过高",
			number: "94.3℃",
			creatTime: 1700621213000,
			id: 14,
			type: 3
		 },{
			device: "主机",
			content: "后进气温度报警",
			number: "98.3℃",
			creatTime: 1700620604000,
			id: 2,
			type: 1
		 },{
			device: "主机",
			content: "低温水进口压力报警",
			number: "12.3kPa",
			creatTime: 1700622874000,
			id: 4,
			type: 1
		 },{
			device: "发电机",
			content: "发电机水温过高",
			number: "98.3℃",
			creatTime: 1700620624000,
			id: 9,
			type: 2
		 }];
		 hisData.value = dataObj;
		 dataItem.value = hisData.value[0];
	 }
	getList()
</script>

<style lang='scss' scoped>
	.cardTitle{
		position: relative;
		font-size: 0.9rem;
		font-weight: bold;
		margin-bottom: 3px;
		padding: 0 0 2px 11px;
		&:after{
			content: "";
			position: absolute;
			top: 4px;
			bottom: 6px;
			left: 0;
			width: 6px;
			background: #218066;
		}
	}
	.checkBox{
		display: inline-block;
		cursor: pointer;
		width: 14px;
		height: 14px;
		border-radius: 2px;
		border: 1px solid var(--blue);
		&.checkBox_act{
			position: relative;
			background-color: var(--blue);
		}
		&:after {
		    content: "";
		    position: absolute;
		    left: 1px;
		    top: 2px;
		    width: 10px;
		    height: 6px;
		    border: 2px solid #fff;
		    border-radius: 1px;
		    border-top: none;
		    border-right: none;
		    background: transparent;
		    transform: rotate(-50deg);
		}
	}
</style>
