<style lang="scss">
	.cardTitle{
		position: relative;
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 5px;
		padding: 0 0 6px 11px;
		border-bottom: 1px solid #F29600;
		&:after{
			content: "";
			position: absolute;
			top: 2px;
			bottom: 8px;
			left: 0;
			width: 6px;
			background: #F29600;
		}
		.countNum{
			font-size: 18px;
			color: #218066;
			margin: 0 4px 0 10px;
		}
		.el-radio{
			height:auto;
			margin:0;
			.el-radio__label{
				font-size:10px;
			}
		}
	}
	.Notice{
		height:calc(100% - 32px);
		overflow: auto;
		font-size: 13px;
		color: #218066;
		&>div{
			position: relative;
			margin-bottom: 15px;
			padding-bottom: 8px;
			&:after{
				content: "";
				position: absolute;
				top: 8px;
				bottom: 0px;
				left: 0;
				width: 45%;
				border-bottom: 0.3px solid rgba(242,150,0,0.6);
			}
		}
	}
</style>

<template>
	<div class="ShipFeet padding-xs"
		:style="$store.state.app.device == 'desktop'? 'height: calc(100vh - 84px);' : 'height: var(--mobile-hight-with-navbar)'">
		<el-row :gutter="5">
			<el-col :xs="24" :sm="12" :md="5" :lg="5" :xl="5">
				<el-card :body-style="{ height: 'calc(100vh - 94px)',padding: '10px' }">
					<div style="height: 60%;">
						<div class="cardTitle">船舶总数<span><span class="countNum">13</span>条</span></div>
						<pieChart :name="`shipType`" style="height:calc(50% - 16px)" :data="shipTypeData"/>
						<pieChart :name="`shipStatus`" style="height:calc(50% - 16px)" :data="shipStatusData"/>
					</div>
					<div style="height: 40%;">
						<div class="cardTitle">公告总数<span><span class="countNum">9</span>条</span></div>
						<div class="Notice">
							<div v-for="(item,index) in 6" :key="index">
								<div class="text-bold margin-bottom-xs">7月13日 公告</div>
								<div>为了响应我国从告诉发展向高质量发展的号召，现在、推行《智能船舶能耗管理规范》。</div>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="12" :md="14" :lg="14" :xl="14">
				<div style="height: calc( 100vh - 94px);">
					<MapIndex :data="'showNew'" ref="mapIndex" v-if="$store.state.data.analogList.length>0" />
				</div>
			</el-col>
			<el-col :xs="24" :sm="12" :md="5" :lg="5" :xl="5">
				<el-card :body-style="{ height: 'calc(100vh - 94px)',padding: '10px' }">
					<div style="height: 25%;">
						<div class="cardTitle flex justify-between align-center">
							<div>
								船舶里程<span><span class="countNum">896.93</span>海里</span>
							</div>
							<div style="width:46px;line-height:10px;">
								<el-radio-group v-model="mileageRadio">
									<el-radio label="0">排行</el-radio>
									<el-radio label="1">趋势</el-radio>
								</el-radio-group>
							</div>
						</div>
						<tsChart v-if="mileageRadio == 0" :name="`shipMileage`" style="height:calc(100% - 40px)" :data="shipMileageData"/>
						<hasLineChart v-else :name="`shipMileage`" height="calc(100% - 40px)" :data="shipMileageData"/>
					</div>
					<div style="height: 25%;">
						<div class="cardTitle flex justify-between align-center">
							<div>
								航行时长<span><span class="countNum">792.32</span>小时</span>
							</div>
							<div style="width:46px;line-height:10px;">
								<el-radio-group v-model="timeRadio">
									<el-radio label="0">排行</el-radio>
									<el-radio label="1">趋势</el-radio>
								</el-radio-group>
							</div>
						</div>
						<tsChart v-if="timeRadio == 0" :name="`shipTime`" style="height:calc(100% - 40px)" :data="shipTimeData"/>
						<hasLineChart v-else :name="`shipTime`" height="calc(100% - 40px)" :data="shipTimeData"/>
					</div>
					<div style="height: 25%;">
						<div class="cardTitle flex justify-between align-center">
							<div>
								船舶油耗<span><span class="countNum">212.84</span>升</span>
							</div>
							<div style="width:46px;line-height:10px;">
								<el-radio-group v-model="oilRadio" :text-color="'#55ff00'">
									<el-radio label="0">排行</el-radio>
									<el-radio label="1">趋势</el-radio>
								</el-radio-group>
							</div>
						</div>
						<tsChart v-if="oilRadio == 0" :name="`shipOil`" style="height:calc(100% - 40px)" :data="shipOilData"/>
						<hasLineChart v-else :name="`shipOil`" height="calc(100% - 40px)" :data="shipOilData"/>
					</div>
					<div style="height: 25%;">
						<div class="cardTitle">废气排放</div>
						<lineChart :name="`shipGas`" height="calc(100% - 30px)" :data="shipGasData"/>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup name="ShipFeet">
	import MapIndex from "@/components/Map/index";
	import pieChart from "@/components/Echarts/pieChart";
	import hasLineChart from "@/components/Echarts/hasLineChart";
	import tsChart from "@/components/Echarts/transverseChart";
	import lineChart from "@/components/Echarts/wayBillChart/lineChart";
	
	import {
		reactive,
		ref
	} from "@vue/reactivity";
	const {
		proxy
	} = getCurrentInstance();

	const iboatName = ref("");
	const oilRadio = ref("0");
	const timeRadio = ref("0");
	const mileageRadio = ref("0");
	const data = reactive({
		shipTypeData: [{ value: 1, name: '执法船舶' },
					   { value: 7, name: '干散货船' },
					   { value: 5, name: '液化船舶' }],
		shipStatusData: [{ value: 1, name: '在航' },
						 { value: 9, name: '停航' },
						 { value: 3, name: '维修' }],
		shipMileageData: {
			data: [106.96, 126.57, 162.44, 177.81, 242.96],
			xAxis: ["2号船", "1号船", "3号船", "易站科技"]
		},
		shipTimeData: {
			data: [96.44, 106.57, 162.44, 183.91, 242.96],
			xAxis: ["2号船", "1号船", "3号船", "易站科技"]
		},
		shipOilData: {
			data: [16.96, 26.57, 42.44, 53.91, 72.96],
			xAxis: ["2号船", "1号船", "3号船", "易站科技"]
		},
		shipGasData: {
			data: [{
				data: [ 15.96, 16.57, 22.44, 23.91, 27.96],
				type: 'line',
				smooth: true
			}],
			xAxis: ["2号船", "1号船", "3号船", "易站科技"]
		}
	});
	const {
		shipTypeData,
		shipStatusData,
		shipMileageData,
		shipTimeData,
		shipOilData,
		shipGasData
	} = toRefs(data);
</script>