<template>
	<el-form ref="routeRecordsRef" :model="routeForm" label-width="0">
		<el-row>
			<el-col :span="12" :xs="24">
				<div class="flex">
					<el-form-item label="" style="margin-bottom: 8px;">
						<el-input
							placeholder="请输入名称"
							v-model="routeForm.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><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="routeData" stripe style="width: 100%"
		height="calc(70vh - 140px)"
		: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;" 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-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="总耗时(H)"></el-table-column>
		<el-table-column align="center" prop="oilsType" label="总油耗(L)"></el-table-column>
		<el-table-column align="center" prop="oilsMoney" label="总里程(nm)"></el-table-column>
		<el-table-column align="center" prop="person" label="航线查看">
			<template #default="scope">
				<el-tooltip class="item" effect="dark" content="航线查看" placement="top">
					<elIcon v-if="scope.row.oilName" style="font-size: 1rem;"><View class="pointer text-blue"/></elIcon>
				</el-tooltip>
			</template>
		</el-table-column>
	</el-table>
		
</template>

<script setup>
	import { reactive } from "vue";
	const data = reactive({
		routeForm: {},
		routeData: [{
			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 { routeData, routeForm } = toRefs(data);
</script>

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