<template>
	<el-form ref="wayPointRecordsRef" :model="wayPointForm" label-width="0">
		<el-row>
			<el-col :span="12" :xs="24">
				<div class="flex">
					<el-form-item label="" style="margin-bottom: 8px;">
						<el-input
							class="radiusInp"
							placeholder="请输入名称"
							v-model="wayPointForm.oilName">
							<template #suffix><elIcon><Search/></elIcon></template>
						</el-input>
					</el-form-item>
					<!-- <el-button class="margin-left-sm" type="primary">查询</el-button> -->
				</div>
			</el-col>
			<el-col :span="12" :xs="24">
				<div class="flex justify-end text-xs">
					<div>
						<el-button circle type="danger"><elIcon><Delete/></elIcon></el-button>
						<span class="margin-left-xs text-black">删除</span>
					</div>	
					<div class="margin-lr">
						<el-button circle type="success"><elIcon><DocumentChecked/></elIcon></el-button>
						<span class="margin-left-xs text-black">保存</span>
					</div>
					<div>
						<el-button circle><elIcon><RefreshRight/></elIcon></el-button>
						<span class="margin-left-xs text-black">刷新</span>
					</div>
					<div class="margin-left">
						<el-button round>
							<elIcon><Plus/></elIcon>
							<span class="text-xs">添加航路点数据</span>
						</el-button>
					</div>
				</div>
			</el-col>
		</el-row>
	</el-form>
	<el-table :data="wayPointData" stripe style="width: 100%"
		height="calc(70vh - 132px)"
		:highlight-current-row="true"
		:cell-style="{ padding: '6px 0',fontSize: '0.75rem' }"
		:header-cell-style="{ 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="longitude" label="经度"></el-table-column>
		<el-table-column align="center" prop="latitude" label="纬度"></el-table-column>
		<el-table-column align="center" prop="startTime" label="方位"></el-table-column>
		<el-table-column align="center" prop="endTime" label="距离"></el-table-column>
		<el-table-column align="center" prop="oilsVolume" label="左偏航距"></el-table-column>
		<el-table-column align="center" prop="oilsType" label="右偏航距"></el-table-column>
		<el-table-column align="center" prop="oilsMoney" label="耗时"></el-table-column>
		<el-table-column align="center" prop="person" label="油耗"></el-table-column>
	</el-table>
		
</template>

<script setup>
	const { proxy } = getCurrentInstance();
	import { reactive } from "vue";
	const data = reactive({
		wayPointForm: {},
		wayPointData: [{
			oilName: "加油记录-1",
			longitude: "113.23656",
			latitude: "23.64589",
			startTime: "2024-05-02 14:24:36",
			endTime: "2024-05-02 14:30:36",
			oilsVolume: "136.2",
			oilsType: "重油",
			oilsMoney: "1539.4",
			person: "王小虎"
		},{
			oilName: "加油记录-1",
			longitude: "113.23656",
			latitude: "23.64589",
			startTime: "2024-05-02 14:24:36",
			endTime: "2024-05-02 14:30:36",
			oilsVolume: "136.2",
			oilsType: "重油",
			oilsMoney: "1539.4",
			person: "王小虎"
		},{
			oilName: "加油记录-1",
			longitude: "113.23656",
			latitude: "23.64589",
			startTime: "2024-05-02 14:24:36",
			endTime: "2024-05-02 14:30:36",
			oilsVolume: "136.2",
			oilsType: "重油",
			oilsMoney: "1539.4",
			person: "王小虎"
		},{
			oilName: "加油记录-1",
			longitude: "113.23656",
			latitude: "23.64589",
			startTime: "2024-05-02 14:24:36",
			endTime: "2024-05-02 14:30:36",
			oilsVolume: "136.2",
			oilsType: "重油",
			oilsMoney: "1539.4",
			person: "王小虎"
		},{
			oilName: "加油记录-1",
			longitude: "113.23656",
			latitude: "23.64589",
			startTime: "2024-05-02 14:24:36",
			endTime: "2024-05-02 14:30:36",
			oilsVolume: "136.2",
			oilsType: "重油",
			oilsMoney: "1539.4",
			person: "王小虎"
		},{
			oilName: "加油记录-1",
			longitude: "113.23656",
			latitude: "23.64589",
			startTime: "2024-05-02 14:24:36",
			endTime: "2024-05-02 14:30:36",
			oilsVolume: "136.2",
			oilsType: "重油",
			oilsMoney: "1539.4",
			person: "王小虎"
		},{
			oilName: "加油记录-1",
			longitude: "113.23656",
			latitude: "23.64589",
			startTime: "2024-05-02 14:24:36",
			endTime: "2024-05-02 14:30:36",
			oilsVolume: "136.2",
			oilsType: "重油",
			oilsMoney: "1539.4",
			person: "王小虎"
		},{
			oilName: "加油记录-1",
			longitude: "113.23656",
			latitude: "23.64589",
			startTime: "2024-05-02 14:24:36",
			endTime: "2024-05-02 14:30:36",
			oilsVolume: "136.2",
			oilsType: "重油",
			oilsMoney: "1539.4",
			person: "王小虎"
		}]
	});
	const { wayPointData, wayPointForm } = toRefs(data);
	proxy.setBlankData(wayPointData.value, 18);
	const handleRowClick = function(row, event, column) {
		clickedRowIndex.value = alarmLogData.value.indexOf(row);
	};
	const rowClassName = function({rowIndex}) {
		if (clickedRowIndex.value === rowIndex) {
	        return 'highlight-row';
		}
	}
</script>

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