<template>
	<div style="font-size: 14px;" class="padding-xs">
		<el-menu :default-active="tabAngol" class="el-menu-demo" active-text-color="#000"  mode="horizontal" @select="changeTab">
			<el-menu-item index="0">货舱系统</el-menu-item>
			<el-menu-item index="1">泵舱系统</el-menu-item>
			<div class="changeEch pointer">折线图<el-icon><Refresh/></el-icon></div>
		</el-menu>
		<div v-if="tabAngol ==0">
			<div class="el-card padding-sm margin-top-sm" style="min-height: calc(50vh - 90px);" v-for="(item,index) in newData.cargo" :key="index">  
				<div class="text-bold text-lg text-el-primary">{{item.name}}</div>
				<div class="flex flex-wrap text-center">
					<template v-for="(sui,subind) in item.child" :key="subind">
						<div :style="item.child.length>7?'width:20%;':'flex:1;'" v-if="sui.value !== undefined">
							<cargoLevel :data="sui"/>
						</div>
					</template>
				</div>
			</div>
		</div>
		<div v-else>
			<el-row :gutter="6">
				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="margin-top-xs">
					<el-card :body-style="{ height: 'calc(50vh - 125px)',padding: '10px' }">
						<template #header>
							<div class="text-bold">污液柜压力</div>
						</template>
						<div class="flex text-center">
							<div class="flex-sub">
								<annularChart :name="`slopTankO`" style="height:160px;" :data="newData.slopTankOData"/>
								<div>{{newData.slopTankOData.name}}：<span class="aisNum">{{newData.slopTankOData.data[0].value}}</span> {{newData.slopTankOData.unit}}</div>
							</div>
							<div class="flex-sub"> 
								<annularChart :name="`slopTankT`" style="height:160px;" :data="newData.slopTankTData"/>
								<div>{{newData.slopTankTData.name}}：<span class="aisNum">{{newData.slopTankTData.data[0].value}}</span> {{newData.slopTankTData.unit}}</div>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="margin-top-xs">
					<el-card :body-style="{ height: 'calc(50vh - 125px)',padding: '10px' }">
						<template #header>
							<div class="text-bold">污液柜温度</div>
						</template>
						<div class="flex align-center" style="height: 16.6%;" v-for="(tui,tubind) in newData.wasteTank" :key="tubind">
							<div style="width:94px;">{{tui.name}}</div>
							<div class="_Num">{{tui.value}}</div>
							<div>℃</div>
						</div>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="margin-top-xs">
					<el-card :body-style="{ height: 'calc(50vh - 125px)',padding: '10px' }">
						<template #header>
							<div class="text-bold">泵壳温度</div>
						</template>
						<barChart :name="`pumpTemp`" style="height:100%;" :data="newData.pumpTempData"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="margin-top-xs">
					<el-card :body-style="{ height: 'calc(50vh - 125px)',padding: '10px' }">
						<template #header>
							<div class="text-bold">轴承温度</div>
						</template>
						<barChart :name="`bearTemp`" style="height:100%;" :data="newData.bearTempData"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="margin-top-xs">
					<el-card :body-style="{ height: 'calc(50vh - 125px)',padding: '10px' }">
						<template #header>
							<div class="text-bold">蒸气回收总管压力</div>
						</template>
						<div class="flex text-center">
							<div class="flex-sub">
								<annularChart :name="`vaporPressureO`" style="height:160px;" :data="newData.vaporPressureOData"/>
								<div>{{newData.vaporPressureOData.name}}：<span class="aisNum">{{newData.vaporPressureOData.data[0].value}}</span> {{newData.vaporPressureOData.unit}}</div>
							</div>
							<div class="flex-sub"> 
								<annularChart :name="`vaporPressureT`" style="height:160px;" :data="newData.vaporPressureTData"/>
								<div>{{newData.vaporPressureTData.name}}：<span class="aisNum">{{newData.vaporPressureTData.data[0].value}}</span> {{newData.vaporPressureTData.unit}}</div>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="margin-top-xs">
					<el-card :body-style="{ height: 'calc(50vh - 125px)',padding: '10px 15px' }">
						<template #header>
							<div class="text-bold">泵进口压力</div>
						</template>
						<div>
							<div class="flex flex-wrap justify-between">
								<div v-for="(item,index) in newData.pressureData[pressureRadio]" :key="index"
									style="width: 48%;padding: 7px;background-color:#52989F" class="margin-bottom-sm text-white">
									<div>{{item.name}}</div>
									<div class="margin-top-xs"><span class="aisNum" style="letter-spacing: 4px;">{{item.value}}</span> {{item.unit}}</div>
								</div>
							</div>
							<el-radio-group v-model="pressureRadio">
								<el-radio label="0">出口压力</el-radio>
								<el-radio label="1">进口压力</el-radio>
							</el-radio-group>
						</div>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="margin-top-xs">
					<el-card :body-style="{ height: 'calc(50vh - 125px)',padding: '10px' }">
						<template #header>
							<div class="text-bold">隔舱传动装置填料函温度</div>
						</template>
						<barChart :name="`stuffTemp`" style="height:100%;" :data="newData.stuffTempData"/>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="margin-top-xs">
					<el-card :body-style="{ height: 'calc(50vh - 125px)',padding: '10px' }">
						<template #header>
							<div class="text-bold">液货舱横跨管压力</div>
						</template>
						<barChart :name="`crossPres`" style="height:100%;" :data="newData.crossPresData"/>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup>
	import { reactive, ref } from '@vue/reactivity';
	import { onMounted,onBeforeUnmount,nextTick } from 'vue';
	import barChart from "@/components/Echarts/wayBillChart/barChart";
	import annularChart from "@/components/Echarts/annularChart";
	import cargoLevel from "@/components/Temperature/cargoLevel";
	import { getCurrencyConfigByName, getCurrencyConfigByMid } from "@/utils/index";
	const store = useStore();   
	const { proxy } = getCurrentInstance();
	const tabAngol = ref('0');
	const pressureRadio = ref('0');
	
	const newData = computed(() => {
		let _obj = {
			"cargo": [{
				"name": "左舱",
				"child":[{
					...getCurrencyConfigByMid("0hL", true, 100),
					"other":[getCurrencyConfigByMid("0hX"),
							 getCurrencyConfigByMid("0gp"),
							 getCurrencyConfigByMid("0gq"),
							 getCurrencyConfigByMid("0gr")]
				},{
					...getCurrencyConfigByMid("0hN", true, 100),
					"other":[getCurrencyConfigByMid("0hY"),
							 getCurrencyConfigByMid("0gs"),
							 getCurrencyConfigByMid("0gt"),
							 getCurrencyConfigByMid("0gu")]
				},{
					...getCurrencyConfigByMid("0hP", true, 100),
					"other":[getCurrencyConfigByMid("0hZ"),
							 getCurrencyConfigByMid("0gv"),
							 getCurrencyConfigByMid("0gw"),
							 getCurrencyConfigByMid("0gx")]
				},{
					...getCurrencyConfigByMid("0hR", true, 100),
					"other":[getCurrencyConfigByMid("0ha"),
							 getCurrencyConfigByMid("0gy"),
							 getCurrencyConfigByMid("0gz"),
							 getCurrencyConfigByMid("0h0")]
				},{
					...getCurrencyConfigByMid("0hT", true, 100),
					"other":[getCurrencyConfigByMid("0hb"),
							 getCurrencyConfigByMid("0gd"),
							 getCurrencyConfigByMid("0ge"),
							 getCurrencyConfigByMid("0gf")]
				},{
					...getCurrencyConfigByMid("0hV", true, 100),
					"other":[getCurrencyConfigByMid("0hc"),
							 getCurrencyConfigByMid("0gg"),
							 getCurrencyConfigByMid("0gh"),
							 getCurrencyConfigByMid("0gi")
					]
				},{
					...getCurrencyConfigByMid("z0B", true, 100),
					"other":[getCurrencyConfigByMid("0hv"),
							 getCurrencyConfigByMid("0hD"),
							 getCurrencyConfigByMid("0hE"),
							 getCurrencyConfigByMid("0hF")]
				}]
			},{
				"name": "右舱",
				"child":[{
					...getCurrencyConfigByMid("0hM", true, 100),
					"other":[getCurrencyConfigByMid("0hd"),
							 getCurrencyConfigByMid("0h1"),
							 getCurrencyConfigByMid("0h2"),
							 getCurrencyConfigByMid("0h3")]
				},{
					...getCurrencyConfigByMid("0hO", true, 100),
					"other":[getCurrencyConfigByMid("0he"),
							 getCurrencyConfigByMid("0h4"),
							 getCurrencyConfigByMid("0h5"),
							 getCurrencyConfigByMid("0h6")]
				},{
					...getCurrencyConfigByMid("0hQ", true, 100),
					"other":[getCurrencyConfigByMid("0hf"),
							 getCurrencyConfigByMid("0h7"),
							 getCurrencyConfigByMid("0h8"),
							 getCurrencyConfigByMid("0h9")]
				},{
					...getCurrencyConfigByMid("0hS", true, 100),
					"other":[getCurrencyConfigByMid("0hg"),
							 getCurrencyConfigByMid("0hA"),
							 getCurrencyConfigByMid("0hB"),
							 getCurrencyConfigByMid("0hC")]
				},{
					...getCurrencyConfigByMid("0hU", true, 100),
					"other":[getCurrencyConfigByMid("0hh"),
							 getCurrencyConfigByMid("0gj"),
							 getCurrencyConfigByMid("0gk"),
							 getCurrencyConfigByMid("0gl")]
				},{
					...getCurrencyConfigByMid("0hW", true, 100),
					"other":[getCurrencyConfigByMid("0hi"),
							 getCurrencyConfigByMid("0gm"),
							 getCurrencyConfigByMid("0gn"),
							 getCurrencyConfigByMid("0go")]
				},{
					...getCurrencyConfigByMid("z0A", true, 100),
					"other":[getCurrencyConfigByMid("0hw"),
							 getCurrencyConfigByMid("0hG"),
							 getCurrencyConfigByMid("0hH"),
							 getCurrencyConfigByMid("0hI")]
				}]
			}],
			pumpTempData: {
				xAxis: ['洗舱泵', '1号压载泵', '2号压载泵'],
				data: [26.3, 28.5, 27.1],
				color: ['#fe9a1a', '#fe421b'],
				show: true,
				unit: "MPa"
			},
			bearTempData: {
				xAxis: ['洗舱泵前', '洗舱泵后', '1号压载泵', '2号压载泵'],
				data: [22.03, 27.56, 25.12, 27],
				color: ['#fe9a1a', '#fe421b'],
				show: true,
				unit: "MPa"
			},
			stuffTempData: {
				xAxis: ['洗舱泵', '1号压载泵', '2号压载泵'],
				data: [26, 24, 29],
				color: ['#fe9a1a', '#fe421b'],
				show: true,
				unit: "MPa"
			},
			crossPresData: {
				xAxis: ['1#', '2#', '3#', '4#', '5#', '6#'],
				data: [0.54, 0.15, 0.25, 0.56, 0.85, 0.35],
				color: ['#6cbedb', '#3398DB'],
				show: true,
				unit: "MPa"
			},
			wasteTank: [{name: "左-上温度", value: 28.00},
						{name: "左-中温度", value: 28.00},
						{name: "左-下温度", value: 25.00},
						{name: "右-上温度", value: 31.00},
						{name: "右-中温度", value: 26.00},
						{name: "右-下温度", value: 25.00}],
			slopTankOData: {
				name: "左",
				data: [{ value: 1.36, name: "1.36MPa" },{ value: 1.64, name: '' }],
				unit: "MPa"
			},
			slopTankTData: {
				name: "右",
				data: [{ value: 2.48, name: "2.48MPa" },{ value: 0.52, name: '' }],
				unit: "MPa"
			},
			vaporPressureOData: {
				name: "1#蒸汽",
				data: [{ value: 0.96, name: "0.96MPa" },{ value: 2.04, name: '' }],
				unit: "MPa"
			},
			vaporPressureTData: {
				name: "2#蒸汽",
				data: [{ value: 1.42, name: "1.42MPa" },{ value: 1.58, name: '' }],
				unit: "MPa"
			},
			pressureData: [[{ name: "1#货油泵", value: 1.42, unit: "MPa" },
							{ name: "1#压载泵", value: 0.68, unit: "MPa" },
							{ name: "2#货油泵", value: 1.89, unit: "MPa" },
							{ name: "2#压载泵", value: 1.04, unit: "MPa" },
							{ name: "洗舱泵", value: 0.96, unit: "MPa" },
							{ name: "扫舱泵", value: 0.57, unit: "MPa" },
				
				],[{ name: "1#货油泵", value: 0.67, unit: "MPa" },
					{ name: "1#压载泵", value: 0.32, unit: "MPa" },
					{ name: "2#货油泵", value: 0.09, unit: "MPa" },
					{ name: "2#压载泵", value: 0.17, unit: "MPa" },
					{ name: "洗舱泵", value: 1.25, unit: "MPa" },
					{ name: "扫舱泵", value: 1.64, unit: "MPa" },
				
				]]
		};
		return _obj
	})
	
	const changeTab = function(key){
		tabAngol.value = key;
	}
</script>

<style lang='scss' scoped>
	.el-tabs__header{
		margin: 0;
	}
	.aisNum {
		font-weight: bold;
		color: #fbbd08;
		font-size:18px;
	}
	._Num{
		width: calc(100% - 130px);
		font-size: 27px;
		font-weight: bold;
		color: #fbbd08;
		margin: 0 10px;
		line-height: 27px;
		text-align: center;
		border-bottom: 3px solid #084A80;
	}
	.changeEch{
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translate(0, -50%);
	}
</style>
