<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="0">主机</el-menu-item>
				<el-menu-item style="line-height: 40px;" index="1">主机</el-menu-item>
			</el-menu>
			<button class="pointer text-el-primary" title="刷新" :disabled="clickDisabled" @click="handleQuery"
			  style="position: absolute;top: 50%;left: 190px;transform: translate(50%,-50%);background-color: transparent;">
			  <el-icon class="text-el-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-xs">
					<el-card v-loading="loading.hostTanko">
						<lineChart height="calc(50vh - 150px)" :name="`host-chart-tanko`" :data="host[cardActive].hostTanko"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-xs">
					<el-card v-loading="loading.hostTankt">
						<lineChart height="calc(50vh - 150px)" :name="`host-chart-tankt`" :data="host[cardActive].hostTankt"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-xs">
					<el-card v-loading="loading.hostTanks">
						<lineChart height="calc(50vh - 150px)" :name="`host-chart-tanks`" :data="host[cardActive].hostTanks"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-xs">
					<el-card v-loading="loading.hostTankf">
						<lineChart height="calc(50vh - 150px)" :name="`host-chart-tankf`" :data="host[cardActive].hostTankf"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-xs">
					<el-card v-loading="loading.hostTankw">
						<lineChart height="calc(50vh - 150px)" :name="`host-chart-tankw`" :data="host[cardActive].hostTankw"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-xs">
					<el-card v-loading="loading.hostTankl">
						<lineChart height="calc(50vh - 150px)" :name="`host-chart-tankl`" :data="host[cardActive].hostTankl"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-xs">
					<el-card v-loading="loading.hostTankq">
						<lineChart height="calc(50vh - 150px)" :name="`host-chart-tankq`" :data="host[cardActive].hostTankq"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-xs">
					<el-card v-loading="loading.hostTankb">
						<lineChart height="calc(50vh - 150px)" :name="`host-chart-tankb`" :data="host[cardActive].hostTankb"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-xs" v-if="host[cardActive].hostTankj.key.length">
					<el-card v-loading="loading.hostTankj">
						<lineChart height="calc(50vh - 150px)" :name="`host-chart-tankj`" :data="host[cardActive].hostTankj"/>
					</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({
		host:[],
		cardActive: '0',
		loading:{
			hostTanko: false,
			hostTankt: false,
			hostTanks: false,
			hostTankf: false,
			hostTankw: false,
			hostTankl: false,
			hostTankq: false,
			hostTankb: false,
			hostTankj: false
		},
		selectedDays:"",
		clickDisabled: false
	});
	const { host, 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 = host.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: _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(host.value[cardActive.value][_key]))
		data.xAxis = makeXAxis(daysBetw)
		data.value = value
		host.value[cardActive.value][_key] = data;
		loading.value[_key] = false;
	}
	const reSet = function(){
		host.value = [{
			hostTanko: { name: `主机转速 `, xAxis: [], value: [], unit: `RPM`, key: "005" },
			hostTankt: { name: `电瓶电压`, xAxis: [], value: [], unit: `V`, key: "009" },
			hostTanks: { name: `运行时间`, xAxis: [], value: [], unit: `hr`, key: "00B" },
			hostTankf: { name: `涡轮增压器压力`, xAxis: [], value: [], unit: `kPa`, key: "011" },
			hostTankw: { name: `进气歧管1温度`, xAxis: [], value: [], unit: `℃`, key: "012" },
			hostTankl: { name: `涡轮1进口温度`, xAxis: [], value: [], unit: `℃`, key: "00b" },
			hostTankq: { name: `涡轮2进口温度`, xAxis: [], value: [], unit: `℃`, key: "00c" },
			hostTankb: { name: `涡轮3进口温度`, xAxis: [], value: [], unit: `℃`, key: "00d" },
			hostTankj: { name: ``, xAxis: [], value: [], unit: ``, key: "" }
		},{
			hostTanko: { name: `燃油进机压力`, xAxis: [], value: [], unit: `kPa`, key: "00K" },
			hostTankt: { name: `冷却液压力`, xAxis: [], value: [], unit: `kPa`, key: "00z" },
			hostTanks: { name: `机油压力`, xAxis: [], value: [], unit: `kPa`, key: "004" },
			hostTankf: { name: `齿轮箱油压`, xAxis: [], value: [], unit: `kPa`, key: "0MC" },
			hostTankw: { name: `燃油温度`, xAxis: [], value: [], unit: `℃`, key: "001" },
			hostTankl: { name: `冷却液温度`, xAxis: [], value: [], unit: `℃`, key: "000" },
			hostTankq: { name: `机油温度`, xAxis: [], value: [], unit: `℃`, key: "002" },
			hostTankb: { name: `齿轮箱油温`, xAxis: [], value: [], unit: `℃`, key: "0MB" },
			hostTankj: { name: `总燃油使用量`, xAxis: [], value: [], unit: `L`, key: "013" }
		}]
	}
	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>