<template>
	<el-row :gutter="14">
		<el-col :xl="14" :lg="14" :md="14" :sm="24" :xs="24">
			<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
				<el-row class="align-center">
					<el-col :span="7" :xs="24">
						<div class="flex justify-center align-center" style="height: calc(25vh - 72px);overflow: hidden;position: relative;">
							<div style="letter-spacing:0;font-size: 1rem;" class="sTitleSty">船舶基础信息</div>
							<el-image style="width:66%;border-radius: 4px;" :src="shipImg"></el-image>
						</div>
					</el-col>
					<el-col :span="8" :xs="24">
						<el-descriptions title="" :column="2">
						    <el-descriptions-item label="船名：">易站1号</el-descriptions-item>
							<el-descriptions-item label="船宽：">35米</el-descriptions-item>
						    <el-descriptions-item label="IMO：">18100000000</el-descriptions-item>
							<el-descriptions-item label="船长：">123米</el-descriptions-item>
						    <el-descriptions-item label="MMSI：">49312567</el-descriptions-item>
							<el-descriptions-item label="型宽：">123米</el-descriptions-item>
							<el-descriptions-item label="船型：">49312567</el-descriptions-item>
							<el-descriptions-item label="型深：">131米</el-descriptions-item>
						</el-descriptions>
					</el-col>
					<el-col :span="9" :xs="24">
						<el-descriptions title="" :column="2">
						    <el-descriptions-item label="总吨：">31t</el-descriptions-item>
							<el-descriptions-item label="船旗：">中国</el-descriptions-item>
						    <el-descriptions-item label="净吨位：">25t</el-descriptions-item>
							<el-descriptions-item label="公司：">中海但小金库</el-descriptions-item>
						    <el-descriptions-item label="载运能力：">25t</el-descriptions-item>
							<el-descriptions-item label="交船日期：">2024-05-07</el-descriptions-item>
							<el-descriptions-item label="冰级：">2级</el-descriptions-item>
						</el-descriptions>
					</el-col>
				</el-row>
			</el-card>
		</el-col>
		<el-col :xl="10" :lg="10" :md="10" :sm="24" :xs="24">
			<el-card class="box-card cardSty" :body-style="{ padding: '4px 10px !important' }">
				<el-row :gutter="10">
					<el-col :span="14" :xs="24">
						<div class="flex text-sm text-bold align-center justify-around" style="height: calc(25vh - 60px);">
							<div style="writing-mode: vertical-rl;">报表管理</div>
							<div>
								<div class="reportSty">
									<div><span>9</span></div>
								</div>
								<div class="text-center margin-top-sm">报表选择</div>
							</div>
							<div>
								<div class="selfBtn" :class="reportTye == 0?'active':''" @click="reportTye = 0">提高能效的船舶管理计划</div>
								<div class="selfBtn" :class="reportTye == 1?'active':''" @click="reportTye = 1">船舶燃油消耗数据收集计划</div>
								<div class="text-center">报表选择</div>
							</div>
						</div>
					</el-col>
					<el-col :span="10" :xs="24">
						<el-calendar style="font-size: 0.7rem;" 
							v-model="calendarVal"></el-calendar>
					</el-col>
				</el-row>
			</el-card>
		</el-col>
		<el-col :span="24" :xs="24" class="margin-top">
			<improve-energy v-if="reportTye == 0"/>
			<fuel-data v-if="reportTye == 1"/>
		</el-col>
	</el-row>
</template>

<script setup>
	import { reactive } from "vue";
	import shipImg from "@/assets/images/shipImg.jpg";
	import FuelData from "./FuelData/index.vue";
	import ImproveEnergy from "./ImproveEnergy/index.vue";
	const calendarVal = ref("");
	const reportTye = ref(0);
	const data = reactive({
		
	});
	const {  } = toRefs(data);
	calendarVal.value = new Date();
</script>

<style scoped lang="scss">
    ::v-deep .areaInput .el-textarea__inner{
		height: 100%;
	}
	::v-deep .el-calendar__body{
		padding: 0;
	}
	::v-deep .el-calendar-table .el-calendar-day{
		padding: 0;
		height: 19.5px;
		text-align: center;
		line-height: 19.5px;
	}
	::v-deep .el-calendar-table thead th,::v-deep .el-calendar__header{
		padding: 2px 0;
	}
	::v-deep .el-calendar .el-button--small{
		padding: 5px;
		font-size: 0.6rem;
	}
	::v-deep .el-calendar-table *{
		border: none;
	}
	::v-deep .el-calendar-table tr td:first-child{
		border-left: none;
	}
	::v-deep .el-form-item__label {
		color: var(--bGray);
		font-weight: 700;
	}
	::v-deep table .el-input__wrapper,::v-deep .el-calendar{
		background-color: transparent;
		box-shadow: none;
	}
	::v-deep .el-calendar-table td.is-selected{
		background-color: var(--blueShadow);
	}
</style>