<template>
	<div class="padding-xs text-sm">
	    <el-row :gutter="8">
			<el-col :span="6" :xs="24">
				<el-card class="box-card" :body-style="{ padding: '0' }" style="position: relative;">
					<div slot="header" class="clearfix padding-lr-sm padding-tb-xs" 
						style="background-color: var(--el-menu-bg-color);color: #fff;">
					    <span class="text-df text-bold">船舶列表</span>
						<!-- <div style="float: right; padding: 3px 0" class="pointer">
							<elIcon v-if="showList" @click="showList = false"><Minus/></elIcon>
							<elIcon v-else @click="showList = true"><FullScreen/></elIcon>
						</div> -->
					</div>
					<div v-if="showList" class="padding-xs">
						<!-- <div>
							<el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
								<template #append><el-button type="primary"><elIcon><Search/></elIcon></el-button></template>
							</el-input>
						</div> -->
						<div class="grid col-4 text-center margin-tb-xs padding-xs" style="background-color: rgba(0, 0, 0, 0.05);">
							<div class="radius pointer" :class="haveTab == index?'bg-theme':''" 
								@click="handleChange(index)"
								v-for="(item,index) in haveData" :key="index">
								<div>{{ item.name }}</div>
								<div class="text-bold text-xxl margin-top-xs">{{ item.count }}</div>
							</div>
						</div>
						<el-scrollbar style="height: calc(100vh - 450px);">
							<div class="radius padding-xs margin-top-sm pointer" style="background-color: #e9f6f3;" 
								v-for="(sitem,sindex) in shipList" :key="sindex" @click="handleItem(sitem)">
								<div>
									<span>{{sitem.incineratorName}}</span>
									<!-- <span style="float: right;">{{proxy.parseTime(Number(sitem.time),`{y}-{m}-{d} {h}:{i}:{s}`)}}</span> -->
								</div>
								<div class="grid col-3 text-center margin-top-sm text-xs">
									<div>
										<div class="text-bold">
											<span class="text-theme" v-if="sitem.status == 10">运行中</span>
											<span class="text-red" v-else>停机中</span>
										</div>
										<div>运行状态</div>
									</div>
									<div>
										<div class="text-bold text-theme">{{duToGpsDM(sitem["0a4"],'E')}}</div>
										<div>经度</div>
									</div>
									<div>
										<div class="text-bold text-theme">{{duToGpsDM(sitem["0a5"],'N')}}</div>
										<div>纬度</div>
									</div>
								</div>
							</div>
						</el-scrollbar>
					</div>
				</el-card>
				<div class="margin-top-xs">
					<div class="clearfix padding-lr-sm padding-tb-xs" style="background-color: var(--el-menu-bg-color);color: #fff;">
						实时监控
						<div style="float: right; padding: 3px 0" class="pointer">
							<elIcon @click="freshVal = Math.random()" title="刷新"><RefreshRight/></elIcon>
						</div>
					</div>
					<div>
						<muVideo :data="freshVal"/>
					</div>
				</div>
			</el-col>
			<el-col :span="18" :xs="24">
				<MapIncinerator/>
				<div style="position: absolute;top: 0.2em;right: 0.2em;width:230px;">
					<el-card class="box-card" :body-style="{ padding: '0' }">
						<div class="square">{{ shipItem.incineratorName?shipItem.incineratorName:"---" }}</div>
						<div class="padding-lr-sm text-sm">
							<div class="flex align-center">
								<div style="width:80px;" class="text-right">状态：</div>
								<div class="text-xl margin-lr-xs">
									<span :class="shipItem.status == 10?'text-green':'text-gray'" style="font-size: 1.8rem;">●</span>
								</div>
							</div>
							<!-- <div class="flex align-center">
								<div style="width:80px;" class="text-right">运行时间：</div>
								<div class="text-xl margin-lr-xs text-blue">
									{{ parseInt(Number(shipItem.runTime)/1000/60) }}
								</div>
								<div>min</div>
							</div> -->
							<div class="flex margin-tb-xs align-center" v-for="(smeit,smeind) in shipItem.rows" :key="smeind">
								<div style="width:80px;" class="text-right">{{smeit.name}}：</div>
								<div style="width:calc(100% - 85px)">
									<span class="text-xl text-blue margin-lr-xs">{{ smeit.value?smeit.value:"---" }} </span>
									<span>{{smeit.unit}}</span>
								</div>
							</div>
						</div>
					</el-card>
					<el-card class="box-card margin-top-xs" :body-style="{ padding: '0' }">
						<div class="square">报警记录<span class="fr">{{total}}条</span></div>
						<div class="padding-lr-sm text-xs" style="max-height: 230px;overflow-y: auto;">
							<div v-if="alarmDetail.length">
								<div class="flex justify-between margin-tb-xs" v-for="(ameit,ameind) in alarmDetail" :key="ameind">
									<div>{{ameit.alarmContent}}</div>
									<div class="text-red">{{ameit.alarmValue}}</div>
									<div class="text-blue">{{ameit.startTime.split(" ")[1]}}</div>
								</div>
							</div>
							<div v-else class="padding-tb-sm text-center">
								暂无报警数据
							</div>
						</div>
					</el-card>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup name="homePage">
	import MapIncinerator from "@/components/Map/IncineratorMap/index";
	import muVideo from "@/components/muVideo/index";
	import { duToGpsDM } from "@/utils/gpsToDu";
	import { listAlarmLog } from "@/api/Incinerator/alarmLogApi";
	const { proxy } = getCurrentInstance();
	let _shipList = [];
	const showList = ref(true);
	const input3 = ref("");
	const haveTab = ref(0);
	const total = ref(0);
	const shipList = ref([]);
	const alarmDetail = ref([]);
	const shipItem = ref({});
	const freshVal = ref(0);
	const haveData = computed(() => {
		let angol1 = proxy.$store.state.data.analogList;
		let online = alarmDetail.value.length;
		let _obj = [{
			"name": "总数",
			"count": angol1.length
		},{
			"name": "故障数",
			"count": 0
		},{
			"name": "报警数",
			"count": online?1:0
		},{
			"name": "紧急事故",
			"count": 0
		}];
		return _obj;
	})
	const data = reactive({
	});
	const { } = toRefs(data);
	const handleItem = function(row){
		shipItem.value = row;
		getLogList();
	}
	
	const handleChange = function(key){
		haveTab.value = key;
		shipList.value = (key == 1 || key == 3)?[]: _shipList;
		if(shipList.value.length){
			if(shipItem.value.sn){
				let _obj = shipList.value.filter(item=>item['sn']==shipItem.value.sn);
				shipItem.value = _obj.length?_obj[0]:{};
			}else{
				shipItem.value = shipList.value[0];
			}
			getLogList();
		}else{
			shipItem.value = {};
		}
	}
	const getLogList = function(){
		if(shipItem.value.incineratorSn){
			listAlarmLog({
				pageNum: 1,
				pageSize: 10,
				alarmContent: null,
				orderByColumn: "startTime",
				isAsc: "descending",
				incineratorSn: shipItem.value.incineratorSn,
				startTime: proxy.parseTime(new Date(),`{y}-{m}-{d}`)
			}).then(resj => {
				total.value = resj.total;
				alarmDetail.value = resj.rows;
			})
		}
	}
	watch(() => proxy.$store.state.data.curAnalogSn, (newValue, oldValue) => {
		let _obj = shipList.value.filter(item => item['sn'] == newValue);
		shipItem.value = _obj.length?_obj[0]:{};
	});
	watch(() => proxy.$store.state.data.analogList, (newValue, oldValue) => {
		setTimeout(()=>{
			_shipList = newValue;
			handleChange(haveTab.value);
		},500)
	});
	_shipList = proxy.$store.state.data.analogList;
	handleChange(haveTab.value);
</script>

<style lang="scss">
	::-webkit-scrollbar {
		width: 4px; /* 修改宽度 */
	}
	::-webkit-scrollbar-thumb {
		border-radius: 4px;
		background-color: #b0b0b0;
	}
</style>