<template>
	<div class="padding-xs text-sm">
	    <el-row :gutter="10">
			<el-col :span="10" :xs="24">
				<el-card class="box-card" :body-style="{ height: 'calc( 30vh - 58px)',padding: '8px' }">
					<el-row :gutter="10">
						<el-col :span="11" :xs="24">
							<el-image :src="shipImg" fit="cover" style="height: calc( 30vh - 78px);"></el-image>
						</el-col>
						<el-col :span="13" :xs="24" class="text-bold">
							<div class="text-df">易站科技 <text class="text-gray">YIZHAN</text></div>
							<div class="flex margin-tb-sm">
								<div class="flex-sub"><div>船舶类型</div><div class="text-green">干散货船</div></div>
								<div class="flex-sub"><div>船舶吨位</div><div class="text-green">8989</div></div>
								<div class="flex-sub"><div>船舶载重</div><div class="text-green">12323</div></div>
							</div>
							<div>
								<div><text class="disib">船舶识别号：</text><text class="text-green">CN2015042213</text></div>
								<div><text class="disib">船龄：</text><text class="text-green">8</text></div>
								<div><text class="disib">建造日期：</text><text class="text-green">2015/04/22</text></div>
								<div><text class="disib">上次维修日期：</text><text class="text-green">2023/07/22</text></div>
							</div>
						</el-col>
					</el-row>
				</el-card>
				<el-card class="box-card margin-tb-xs text-bold" :body-style="{ height: 'calc( 11vh - 0px)',padding: '8px',position: 'relative' }">
					<div style="position: absolute;top:8px;left:10px;">航次信息</div>
					<el-row :gutter="10" class="text-center align-end" style="height: 100%;">
						<el-col :span="9" :xs="24">
							<div>东莞</div>
							<div class="text-xs"><text>出发时间：</text><text class="text-green">2023-09-22 10:44:44</text></div>
						</el-col>
						<el-col :span="6" :xs="24" class="text-xs">
							<div>砂石</div>
							<div class="text-green">13200吨</div>
							<el-image :src="arrowImg" style="width: 120px;"></el-image>
							<div><text>航行耗时：</text><text class="text-green">01:44:44</text></div>
						</el-col>
						<el-col :span="9" :xs="24">
							<div>麦僚</div>
							<div class="text-xs"><text>到达时间：</text><text class="text-green">2023-09-22 10:44:44</text></div>
						</el-col>
					</el-row>
				</el-card>
				<div>
					<div style="height: 36px;">
						<el-form :model="queryParams" ref="queryRef">
							<el-row :gutter="5">
								<el-col :span="16" :xs="24">
									<el-form-item>
										<el-date-picker
											v-model="queryParams.searhDate"
											type="daterange"
											range-separator="至">
										</el-date-picker>
									</el-form-item>
								</el-col>
								<el-col :span="8" :xs="24">
									<el-form-item>
										<el-button type="primary">搜索</el-button>
										<el-button type="warning" plain>导出</el-button>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
					<el-row :gutter="5">
						<el-col :span="12" :xs="24" v-for="(item,index) in lineData" :key="index">
							<el-card class="box-card margin-top-xs" :body-style="{ height: 'calc( 29vh - 48px)',padding: '5px 10px' }">
								<div class="margin-bottom-sm">
									<text class="text-bold">{{ item.name }} </text>
									<text>
										<text class="text-blue margin-lr-xs text-xl">{{ item.count }}</text>
										<text class="text-xs">{{ item.unit }}</text>
									</text>
								</div>
								<lineChart :name="`shipGas${index}`" height="calc(100% - 35px)" :data="item"/>
							</el-card>
						</el-col>
					</el-row>
				</div>
			</el-col>
			<el-col :span="14" :xs="24">
				<MapShipHistoricalSail/>
				<!-- <MapShipHistoricalTrack/> -->
			</el-col>
		</el-row>
	</div>
</template>

<script setup name="NavigInfor">
	import shipImg from "@/assets/images/shipImg.png";
	import arrowImg from "@/assets/images/arrow.png";
	import lineChart from "@/components/Echarts/wayBillChart/lineChart";
	import MapShipHistoricalSail from "@/components/Map/singleMap";
	
	const data = reactive({
		lineData: [{
			data: [{
				data: [15.96, 16.57, 22.44, 23.91, 27.96, 10.36, 12.58],
				type: 'line',
				smooth: true,
				symbol: 'circle'
			}],
			xAxis: ["09/16", "09/17", "09/18", "09/19", "09/20", "09/21", "09/22"],
			name: "里程",
			count: 106.84,
			unit: "海里"
		},{
			data: [{
				data: [106.96, 126.57, 162.44, 177.81, 242.96, 101.64, 89.16],
				type: 'line',
				smooth: true,
				symbol: 'circle'
			}],
			xAxis: ["09/16", "09/17", "09/18", "09/19", "09/20", "09/21", "09/22"],
			name: "油耗",
			count: 816.74,
			unit: "L"
		},{
			data: [{
				data: [16.96, 26.57, 42.44, 53.91, 72.96, 23.46, 26.12],
				type: 'line',
				smooth: true,
				symbol: 'circle'
			}],
			xAxis: ["09/16", "09/17", "09/18", "09/19", "09/20", "09/21", "09/22"],
			name: "航速",
			count: 212.84,
			unit: "节"
		},{
			data: [{
				data: [96.44, 106.57, 162.44, 183.91, 242.96, 80.48, 81.98],
				type: 'line',
				smooth: true,
				symbol: 'circle'
			}],
			xAxis: ["09/16", "09/17", "09/18", "09/19", "09/20", "09/21", "09/22"],
			name: "存油",
			count: 792.19,
			unit: "L"
		}],
		queryParams: {
			searhDate: ['2023-09-16','2023-09-22']
		}
	});
	const {
		lineData,
		queryParams
	} = toRefs(data);
	
</script>

<style lang="scss">
	.disib{
		display: inline-block;
		width: 110px;
	}
</style>