<template>
	<div style="height:calc(100vh - 84px);font-size: 14px;overflow-y: auto;" class="padding-xs">
		<el-row :gutter="10">
			<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
				<el-card class="box-card margin-bottom-sm" :body-style="{ height: 'calc( 48vh - 110px)',padding: '0px' }">
					<template #header>
						<div class="text-lg text-bold margin-bottom-xs">气象信息</div>
					</template>
					<div class="flex flex-wrap text-center" style="height: 100%;">
						<div class="weaTherTime">
							<div class="flex align-center justify-center">
								<div @click="changeDate(-1)">
									<elIcon>
										<ArrowLeft />
									</elIcon>
								</div>
								<div style="font-size: 28px;" class="margin-lr-xs">{{nowTime}}</div>
								<div @click="changeDate(1)">
									<elIcon>
										<ArrowRight />
									</elIcon>
								</div>
							</div>
							<div style="font-size: 0.8rem;">{{nowYear}} {{nowWeek}}</div>
						</div>
						<div v-for="(item,index) in weaTher" :key="index" style="width:33.33%;height:33.33%;">
							<el-image :src="item.icon" style="height:50%;"></el-image>
							<div>{{item.name}}</div>
							<div><span class="aisNum" style="font-size:14px;">
									<TextValue :value="item.value" />
								</span> {{item.unit}}</div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
				<el-card class="box-card margin-bottom-sm" :body-style="{ height: 'calc( 48vh - 110px)' }">
					<template #header>
						<div class="text-lg text-bold margin-bottom-xs">AIS信息</div>
					</template>
					<div style="height: 100%;" class="flex">
						<div style="height: 100%;flex:1;">
							<dashChart :name="`ship-speed`" style="height:calc(100% - 26px)" :data="newData['0a9']" />
							<div class="text-center">{{newData['0a9'].name}}：<span class="aisNum">
									<TextValue :value="newData['0a9'].value" />
								</span> {{newData['0a9'].unit}}</div>
						</div>
						<div style="height: 100%;flex:1;">
							<roundDashChart :name="`ship-bow`" style="height:calc(100% - 26px)"
								:data="newData['0aA']" />
							<div class="text-center">{{newData['0aA'].name}}：<span class="aisNum">
									<TextValue :value="newData['0aA'].value" />
								</span> {{newData['0aA'].unit}}</div>
						</div>
						<div style="height: 100%;flex:1;">
							<roundDashChart :name="`ship-track`" style="height:calc(100% - 26px)"
								:data="newData['0a8']" />
							<div class="text-center">{{newData['0a8'].name}}：<span class="aisNum">
									<TextValue :value="newData['0a8'].value" />
								</span> {{newData['0a8'].unit}}</div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
				<el-card class="box-card margin-bottom-sm" :body-style="{ height: 'calc( 48vh - 110px)' }">
					<template #header>
						<div class="text-lg text-bold margin-bottom-xs">吃水信息</div>
					</template>
					<div class="flex align-center justify-center" style="height: 100%;">
						<img :src="$store.state.settings.sideTheme == 'theme-light'?shipSoundBl:shipSound" alt=""
							style="width:120px;">
						<div class="text-center" style="margin: 60px 0 0 10px;">
							测深<br><span
								class="aisNum"><TextValue :value="newData['0aS'].value" /></span>
							m
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="10">
			<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
				<el-card class="box-card" :body-style="{ height: 'calc( 50vh - 110px)' }">
					<template #header>
						<div class="text-lg text-bold margin-bottom-xs">主机转速</div>
					</template>
					<dashChart :name="`ship-post`" style="height:calc(100% - 26px)" :data="newData['005']" />
					<div class="text-center">转速：<span class="aisNum">
							<TextValue :value="newData['005'].value" />
						</span> {{newData['005'].unit}}</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
				<el-card class="box-card" :body-style="{ height: 'calc( 50vh - 70px)',padding:'0px' }">
					<MapIndex />
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
				<el-card class="box-card" :body-style="{ height: 'calc( 50vh - 110px)' }">
					<template #header>
						<div class="text-lg text-bold margin-bottom-xs">发电机转速</div>
					</template>
					<div class="flex text-center align-center justify-center" style="height:100%;">
						<div class="engineBox" v-for="(item,index) in newData['engi']" :key="index"
							:style="'background-color:'+((!isNaN(Number(item.value,10))&&parseFloat(item.value)>0)?'#34ac40':'#787878')">
							<div>转速：</div>
							<div class="margin-tb-xs"><span>
									<TextValue :value="item.value" />
								</span> {{item.unit}}</div>
							<div>{{index+1}}#发电机</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "@vue/reactivity";
	import {
		onMounted,
		onBeforeUnmount,
		nextTick
	} from "vue";
	import shipSound from "@/assets/images/shipSound.png";
	import shipSoundBl from "@/assets/images/shipSound-black.png";
	import lgIcon from "@/assets/images/lgIcon.png";
	import qyIcon from "@/assets/images/qyIcon.png";
	import fxIcon from "@/assets/images/fxIcon.png";
	import lsIcon from "@/assets/images/lsIcon.png";
	import wdIcon from "@/assets/images/wdIcon.png";
	import fsIcon from "@/assets/images/fsIcon.png";
	import lxIcon from "@/assets/images/lxIcon.png";
	import dashChart from "@/components/Echarts/dashChart";
	import roundDashChart from "@/components/Echarts/Dashboard/roundbDashChart.vue";
	import MapIndex from "@/components/Map/index";
	import {
		getCurrencyConfigByName,
		getCurrencyConfigByMid
	} from "@/utils/index";
	var shipLi = [];
	const store = useStore();
	const {
		proxy
	} = getCurrentInstance();
	const newData = computed(() => {
		let _obj = {
			"0a9": {
				...getCurrencyConfigByMid("0a9"),
				radius: "80%"
			},
			"0aA": getCurrencyConfigByMid("0aA"),
			"0a8": getCurrencyConfigByMid("0a8"),
			"005": {
				...getCurrencyConfigByMid("005"),
				radius: "90%"
			},
			"0aS": getCurrencyConfigByMid("0aS"),
			"engi": [
				getCurrencyConfigByMid("06H"),
				getCurrencyConfigByMid("08H"),
				getCurrencyConfigByMid("0AH")
			]
		}
		return _obj;
	});
	const weaTher = computed(() => {
		let _shu = {};
		let _obj = [{
			icon: lgIcon,
			unit: "m",
			name: "浪高",
			value: 0.7
			//value: !isNaN(Number(_shu.waveheight, 10)) ? (_shu.waveheight == "-32767" ? 0 : _shu.waveheight) : null,
		}, {
			icon: qyIcon,
			unit: "hPa",
			name: "气压",
			value: 1006.8
			//value: !isNaN(Number(_shu.pressure, 10)) ? (_shu.pressure == "-32767" ? 0 : _shu.pressure) :null,
		}, {
			icon: fxIcon,
			unit: "°",
			name: "风向",
			value: 190.7
			//value: !isNaN(Number(_shu.winddir, 10)) ? (_shu.winddir == "-32767" ? 0 : _shu.winddir) : null,
		}, {
			icon: lsIcon,
			unit: "m/s",
			name: "流速",
			value: 0.1
			//value: !isNaN(Number(_shu.oceanspeed, 10)) ? (_shu.oceanspeed == "-32767" ? 0 : _shu.oceanspeed) : null,
		}, {
			icon: wdIcon,
			unit: "℃",
			name: "温度",
			value: 28.9
			//value: !isNaN(Number(_shu.temperature, 10)) ? (_shu.temperature == "-32767" ? 0 : _shu.temperature) : null,
		}, {
			icon: fsIcon,
			unit: "m/s",
			name: "风速",
			value: 10.4
			// value: !isNaN(Number(_shu.windspeed, 10)) ? (_shu.windspeed == "-32767" ? 0 : _shu.windspeed) :	null,
		}, {
			icon: lxIcon,
			unit: "°",
			name: "流向",
			value: 195.9
			// value: !isNaN(Number(_shu.oceandir, 10)) ? (_shu.oceandir == "-32767" ? 0 : _shu.oceandir) :null,
		}];
		return _obj;
	});
	const data = reactive({
		shipData: [],
		nowYear: proxy.parseTime(new Date(), "{y}年{m}月{d}日"),
		nowWeek: proxy.parseTime(new Date(), "星期{a}"),
		nowTime: parseInt(proxy.parseTime(new Date(), "{h}")) < 9 ? "08:00:00" : parseInt(proxy.parseTime(
		new Date(), "{h}")) < 15 ? "14:00:00" : "20:00:00",
	});
	const {
		shipData,
		nowYear,
		nowWeek,
		nowTime
	} = toRefs(data);
	const changeDate = function(_num) {
		let _time = parseInt(nowTime.value);
		let _year = nowYear.value.replace("年", "-").replace("月", "-").replace("日", "");
		let _abc = [];
		if (_num == -1) {
			if (_time < 9) {
				let _newYW = new Date(_year).getTime() - 24 * 60 * 60 * 1000;
				_abc = [
					proxy.parseTime(_newYW, "{y}年{m}月{d}日"),
					proxy.parseTime(_newYW, "星期{a}"),
					" 20:00:00",
				];
				_year = proxy.parseTime(_newYW, "{y}-{m}-{d}");
			} else if (_time > 8 && _time < 15) {
				_abc = [nowYear.value, nowWeek.value, " 08:00:00"];
			} else if (_time > 14) {
				_abc = [nowYear.value, nowWeek.value, " 14:00:00"];
			}
		} else {
			if (_time < 9) {
				_abc = [nowYear.value, nowWeek.value, " 14:00:00"];
			} else if (_time > 8 && _time < 15) {
				_abc = [nowYear.value, nowWeek.value, " 20:00:00"];
			} else if (_time > 14) {
				let _newYW = new Date(_year).getTime() + 24 * 60 * 60 * 1000;
				_abc = [
					proxy.parseTime(_newYW, "{y}年{m}月{d}日"),
					proxy.parseTime(_newYW, "星期{a}"),
					" 08:00:00",
				];
				_year = proxy.parseTime(_newYW, "{y}-{m}-{d}");
			}
		}
		nowYear.value = _abc[0];
		nowWeek.value = _abc[1];
		nowTime.value = _abc[2];
		// getWeather({
		// 	sn: shipData.value[0].sn,
		// 	date: _year + _abc[2],
		// 	lon: shipData.value[0].lon,
		// 	lat: shipData.value[0].lat
		// });
	};
</script>

<style lang='scss' scoped>
	.el-card {
		padding: 6px 10px;

		/*  :deep .el-card__header {
    min-height: auto;
    border: none;
    padding: 0 !important;
  }
  :deep .el-card__body {
    padding: 0 !important;
  } */
		.engineBox {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border: 3px solid #ccc;
			border-left: none;
			height: 60%;

			&:first-child {
				border-left: 3px solid #ccc;
			}

			&.disNone {
				display: none;
			}
		}

		.weaTherTime {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 66.66%;
			height: 33.33%;

			.el-icon {
				font-size: 20px;
				cursor: pointer;
			}
		}
	}

	.aisNum {
		font-weight: bold;
		color: #fbbd08;
		font-size: 18px;
	}
</style>