<template>
	<div class="padding-sm">
		<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>
					<button class="pointer margin-left-xs" title="刷新" :disabled="clickDisabled" @click="handleQuery"
					style="background-color: transparent;">
						<el-icon style="color: var(--el-color-primary);"><Refresh /></el-icon>
					</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.leftbilge">
						<lineChart height="calc(50vh - 136px)" :name="`left-fueltank-chart-leftbilge`" :data="fueltank.leftbilge"/>
					</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.rightbilge">
						<lineChart height="calc(50vh - 136px)" :name="`left-fueltank-chart-rightbilge`" :data="fueltank.rightbilge"/>
					</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.forepeak">
						<lineChart height="calc(50vh - 136px)" :name="`left-fueltank-chart-forepeak`" :data="fueltank.forepeak"/>
					</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.leftcabin">
						<lineChart height="calc(50vh - 136px)" :name="`left-fueltank-chart-leftcabin`" :data="fueltank.leftcabin"/>
					</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.leftdiesel">
						<lineChart height="calc(50vh - 136px)" :name="`left-fueltank-chart-leftdiesel`" :data="fueltank.leftdiesel"/>
					</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.rightdiesel">
						<lineChart height="calc(50vh - 136px)" :name="`left-fueltank-chart-rightdiesel`" :data="fueltank.rightdiesel"/>
					</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.dailycabin">
						<lineChart height="calc(50vh - 136px)" :name="`left-fueltank-chart-dailycabin`" :data="fueltank.dailycabin"/>
					</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.settltank">
						<lineChart height="calc(50vh - 136px)" :name="`left-fueltank-chart-settltank`" :data="fueltank.settltank"/>
					</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("");
	const data = reactive({
		fueltank:{},
		loading:{
			leftbilge: false,
			rightbilge: false,
			forepeak: false,
			leftcabin: false,
			leftdiesel: false,
			rightdiesel: false,
			dailycabin: false,
			settltank: false
		},
		selectedDays:"",
		clickDisabled: false
	});
	const { fueltank, loading,selectedDays,clickDisabled } = toRefs(data);
	var daysBetw = 0;
	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 = fueltank.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[pointer[key].sn]
		// 		}).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(fueltank.value[_key]))
		data.xAxis = makeXAxis(daysBetw)
		data.value = value
		fueltank.value[_key] = data;
		loading.value[_key] = false;
	}
	const reSet = function(){
		fueltank.value = {
			leftbilge: {
			  name: `NO.1燃油舱(左)`,
			  xAxis: [],
			  value: [],
			  unit: `m`,
			  key: "0K2",
			  sn: 0
			},
			rightbilge: {
			  name: `NO.1燃油舱(右)`,
			  xAxis: [],
			  value: [],
			  unit: `m`,
			  key: "0K1",
			  sn: 0
			},
			forepeak: {
			  name: `NO.2燃油舱(左)`,
			  xAxis: [],
			  value: [],
			  unit: `m`,
			  key: "0KZ",
			  sn: 1
			},
			leftcabin: {
			  name: `NO.2燃油舱(右)`,
			  xAxis: [],
			  value: [],
			  unit: `m`,
			  key: "0K4",
			  sn: 0
			},
			leftdiesel: {
			  name: `柴油舱(左)`,
			  xAxis: [],
			  value: [],
			  unit: `m`,
			  key: "0K3",
			  sn: 0
			},
			rightdiesel: {
			  name: `柴油舱(右)`,
			  xAxis: [],
			  value: [],
			  unit: `m`,
			  key: "0KZ",
			  sn: 1
			},
			dailycabin: {
			  name: `燃油日用舱`,
			  xAxis: [],
			  value: [],
			  unit: `m`,
			  key: "0K4",
			  sn: 0
			},
			settltank: {
			  name: `燃油沉淀舱`,
			  xAxis: [],
			  value: [],
			  unit: `m`,
			  key: "0K3",
			  sn: 0
			}
		}
	}
	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>