<template>
	<div class="padding-xs text-sm">
		<el-row :gutter="5">
			<el-col :xs="24" :span="6">
				<el-card class="box-card text-bold" :body-style="{ padding: '5px' }">
					<el-form :model="queryParams" ref="queryRef" :inline="true" class="margin-bottom-xs">
						<el-form-item style="margin: 0px;">
							<el-date-picker
								v-model="queryParams.searhDate"
								type="daterange"
								style="width: calc(100% - 56px);height: 26px;"
								range-separator="至">
							</el-date-picker>
							<el-button type="primary" size="small" class="margin-left-xs">查询</el-button>
						</el-form-item>
					</el-form>
					<div>
						<div class="text-bold padding-bottom-xs margin-bottom-xs" style="border-bottom: 1px solid rgba(33, 128, 102,0.5);">油耗（L）</div>
						<!-- <barChart :name="`oilRanking`" style="height: calc(33.33vh - 83px);" :data="oilRankChart" /> -->
						<div style="position: relative;">
							<pieChart :name="`oilRanking`" style="height: calc(33.33vh - 83px);" :data="oilRankChart"/>
							<div class="text-center" style="position: absolute;top: 50%;left: 50%;z-index: 444;transform: translate(-50%, -50%);">
								<div>总油耗</div>
								<div><text class="text-blue">153.4</text>L</div>
							</div>
						</div>
					</div>
					<div class="margin-tb-sm">
						<div class="text-bold flex align-center justify-between padding-bottom-xs margin-bottom-xs"
							style="border-bottom: 1px solid rgba(33, 128, 102,0.5);">
							<text>油耗排行</text>
							<svg-icon @click="handleDetail(oilRankShipChart.title)" class="text-blue text-xl text-bold pointer" icon-class="list"/>
						</div>
						<tsChart :name="`oilRankShip`" style="height: calc(33.33vh - 82px);" :data="oilRankShipChart" />
					</div>
					<div>
						<div class="text-bold flex align-center justify-between padding-bottom-xs margin-bottom-xs"
							style="border-bottom: 1px solid rgba(33, 128, 102,0.5);">
							<text>碳排排行</text>
							<svg-icon @click="handleDetail(carbonRankChart.title)" class="text-blue text-xl text-bold pointer" icon-class="list"/>
						</div>
						<tsChart :name="`carbonRanking`" style="height: calc(33.33vh - 82px);" :data="carbonRankChart" />
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :span="12">
				<el-row :gutter="5" class="text-bold">
					<template v-for="(item,index) in totalList" :key="index">
						<el-col :xs="12" :span="6">
							<el-card class="box-card" :body-style="{ height: '80px', padding: '0', position: 'relative' }">
								<div class="square">{{ item.name }}：</div>
								<div class="flex align-end justify-center" style="height: calc(100% - 34px);">
									<div class="flex align-center">
										<text class="margin-right text-blue" style="font-size: 1.4rem;">{{ fomatNumber(item.value) }}</text>
										<text style="font-size: 0.7rem;font-weight: 400;" v-if="!item.long">{{ item.unit }}</text>
										<div style="font-size: 0.7rem;font-weight: 400;" class="text-center" v-else>
											<text style="border-bottom: 1px solid #5a5a5a;">{{ item.unit }}</text><br><text>{{ item.long }}</text>
										</div>
									</div>
								</div>
							</el-card>
						</el-col>
					</template>
				</el-row>
				<el-card class="box-card text-bold margin-tb-xs" :body-style="{padding: '0 0 7px' }">
					<div class="square margin-bottom-xs">油耗里程</div>
					<doblineChart :name="`fuelTrends`" :data="fuelData" style="height: calc(50vh - 180px);"/>
				</el-card>
				<el-card class="box-card text-bold" :body-style="{padding: '0 0 7px' }">
					<el-row :gutter="5" class="square">
						<el-col :xs="24" :span="12">加油记录</el-col>
						<el-col :xs="24" :span="12">
							<el-form :model="queryParams" ref="queryRef" :inline="true">
								<el-form-item style="margin: 0px;">
									<el-date-picker
										v-model="queryParams.searhDate"
										type="daterange"
										style="width: calc(100% - 56px);height: 26px;"
										range-separator="至">
									</el-date-picker>
									<el-button type="primary" plain size="small" class="margin-left-xs">查询</el-button>
								</el-form-item>
							</el-form>
						</el-col>
					</el-row>
					<el-table :data="hisData"
						height="calc(50vh - 86px)"
						ref="singleTable"
						highlight-current-row
						:cell-style="{ padding: '5px 0' }"
						cell-class-name="text-xs"
						header-cell-class-name="text-black text-bold">
						<el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
						<el-table-column align="center" prop="shipName" label="船名"></el-table-column>
						<el-table-column align="center" prop="CurrentOil" sortable label="存油"></el-table-column>
						<el-table-column align="center" prop="oilConsumption" sortable label="油耗"></el-table-column>
						<el-table-column align="center" prop="time" sortable label="日期"></el-table-column>
						<el-table-column align="center" prop="num" sortable label="加油量" width="90"></el-table-column>
						<el-table-column align="center" prop="money" sortable label="金额"></el-table-column>
						<el-table-column align="center" prop="people" label="负责人"></el-table-column>
					</el-table>
				</el-card>
			</el-col>
			<el-col :xs="24" :span="6">
				<el-card class="box-card text-bold" :body-style="{ padding: '5px' }">
					<el-form :model="queryParams" ref="queryRef" :inline="true" class="margin-bottom-xs">
						<el-form-item style="margin: 0px;">
							<el-date-picker
								v-model="queryParams.searhDate"
								type="daterange"
								style="width: calc(100% - 56px);height: 26px;"
								range-separator="至">
							</el-date-picker>
							<el-button type="primary" size="small" class="margin-left-xs">查询</el-button>
						</el-form-item>
					</el-form>
					<div>
						<div class="text-bold flex align-center justify-between padding-bottom-xs margin-bottom-xs"
							style="border-bottom: 1px solid rgba(33, 128, 102,0.5);">
							<text>油耗率对比<text class="text-xs">（千吨.海里/千克）</text></text>
							<svg-icon @click="handleDetail(fuelConsRateChart.title)" class="text-blue text-xl text-bold pointer" icon-class="list"/>
						</div>
						<barChart :name="`fuelConsRate`" style="height: calc(33.33vh - 83px);" :data="fuelConsRateChart" />
					</div>
					<div class="margin-tb-sm">
						<div class="text-bold flex align-center justify-between padding-bottom-xs margin-bottom-xs"
							style="border-bottom: 1px solid rgba(33, 128, 102,0.5);">
							<text>里程对比<text class="text-xs">（海里）</text></text>
							<svg-icon @click="handleDetail(milEageChart.title)" class="text-blue text-xl text-bold pointer" icon-class="list"/>
						</div>
						<barChart :name="`milEage`" style="height: calc(33.33vh - 82px);" :data="milEageChart" />
					</div>
					<div>
						<div class="text-bold flex align-center justify-between padding-bottom-xs margin-bottom-xs"
							style="border-bottom: 1px solid rgba(33, 128, 102,0.5);">
							<text>运货量对比<text class="text-xs">（吨）</text></text>
							<svg-icon @click="handleDetail(freightVolumeChart.title)" class="text-blue text-xl text-bold pointer" icon-class="list"/>
						</div>
						<barChart :name="`freightVolume`" style="height: calc(33.33vh - 82px);" :data="freightVolumeChart" />
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-dialog width="30%" v-model="dialogVisible">
			<template #title>
				<div class="header-title">{{ detailTitle }}</div>
			</template>
			<div>
				<tsChart :name="`detailRank`" style="height: 50vh;" :data="detailRankChart" />
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import barChart from "@/components/Echarts/wayBillChart/barChart";
	import doblineChart from "@/components/Echarts/doblineChart";
	import tsChart from "@/components/Echarts/transverseChart";
	import pieChart from "@/components/Echarts/pieChart";
	const dialogVisible = ref(false);
	const data = reactive({
		detailTitle: "",
		totalList: [{ name: "当年累计油耗", value: 1423.6, unit: "L" },
					{ name: "重油累计油耗", value: 33.6, unit: "L" },
					{ name: "轻油累计油耗", value: 12.6, unit: "L" },
					{ name: "平均油耗率", value: 123.6, unit: "千吨.海里", long: "千克" }],
		queryParams: {
			searhDate: ['2023-07-01', '2023-07-10'],
			searhType: 0
		},
		fuelData: {
			"xAxis":["1月份","2月份","3月份","4月份","5月份","6月份","7月份","8月份","9月份","10月份","11月份","12月份"],
			"name": "油耗（吨）",
			"name2": "里程（海里）",
			"data":[{
				"data":[106.5,246.8,246.8,426.4,426.4,426.4,156.4,516.7,516.7,426.4,289.8,403.5],
				"name":"油耗",
				"stack":"油耗",
				"type":"line",
				"smooth": 0.4,
				"showSymbol": false,
				"itemStyle": {
					"color": "#B05409"
				}
			},{
				"data":[1000,2000,2000,4000,4000,4000,1562.4,5000,5000,4000,3000,6000],
				"name":"里程",
				"stack":"里程",
				"type":"line",
				"yAxisIndex": 1,
				"smooth": 0.4,
				"showSymbol": false
			}]
		},
		// oilRankChart: {
		// 	xAxis: ['总油耗', '主机油耗', '发电机油耗', '锅炉油耗'],
		// 	data: [744, 664, 544, 444],
		// 	color: ['#5470C6', '#5470C6'],
		// 	show: true,
		// 	splitShow: false,
		// 	unit: "L"
		// },
		oilRankChart: {
			name: "",
			sign: 'ring',
			size: ['45%', '75%'],
			data: [{ value: 8, name: '主机' },
				   { value: 6, name: '发电机' },
				   { value: 2, name: '锅炉' }]
		},
		oilRankShipChart: {
			xAxis: ['易站1号', '易站5号', '易站3号', '易站4号', '易站2号'],
			data: [344, 444, 644, 744, 864],
			title: "油耗排行"
		},
		carbonRankChart: {
			xAxis: ['易站1号', '易站5号', '易站3号', '易站4号', '易站2号'],
			data: [344, 444, 644, 744, 864],
			barCol: "#218066",
			title: "碳排排行"
		},
		fuelConsRateChart: {
			xAxis: ['易站4号', '易站3号', '易站2号', '易站5号', '易站1号'],
			data: [744, 644, 564, 444, 344],
			color: ['#5470C6', '#5470C6'],
			show: true,
			splitShow: false,
			unit: "L",
			title: "油耗率对比（千吨.海里/千克）"
		},
		milEageChart: {
			xAxis: ['易站4号', '易站3号', '易站2号', '易站5号', '易站1号'],
			data: [744, 644, 564, 444, 344],
			color: ['#5470C6', '#5470C6'],
			show: true,
			splitShow: false,
			unit: "L",
			title: "里程对比（海里）"
		},
		freightVolumeChart: {
			xAxis: ['易站4号', '易站3号', '易站2号', '易站5号', '易站1号', '易站6号', '易站9号', '易站7号'],
			data: [744, 644, 564, 444, 344, 200, 103, 23],
			color: ['#5470C6', '#5470C6'],
			show: true,
			scroll: true,
			splitShow: false,
			unit: "L",
			title: "运货量对比（吨）"
		},
		detailRankChart: {
			xAxis: ['易站1号', '易站5号', '易站2号', '易站4号', '易站8号','易站7号', '易站6号', '易站10号', '易站9号', '易站3号'],
			data: [344, 386, 402, 468, 490, 536, 586, 604, 820, 821]
		},
		hisData: [{
			shipName: "易站1号",
			CurrentOil: "2.64",
			oilConsumption: "126.3",
			time: "2023/2/12",
			num: 12.4,
			money: "12.3",
			people: "王津"
		},{
			shipName: "易站2号",
			CurrentOil: "2.64",
			oilConsumption: "126.3",
			time: "2023/2/12",
			num: 12.4,
			money: "12.3",
			people: "王津"
		},{
			shipName: "易站3号",
			CurrentOil: "2.64",
			oilConsumption: "126.3",
			time: "2023/2/12",
			num: 12.4,
			money: "12.3",
			people: "王津"
		},{
			shipName: "易站4号",
			CurrentOil: "2.64",
			oilConsumption: "126.3",
			time: "2023/2/12",
			num: 12.4,
			money: "12.3",
			people: "王津"
		},{
			shipName: "易站5号",
			CurrentOil: "2.64",
			oilConsumption: "126.3",
			time: "2023/2/12",
			num: 12.4,
			money: "12.3",
			people: "王津"
		},{
			shipName: "易站3号",
			CurrentOil: "2.64",
			oilConsumption: "126.3",
			time: "2023/2/12",
			num: 12.4,
			money: "12.3",
			people: "王津"
		},{
			shipName: "易站4号",
			CurrentOil: "2.64",
			oilConsumption: "126.3",
			time: "2023/2/12",
			num: 12.4,
			money: "12.3",
			people: "王津"
		},{
			shipName: "易站4号",
			CurrentOil: "2.64",
			oilConsumption: "126.3",
			time: "2023/2/12",
			num: 12.4,
			money: "12.3",
			people: "王津"
		},{
			shipName: "易站5号",
			CurrentOil: "2.64",
			oilConsumption: "126.3",
			time: "2023/2/12",
			num: 12.4,
			money: "12.3",
			people: "王津"
		},{
			shipName: "易站3号",
			CurrentOil: "2.64",
			oilConsumption: "126.3",
			time: "2023/2/12",
			num: 12.4,
			money: "12.3",
			people: "王津"
		},{
			shipName: "易站4号",
			CurrentOil: "2.64",
			oilConsumption: "126.3",
			time: "2023/2/12",
			num: 12.4,
			money: "12.3",
			people: "王津"
		}]
		
	});
	const { 
		totalList,
		queryParams, 
		fuelData, 
		oilRankChart, 
		oilRankShipChart, 
		carbonRankChart,
		fuelConsRateChart,
		milEageChart,
		freightVolumeChart,
		hisData,
		detailRankChart,
		detailTitle
	} = toRefs(data);
	const handleDetail = function(key){
		detailTitle.value = key;
		dialogVisible.value = true;
	}
</script>

<style lang='scss' scoped>
	.header-title{
		position: relative;
		padding-left: 15px;
		&::after{
			position: absolute;
			top: calc(50% - 8px);
			left: 0;
			content: "";
			height: 16px;
			border: 3px solid #218066;
		}
	}
	.square {
		color: #fff;
	    padding: 3px 8px;
		background-color: var(--el-menu-bg-color);
	}
</style>