<template>
	<div class="dashboard_container">
		<div class="refresh" @click="refreshData">
			<span style="color: #1d82ff;">刷新数据</span>
			<i class="el-icon-refresh-left" style="color: #1d82ff;"></i>
		</div>
		<div class="flex">
			<div class="mode" @click="openOrder('costPerDimension','NO','未汇总')">
				<div class="title">待汇总</div>
				<div class="flex head">
					<div class="tab">
						<el-image class="img" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
						<div class="text">
							<div class="title">待汇总数量</div>
							<div class="num">{{collectData.waitGatherCount}}</div>
						</div>
					</div>
					<div class="tab">
						<el-image class="img" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
						<div class="text">
							<div class="title">待汇总金额</div>
							<div class="num">{{collectData.waitGatherAmount}}</div>
						</div>
					</div>
				</div>
				<div class="flex head">
					<div class="tab child">
						<el-image class="img opacity" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
						<div class="text">
							<div class="num">{{collectData.waitGatherInstallHomeCount}}</div>
							<div class="title">安装费用-家用空调</div>
						</div>
					</div>
					<div class="tab child">
						<el-image class="img opacity" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
						<div class="text">
							<div class="num">{{collectData.waitGatherInstallHomeAmount}}</div>
							<div class="title">安装费用-家用空调</div>
						</div>
					</div>
				</div>
				<div class="flex head">
					<div class="tab child">
						<el-image class="img opacity" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
						<div class="text">
							<div class="num">{{collectData.waitGatherInstallCount}}</div>
							<div class="title">安装费用-非空调</div>
						</div>
					</div>
					<div class="tab child">
						<el-image class="img opacity" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
						<div class="text">
							<div class="num">{{collectData.waitGatherInstallAmount}}</div>
							<div class="title">安装费用-非空调</div>
						</div>
					</div>
				</div>
				<div class="flex head">
					<div class="tab child">
						<el-image class="img opacity" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
						<div class="text">
							<div class="num">{{collectData.waitGatherRepairCount}}</div>
							<div class="title">维修费用</div>
						</div>
					</div>
					<div class="tab child">
						<el-image class="img opacity" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
						<div class="text">
							<div class="num">{{collectData.waitGatherRepairAmount}}</div>
							<div class="title">维修费用</div>
						</div>
					</div>
				</div>
				<div class="flex head" style="border-bottom: none;">
					<div class="tab child">
						<el-image class="img opacity" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
						<div class="text">
							<div class="num">{{collectData.waitGatherOtherCount}}</div>
							<div class="title">其它费用</div>
						</div>
					</div>
					<div class="tab child">
						<el-image class="img opacity" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
						<div class="text">
							<div class="num">{{collectData.waitGatherOtherAmount}}</div>
							<div class="title">其它费用</div>
						</div>
					</div>
				</div>
			</div>
			<div class="mode" @click="openOrder('monthlyPayrollSummary','NOT','未发放')">
				<div class="title">待发放</div>
				<div class="flex head">
					<div class="tab">
						<el-image class="img" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
						<div class="text">
							<div class="title">待发放人数</div>
							<div class="num">{{collectData.waitSendByCount}}</div>
						</div>
					</div>
					<div class="tab">
						<el-image class="img" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
						<div class="text">
							<div class="title">待发放金额</div>
							<div class="num">{{collectData.waitSendAmount}}</div>
						</div>
					</div>
				</div>
				<div class="flex head">
					<div class="tab child">
						<el-image class="img opacity" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
						<div class="text">
							<div class="num">{{collectData.waitSendByInstallHomeCount}}</div>
							<div class="title">安装费用-家用空调</div>
						</div>
					</div>
					<div class="tab child">
						<el-image class="img opacity" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
						<div class="text">
							<div class="num">{{collectData.waitSendInstallHomeAmount}}</div>
							<div class="title">安装费用-家用空调</div>
						</div>
					</div>
				</div>
				<div class="flex head">
					<div class="tab child">
						<el-image class="img opacity" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
						<div class="text">
							<div class="num">{{collectData.waitSendByInstallCount}}</div>
							<div class="title">安装费用-非空调</div>
						</div>
					</div>
					<div class="tab child">
						<el-image class="img opacity" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
						<div class="text">
							<div class="num">{{collectData.waitSendInstallAmount}}</div>
							<div class="title">安装费用-非空调</div>
						</div>
					</div>
				</div>
				<div class="flex head">
					<div class="tab child">
						<el-image class="img opacity" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
						<div class="text">
							<div class="num">{{collectData.waitSendByRepairCount}}</div>
							<div class="title">维修费用</div>
						</div>
					</div>
					<div class="tab child">
						<el-image class="img opacity" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
						<div class="text">
							<div class="num">{{collectData.waitSendRepairAmount}}</div>
							<div class="title">维修费用</div>
						</div>
					</div>
				</div>
				<div class="flex head" style="border-bottom: none;">
					<div class="tab child">
						<el-image class="img opacity" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
						<div class="text">
							<div class="num">{{collectData.waitSendByOtherCount}}</div>
							<div class="title">其它费用</div>
						</div>
					</div>
					<div class="tab child">
						<el-image class="img opacity" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
						<div class="text">
							<div class="num">{{collectData.waitSendOtherAmount}}</div>
							<div class="title">其它费用</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container_bottom">
			<div class="chart">
				<div class="flex_asb">
					<div class="title">已发放的人数和金额</div>
					<el-date-picker v-model="date" @change="selectDate" value-format="yyyy-MM" type="monthrange"
						range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
					</el-date-picker>
					</el-form-item>
				</div>
				<div ref="chart" style="width: 100%;height: 330px;"></div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getMonthData,
		getData
	} from "@/api/engineerFeeSettlementHome";
	export default {
		data() {
			return{
				collectData: {},
				date: [],
				dataList: [],
				series1: [],
				series2: []
			}
		},
		computed: {
			getMonth() {
				return function(start, end) {
					let result = '';
					const starts = start.split('-');
					let staYear = parseInt(starts[0]);
					const staMon = parseInt(starts[1]);
					const ends = end.split('-');
					const endYear = parseInt(ends[0]);
					const endMon = parseInt(ends[1]);
					const yf = (endYear - staYear) * 12 + (endMon - staMon);
					let mon = staMon;
					for (var i = staMon; i <= (staMon + yf); i++) {
						if (mon <= 12) {
							if (mon < 10) {
								result += staYear + '-0' + mon + ',';
							} else {
								result += staYear + '-' + mon + ',';
							}
						} else {
							staYear++;
							mon = 1;
							result += staYear + '-01,';
						}
						mon++;
					}
					result = result.split(',').filter(v => v !== '');
					return result;
				}
			},
			getMonth12() {
				return function() {
					let currentMonth = new Date().getMonth() + 1; // 获取当前月份（0-11）
					let currentYear = new Date().getFullYear(); // 获取当前年份
					let last12Months = [];

					for (let i = 0; i < 12; i++) {
						let month = currentMonth - i; // 从当前月份向前计数
						let year = currentYear; // 初始化年份为当前年份

						// 处理月份溢出（小于0的情况）
						if (month <= 0) {
							month += 12; // 月份减去12
							year--; // 年份减1
						}

						// 将月份和年份组合成格式化的字符串
						last12Months.unshift(`${year}-${month.toString().padStart(2, '0')}`);
					}
					return [last12Months[0], last12Months.pop()];
				}
			}
		},
		created() {
			this.date = this.getMonth12()
			this.getData()
			this.getMonthData()
		},
		mounted() {
			// this.drawChat1()
		},
		methods: {
			refreshData() {
				this.$echarts.init(this.$refs.chart).dispose()
				this.getMonthData()
				this.getData()
			},
			selectDate(e) {
				this.getMonthData()
			},
			openOrder(name,pageCode,pageName) {
				this.$router.push({
					name,
					params: {
						pageName,
						pageType: 'tagStatus',
						pageCode,
					},
				})
			},
			getData() {
				getData().then(res => {
					this.collectData = res.data
				})
			},
			getMonthData() {
				getMonthData({
					startMonth: this.date.length > 0 ? this.date[0] : '',
					endMonth: this.date.length > 0 ? this.date[1] : ''
				}).then(res => {
					let data = this.getMonth(this.date[0],this.date[1])
					let series1 = []
					let series2 = []
					data.forEach(item=>{
						if(res.data.dataList.length > 0){
							res.data.dataList.forEach(it=>{
								if(item == it.yearMonth){
									series1.push(it.endSendByCount)
									series2.push(it.endSendAmount)
								}else{
									series1.push(0)
									series2.push(0)
								}
							})
						}else{
							series1.push(0)
							series2.push(0)
						}
					})
					this.drawChat(series1,series2)
				})
			},
			drawChat(series1,series2) {
				console.log(series1,series2)
				let chart = this.$echarts.init(this.$refs.chart)
				let option = {
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['已发放人数','已发放金额']
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: this.getMonth(this.date[0],this.date[1])
					},
					yAxis: [{
							min: 0,
							max: (value) => { // 百位起最大值向上取整
								return Math.ceil(value.max / 100) * 100;
							},
							name: '人数',
							type: 'value',
						},
						{
							min: 0,
							max: (value) => { // 百位起最大值向上取整
								return Math.ceil(value.max / 100) * 100;
							},
							name: '金额',
							type: 'value',
						}
					],
					series: [
						{
							name: '已发放人数',
							data: series1,
							type: 'line',
							smooth: true,
							yAxisIndex: 0
						},
						{
							name: '已发放金额',
							data: series2,
							type: 'line',
							smooth: true,
							yAxisIndex: 1
						}
					]
				};
				chart.setOption(option)
			}
		}
	}
</script>

<style scoped lang="scss">
	.dashboard_container {
		background: #f5f5f5;
		padding: 20px;
		min-height: calc(100vh - 86px);
		box-sizing: border-box;

		.refresh {
			text-align: right;
			margin-bottom: 10px;

			span {
				cursor: pointer;
			}

			i {
				font-weight: bold;
				margin-left: 4px;
				cursor: pointer;
			}
		}

		.flex {
			display: flex;
		}

		.flex_asb {
			display: flex;
			justify-content: space-between;
		}

		.mode {
			flex: 1;
			padding: 10px;
			margin-right: 10px;
			background-color: #ffffff;
			border-radius: 10px;

			.title {
				font-weight: bold;
			}

			.head {
				border-bottom: 1px solid #dddddd;
				padding: 12px 0;
			}

			.opacity {
				opacity: 0;
			}

			.tab {
				display: flex;
				align-items: center;
				flex: 1;
				cursor: pointer;

				.text {
					margin-left: 30px;

					.title {
						color: #999999;
						font-size: 14px;
						margin-bottom: 8px;
					}

					.num {
						font-size: 26px;
						font-weight: bold;
					}
				}

				.img {
					width: 46px;
					height: 46px;
					margin-left: 20px;
				}
			}

			.child {
				border-right: 1px solid #dddddd;

				.text {
					.title {
						margin-top: 8px;
						margin-bottom: 0;
					}
				}
			}

			.child:last-child {
				border-right: none;
			}
		}

		.mode:last-child {
			margin-right: 0;
		}

		.container_bottom {
			width: 100%;
			height: 350px;
			padding: 10px;
			background-color: #ffffff;
			margin-top: 10px;
			border-radius: 10px;
		}
	}
</style>