<template>
    <div :class="className" :dataChart="dataChart"></div>
</template>

<script>
import { timeParse, randNum } from "@/utils"

export default {
    props: {
        className: {
            type: String,
            default: 'charts_div'
        },

        dataChart: {
            type: Object,
            default() {
                return {
                    color: '#27b4c2',
                    unit: 'mm(毫米)'
                }
            }
        }
    },

    data() {
        return {
            char: null
        }
    },

    mounted() {
        this.initChart()
    },

    methods: {

        initChart() {
            const myChart = echarts.init(this.$el)
            const count = 20
            const sum = 24 * 60 * 60 * 1000
            const current = Date.parse(new Date())
            const axisLine = {
                lineStyle: {
                    color: this.dataChart.color
                }
            }
            let dataX = []
            for (let i = 0; i < count; i++) {
                dataX.push(timeParse(current - (sum * i)))
            }

            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                },

                grid: {
                    left: '5%',
                    right: '5%',
                    top: '10%',
                    bottom: '10%',
                    containLabel: true
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLine,
                    axisLabel: {

                        formatter: function (params) {
                            let e = params.split(" ")
                            return `${e[0]} \n ${e[1]}`
                        }
                    },
                    data: dataX,
                },
                yAxis: {
                    name: this.dataChart.unit,
                    type: 'value',
                    axisLine,
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: this.dataChart.color
                        }
                    }
                },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color: this.dataChart.color,
                                lineStyle: {
                                    color: this.dataChart.color,
                                    width: 1
                                },
                            }
                        },
                        data: randNum(10, 15, count),
                    }
                ]
            })
        }

    }


}
</script>