<template>
	<div class="padding-xs">
		<div style="position: relative;">
			<el-menu mode="horizontal" active-text-color="#000" @select="handleSelect">
				<el-sub-menu index="0">
					<template #title>
						<span>左货舱</span>
					</template>
					<el-menu-item index="leftlevel">液位</el-menu-item>
					<el-menu-item index="leftpressure">压力</el-menu-item>
					<el-menu-item index="leftttemp">上部温度</el-menu-item>
					<el-menu-item index="leftctemp">中部温度</el-menu-item>
					<el-menu-item index="leftbtemp">下部温度</el-menu-item>
				</el-sub-menu>
				<el-sub-menu index="1">
					<template #title>
						<span>右货舱</span>
					</template>
					<el-menu-item index="rightlevel">液位</el-menu-item>
					<el-menu-item index="rightpressure">压力</el-menu-item>
					<el-menu-item index="rightttemp">上部温度</el-menu-item>
					<el-menu-item index="rightctemp">中部温度</el-menu-item>
					<el-menu-item index="rightbtemp">下部温度</el-menu-item>
				</el-sub-menu>
				<el-sub-menu index="2">
					<template #title>
						<span>压载系统</span>
					</template>
					<el-menu-item index="lballastWater">左-压载/淡水舱</el-menu-item>
					<el-menu-item index="rballastWater">右-压载/淡水舱</el-menu-item>
					<el-menu-item index="sternBow">船艏/艉</el-menu-item>
				</el-sub-menu>
			</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-xs">
					<el-card v-loading="loading.cargoTanko">
						<lineChart height="calc(50vh - 150px)" :name="`cargo-chart-tanko`" :data="cargo[cardActive][cardName].cargoTanko"/>
					</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.cargoTankt">
						<lineChart height="calc(50vh - 150px)" :name="`cargo-chart-tankt`" :data="cargo[cardActive][cardName].cargoTankt"/>
					</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.cargoTanks">
						<lineChart height="calc(50vh - 150px)" :name="`cargo-chart-tanks`" :data="cargo[cardActive][cardName].cargoTanks"/>
					</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.cargoTankf">
							<lineChart height="calc(50vh - 150px)" :name="`cargo-chart-tankf`" :data="cargo[cardActive][cardName].cargoTankf"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-xs" v-if="cargo[cardActive][cardName].cargoTankw.key.length">
					<el-card v-loading="loading.cargoTankw">
						<lineChart height="calc(50vh - 150px)" :name="`cargo-chart-tankw`" :data="cargo[cardActive][cardName].cargoTankw"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-xs" v-if="cargo[cardActive][cardName].cargoTankl.key.length">
					<el-card v-loading="loading.cargoTankl">
						<lineChart height="calc(50vh - 150px)" :name="`cargo-chart-tankl`" :data="cargo[cardActive][cardName].cargoTankl"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="margin-top-xs" v-if="cargo[cardActive][cardName].cargoTankq.key.length">
					<el-card v-loading="loading.cargoTankq">
						<lineChart height="calc(50vh - 150px)" :name="`cargo-chart-tankq`" :data="cargo[cardActive][cardName].cargoTankq"/>
					</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({
		cargo:[],
		cardActive: '0',
		cardName: 'leftlevel',
		loading:{
			cargoTanko: false,
			cargoTankt: false,
			cargoTanks: false,
			cargoTankf: false,
			cargoTankw: false,
			cargoTankl: false,
			cargoTankq: false
		},
		selectedDays:"",
		clickDisabled: false
	});
	const { cargo, cardActive, loading,selectedDays,clickDisabled,cardName } = toRefs(data);
	var daysBetw = 0;
	const handleSelect = function(key, keyPath){
		cardActive.value = keyPath[0];
		cardName.value = keyPath[1];
		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 = cargo.value[cardActive.value][cardName.value];
			for(let key in pointer){
				loading.value[key] = true;
				let _ab = pointer[key];
				getAngolReport({
					column: _ab.key,
					startTime: selectedDays.value + " 00:00:00",
					endTime: selectedDays.value + " 23:59:59",
					scale: (_ab.unit == "m"?7:(_ab.unit == "℃"?50:15))
					// sn: cardActive.value>2?_snl[1]:_snl[0]
				}).then((response)=>{
					makeHostData(key, 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, _data) {
		let responseJson = {}
		_data.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 startDateTime = new Date(_data[0].time.substr(0, 10) + " 00:00:00")
		let value = [];
		for (let i = 0; i < _data.length; i++) {
			let key = proxy.parseTime(new Date(startDateTime.getTime() + 1000 * 60 * 10 * i),`{y}/{m}/{d} {h}:{i}:{s}`)
			value.push(responseJson[key])
		}
		let data = JSON.parse(JSON.stringify(cargo.value[cardActive.value][cardName.value][_key]));
		data.xAxis = makeXAxis(daysBetw)
		data.value = value
		cargo.value[cardActive.value][cardName.value][_key] = data;
		loading.value[_key] = false;
	}
	
	const reSet = function(){
		cargo.value = [{
			leftlevel:getData([["1#液货舱","z01","m"],["2#液货舱","z03","m"],["3#液货舱","z05","m"],["4#液货舱","z07","m"],["5#液货舱","z09","m"],["6#液货舱","z2U","m"],["污液舱","z0B","m"]]),
			leftpressure:getData([["1#液货舱","z0D","kPa"],["2#液货舱","z0F","kPa"],["3#液货舱","z0H","kPa"],["4#液货舱","z0J","kPa"],["5#液货舱","z0L","kPa"],["6#液货舱","z0N","kPa"],["污液舱","z2h","kPa"]]),
			leftttemp:getData([["1#液货舱","z0R","℃"],["2#液货舱","z0X","℃"],["3#液货舱","z0d","℃"],["4#液货舱","z0j","℃"],["","",""],["","",""],["污液舱","z2j","℃"]]),
			leftctemp:getData([["1#液货舱","z0T","℃"],["2#液货舱","z0Z","℃"],["3#液货舱","z0f","℃"],["4#液货舱","z0l","℃"],["","",""],["","",""],["污液舱","z2k","℃"]]),
			leftbtemp:getData([["1#液货舱","z0S","℃"],["2#液货舱","z0Y","℃"],["3#液货舱","z0e","℃"],["4#液货舱","z0k","℃"],["","",""],["","",""],["污液舱","z2l","℃"]])
		},{
			rightlevel:getData([["1#液货舱","z00","m"],["2#液货舱","z02","m"],["3#液货舱","z04","m"],["4#液货舱","z06","m"],["5#液货舱","z08","m"],["6#液货舱","z2T","m"],["污液舱","z0A","m"]]),
			rightpressure:getData([["1#液货舱","z0C","kPa"],["2#液货舱","z0E","kPa"],["3#液货舱","z0G","kPa"],["4#液货舱","z0I","kPa"],["5#液货舱","z0K","kPa"],["6#液货舱","z0M","kPa"],["污液舱","z2i","kPa"]]),
			rightttemp:getData([["1#液货舱","z0O","℃"],["2#液货舱","z0U","℃"],["3#液货舱","z0a","℃"],["4#液货舱","z0g","℃"],["","",""],["","",""],["污液舱","z2m","℃"]]),
			rightctemp:getData([["1#液货舱","z0Q","℃"],["2#液货舱","z0W","℃"],["3#液货舱","z0c","℃"],["4#液货舱","z0i","℃"],["","",""],["","",""],["污液舱","z2n","℃"]]),
			rightbtemp:getData([["1#液货舱","z0P","℃"],["2#液货舱","z0V","℃"],["3#液货舱","z0a","℃"],["4#液货舱","z0h","℃"],["","",""],["","",""],["污液舱","z2o","℃"]])
		},{
			lballastWater:getData([["1#压载舱","0KF","m"],["2#压载舱","0KH","m"],["3#压载舱","0KJ","m"],["4#压载舱","0KL","m"],["5#压载舱","0KN","m"],["淡水舱","0KP","m"],["","",""]]),
			rballastWater:getData([["1#压载舱","0KG","m"],["2#压载舱","0KI","m"],["3#压载舱","0KK","m"],["4#压载舱","0KM","m"],["5#压载舱","0KO","m"],["淡水舱","0KQ","m"],["","",""]]),
			sternBow:getData([["艉部吃水","0ah","m"],["艉压载水舱-左","z2e","m"],["艏吃水液位-左","0af","m"],["艏尖舱液位","0KZ","m"],["艉轴冷却水舱","z2d","m"],["艉压载水舱-右","z2f","m"],["艏吃水液位-右","0ag","m"]])
		}]
	}
	const getData = function(_obj){
		return {
			cargoTanko: { name: _obj[0][0], xAxis: [], value: [], unit: _obj[0][2], key: _obj[0][1] },
			cargoTankt: { name: _obj[1][0], xAxis: [], value: [], unit: _obj[1][2], key: _obj[1][1] },
			cargoTanks: { name: _obj[2][0], xAxis: [], value: [], unit: _obj[2][2], key: _obj[2][1] },
			cargoTankf: { name: _obj[3][0], xAxis: [], value: [], unit: _obj[3][2], key: _obj[3][1] },
			cargoTankw: { name: _obj[4][0], xAxis: [], value: [], unit: _obj[4][2], key: _obj[4][1] },
			cargoTankl: { name: _obj[5][0], xAxis: [], value: [], unit: _obj[5][2], key: _obj[5][1] },
			cargoTankq: { name: _obj[6][0], xAxis: [], value: [], unit: _obj[6][2], key: _obj[6][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>