<template>
	<div class="padding-xs text-sm">
		<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: 30px;"
					range-separator="至">
				</el-date-picker>
				<el-button type="primary" size="small" class="margin-left-xs">查询</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="5">
			<el-col :xs="24" :span="6" class="margin-bottom-xs">
				<el-card class="box-card" :body-style="{ padding: '0' }">
					<div class="square">告警数量一览</div>
					<div style="height: calc(50vh - 103px);" class="flex flex-direction justify-around padding-lr-sm">
						<div class="flex align-center justify-between bg-gray radius padding-xs" v-for="(item,index) in wramList" :key="index">
							<div>
								<svg-icon class="text-xl text-bold margin-right" :icon-class="item.icon" style="vertical-align: middle;color: var(--el-color-primary);"/>
								<span>{{item.name}}</span>
							</div>
							<div><span class="text-df text-bold text-blue">{{item.value}}</span> 次</div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :span="12" class="margin-bottom-xs">
				<el-card class="box-card" :body-style="{padding: '0 0 7px' }">
					<div class="square">告警趋势选择</div>
					<doblineChart :name="`fuelTrends`" :data="fuelData" style="height: calc(50vh - 103px);"/>
				</el-card>
			</el-col>
			<el-col :xs="24" :span="6" class="margin-bottom-xs">
				<el-card class="box-card" :body-style="{padding: '0 0 7px' }">
					<div class="square">告警船舶排行</div>
					<barChart :name="`warmByShip`" style="height: calc(50vh - 103px);" :data="warmByShipChart" />
				</el-card>
			</el-col>
			<el-col :xs="24" :span="6">
				<el-card class="box-card" :body-style="{ padding: '0 0 7px' }">
					<div class="square">告警类型占比</div>
					<pieChart :name="`warmType`" style="height: calc(50vh - 103px);" :data="warmTypeChart"/>
				</el-card>
			</el-col>
			<el-col :xs="24" :span="12">
				<el-card class="box-card" :body-style="{padding: '0 0 7px' }">
					<el-table :data="hisData"
						height="calc(50vh - 78px)"
						ref="singleTable"
						highlight-current-row
						:cell-style="{ padding: '5px 0' }"
						cell-class-name="text-xs"
						:header-cell-style="{ background: 'var(--el-menu-bg-color)',color: 'var(--white)',padding: '2px 0',height: '28px !important' }"
						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="mileage" sortable label="航行里程">
							<template #default="scope">
								{{scope.row.mileage}} kn
							</template>
						</el-table-column>
						<el-table-column align="center" prop="freightTransport" sortable label="货运总量">
							<template #default="scope">
								{{scope.row.freightTransport}} 吨
							</template>
						</el-table-column>
						<el-table-column align="center" prop="fuelConsumption" sortable label="燃油消耗">
							<template #default="scope">
								{{scope.row.fuelConsumption}} 吨
							</template>
						</el-table-column>
						<el-table-column align="center" prop="wramTotal" sortable label="报警数量"></el-table-column>
					</el-table>
				</el-card>
			</el-col>
			<el-col :xs="24" :span="6">
				<el-card class="box-card" :body-style="{ padding: '0 0 7px' }">
					<div class="square">告警类型排行</div>
					<barChart :name="`wramTypeRank`" style="height: calc(50vh - 103px);" :data="wramTypeRankChart" />
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import barChart from "@/components/Echarts/wayBillChart/barChart";
	import doblineChart from "@/components/Echarts/wayBillChart/lineChart";
	import pieChart from "@/components/Echarts/pieChart";
	const data = reactive({
		wramList: [{ name: "驾驶员离岗", icon: "ligangshenqing", value: 441 },
				   { name: "遮挡摄像头", icon: "camera", value: 22 },
				   { name: "长时间玩手机", icon: "shouji", value: 98 },
				   { name: "抽烟", icon: "chouyan", value: 110 },
				   { name: "不目视前方", icon: "brainheadprofile", value: 164 },
				   { name: "疲劳驾驶", icon: "fatigue", value: 184 },
				   { name: "未瞭望", icon: "yanjing", value: 10 }],
		queryParams: {
			searhDate: ['2023-07-01', '2023-07-10'],
			searhType: 0
		},
		fuelData: {
			data: [{
				data: [15.96, 16.57, 22.44, 23.91, 27.96, 10.36, 12.58],
				type: 'line',
				smooth: 0.4,
				symbol: 'circle',
				areaStyle: {
					color: "#C2BF55",
					opacity:1
				},
				itemStyle: {
				    normal: {
				        color: '#218066', //改变折线点的颜色
				        lineStyle: {
				            color: '#218066' //改变折线颜色
				        }
				    }
				}
			}],
			xAxis: ["09/16", "09/17", "09/18", "09/19", "09/20", "09/21", "09/22"],
			name: "里程",
			count: 106.84,
			unit: "海里"
		},
		warmTypeChart: {
			name: "",
			sign: 'ring',
			// size: ['35%', '55%'],
			data: [{ value: 821, name: '行为检测' },
				   { value: 208, name: '物品检测' }]
		},
		wramTypeRankChart: {
			xAxis: ['离岗', '疲惫', '分神', '抽烟', '玩手机', '遮挡', '未瞭望'],
			data: [441, 184, 164, 110, 98, 22, 10],
			color: ['#C26F55', '#C2BF55'],
			colorPosi: 't-b',
			show: true,
			splitShow: false,
			unit: "L",
			title: "油耗率对比（千吨.海里/千克）"
		},
		warmByShipChart: {
			xAxis: ['易站4号', '易站3号', '易站2号', '易站5号', '易站1号'],
			data: [244, 164, 156, 124, 120],
			color: ['#C26F55', '#C2BF55'],
			colorPosi: 't-b',
			show: true,
			splitShow: false,
			unit: "L",
			title: "运货量对比（吨）"
		},
		hisData: [{
			shipName: "易站4号",
			mileage: 1556.62,
			freightTransport: 774.36,
			fuelConsumption: 174.36,
			wramTotal: 244
		},{
			shipName: "易站3号",
			mileage: 816.34,
			freightTransport: 77.36,
			fuelConsumption: 14.36,
			wramTotal: 164
		},{
			shipName: "易站2号",
			mileage: 804.37,
			freightTransport: 1774.36,
			fuelConsumption: 1074.36,
			wramTotal: 156
		},{
			shipName: "易站5号",
			mileage: 164.17,
			freightTransport: 674.36,
			fuelConsumption: 274.36,
			wramTotal: 124
		},{
			shipName: "易站1号",
			mileage: 156.62,
			freightTransport: 374.36,
			fuelConsumption: 74.36,
			wramTotal: 120
		},{
			shipName: "易站9号",
			mileage: 135.27,
			freightTransport: 1403.9,
			fuelConsumption: 156.2,
			wramTotal: 106
		},{
			shipName: "易站7号",
			mileage: 105.68,
			freightTransport: 983.1,
			fuelConsumption: 736.1,
			wramTotal: 72
		},{
			shipName: "易站6号",
			mileage: 56.62,
			freightTransport: 556.13,
			fuelConsumption: 236.5,
			wramTotal: 70
		},{
			shipName: "易站8号",
			mileage: 55.79,
			freightTransport: 462.36,
			fuelConsumption: 206.4,
			wramTotal: 43
		},{
			shipName: "易站10号",
			mileage: 16.00,
			freightTransport: 763.1,
			fuelConsumption: 297.4,
			wramTotal: 30
		}]
		
	});
	const { 
		queryParams, 
		fuelData, 
		warmTypeChart, 
		wramTypeRankChart,
		warmByShipChart,
		hisData,
		wramList
	} = toRefs(data);
</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>