<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
											class="radiusInp"
											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" class="text-xs">
								<div class="flex justify-end" v-if="detailVis">
									<div @click="detailVis = false">
										<el-button type="success" circle>
											<elIcon><DocumentChecked/></elIcon>
										</el-button>
										<span class="margin-left-xs text-black">保存</span>
									</div>
									<div class="margin-left" @click="handleBack">
										<el-button circle>
											<svg-icon icon-class="back"/>
										</el-button>
										<span class="margin-left-xs text-black">返回</span>
									</div>
								</div>
								<div class="flex justify-end" v-else>
									<div>
										<el-button circle><elIcon><RefreshRight/></elIcon></el-button>
										<span class="margin-left-xs text-black">刷新</span>
									</div>
									<div @click="handleDel" class="margin-lr">
										<el-button circle type="danger" :disabled="!detailData.refuelId"><elIcon><Delete/></elIcon></el-button>
										<span class="margin-left-xs text-black">删除</span>
									</div>	
									<div>
										<el-button round @click="handleAddRegional" v-if="!detailVis">
											<elIcon><Plus/></elIcon>
											<span class="text-xs">添加ECA区域数据</span>
										</el-button>
									</div>
								</div>
							</el-col>
						</el-row>
					</el-form>
					<el-table :data="refuelRecoData" stripe style="width: 100%"
						height="calc(70vh - 140px)"
						@row-click="handleRowClick"
						:row-class-name="rowClassName"
						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;" :style="{ opacity: scope.row.oilName?1:0 }" class="text-bold text-sm">{{scope.$index+1}}</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区域点数">
							<template #default="scope">
								<span v-if="scope.row.mapRows">{{ scope.row.mapRows?scope.row.mapRows.length:0 }}</span>
							</template>
						</el-table-column>
						<el-table-column align="center" label="ECA区域查看">
							<template #default="scope">
								<el-tooltip class="item" effect="dark" content="查看详情" placement="top" v-if="scope.row.mapRows">
									<elIcon style="font-size: 1rem;" @click="handleDetail(scope.row)"><View class="pointer text-blue"/></elIcon>
								</el-tooltip>
							</template>
						</el-table-column>
					</el-table>
					<el-table :data="detailData.mapRows" stripe style="width: 100%"
						height="calc(70vh - 140px)"
						:highlight-current-row="true"
						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="{ opacity: scope.row.oilName?1:0 }" style="color: #0672fc;" class="text-bold text-sm">{{scope.$index+1}}</span>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="oilName" label="名称"></el-table-column>
						<el-table-column align="center" prop="longitude" label="经度">
							<template #default="scope">
								{{duToGpsDMS(scope.row.longitude, 'E')}}
							</template>
						</el-table-column>
						<el-table-column align="center" prop="latitude" label="纬度">
							<template #default="scope">
								{{duToGpsDMS(scope.row.latitude, 'N')}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="操作" width="60">
							<template #default="scope">
								<elIcon style="font-size: 1rem;" @click="delMapRow(scope.row)"><Delete class="pointer text-red"/></elIcon>
							</template>
						</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" :finishSta="finishSta" @gpsPoints="handleFinish"/>
				</div>
			</el-col>
		</el-row>
		<el-dialog
		  title="添加ECA区域数据"
		  v-model="dialogVisible"
		  width="30%">
			<el-form :model="detailData" :rules="rules">
				<el-form-item label="区域名称" prop="oilName">
					<el-input v-model="detailData.oilName" autocomplete="off"></el-input>
				</el-form-item>
		    </el-form>
		    <div slot="footer" class="dialog-footer text-right">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleConfim">确 定</el-button>
		    </div>
		</el-dialog>
		<!-- <eca-regional-drawer ref="EcaRegionalDrawerRef"/> -->
	</div>
</template>

<script setup>
	import { reactive } from "vue";
	import { listRegionals, getRegionals, addRegional, updateRegional, delRegional } from "@/api/regionalMana";
	import { duToGpsDMS } from "@/utils/gpsToDu";
	const { proxy } = getCurrentInstance();
	// import EcaRegionalDrawer from "@/components/EcaRegional";
	import ecaMap from "@/components/Map/ECAMap/mapdui";
	import shipImg from "@/assets/images/shipImg.jpg";
	const detailVis = ref(false);
	const detailData = ref({});
	const finishSta = ref(false);
	const dialogVisible = ref(false);
	const regionForm = ref({});
	const refuelRecoData = ref([]);
	const clickedRowIndex = ref(null);
	const operateType = ref("edit");
	const data = reactive({
		rules: {
			oilName: [{
				required: true,
				message: "请输入区域名称",
				trigger: "blur"
			}]
		},
		refuelForm: {}
		
	});
	const { refuelForm, rules } = toRefs(data);
	// 查看区域数据
	const handleDetail = function(_row){
		hasReset();
		detailData.value = JSON.parse(JSON.stringify(_row));
		regionForm.value  = {
			operateType: (detailData.value.mapRows.length?"edit":"add"),
			mapRows: detailData.value.mapRows
		};
		clickedRowIndex.value = refuelRecoData.value.indexOf(_row);
		detailVis.value = true;
	}
	// 初始化数据
	const hasReset = function(){
		detailData.value = {
			refuelId: undefined,
			oilName: "",
			mapRows: []
		};
		regionForm.value  = {};
	}
	// 新增区域
	const handleAddRegional = function(){
		hasReset();
		dialogVisible.value = true;
		// proxy.$refs["EcaRegionalDrawerRef"].show()
	}
	function handleFinish(ev){
		console.log(ev)
		detailData.value.mapRows = ev;
	}
	// 新增、编辑区域确定按钮
	function handleConfim(){
		let _obj = refuelRecoData.value;
		_obj.push({
			refuelId: parseInt(Math.random()*1000),
			oilName: detailData.value.oilName,
			mapRows: []
		});
		refuelRecoData.value = _obj;
		dialogVisible.value = false;
		// handleRowClick()
	}
	// 单击表格
	const handleRowClick = function(row, event, column) {
		if(event){
			detailData.value = JSON.parse(JSON.stringify(row));
			regionForm.value  = {
				operateType: "see",
				mapRows: detailData.value.mapRows
			};
			clickedRowIndex.value = refuelRecoData.value.indexOf(row);
		}
	};
	// 单击表格选择样式添加
	const rowClassName = function({rowIndex}) {
		if (clickedRowIndex.value === rowIndex) {
	        return 'highlight-row';
		}
	}
	// 删除整个区域数据
	const handleDel = function(){
		if(detailData.value.refuelId){
			proxy.$modal.confirm('是否确认"' + detailData.value.oilName + '"的ECA区域信息？').then(function () {
				detailData.value = {};
				return true;
			    // return delCertificate(certificateIds);
			}).then(() => {
			    // getList();
			    proxy.$modal.msgSuccess("删除成功");
			}).catch(() => { });
		}
	}
	// 删除单个经纬度
	const delMapRow = function(row){
		
	}
	// 返回
	const handleBack =  function(row){
		detailVis.value = false;
		regionForm.value.operateType = "see";
	}
	const getRecodList = function(){
		listRegionals().then(resopnes =>{
			refuelRecoData.value = resopnes;
			proxy.setBlankData(refuelRecoData.value, 21);
		})
	}
	getRecodList();
</script>

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