<template>
	<div class="padding-xs">
		<div style="position: relative;">
			<el-menu :default-active="cardActive" class="el-menu-demo" active-text-color="#000"
				mode="horizontal" @select="handleSelect" style="margin-bottom:5px;">
				<el-menu-item style="line-height: 40px;" :index="''+ind" 
				v-for="(item,ind) in 3" :key="ind">{{ind+1}}#发电机</el-menu-item>
			</el-menu>
			<button class="pointer" title="刷新" :disabled="clickDisabled" @click="handleQuery"
			  style="position: absolute;top: 50%;left: 500px;transform: translate(50%,-50%);background-color: transparent;">
			  <el-icon style="color: var(--el-color-primary);"><Refresh /></el-icon>
			</button>
		</div>
		<el-form ref="queryForm" :inline="true">
		  <div class="flex justify-center">
		    <div class="flex">
		      <el-button type="primary" :disabled="clickDisabled" @click="changeDay(-1)">前一天</el-button>
		      <div class="margin-right-xs"></div>
		      <el-date-picker type="date" placeholder="选择日期"
		        :editable="false" :clearable="false" v-model="selectedDays" @change="handleQuery"
		       />
		      <div class="margin-right-xs"></div>
		      <el-button type="primary" :disabled="clickDisabled" @click="changeDay(1)">后一天</el-button>
		    </div>
		  </div>
		</el-form>
		<div>
			<el-row :gutter="8">
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-sm">
					<el-card v-loading="loading.engineSpeed">
						<lineChart height="calc(50vh - 150px)" :name="`engine-chart-engineSpeed`" :data="engine[cardActive].engineSpeed"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-sm">
					<el-card v-loading="loading.engineVoltage">
						<lineChart height="calc(50vh - 150px)" :name="`engine-chart-engineVoltage`" :data="engine[cardActive].engineVoltage"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-sm">
					<el-card v-loading="loading.enginePower">
						<lineChart height="calc(50vh - 150px)" :name="`engine-chart-enginePower`" :data="engine[cardActive].enginePower"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-sm">
					<el-card v-loading="loading.engineRuning">
						<lineChart height="calc(50vh - 150px)" :name="`engine-chart-engineRuning`" :data="engine[cardActive].engineRuning"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-sm">
					<el-card v-loading="loading.engineFuelpre">
						<lineChart height="calc(50vh - 150px)" :name="`engine-chart-engineFuelpre`" :data="engine[cardActive].engineFuelpre"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-sm">
					<el-card v-loading="loading.engineFuelinpre">
						<lineChart height="calc(50vh - 150px)" :name="`engine-chart-engineFuelinpre`" :data="engine[cardActive].engineFuelinpre"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-sm">
					<el-card v-loading="loading.engineOilpre">
						<lineChart height="calc(50vh - 150px)" :name="`engine-chart-engineOilpre`" :data="engine[cardActive].engineOilpre"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-sm">
					<el-card v-loading="loading.engineFuelused">
						<lineChart height="calc(50vh - 150px)" :name="`engine-chart-engineFuelused`" :data="engine[cardActive].engineFuelused"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-sm">
					<el-card v-loading="loading.engineFueltemp">
						<lineChart height="calc(50vh - 150px)" :name="`engine-chart-engineFueltemp`" :data="engine[cardActive].engineFueltemp"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-sm">
					<el-card v-loading="loading.engineInmani">
						<lineChart height="calc(50vh - 150px)" :name="`engine-chart-engineInmani`" :data="engine[cardActive].engineInmani"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-sm">
					<el-card v-loading="loading.engineCooltemp">
						<lineChart height="calc(50vh - 150px)" :name="`engine-chart-engineCooltemp`" :data="engine[cardActive].engineCooltemp"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-sm">
					<el-card v-loading="loading.enginelubetemp">
						<lineChart height="calc(50vh - 150px)" :name="`engine-chart-enginelubetemp`" :data="engine[cardActive].enginelubetemp"/>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup>
	import * as echarts from 'echarts';
	const store = useStore();
	const { proxy } = getCurrentInstance();
	import { reactive, ref } from '@vue/reactivity';
	import { onMounted,onBeforeUnmount } from 'vue';
	import lineChart from "@/components/Echarts/reportChart";
	// import { getAngolReport } from "@/api/ship/ship";
	const itemShipSn = ref(null);
	const data = reactive({
		engine:[],
		cardActive: '0',
		loading:{
			engineSpeed: false,
			engineVoltage: false,
			enginePower: false,
			engineRuning: false,
			engineFuelpre: false,
			engineFuelinpre: false,
			engineOilpre: false,
			engineFuelused: false,
			engineFueltemp: false,
			engineInmani: false,
			engineCooltemp: false,
			enginelubetemp: false
		},
		selectedDays:"",
		clickDisabled: false
	});
	const { engine, cardActive, loading,selectedDays,clickDisabled } = toRefs(data);
	var daysBetw = 0;
	const handleSelect = function(key, keyPath){
		cardActive.value = key;
		getChart();
	};
	const handleQuery = function(){
		clickDisabled.value = true;
		// 判断选择日期是否是未来日期
		let curDateString = proxy.parseTime(new Date(), `{y}-{m}-{d}`)
		let curDateTimeStamp = (new Date(curDateString)).getTime();
		if (new Date(selectedDays.value).getTime() > curDateTimeStamp) {
			selectedDays.value = curDateString;
			clickDisabled.value = false
			return
		}
		selectedDays.value = proxy.parseTime(selectedDays.value, `{y}-{m}-{d}`)
		getChart();
	}
	const changeDay = function(days){
		clickDisabled.value = true
		let curDateTimeStamp = (new Date(proxy.parseTime(new Date(), `{y}-{m}-{d}`))).getTime()
		let dateTime = proxy.parseTime(new Date(selectedDays.value).getTime() + 1000 * 60 * 60 * 24 * days, `{y}-{m}-{d}`)
		// 判断选择日期是否是未来日期
		if (new Date(dateTime).getTime() >= curDateTimeStamp + 1000 * 60 * 60 * 24) {
			clickDisabled.value = false
			return
		}
		selectedDays.value = dateTime;
		handleQuery();
	}
	const getChart = function(){
		// if(itemShipSn.value != ""&&itemShipSn.value != null){
		// 	let _sn = itemShipSn.value.split(",");
		// 	let _snl = _sn.length ==1?[_sn[0],_sn[0]]:_sn;
		// 	let pointer = engine.value[cardActive.value];
		// 	for(let key in pointer){
		// 		loading.value[key] = true;
		// 		let _ab = key;
		// 		getAngolReport({
		// 			column: pointer[key].key,
		// 			startTime: selectedDays.value + " 00:00:00",
		// 			endTime: selectedDays.value + " 23:59:59",
		// 			sn: cardActive.value>2?_snl[1]:_snl[0]
		// 		}).then((response)=>{
		// 			makeHostData(_ab, response);
		// 			setTimeout(() => {
		// 				clickDisabled.value = false;
		// 			}, 300);
		// 		})
		// 	}
		// }else{
			reSet();
		// }
	}
	const daysBetween = function() {
		return parseInt(Math.abs(new Date(selectedDays.value) - new Date(selectedDays.value)) / (  1000 * 3600 * 24))
	}
	const makeXAxis = function(daysBe) {
		let xAxis = []
		if (daysBe < 1) {
			for (var i = 0; i < 12; i++) {
				xAxis.push(...[i * 2, '', '', '', '', '', '', '', '', '', '', '', ])
			}
		} else if (daysBe < 2) {
			for (var i = 0; i < 12; i++) {
				xAxis.push(...[(i * 4) % 24, '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',
				'',
				'', '',
				])
			}
		} else if (daysBe < 3) {
			for (var i = 0; i < 12; i++) {
				xAxis.push(...[(i * 6) % 24, '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',
				'', '', '', '', '', '', '', '', '', '', '', '', '', '', '',
				])
			}
		}
		xAxis[xAxis.length - 1] += '(h)'
		return xAxis
	}
	
	const makeHostData = function(_key, response) {
		let responseJson = {}
		response.map(item => {
			item._time = item.time.substr(0, 17).replace(/-/g, '/').replace('T', ' ') + '00'
			responseJson[item._time] = item.value
		})
		let length = 6 * 24 * (daysBetw + 1)
		let startDateTime = new Date(selectedDays.value + " 00:00:00")
		let value = []
		for (let i = 0; i < length; i++) {
			let key = proxy.parseTime(new Date(startDateTime.getTime() + 1000 * 60 * 10 * i),`{y}/{m}/{d} {h}:{i}:{s}`)
			value.push((responseJson[key] == -30000 || responseJson[key] == -3200 || responseJson[key] == null) ? 0 : responseJson[key])
		}
		let data = JSON.parse(JSON.stringify(engine.value[cardActive.value][_key]))
		data.xAxis = makeXAxis(daysBetw)
		data.value = value
		engine.value[cardActive.value][_key] = data;
		loading.value[_key] = false;
	}
	
	const reSet = function(){
		engine.value = [
			getData([["发电机转速","06H","RPM"], ["电瓶电压","066","V"],["发电机功率","069","KW"], ["运行时间","068","H"],
					["燃油压力","063","kPa"], ["燃油进机压力","06K","kPa"],["润滑油压力","064","kPa"], ["燃油使用总量","06I","L"],
					["燃油温度","061","℃"], ["进气歧管温度","06G","℃"],["润滑油温度","062","℃"], ["冷却液温度","060","℃"]]),
			getData([["发电机转速","08H","RPM"], ["电瓶电压","086","V"],["发电机功率","089","KW"], ["运行时间","088","H"],
					["燃油压力","083","kPa"], ["燃油进机压力","08K","kPa"],["润滑油压力","084","kPa"], ["燃油使用总量","08I","L"],
					["燃油温度","081","℃"], ["进气歧管温度","08G","℃"],["润滑油温度","082","℃"], ["冷却液温度","080","℃"]]),
			getData([["发电机转速","0AH","RPM"], ["电瓶电压","0A6","V"],["发电机功率","0A9","KW"], ["运行时间","0A8","H"],
					["燃油压力","0A3","kPa"], ["燃油进机压力","0AK","kPa"],["润滑油压力","0A4","kPa"], ["燃油使用总量","0AI","L"],
					["燃油温度","0A1","℃"], ["进气歧管温度","0AG","℃"],["润滑油温度","0A2","℃"], ["冷却液温度","0A0","℃"]]),
		]
	}
	const getData = function(_obj){
		return {
			engineSpeed: { name: _obj[0][0], xAxis: [], value: [], unit: _obj[0][2], key: _obj[0][1] },
			engineVoltage: { name: _obj[1][0], xAxis: [], value: [], unit: _obj[1][2], key: _obj[1][1] },
			enginePower: { name: _obj[2][0], xAxis: [], value: [], unit: _obj[2][2], key: _obj[2][1] },
			engineRuning: { name: _obj[3][0], xAxis: [], value: [], unit: _obj[3][2], key: _obj[3][1] },
			engineFuelpre: { name: _obj[4][0], xAxis: [], value: [], unit: _obj[4][2], key: _obj[4][1] },
			engineFuelinpre: { name: _obj[5][0], xAxis: [], value: [], unit: _obj[5][2], key: _obj[5][1] },
			engineOilpre: { name: _obj[6][0], xAxis: [], value: [], unit: _obj[6][2], key: _obj[6][1] },
			engineFuelused: { name: _obj[7][0], xAxis: [], value: [], unit: _obj[7][2], key: _obj[7][1] },
			engineFueltemp: { name: _obj[8][0], xAxis: [], value: [], unit: _obj[8][2], key: _obj[8][1] },
			engineInmani: { name: _obj[9][0], xAxis: [], value: [], unit: _obj[9][2], key: _obj[9][1] },
			engineCooltemp: { name: _obj[10][0], xAxis: [], value: [], unit: _obj[10][2], key: _obj[10][1] },
			enginelubetemp: { name: _obj[11][0], xAxis: [], value: [], unit: _obj[11][2], key: _obj[11][1] }
		};
	}
	watch(()=>store.state.data.curAnalogSn, (newValue) => {
		itemShipSn.value = newValue;
		// getChart();
	});
	itemShipSn.value = store.state.data.curAnalogSn;
	reSet();
	onMounted(()=>{
		selectedDays.value = proxy.parseTime(new Date(),`{y}-{m}-{d}`)
		daysBetw = daysBetween();
		// getChart();
	})
</script>

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