import initCtx from "@/utils/ctx.js";
import * as echarts from "echarts"

export default function () {
	const {utils} = initCtx(this)
	utils.setEcharts(echarts)

	this.$delay(function () {
		let that = this

		let countryUnit = this.processMaxUnit(this.countryStats)
		this.reloadChart("country-chart", "地区", this.countryStats, function (v) {
			return v.country.name
		}, function (args) {
			return that.countryStats[args.dataIndex].country.name + ": " + utils.formatNumber(that.countryStats[args.dataIndex].rawCount)
		}, countryUnit)

		let provinceUnit = this.processMaxUnit(this.provinceStats)
		this.reloadChart("province-chart", "省市", this.provinceStats, function (v) {
			return v.province.name
		}, function (args) {
			return that.provinceStats[args.dataIndex].country.name + ": " + that.provinceStats[args.dataIndex].province.name + " " + utils.formatNumber(that.provinceStats[args.dataIndex].rawCount)
		}, provinceUnit)

		let cityUnit = this.processMaxUnit(this.cityStats)
		this.reloadChart("city-chart", "城市", this.cityStats, function (v) {
			return v.city.name
		}, function (args) {
			return that.cityStats[args.dataIndex].country.name + ": " + that.cityStats[args.dataIndex].province.name + " " + that.cityStats[args.dataIndex].city.name + " " + utils.formatNumber(that.cityStats[args.dataIndex].rawCount)
		}, cityUnit)

		window.addEventListener("resize", function () {
			that.resizeChart("country-chart")
			that.resizeChart("province-chart")
			that.resizeChart("city-chart")
		})
	})

	this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, unit) {
		let chartBox = document.getElementById(chartId)
		if (chartBox == null) {
			return
		}

		utils.initChart(chartBox, undefined, (chart) => {
			let bottom = 20
			let rotate = 0
			const rotation = utils.xRotation(chart, stats.map(xFunc))
			if (rotation != null) {
				bottom = rotation[0]
				rotate = rotation[1]
			}

			let option = {
				xAxis: {
					data: stats.map(xFunc),
					axisLabel: {
						interval: 0,
						color: utils.chartLabelColor,
						rotate: rotate
					}
				},
				yAxis: {
					axisLabel: {
						formatter: function (value) {
							return value + unit
						},
						color: utils.chartLabelColor
					}
				},
				tooltip: {
					show: true,
					trigger: "item",
					formatter: tooltipFunc
				},
				grid: {
					left: 40,
					top: 10,
					right: 20,
					bottom: bottom
				},
				series: [
					{
						name: name,
						type: "bar",
						data: stats.map(function (v) {
							return v.count;
						}),
						itemStyle: {
							color: utils.DefaultChartColor
						},
						barWidth: "10em"
					}
				],
				animation: true
			}

			chart.setOption(option)
			chart.resize()
		})
	}

	this.resizeChart = function (chartId) {
		let chartBox = document.getElementById(chartId)
		if (chartBox == null) {
			return
		}
		utils.initChart(chartBox, undefined, chart => {
			chart.resize()
		})
	}

	this.processMaxUnit = function (stats) {
		let max = stats.$map(function (k, v) {
			return v.count
		}).$max()
		let divider = 0
		let unit = ""
		if (max >= 1000 * 1000 * 1000) {
			unit = "B"
			divider = 1000 * 1000 * 1000
		} else if (max >= 1000 * 1000) {
			unit = "M"
			divider = 1000 * 1000
		} else if (max >= 1000) {
			unit = "K"
			divider = 1000
		}
		stats.forEach(function (v) {
			v.rawCount = v.count
			if (divider > 0) {
				v.count /= divider
			}
		})
		return unit
	}
}
