<template>
	<div class="page-statistics">
		<el-row :gutter="10" v-loading="loading">
			<!--部门数据-->
			<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 @clickRoundTr="clickRound" :name="`shipNum`" 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">{{goodsTotal}}</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="`shipLine`" 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 @clickBarTr="clickBar" :name="`shipBar`" 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: '15px'}">
					<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="customer" width="100" label="客户名称"></el-table-column>
					    <el-table-column align="center" prop="time" label="运单时间"></el-table-column>
						<el-table-column align="center" prop="goodsClass" label="货物种类">
							<template #default="scope"> 
								<dict-tag :options="sys_goods_type" :value="scope.row.goodsClass" style="display: inline-block;"/>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="goodsWeight" label="货物总重"></el-table-column>
					    <el-table-column align="center" prop="address" label="目的地"></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();
	const { proxy } = getCurrentInstance();
	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 { sys_goods_type } = proxy.useDict('sys_goods_type');
	const shipNum = ref(null);
	const shipLine = ref(null);
	const shipBar = ref(null);
	var shipNumIntance,shipLineIntance,shipBarIntance;
	var liveTime = [proxy.parseTime(new Date(), `{y}`),proxy.parseTime(new Date(), `{m}`),proxy.parseTime(new Date(), `{d}`)];
	const loading = ref(true);
	const tabList = ref([]);
	const tableData = ref([]);
	const lineData = ref({});
	const barData = ref({});
	const roundData = ref({});
	const goodsTotal = computed(() => {
		let _obj = roundData.value.data;
		return _obj.reduce((sum,item) => sum + parseFloat(item.value),0);
	});
	const data = reactive({
		queryParams: {
			searhYear: "2023",
			searhMooth: "10",
			searhType: "",
		}
	});
	const { queryParams } = toRefs(data);
	const getFirstData = function(){
		tabList.value = [{ name: "航行时间", count: parseInt(Math.random()*23), icon: shipIcon, unit: "H" },
						{ name: "停航时间", count: parseInt(Math.random()*77), icon: stopIcon, unit: "H"	},
						{ name: "完成订单", count: parseInt(Math.random()*111), icon: finishIcon, unit: "单" },
						{ name: "运单时间", count: parseInt(Math.random()*1111), icon: timeIcon, unit: "H" }];
		tableData.value = [{
		          customer: '陈志朋',
		          time: '2022-12-05 12:30:00',
		          address: '惠州市惠城区',
				  goodsClass: 2,
				  goodsWeight: 75
		}];
		let moothVal = getMooth();
		barData.value = {
			xAxis: moothVal,
			data: getMoothData(moothVal.length),
			show: true,
			unit: "MPa"
		};
		let dayVal = getDay();
		lineData.value = {
			xAxis: dayVal,
			data: [{
				data: getMoothData(dayVal.length),
				type: 'line',
				smooth: true
			}]
		};
		roundData.value = {
			name: '货物类型',
			data: [{ value: parseInt(Math.random()*10), name: '砂石' },
				   { value: parseInt(Math.random()*73), name: '水泥' },
				   { value: parseInt(Math.random()*58), name: '干散货' },
				   { value: parseInt(Math.random()*48), name: '大理石' },
				   { value: parseInt(Math.random()*30), name: '有机盐' },
			]
		};
		setTimeout(()=>{
			loading.value = false;
		},1000)
	}
	const getMooth = function(){
		let mootli = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
		let val = (parseInt(queryParams.value.searhYear) > parseInt(liveTime[0]))?0:((parseInt(queryParams.value.searhYear) == parseInt(liveTime[0]))?liveTime[1]:12)
		return mootli.slice(0,parseInt(val));
	}
	const getDay = function(_mooth){
		let val = 0;
		if((parseInt(queryParams.value.searhYear) == parseInt(liveTime[0]))&&(parseInt(queryParams.value.searhMooth) == parseInt(liveTime[1]))){
			val = liveTime[2];
		}else if((parseInt(queryParams.value.searhYear) > parseInt(liveTime[0]))||((parseInt(queryParams.value.searhYear) == parseInt(liveTime[0]))&&(parseInt(queryParams.value.searhMooth) == parseInt(liveTime[1])))){
			val = 0;
		}else{
			val = new Date(queryParams.value.searhYear,queryParams.value.searhMooth,0).getDate();
		}
		let _daylis = [];
		for(let i=0;i<parseInt(val);i++){
			_daylis.push(queryParams.value.searhMooth+"-"+(i+1));
		}
		return _daylis;
	}
	const getMoothData = function(val){
		let _data = [];
		for(let i=0;i<parseInt(val);i++){
			_data.push(parseInt(Math.random()*100));
		}
		return _data;
	}
	const changeDate = function(val){
		loading.value = true;
		queryParams.value.searhYear = proxy.parseTime(val, `{y}`)
		getFirstData();
	}
	const clickBar = function(val){
		loading.value = true;
		queryParams.value.searhMooth = val;
		getFirstData();
	}
	const clickRound = function(val){
		console.log(val)
		loading.value = true;
		queryParams.value.searhType = val;
		getFirstData();
	}
	getFirstData();
	onMounted(() => {
		console.log()
	})
	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>
