<template>
	<cl-crud>
		<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="表格" name="first">
				<span class="tab-chart__year">{{ year }}</span>
				<el-table :data="tableData" border style="width: 100%" stripe show-summary align="center"
					header-align="center">
					<el-table-column prop="mon" label="月份" maxwidth="180"> </el-table-column>
					<el-table-column prop="total_new" label="总新增"> </el-table-column>
					<el-table-column prop="total_pay" label="总付费"> </el-table-column>
					<el-table-column prop="total_active" label="总活跃"> </el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="柱状图" name="second">
				<div class="tab-chart">
					<div class="tab-chart__container">
						<v-chart :option="chartHistogram" autoresize />
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="折线图" name="third">
				<div class="tab-chart">
					<div class="tab-chart__container">
						<v-chart :option="chartLine" autoresize />
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="饼图" name="fourth">
				<el-tabs v-model="activePie" class="demo-tabs">
					<el-tab-pane label="新增" name="new">
						<div class="tab-chart">
							<div class="tab-chart__container">
								<v-chart :option="chartPie_new" autoresize />
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="活跃" name="active">
						<div class="tab-chart">
							<div class="tab-chart__container">
								<v-chart :option="chartPie_active" autoresize />
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="付费" name="pay">
						<div class="tab-chart">
							<div class="tab-chart__container">
								<v-chart :option="chartPie_pay" autoresize />
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-tab-pane>
		</el-tabs>
	</cl-crud>
</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 activeName = ref("second");
		const activePie = ref("second");
		const service = inject<any>("service");
		let tableData = ref<any[]>([]);
		const year = ref<string>("");
		const chartLine = reactive<any>({
			title: {
				text: "       " + new Date().getFullYear() + "年"
			},
			tooltip: {
				trigger: "axis",
				axisPointer: {
					type: "cross",
					label: {
						backgroundColor: "#6a7985"
					}
				}
			},
			legend: {
				data: ["新增", "付费", "活跃"]
			},
			toolbox: {
				feature: {
					saveAsImage: { title: "保存", name: new Date().getFullYear() + "年折线图" }
				}
			},
			grid: {
				left: "3%",
				right: "4%",
				bottom: "3%",
				containLabel: true
			},
			xAxis: [
				{
					type: "category",
					boundaryGap: false,
					data: []
				}
			],
			yAxis: [
				{
					type: "value"
				}
			],
			series: [
				{
					name: "新增",
					type: "line",
					stack: "Total",
					areaStyle: {},
					emphasis: {
						focus: "series"
					},
					data: []
				},
				{
					name: "付费",
					type: "line",
					stack: "Total",
					areaStyle: {},
					emphasis: {
						focus: "series"
					},
					data: []
				},
				{
					name: "活跃",
					type: "line",
					stack: "Total",
					areaStyle: {},
					emphasis: {
						focus: "series"
					},
					data: []
				}
			]
		});
		const chartHistogram = reactive<any>({
			title: {
				text: "       " + new Date().getFullYear() + "年"
			},
			tooltip: {
				trigger: "axis",
				axisPointer: {
					type: "shadow"
				}
			},
			toolbox: {
				feature: {
					saveAsImage: { title: "保存", name: new Date().getFullYear() + "年柱状图" }
				}
			},
			legend: {},
			grid: {
				left: "3%",
				right: "4%",
				bottom: "3%",
				containLabel: true
			},
			xAxis: [
				{
					type: "category",
					data: []
				}
			],
			yAxis: [
				{
					type: "value"
				}
			],
			series: [
				{
					name: "新增",
					type: "bar",
					stack: "new",
					emphasis: {
						focus: "series"
					},
					data: []
				},
				{
					name: "付费",
					type: "bar",
					stack: "pay",
					emphasis: {
						focus: "series"
					},
					// markLine: {
					// 	lineStyle: {
					// 		type: "dashed"
					// 	},
					// 	data: [[{ type: "min" }, { type: "max" }]]
					// },
					data: []
				},
				{
					name: "活跃",
					type: "bar",
					stack: "active",
					emphasis: {
						focus: "series"
					},
					data: []
				}
			]
		});
		const chartPie_new = reactive<any>({
			legend: {
				top: "bottom"
			},
			title: {
				text: "       " + new Date().getFullYear() + "年"
			},
			toolbox: {
				show: true,
				feature: {
					mark: { show: true },
					dataView: { show: true, readOnly: false },
					restore: { show: true },
					saveAsImage: {
						show: true,
						title: "保存",
						name: new Date().getFullYear() + "年新增饼图"
					}
				}
			},
			series: [
				{
					name: "Nightingale Chart",
					type: "pie",
					radius: [50, 200],
					center: ["50%", "50%"],
					roseType: "area",
					itemStyle: {
						borderRadius: 8
					},
					data: []
				}
			]
		});
		const chartPie_active = reactive<any>({
			legend: {
				top: "bottom"
			},
			title: {
				text: "       " + new Date().getFullYear() + "年"
			},
			toolbox: {
				show: true,
				feature: {
					mark: { show: true },
					dataView: { show: true, readOnly: false },
					restore: { show: true },
					saveAsImage: {
						show: true,
						title: "保存",
						name: new Date().getFullYear() + "年活跃饼图"
					}
				}
			},
			series: [
				{
					name: "Nightingale Chart",
					type: "pie",
					radius: [50, 200],
					center: ["50%", "50%"],
					roseType: "area",
					itemStyle: {
						borderRadius: 8
					},
					data: []
				}
			]
		});
		const chartPie_pay = reactive<any>({
			legend: {
				top: "bottom"
			},
			title: {
				text: "       " + new Date().getFullYear() + "年"
			},
			toolbox: {
				show: true,
				feature: {
					mark: { show: true },
					dataView: { show: true, readOnly: false },
					restore: { show: true },
					saveAsImage: {
						show: true,
						title: "保存",
						name: new Date().getFullYear() + "年付费饼图"
					}
				}
			},
			series: [
				{
					name: "Nightingale Chart",
					type: "pie",
					radius: [50, 200],
					center: ["50%", "50%"],
					roseType: "area",
					itemStyle: {
						borderRadius: 8
					},
					data: []
				}
			]
		});
		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;
				let arr_pie_new = [];
				let arr_pie_active = [];
				let arr_pie_pay = [];
				let arr_table = [];
				data.forEach((e, i) => {
					// 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)));
					let pieobj_new = {
						value: e.total_new,
						name: i + 1 + "月新增" + " " + e.total_new
					};
					let pieobj_active = {
						value: e.total_active,
						name: i + 1 + "月活跃" + " " + e.total_active
					};
					let pieobj_pay = {
						value: e.total_pay,
						name: i + 1 + "月付费" + " " + e.total_pay
					};
					let tableobj = {
						mon: e.mon,
						total_new: e.total_new,
						total_pay: e.total_pay,
						total_active: e.total_active
					};
					arr_pie_new.push(pieobj_new);
					arr_pie_active.push(pieobj_active);
					arr_pie_pay.push(pieobj_pay);
					arr_table.push(tableobj);
				});
				//
				chartLine.series[0].data = total_new;
				chartLine.series[1].data = total_pay;
				chartLine.series[2].data = total_active;
				chartHistogram.series[0].data = total_new;
				chartHistogram.series[1].data = total_pay;
				chartHistogram.series[2].data = total_active;
				chartPie_new.series[0].data = arr_pie_new;
				chartPie_active.series[0].data = arr_pie_active;
				chartPie_pay.series[0].data = arr_pie_pay;
				tableData.value = arr_table;

				activeName.value = "first";
				activePie.value = "new";
			}
		});
		chartLine.xAxis[0].data = new Array(12).fill(1).map((e, i) => i + 1 + "月");
		chartHistogram.xAxis[0].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";
		// 	}
		// }
		return {
			activeName,
			tableData,
			activePie,
			chartLine,
			chartHistogram,
			chartPie_new,
			chartPie_active,
			chartPie_pay,
			year
		};
	},
	data() {
		return {};
	}
});
</script>

<style lang="scss" scoped>
.demo-tabs {
	padding: 10px 20px;
	color: #6b778c;
	font-size: 18px;
	font-weight: 600;

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

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

.tab-chart {
	&__year {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 15px;
		padding-left: 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;
				}
			}
		}
	}

	&__container {
		height: 500px;
		padding: 0 15px;
		margin-top: 5%;
		margin-right: 5%;

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