<style lang="scss">
	.cardTitle{
		position: relative;
		font-size: 0.9rem;
		font-weight: bold;
		margin-bottom: 3px;
		padding: 0 0 2px 11px;
		border-bottom: 1px solid #218066;
		&:after{
			content: "";
			position: absolute;
			top: 4px;
			bottom: 6px;
			left: 0;
			width: 6px;
			background: #218066;
		}
		.countNum{
			font-size: 16px;
			color: #218066;
			margin: 0 4px 0 10px;
		}
		.el-radio{
			height:auto;
			margin:0;
			.el-radio__label{
				font-size: 10px;
			}
		}
	}
	.Notice{
		height:calc(100% - 35px);
		overflow: auto;
		font-size: 0.7rem;
		&::-webkit-scrollbar{
			width: 4px;
		}
		&::-webkit-scrollbar-track{
			background-color: #e2e2e2;
		}
		&::-webkit-scrollbar-thumb{
			background-color: #bdbdbd;
		}
		&>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 #218066;
			}
		}
	}
</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" :span="5">
				<el-card :body-style="{ height: 'calc(100vh - 94px)',padding: '8px' }">
					<div class="cardTitle">船舶总数<span><span class="countNum">13</span>条</span></div>
					<pieChart :name="`shipType`" style="height:calc(32% - 8px);" :data="shipTypeData"/>
					<!-- <pieChart :name="`shipGoodsType`" style="height:calc(25% - 8px);margin: 5px 0;" :data="shipGoodsData"/> -->
					<div style="padding:2% 0;height:calc(36% - 8px);">
						<pieChart :name="`shipStatus`" style="height:100%;" :data="shipStatusData"></pieChart>
					</div>
					<pieChart :name="`shipAge`" style="height:calc(32% - 8px);margin-top: 5px;" :data="shipAgeData"/>
				</el-card>
			</el-col>
			<el-col :xs="24" :span="14">
				<el-card :body-style="{ padding: '0' }">
					<div style="height: 65px;padding: 0 2em;" class="flex justify-between align-center">
						<template v-for="(item,index) in statisticsData" :key="index">
							<div class="flex align-center text-bold">
								<svg-icon :icon-class="item.icon" style="font-size: 3rem;"/>
								<div class="margin-left-xs">
									<div class="text-sm">{{ item.name }}</div>
									<div><span style="font-size: 1.5rem;color: #218066;">{{ item.value }}</span> {{ item.unit }}</div>
								</div>
							</div>
						</template>
					</div>
					<div style="height: calc(77vh - 172px);">
						<MapIndex :data="'showNew'" ref="mapIndex" v-if="$store.state.data.analogList.length>0" />
					</div>
				</el-card>
				<el-card class="margin-top-xs" :body-style="{ padding: '5px' }">
					<el-row :gutter="8">
						<el-col :xs="24" :span="8">
							<div class="cardTitle">总排放<span><span class="countNum">13</span>L</span></div>
							<lineChart :name="`shipEmission`" height="calc(23vh - 30px)" :data="shipGasData"/>
						</el-col>
						<el-col :xs="24" :span="8">
							<div class="cardTitle">满载率<span><span class="countNum">13</span>%</span></div>
							<lineChart :name="`shipload`" height="calc(23vh - 30px)" :data="shipGasData"/>
						</el-col>
						<el-col :xs="24" :span="8">
							<div class="cardTitle">货运量<span><span class="countNum">13</span>吨</span></div>
							<tsChart :name="`shipFreight`" height="calc(23vh - 30px)" :data="shipOilData"/>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :xs="24" :span="5">
				<el-card :body-style="{ height: 'calc(100vh - 94px)',padding: '10px' }">
					<div style="height: 25%;">
						<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" style="color: #218066;">7月13日 公告</div>
								<div>为了响应我国从告诉发展向高质量发展的号召，现在、推行《智能船舶能耗管理规范》。</div>
							</div>
						</div>
					</div>
					<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"/>
						<lineChart v-else :name="`shipMileageTrend`" height="calc(100% - 40px)" :data="mileageTrendData"/>
					</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"/>
						<lineChart v-else :name="`shipTimeTrend`" height="calc(100% - 40px)" :data="timeTrendData"/>
					</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'" size="mini">
									<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% - 32px)" :data="shipOilData"/>
						<lineChart v-else :name="`shipOilTrend`" height="calc(100% - 32px)" :data="oilTrendData"/>
					</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 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: {
			name: "船舶类型",
			sign: 'ring',
			data: [{ value: 1, name: '远洋船' },
				   { value: 7, name: '沿海船' },
				   { value: 5, name: '内河船' }]
		},
		shipStatusData: {
			name: "船舶状态",
			sign: 'circular',
			data: [{ value: 1, name: '在航' },
				   { value: 9, name: '停航' },
				   { value: 4, name: '滞留' },
				   { value: 3, name: '维修' }]
		},
		shipGoodsData: {
			name: "货运类型",
			sign: 'ring',
			data: [{ value: 1, name: '干散货' },
				   { value: 9, name: '集装箱' },
				   { value: 4, name: '化学品' }]
		},
		shipAgeData: {
			name: "船龄分类",
			sign: 'circular',
			data: [{ value: 1, name: '1-5' },
				   { value: 9, name: '6-10' },
				   { value: 4, name: '11-15' },
				   { value: 3, name: '16-20' }]
		},
		shipMileageData: {
			data: [106.96, 126.57, 162.44, 177.81],
			xAxis: ["易站1", "易站2", "易站3", "易站4"]
		},
		shipTimeData: {
			data: [96.44, 106.57, 162.44, 183.91],
			xAxis: ["易站1", "易站2", "易站3", "易站4"]
		},
		shipOilData: {
			data: [16.96, 26.57, 42.44, 53.91],
			xAxis: ["易站1", "易站2", "易站3", "易站4"]
		},
		mileageTrendData: {
			data: [{
				data: [ 15.96, 16.57, 22.44, 23.91, 27.96],
				smooth: 0.4,
				name: "易站1",
				type: 'line',
				showSymbol: false
			},{
				data: [ 45.03, 26.34, 22.44, 33.91, 57.96],
				smooth: 0.4,
				name: "易站2",
				type: 'line',
				showSymbol: false
			},{
				data: [ 5.96, 6.57, 22.44, 23.91, 17.96],
				smooth: 0.4,
				name: "易站3",
				type: 'line',
				showSymbol: false
			},{
				data: [ 25.96, 26.57, 32.44, 43.91, 37.96],
				smooth: 0.4,
				name: "易站4",
				type: 'line',
				showSymbol: false
			}],
			xAxis: ["10/04", "10/05", "10/06", "10/07", "10/08"]
		},
		timeTrendData: {
			data: [{
				data: [ 15.96, 16.57, 22.44, 23.91, 27.96],
				smooth: 0.4,
				name: "易站1",
				type: 'line',
				showSymbol: false
			},{
				data: [ 45.03, 26.34, 22.44, 33.91, 57.96],
				smooth: 0.4,
				name: "易站2",
				type: 'line',
				showSymbol: false
			},{
				data: [ 5.96, 6.57, 22.44, 23.91, 17.96],
				smooth: 0.4,
				name: "易站3",
				type: 'line',
				showSymbol: false
			},{
				data: [ 25.96, 26.57, 32.44, 43.91, 37.96],
				smooth: 0.4,
				name: "易站4",
				type: 'line',
				showSymbol: false
			}],
			xAxis: ["10/04", "10/05", "10/06", "10/07", "10/08"]
		},
		oilTrendData: {
			data: [{
				data: [ 15.96, 16.57, 22.44, 23.91, 27.96],
				smooth: 0.4,
				name: "易站1",
				type: 'line',
				showSymbol: false
			},{
				data: [ 45.03, 26.34, 22.44, 33.91, 57.96],
				smooth: 0.4,
				name: "易站2",
				type: 'line',
				showSymbol: false
			},{
				data: [ 5.96, 6.57, 22.44, 23.91, 17.96],
				smooth: 0.4,
				name: "易站3",
				type: 'line',
				showSymbol: false
			},{
				data: [ 25.96, 26.57, 32.44, 43.91, 37.96],
				smooth: 0.4,
				name: "易站4",
				type: 'line',
				showSymbol: false
			}],
			xAxis: ["10/04", "10/05", "10/06", "10/07", "10/08"]
		},
		shipGasData: {
			name: "",
			data: [{
				data: [ 15.96, 16.57, 22.44, 23.91, 27.96],
				smooth: 0.4,
				type: 'line',
				showSymbol: false
			}],
			xAxis: ["10/04", "10/05", "10/06", "10/07", "10/08"]
		},
		statisticsData: [{ value: 24, name: '总人数', icon: "users", unit: "人" },
			   { value: 123.14, name: '总油耗', icon: "oil", unit: "L" },
			   { value: 436.4, name: '货运总量', icon: "goods", unit: "吨" }]
	});
	const {
		shipTypeData,
		shipStatusData,
		shipGoodsData,
		shipAgeData,
		shipMileageData,
		shipTimeData,
		shipOilData,
		oilTrendData,
		shipGasData,
		statisticsData,
		mileageTrendData,
		timeTrendData
	} = toRefs(data);
</script>