<template>
	<div class="page-statistics">
		<el-row :gutter="10">
			<!--部门数据-->
			<el-col class="padding-tb-xs" :span="12" :xs="24">
				<el-card :body-style="{padding: '10px'}">
					<el-row :gutter="5" class="text-bold">
						<template v-for="(sni,snind) in tabList" :key="snind">
							<el-col :xs="12" :span="6">
								<div class="flex align-center justify-center" style="height: 78px;">
									<div><el-image style="width: 54px;" :src="sni.icon" fit="fill"></el-image></div>
									<div class="margin-left-sm">
										<div class="text-bold text-sm margin-bottom-xs">{{sni.name}}</div>
										<div><span class="text-yellow text-bold text-xxl">{{sni.count}}</span> <span class="text-sm">{{sni.unit}}</span></div>
									</div>
								</div>
							</el-col>
						</template>
					</el-row>
					<el-row :gutter="5">
						<el-col :xs="24" :span="10">
							<div class="text-bold text-sm margin-lr-sm margin-bottom-sm">货物分类</div>
							<div style="position: relative;">
								<roundChart :name="`comNum`" style="height:calc(45vh - 100px);" :data="roundData" />
								<div class="goodWei">
									<div class="text-bold text-sm margin-bottom-xs">货物总重</div>
									<div><span class="text-yellow text-bold text-xl">11111</span> <span class="text-sm">吨</span></div>
								</div>
							</div>
						</el-col>
						<el-col :xs="24" :span="12">
							<div class="text-bold text-sm margin-lr-sm margin-bottom-sm">运量趋势</div>
							<lineChart :name="`comLine`" style="height:calc(45vh - 100px);" :data="lineData" />
						</el-col>
					</el-row>
					<div>
						<div class="text-bold text-sm margin-lr-sm margin-bottom-sm">运价趋势</div>
						<barChart :name="`comBar`" style="height:calc(55vh - 150px);" :data="barData"/>
					</div>
				</el-card>
			</el-col>
			<!--用户数据-->
			<el-col class="padding-tb-xs" :span="12" :xs="24">
				<el-card :body-style="{padding: '14px 10px'}">
					<div class="flex justify-between text-bold text-sm margin-bottom-sm">
						<div>运单列表</div>
						<div>
							年份：<el-date-picker
								  v-model="queryParams.searhYear"
								  type="year"
								  @change="changeDate"
								  placeholder="选择年份">
								</el-date-picker>
						</div>
					</div>
					<el-table :data="tableData" border style="width: 100%" cell-class-name="text-xs">
						<el-table-column align="center" type="index" width="60"></el-table-column>
					    <el-table-column align="center" prop="date" width="100" label="船舶名称"></el-table-column>
					    <el-table-column align="center" prop="address" label="航行时间"></el-table-column>
					    <el-table-column align="center" prop="address" label="航行里程"></el-table-column>
						<el-table-column align="center" prop="address" label="运量总重"></el-table-column>
						<el-table-column align="center" prop="address" label="任务数量"></el-table-column>
						<el-table-column align="center" prop="status" label="状态">
							<template #default="scope"> 
								<span v-if="scope.row.status == 0" class="text-blue">在航</span>
								<span v-else-if="scope.row.status == 1" class="text-green">空闲</span>
								<span v-else-if="scope.row.status == 2" class="text-red">维修</span>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import lineChart from "@/components/Echarts/wayBillChart/lineChart";
	import barChart from "@/components/Echarts/wayBillChart/barChart";
	import roundChart from "@/components/Echarts/wayBillChart/roundChart";
	const store = useStore();
	import { reactive, ref } from '@vue/reactivity';
	import shipIcon from "@/assets/images/ship-icon.png";
	import stopIcon from "@/assets/images/stop-icon.png";
	import finishIcon from "@/assets/images/finish-icon.png";
	import timeIcon from "@/assets/images/time-icon.png";
	const comNum = ref(null);
	const comLine = ref(null);
	const comBar = ref(null);
	var comNumIntance,comLineIntance,comBarIntance;
	const data = reactive({
		tabList: [{
			name: "航行船舶",
			count: 23,
			icon: shipIcon,
			unit: "艘"
		},
		{
			name: "停航船舶",
			count: 77,
			icon: stopIcon,
			unit: "艘"
		},
		{
			name: "在运船舶",
			count: 111,
			icon: finishIcon,
			unit: "艘"
		},
		{
			name: "空闲船舶",
			count: 1111,
			icon: timeIcon,
			unit: "艘"
		}],
		tableData: [{
		          date: '东桂9',
		          name: '王小虎',
		          address: '1518',
				  status: 0
		        }],
		lineData: {
			xAxis: ["12-21","12-22","12-23","12-24","12-25","12-26","12-27"],
			data: [{
				data: [125,586,458,364,210,586,751],
				type: 'line',
				smooth: true
			}]
		},
		barData: {
			xAxis: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
			data: [120, 240, 150, 80, 70, 110, 130, 150, 80, 70, 110, 130],
			show: true,
			unit: "MPa"
		},
		roundData: {
			name: '货物类型',
			data: [{ value: 108, name: '砂石' },
				   { value: 735, name: '水泥' },
				   { value: 580, name: '干散货' },
				   { value: 484, name: '大理石' },
				   { value: 300, name: '有机盐' },
			]
		},
		queryParams: {
			searhYear: "2023",
			searhMooth: "10",
			searhType: "",
		}
	});
	const { tabList, tableData, lineData, barData, roundData, queryParams } = toRefs(data);
	
	onMounted(() => {
		
	})
	onBeforeUnmount(() => {
	});
</script>

<style lang='scss' scoped>
	.desktop {
		.page-statistics {
			height: calc(100vh - 84px);
			padding:0 10px;
			.el-row,.el-col{
				height: 100%;
			}
			.el-col>div{
				height: 100%;
			}
			.goodWei{
				position: absolute;
				top: 50%;
				left: 40%;
				transform: translate(-50%,-50%);
			}
		}
	}
</style>
