<template>
	<div>
		<el-row :gutter="14">
			<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
					<div class="flex align-center justify-around text-bold text-center" style="height: calc(30vh - 80px);overflow: hidden;">
						<div style="writing-mode: vertical-rl;" class="text-bold">ECA区域管理</div>
						<div>
							<div class="reportSty">
								<div><span>9</span></div>
							</div>
							<div class="text-sm margin-top-sm">ECA区域总数</div>
						</div>
						<div>
							<el-image style="height: calc(20vh - 60px);border-radius: 4px;" class="margin-lr-sm" :src="shipImg"></el-image>
							<div class="text-sm margin-top-sm">ECA区域总数</div>
						</div>
						<el-descriptions title="" :column="1">
							<el-descriptions-item label="船名：">易站1号</el-descriptions-item>
							<el-descriptions-item label="船舶编号：">49312567</el-descriptions-item>
							<el-descriptions-item label="船长：">123米</el-descriptions-item>
							<el-descriptions-item label="船宽：">31米</el-descriptions-item>
						</el-descriptions>
					</div>
				</el-card>
				<div class="margin-top-xl">
					<el-form ref="refuelRecordsRef" :model="refuelForm" label-width="0">
						<el-row>
							<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
								<div class="flex">
									<el-form-item label="" style="margin-bottom: 8px;">
										<el-input
											placeholder="请输入名称"
											v-model="refuelForm.oilName">
											<template #suffix><elIcon><Search/></elIcon></template>
										</el-input>
									</el-form-item>
								</div>
							</el-col>
							<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
								<div class="flex justify-end text-xs">
									<div>
										<el-button circle><elIcon><RefreshRight/></elIcon></el-button>
										<span class="margin-left-xs text-black">刷新</span>
									</div>
									<div class="margin-left" v-if="detailVis" @click="detailVis = false">
										<el-button circle>
											<svg-icon icon-class="back"/>
										</el-button>
										<span class="margin-left-xs text-black">返回</span>
									</div>
									<div class="margin-left">
										<el-button round @click="handleAddRegional">
											<elIcon><Plus/></elIcon>
											<span class="text-xs">添加ECA区域数据</span>
										</el-button>
									</div>
								</div>
							</el-col>
						</el-row>
					</el-form>
					<el-table :data="upLogData" stripe style="width: 100%"
						height="calc(70vh - 140px)"
						 v-if="!detailVis"
						:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
						:header-cell-style="{ padding: '5px 0',height: '30px !important',backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
						<el-table-column label="id" width="80" align="center">
							<template #default="scope">
								<span style="color: #0672fc;" class="text-bold text-sm">{{scope.$index}}</span>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="oilName" label="名称"></el-table-column>
						<el-table-column align="center" prop="count" label="ECA区域点数"></el-table-column>
						<el-table-column align="center" label="ECA区域查看">
							<template #default="scope">
								<el-tooltip class="item" effect="dark" content="查看详情" placement="top">
									<elIcon v-if="scope.row.row" style="font-size: 1rem;" @click="handleDetail(scope)"><View class="pointer text-blue"/></elIcon>
								</el-tooltip>
							</template>
						</el-table-column>
						
					</el-table>
					<el-table :data="detailData.row" stripe style="width: 100%"
						height="calc(70vh - 140px)"
						v-if="detailVis"
						:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
						:header-cell-style="{ padding: '5px 0',height: '30px !important',backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
						<el-table-column label="id" width="80" align="center">
							<template #default="scope">
								<span style="color: #0672fc;" class="text-bold text-sm">{{scope.$index}}</span>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="oilName" label="名称"></el-table-column>
						<el-table-column align="center" prop="longitude" label="经度"></el-table-column>
						<el-table-column align="center" prop="latitude" label="纬度"></el-table-column>
					</el-table>
				</div>
			</el-col>
			<el-col :xl="16" :lg="16" :md="16" :sm="24" :xs="24">
				<div style="height: calc(100vh - 133px);" class="bg-black radius">
					<eca-map :data="regionForm"/>
				</div>
			</el-col>
		</el-row>
		<eca-regional-drawer ref="EcaRegionalDrawerRef"/>
	</div>
</template>

<script setup>
	import { reactive } from "vue";
	const { proxy } = getCurrentInstance();
	import EcaRegionalDrawer from "@/components/EcaRegional";
	import ecaMap from "@/components/Map/ECAMap/map";
	import shipImg from "@/assets/images/shipImg.jpg";
	const detailVis = ref(false);
	const detailData = ref({});
	const regionForm = ref({});
	const data = reactive({
		refuelForm: {},
		upLogData: [{
			oilName: "加油记录-1",
			count: 2,
			row: [{
				oilName: "加油记录-1",
				longitude: "113.23656",
				latitude: "23.64589",
			},{
				oilName: "加油记录-2",
				longitude: "113.23656",
				latitude: "23.64589",
			},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
		},{
			oilName: "加油记录-2",
			count: 1,
			row: [{
				oilName: "加油记录-2",
				longitude: "113.23656",
				latitude: "23.64589",
			},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
		},{
			oilName: "加油记录-3",
			count: 1,
			row: [{
				oilName: "加油记录-2",
				longitude: "113.23656",
				latitude: "23.64589",
			},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
		},{
			oilName: "加油记录-4",
			count: 1,
			row: [{
				oilName: "加油记录-2",
				longitude: "113.23656",
				latitude: "23.64589",
			},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
		},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
		
	});
	const { refuelForm, upLogData } = toRefs(data);
	const handleDetail = function(_row){
		detailData.value = _row.row;
		detailVis.value = true;
		let _obj = {};
		if(_row["$index"] == 0){
			_obj = {
				"gpsInfo": {
					"lon":[117.670323, 117.695141, 117.659597, 117.620267, 117.670323],
					"lat":[38.831509, 38.800045, 38.785127, 38.808076, 38.831509],
					"radius": 0,
				},
				"fence_type": 1
			};
		}else if(_row["$index"] == 1){
			_obj = {
				"gpsInfo": {
					"lon":[117.628775],
					"lat":[38.604317],
					"radius": 1783.6604,
				},
				"fence_type": 0
			};
		}else if(_row["$index"] == 2){
			_obj = {
				"gpsInfo": {
					"lon":[122.27364514766231, 122.38097317161841, 122.43951573013992, 122.34584763650551, 122.27104325617246, 122.27364514766231],
					"lat":[30.482269795850222, 30.504385873513904, 30.419173927221483, 30.400310213920108, 30.417872981476563, 30.482269795850222],
					"radius": 0,
				},
				"fence_type": 1
			};
		}else{
			_obj = {
				"gpsInfo": {
					"lon":[121.75587804760742],
					"lat":[30.200393084594726],
					"radius": 2750.8393248556604,
				},
				"fence_type": 0
			};
		}
		regionForm.value = _obj;
	}
	const handleAddRegional = function(){
		proxy.$refs["EcaRegionalDrawerRef"].show()
	}
</script>

<style scoped lang="scss">
	
</style>