<template>
	<div class="padding-sm">
		<el-row :gutter="10">
			<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
				<el-tabs v-model="activeName" @tab-click="handleClickTab">
					<el-tab-pane label="航次记录" name="Voyage"></el-tab-pane>
					<el-tab-pane label="每日记录" name="DayLog"></el-tab-pane>
				</el-tabs>
			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
				<div class="flex align-center">
					<div>记录时间：</div>
					<el-date-picker
						v-model="queryParams.createTime"
						placeholder="任意时间点">
					  </el-date-picker>
					<el-button type="primary" class="margin-lr" @click="handleQuery" size="small">查询</el-button>
					<el-button @click="handleReset" size="small"><i class="el-icon-refresh-right"></i>重置</el-button>
				</div>
			</el-col>
		</el-row>
		<div class="padding-sm">
			<el-table v-loading="loading" :data="HistoryList" class="margin-bottom-sm">
				<el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
				<el-table-column label="记录时间" align="center" prop="createTime"></el-table-column>
				<el-table-column label="港口" align="center" prop="harbor"></el-table-column>
				<el-table-column label="航行时间" align="center" prop="saltTime"></el-table-column>
				<el-table-column label="岸电消耗" align="center" prop="pjPowerConsumption"></el-table-column>
				<el-table-column label="航段" align="center" prop="legNum" v-if="showLeg">
					<template slot-scope="scope">
						{{scope.row.sections.length}}
					</template>
				</el-table-column>
				<el-table-column label="收集人" align="center" prop="createUser"></el-table-column>
				<el-table-column
				  fixed="right"
				  label="操作"
				  width="140">
				  <template slot-scope="scope">
					<el-button @click="handleClick(scope.row)" type="text" size="small"><i class="el-icon-s-operation"></i>详情</el-button>
					<el-button @click="handleExport(scope.row)" class="text-green" type="text" size="small"><i class="el-icon-download"></i>导出</el-button>
				  </template>
				</el-table-column>
			</el-table>
			<el-pagination v-show="total > 0" :total="total"
			    :page-size="queryParams.pageSize" background 
				 @current-change="handlePageChange"></el-pagination>
		</div>
	</div>
</template>

<script setup>
	var voyageLi = [];
	var daylogLi = [];
	const store = useStore();
	const { proxy } = getCurrentInstance();
	import { reactive, ref } from '@vue/reactivity';
	import { onMounted,onBeforeUnmount } from 'vue';
	const loading = ref(false);
	const reportType = ref('');
	const HistoryList = ref([]);
	const showLeg = ref(false);
	const data = reactive({
		queryParams: {
			pageNum: 1,
			pageSize: 20,
			shipSn: "",
			createTime: ""
		},
		activeName:"Voyage",
		total: 0
	})
	const { queryParams, activeName, total } = toRefs(data);
	const initAjax = function(){
		if(!showLeg.value){
			initVoyage();
		}else{
			initDaylog();
		}
	};
	const initVoyage = function(){
		loading.value = true;
		// let _opts = {
		// 	url: baseUrl + "/shipEnergyExpend/shipEnergyExpend/list",
		// 	type:"GET"
		// };
		// let _data = queryParams.value;
		// let _hea  = {
		// 	"Authorization":"Bearer " + baseTok,
		// };
		// getAxios(_opts, _data, _hea).then((res) => {
		// 	if(res.code == 200&&res.rows.length){
		// 		voyageLi = res.rows;
		// 		total.value = res.total;
		// 	}else{
				voyageLi = [];
				total.value = 0;
			// }
			HistoryList.value = voyageLi;
			loading.value = false;
		// })
	};
	const initDaylog = function(){
		// loading.value = true;
		// let _opts = {
		// 	url: baseUrl + "/ShipEnergyExpendH/shipEnergyEfficiency/list",
		// 	type:"GET"
		// };
		// let _data = queryParams.value;
		// let _hea  = {
		// 	"Authorization":"Bearer " + baseTok,
		// };
		// getAxios(_opts, _data, _hea).then((res) => {
		// 	if(res.code == 200&&res.rows.length){
		// 		daylogLi = res.rows;
		// 		total.value = res.total;
		// 	}else{
				daylogLi = [];
				total.value = 0;
			// }
			HistoryList.value = daylogLi;
			loading.value = false;
		// })
	};
	const handleClick = function(row){
		// window.parent.postMessage({url: _this.activeName.value,id: row.shipEnergyExpendId, type:"url"},staticUrl+ "/");
	};
	const handleClickTab = function(tab, event){
		HistoryList.value = (activeName.value == "Voyage"?voyageLi:daylogLi);
		showLeg.value = (activeName.value == "Voyage"?false:true);
		queryParams.value.pageNum = 1;
		queryParams.value.createTime = "";
		initAjax();
	};
	const handleQuery = function(){
		queryParams.value.pageNum =  1,
		queryParams.value.createTime = getDTime(queryParams.value.createTime)[0];
		initAjax();
	};
	const handleReset = function(){
		queryParams.value.pageNum = 1;
		queryParams.value.createTime = "";
		initAjax();
	};
	const handleExport = function(row){
		let _url, _txt, _form;
		if(activeName.value == "Voyage"){
			_url = "/shipEnergyExpend/shipEnergyExpend/exportCustomize/" + row.shipEnergyExpendId;
			_txt = "航次记录";
		}else{
			_url = "/ShipEnergyExpendH/shipEnergyEfficiency/exportCustomize/" + row.shipEnergyExpendId;
			_txt = "每日记录";
		}
	// 	downAxios({
	// 		type: "GET",
	// 		url: baseUrl + _url,
	// 		data: {},
	// 		head: baseTok,
	// 		xlsName: _txt
	// 	});
	};
	const handlePageChange = function(val){
		queryParams.value.pageNum = val;
		initAjax();
	};
</script>

<style lang='scss' scoped>
/* 	:deep .el-tabs__nav-wrap::after{
		height: 0;
	} */
</style>