<template>
	<div>
		<el-row :gutter="16">
			<el-col :xl="7" :lg="7" :md="7" :sm="24" :xs="24">
				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
					<div class="flex align-center" style="height: calc(30vh - 88px);overflow: hidden;">
						<div style="writing-mode: vertical-rl;" class="text-bold">燃油管理</div>
						<el-image style="width: 45%;border-radius: 4px;" class="margin-lr-sm" :src="shipImg"></el-image>
						<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>
			</el-col>
			<el-col :xl="17" :lg="17" :md="17" :sm="24" :xs="24">
				<el-card class="box-card cardSty" :body-style="{ padding: '4px 10px !important' }">
					<el-row>
						<el-col :xl="13" :lg="13" :md="13" :sm="24" :xs="24">
							<div style="position: relative;">
								<div class="sTitleSty" style="letter-spacing: 0;font-size: 1rem;">{{oilsRepoData.name}}</div>
								<bar-chart name="HostPressure" :data="oilsRepoData" height="calc(30vh - 76px)"/>
							</div>
						</el-col>
						<el-col :xl="11" :lg="11" :md="11" :sm="24" :xs="24" class="text-center text-sm text-bold">
							<div class="grid col-3 align-center" style="height: 100%;">
								<div v-for="(item,index) in oilsTotal" :key="index">
									<annular-chart height="16vh" :name="item.name" :data="item"/>
									<!-- <el-progress type="circle" 
									  :percentage="item.value"
									  :stroke-width="16"
									  color="#ff9d55"
									  :format="formatVal">
									</el-progress> -->
									<div class="margin-top-xs">{{item.title}}/{{item.unit}}</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="24" :xs="24" 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>
								<el-form-item label="" style="margin:0 10px 8px;">
									<el-date-picker
										v-model="refuelForm.compilationDate"
										type="daterange"
										range-separator="~"
										start-placeholder="开始日期"
										end-placeholder="结束日期">
									</el-date-picker>
								</el-form-item>
								<el-button type="primary">查询</el-button>
							</div>
						</el-col>
						<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
							<div class="flex justify-end text-xs">
								<div @click="handleDel">
									<el-button circle type="danger" :disabled="!itemRow.id"><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 class="margin-lr">
									<el-button circle><elIcon><RefreshRight/></elIcon></el-button>
									<span class="margin-left-xs text-black">刷新</span>
								</div>
								<div>
									<el-button round @click="handleAddRecord">
										<elIcon><Plus/></elIcon>
										<span class="text-xs">添加加油记录</span>
									</el-button>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-form>
				<el-table :data="upLogData" stripe style="width: 100%"
					height="calc(70vh - 132px)"
					@row-click="handleRowClick"
					:row-class-name="rowClassName"
					: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 prop="oilName" label="名称"></el-table-column>
					<el-table-column prop="longitude" label="经度"></el-table-column>
					<el-table-column prop="latitude" label="纬度"></el-table-column>
					<el-table-column prop="startTime" label="开始时间"></el-table-column>
					<el-table-column prop="endTime" label="结束时间"></el-table-column>
					<el-table-column prop="oilsVolume" label="加油量"></el-table-column>
					<el-table-column prop="oilsType" label="加油类型"></el-table-column>
					<el-table-column prop="oilsMoney" label="加油费用"></el-table-column>
					<el-table-column prop="person" label="负责人"></el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<fuel-record-drawer ref="FuelRecordDrawerRef"/>
	</div>
</template>

<script setup>
	import { reactive } from "vue";
	const { proxy } = getCurrentInstance();
	import FuelRecordDrawer from "@/components/FuelRecord/drawer";
	import AnnularChart from "@/components/Echarts/annularChart";
	import BarChart from "@/components/Echarts/BarChart";
	import shipImg from "@/assets/images/shipImg.jpg";
	const clickedRowIndex = ref(null);
	const itemRow = ref({});
	const upLogData = ref([]);
	const data = reactive({
		refuelForm: {},
		oilsRepoData: {
			name: "燃油记录",
			xAxis: ["一月", "二月", "三月", "四月", "五月", "六月"],
			data: [{
				name: '滑油',
				type: 'bar',
				color: "#009dff",
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '轻油',
				type: 'bar',
				color: "#22e4ff",
				data: [10, 14, 18, 19, 13, 10]
			},{
				name: '重油',
				type: 'bar',
				color: "#3bffd0",
				data: [15.28, 42.4, 31.8, 21.9, 11.3, 10.6]
			}],
		},
		oilsTotal: [{
			title: "重油总量",
			name: "heavyOil",
			value: 85.36,
			unit: "L"
		},{
			title: "轻油总量",
			name: "lightOil",
			value: 45.1,
			unit: "L"
		},{
			title: "滑油总量",
			name: "lubricatOil",
			value: 12.3,
			unit: "L"
		}]
	});
	const { refuelForm, oilsTotal, oilsRepoData } = toRefs(data);
	const formatVal = function(val){
		return val
	}
	const handleAddRecord = function(){
		proxy.$refs["FuelRecordDrawerRef"].show()
	}
	const handleRowClick = function(row, event, column) {
		itemRow.value = JSON.parse(JSON.stringify(row));
		clickedRowIndex.value = upLogData.value.indexOf(row);
	};
	const rowClassName = function({rowIndex}) {
		if (clickedRowIndex.value === rowIndex) {
	        return 'highlight-row';
		}
	}
	const handleDel = function(){
		if(itemRow.value.id){
			proxy.$modal.confirm('是否确认"' + itemRow.value.oilName + '"的加油记录？').then(function () {
				return true;
			    // return delCertificate(certificateIds);
			}).then(() => {
			    // getList();
			    proxy.$modal.msgSuccess("删除成功");
			}).catch(() => { });
		}
		
	}
	const getList = function(){
		upLogData.value = [{
			id: 125,
			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: "王小虎"
		},{
			id: 3654,
			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: "王小虎"
		},{
			id: 356,
			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: "王小虎"
		},{
			id: 573,
			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: "王小虎"
		},{
			id: 451,
			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: "王小虎"
		},{
			id: 572,
			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: "王小虎"
		},{
			id: 231,
			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: "王小虎"
		},{
			id: 245,
			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: "王小虎"
		}];
		proxy.setBlankData(upLogData.value, 21);
	}
	getList();
</script>

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