<template>
	<el-row :gutter="15">
		<el-col :xl="7" :lg="7" :md="7" :sm="24" :xs="24" style="position: relative;padding-left: 90px;">
			<div style="position: absolute;left: 6px;bottom: 0;height: 100%;">
				<div style="height: 50%;" class="flex align-end">
					<div class="tabBtn" :class="radioVal == 0?'active':''" @click="radioVal = 0">
						<svg-icon icon-class="route"/>
						<div>航线</div>
					</div>
				</div>
				<div style="height: 50%;" class="flex align-end">
					<div class="tabBtn" :class="radioVal == 1?'active':''" @click="radioVal = 1">
						<svg-icon icon-class="routePoints"/>
						<div>航路点</div>
					</div>
				</div>
			</div>
			<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
				<div class="flex align-center justify-around" 
					style="height: calc(30vh - 88px);overflow: hidden;position: relative;padding-left: 10%;">
					<div style="letter-spacing:0;font-size: 1rem;" class="sTitleSty">航次管理</div>
					<div>
						<div class="reportSty">
							<div><span>9</span></div>
						</div>
						<div class="text-sm margin-top-sm text-bold  text-center">{{radioVal == 0?'航线':'航路点'}}总数</div>
					</div>
					<el-descriptions title="" :column="1">
						<el-descriptions-item label="船名：">易站1号</el-descriptions-item>
						<el-descriptions-item label="船舶编号：">49312567</el-descriptions-item>
						<el-descriptions-item label="船长：">123米</el-descriptions-item>
						<el-descriptions-item label="船宽：">31米</el-descriptions-item>
					</el-descriptions>
				</div>
			</el-card>
		</el-col>
		<el-col :xl="17" :lg="17" :md="17" :sm="24" :xs="24">
			<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
				<el-row>
					<el-col :xl="13" :lg="13" :md="13" :sm="24" :xs="24">
						<div class="flex" style="height: calc(30vh - 88px);overflow: hidden;">
							<div class="flex justify-center flex-direction align-center flex-twice">
								<el-image style="width: 89%;border-radius: 4px;" :src="shipImg"></el-image>
								<div class="margin-top-xs text-sm text-bold">易站1号</div>
							</div>
							<div class="flex-treble text-sm text-bold flex justify-center flex-direction padding-lr-sm">
								<div class="flex justify-around align-center text-xxl">
									<span>上海</span>
									<svg-icon icon-class="threeArrows" style="width: 2em;"/>
									<span>广州</span>
								</div>
								<div class="flex justify-between align-center" style="margin-top: 5%;">
									<div>2024/0606/1700</div>
									<div>2024/0610/1700</div>
								</div>
							</div>
							<!-- <bar-chart name="HostPressure" :data="oilsRepoData" height="calc(30vh - 68px)"/> -->
						</div>
					</el-col>
					<el-col :xl="11" :lg="11" :md="11" :sm="24" :xs="24" class="text-center text-sm text-bold">
						<div class="grid col-3 align-center" style="height: 100%;">
							<div v-for="(item,index) in routeTotal" :key="index">
								<annular-chart height="16vh" :name="item.name" :data="item"/>
								<div class="margin-top-xs">{{item.title}}/{{item.unit}}</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-card>
		</el-col>
		<el-col :span="24" :xs="24" class="margin-top-xl">
			<route v-if="radioVal == 0"/>
			<way-point v-if="radioVal == 1"/>		
		</el-col>
	</el-row>
</template>

<script setup>
	import { reactive } from "vue";
	import Route from "./route";
	import WayPoint from "./waypoint";
	import AnnularChart from "@/components/Echarts/annularChart";
	import BarChart from "@/components/Echarts/BarChart";
	import shipImg from "@/assets/images/shipImg.jpg";
	const radioVal = ref("0");
	const data = reactive({
		refuelForm: {},
		oilsRepoData: {
			name: "燃油记录",
			xAxis: ["一月", "二月", "三月", "四月", "五月", "六月"],
			data: [{
				name: '滑油',
				type: 'bar',
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '轻油',
				type: 'bar',
				data: [10, 14, 18, 19, 13, 10]
			},{
				name: '重油',
				type: 'bar',
				data: [15.28, 42.4, 31.8, 21.9, 11.3, 10.6]
			}],
		},
		routeTotal: [{
			title: "总耗时",
			name: "allTime",
			value: 85.36,
			unit: "H"
		},{
			title: "总油耗",
			name: "allOils",
			value: 45.1,
			unit: "L"
		},{
			title: "总航程",
			name: "allVoyage",
			value: 12.3,
			unit: "nm"
		}]
	});
	const { refuelForm, routeTotal, oilsRepoData } = toRefs(data);
	const formatVal = function(val){
		return val
	}
</script>

<style scoped lang="scss">
	.tabBtn{
		width: 46px;
		height: fit-content;
		padding: 15px 0;
		color: #7e96ff;
		cursor: pointer;
		font-size: 0.6rem;
		text-align: center;
		border-radius: 13px;
		border: 1px solid #7e96ff;
		background-color: #fff;
		.svg-icon{
			font-size: 1.2rem;
			margin-bottom: 10px;
		}
		&.active{
			color: #fff;
			border: 1px solid #fff;
			background-color: #7e96ff;
		}
	}
</style>