<template>
	<div class="tab-chart">
		<div class="tab-chart__header">
			<ul class="tab-chart__tab">
				<li id="a1" @click="setTab('a', 1, 3)" class="active">新增走势</li>
				<li id="a2" @click="setTab('a', 2, 3)">付费走势</li>
				<li id="a3" @click="setTab('a', 3, 3)">活跃走势</li>
			</ul>

			<span class="tab-chart__year">{{ year }}</span>
		</div>
		<div class="tab-chart__container">
			<v-chart :option="chartOptionNew" autoresize id="con_a_1" />
			<v-chart :option="chartOptionPay" autoresize id="con_a_2" style="display: none" />
			<v-chart :option="chartOptionActive" autoresize id="con_a_3" style="display: none" />
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, reactive, ref } from "vue";
import { isPc } from "/@/core/utils";

export default defineComponent({
	setup() {
		const barWidth = isPc() ? 25 : 15;
		const chartOptionNew = reactive<any>({
			grid: {
				top: "20px",
				bottom: "30px",
				right: "10px",
				containLabel: true
			},
			xAxis: {
				type: "category",
				data: [],
				offset: 5,
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				}
			},
			yAxis: {
				type: "value",
				offset: 20,
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				}
			},
			tooltip: {
				trigger: "axis",
				formatter: (comp: any) => {
					const [serie] = comp;

					return `${serie.seriesName}：${serie.value}`;
				},
				axisPointer: {
					show: true,
					status: "shadow",
					z: -1,
					shadowStyle: {
						color: "#E6F7FF"
					},
					type: "shadow"
				},
				extraCssText: "width:120px; white-space:pre-wrap"
			},
			series: [
				{
					barWidth,
					name: "新增总数",
					type: "bar",
					data: [],
					itemStyle: {
						normal: {
							color: "#4165d7"
						}
					}
				},
				{
					type: "bar",
					barWidth,
					xAxisIndex: 0,
					barGap: "-100%",
					data: [],
					itemStyle: {
						normal: {
							color: "#f1f1f9"
						}
					},
					zlevel: -1
				}
			]
		});
		const chartOptionPay = reactive<any>({
			grid: {
				top: "20px",
				bottom: "30px",
				right: "10px",
				containLabel: true
			},
			xAxis: {
				type: "category",
				data: [],
				offset: 5,
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				}
			},
			yAxis: {
				type: "value",
				offset: 20,
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				}
			},
			tooltip: {
				trigger: "axis",
				formatter: (comp: any) => {
					const [serie] = comp;

					return `${serie.seriesName}：${serie.value}`;
				},
				axisPointer: {
					show: true,
					status: "shadow",
					z: -1,
					shadowStyle: {
						color: "#E6F7FF"
					},
					type: "shadow"
				},
				extraCssText: "width:120px; white-space:pre-wrap"
			},
			series: [
				{
					barWidth,
					name: "付费总数",
					type: "bar",
					data: [],
					itemStyle: {
						normal: {
							color: "#4165d7"
						}
					}
				},
				{
					type: "bar",
					barWidth,
					xAxisIndex: 0,
					barGap: "-100%",
					data: [],
					itemStyle: {
						normal: {
							color: "#f1f1f9"
						}
					},
					zlevel: -1
				}
			]
		});
		const chartOptionActive = reactive<any>({
			grid: {
				top: "20px",
				bottom: "30px",
				right: "10px",
				containLabel: true
			},
			xAxis: {
				type: "category",
				data: [],
				offset: 5,
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				}
			},
			yAxis: {
				type: "value",
				offset: 20,
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				}
			},
			tooltip: {
				trigger: "axis",
				formatter: (comp: any) => {
					const [serie] = comp;

					return `${serie.seriesName}：${serie.value}`;
				},
				axisPointer: {
					show: true,
					status: "shadow",
					z: -1,
					shadowStyle: {
						color: "#E6F7FF"
					},
					type: "shadow"
				},
				extraCssText: "width:120px; white-space:pre-wrap"
			},
			series: [
				{
					barWidth,
					name: "活跃总数",
					type: "bar",
					data: [],
					itemStyle: {
						normal: {
							color: "#4165d7"
						}
					}
				},
				{
					type: "bar",
					barWidth,
					xAxisIndex: 0,
					barGap: "-100%",
					data: [],
					itemStyle: {
						normal: {
							color: "#f1f1f9"
						}
					},
					zlevel: -1
				}
			]
		});
		// 请求服务
		const service = inject<any>("service");
		const year = ref<string>("");
		onMounted(async () => {
			year.value = new Date().getFullYear() + "年";
			const res = await service.shuyouDataActive.queryByMonth();
			if (res.code == 1) {
				const data = res.data;
				let total_new = [];
				let total_pay = [];
				let total_active = [];
				let max_new = 0;
				let max_pay = 0;
				let max_active = 0;
				data.forEach((e) => {
					if (max_new < e.total_new) {
						max_new = e.total_new;
					}
					if (max_pay < e.total_pay) {
						max_pay = e.total_pay;
					}
					if (max_active < e.total_active) {
						max_active = e.total_active;
					}
					total_new.push(parseInt(String(e.total_new)));
					total_pay.push(parseInt(String(e.total_pay)));
					total_active.push(parseInt(String(e.total_active)));
				});
				chartOptionNew.series[0].data = total_new;
				chartOptionPay.series[0].data = total_pay;
				chartOptionActive.series[0].data = total_active;
				chartOptionNew.series[1].data = new Array(12).fill(ceilNumber(max_new));
				chartOptionPay.series[1].data = new Array(12).fill(ceilNumber(max_pay));
				chartOptionActive.series[1].data = new Array(12).fill(ceilNumber(max_active));
			}
		});
		chartOptionNew.xAxis.data = new Array(12).fill(1).map((e, i) => i + 1 + "月");
		chartOptionPay.xAxis.data = new Array(12).fill(1).map((e, i) => i + 1 + "月");
		chartOptionActive.xAxis.data = new Array(12).fill(1).map((e, i) => i + 1 + "月");

		function setTab(name, cursel, n) {
			for (var i = 1; i <= n; i++) {
				var menu = document.getElementById(name + i);
				var con = document.getElementById("con_" + name + "_" + i);
				menu.className = i == cursel ? "active" : "";
				con.style.display = i == cursel ? "block" : "none";
			}
		}
		// 向上取整十，整百，整千，整万
		function ceilNumber(number: number) {
			let bite = 0;
			if (number < 10) {
				return 10;
			}
			while (number >= 10) {
				number /= 10;
				bite += 1;
			}
			return Math.ceil(number) * Math.pow(10, bite);
		}
		return {
			setTab,
			chartOptionNew,
			chartOptionPay,
			chartOptionActive,
			year
		};
	},
	data() {
		return {};
	}
});
</script>

<style lang="scss" scoped>
.tab-chart {
	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		padding: 0 20px;

		ul {
			li {
				list-style: none;
				float: left;
				margin-right: 20px;
				font-size: 15px;
				color: #b9b3b3;
				// color: #dbdbdb;
				cursor: pointer;

				&.active {
					color: #000;
					font-weight: bold;
				}
			}
		}
	}

	&__year {
		font-size: 14px;
		position: relative;

		&::before {
			display: block;
			content: "";
			height: 8px;
			width: 8px;
			border-radius: 8px;
			background-color: #000;
			position: absolute;
			left: -15px;
			top: 4px;
		}
	}

	&__container {
		height: 300px;
		padding: 0 15px;

		.echarts {
			height: 100%;
			width: 100%;
		}
	}
}
</style>
