<template>
	<div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce, randNum, timeParse } from '@/utils'
import { getChartData } from '@/api/visits'

export default {
	props: {
		className: {
			type: String,
			default: 'chart',
		},
		width: {
			type: String,
			default: '100%',
		},
		height: {
			type: String,
			default: '27vh',
		},
		autoResize: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			chart: null,
			sidebarElm: null,
			chartData: {
				visitsData: [],
				ipData: [],
			},
			weekDays: [],
		}
	},
	mounted() {
		getChartData().then(res => {
			this.chartData.visitsData = res.visitsData
			this.chartData.ipData = res.ipData
			this.weekDays = res.weekDays
			this.initChart()
		})
		if (this.autoResize) {
			this.__resizeHandler = debounce(() => {
				if (this.chart) {
					this.chart.resize()
				}
			}, 100)
			window.addEventListener('resize', this.__resizeHandler)
		}

		// 监听侧边栏的变化
		this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
		this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
	},
	beforeDestroy() {
		if (!this.chart) {
			return
		}
		if (this.autoResize) {
			window.removeEventListener('resize', this.__resizeHandler)
		}

		this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)

		this.chart.dispose()
		this.chart = null
	},
	methods: {
		sidebarResizeHandler(e) {
			if (e.propertyName === 'width') {
				this.__resizeHandler()
			}
		},
		setOptions() {
			const count = 10
			const sum = 24 * 60 * 60 * 1000
			const current = Date.parse(new Date())
			const axisLine = {
				show: false,
				lineStyle: {
					color: '#666',
				},
			}
			let dataX = []
			for (let i = 0; i < count; i++) {
				dataX.push(timeParse(current - sum * i, 'MM-dd'))
			}
			const option = {
				title: {
					text: '趋势分析',
					textStyle: {
						color: '#000',
						fontSize: 16,
						fontWeight: 800,
					},
					top: 10,
					left: 10,
				},

				tooltip: {
					trigger: 'axis',
				},

				grid: {
					left: '4%',
					right: '6%',
					top: '20%',
					bottom: '10%',
					containLabel: true,
				},

				xAxis: {
					type: 'category',
					boundaryGap: false,
					axisLine,
					axisTick: {
						show: false,
					},
					data: dataX,
				},
				yAxis: {
					type: 'value',
					axisLine,
					axisTick: {
						show: false,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#ffffff33',
						},
					},
				},
				series: [
					{
						type: 'line',
						smooth: true,
						symbol: 'none',
						itemStyle: {
							normal: {
								color: '#10B1FD',
								lineStyle: {
									color: new echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[
											{
												offset: 0,
												color: '#0CF4FD',
											},
											{
												offset: 1,
												color: '#0954FD',
											},
										],
										false
									),
								},
							},
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[
										{
											offset: 0,
											color: '#10b1fd4d',
										},
										{
											offset: 1,
											color: '#2bbffd00',
										},
									],
									false
								),
								shadowColor: '#2BBFFD',
								shadowBlur: 20,
							},
						},
						data: randNum(10, 150, count),
					},
				],
			}

			this.chart.setOption(option)
		},
		initChart() {
			this.chart = echarts.init(this.$el, 'macarons')
			this.setOptions(this.chartData)
		},
	},
}
</script>
