<template>
    <div>
        <line-chart ref="line" :height='200'  :chartData='lineData' :options='lineOptions' style="max-width:1000px;margin:auto"></line-chart>

        <el-row  type="flex" class="btn-content" justify="center">
            <el-button @click="randomizeData">随机改变值</el-button>
            <el-button @click="addDataset" type="primary">添加数据集</el-button>
            <el-button @click="removeDataset" type="success">删除数据集</el-button>
            <el-button @click="addData" type="info">添加数据</el-button>
            <el-button @click="removeData" type="warning">删除数据</el-button>
        </el-row>

    </div>
</template>
<script>
import lineChart from '../components/Line'
export default {
    created() {

    },
    data() {
        return {
            _seed: '',
            lineData: null,
            lineOptions: {
                responsive: true,
                title: {
                    display: true,
                    text: '折线图'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        }
                    }]
                }
            },
            chartColors: {
                red: 'rgb(255, 99, 132)',
                orange: 'rgb(255, 159, 64)',
                yellow: 'rgb(255, 205, 86)',
                green: 'rgb(75, 192, 192)',
                blue: 'rgb(54, 162, 235)',
                purple: 'rgb(153, 102, 255)',
                grey: 'rgb(201, 203, 207)'
            },
            MONTHS: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

        }
    },
    mounted() {
        this.updateChart()
    },
    methods: {
        updateChart() {
            this.type = this.$route.query.type
            this._seed = Date.now()
            this.lineData = {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: '第1项',
                    backgroundColor: this.chartColors.red,
                    borderColor: this.chartColors.red,
                    data: [
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor()
                    ],
                    fill: false,
                }, {
                    label: '第2项',
                    fill: false,
                    backgroundColor: this.chartColors.blue,
                    borderColor: this.chartColors.blue,
                    data: [
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor()
                    ],
                }]
            }
        },
        randomScalingFactor() {

            return Math.round(this.randNum(-100, 100));
        },
        randNum(min, max) {
            var seed = this._seed;
            min = min === undefined ? 0 : min;
            max = max === undefined ? 1 : max;
            this._seed = (seed * 9301 + 49297) % 233280;
            return min + (this._seed / 233280) * (max - min);
        },
        randomizeData() {
            var lineData = this.lineData
            lineData.datasets.forEach((dataset, index) => {
                var data = dataset
                data.data.forEach((item, todoIndex) => {
                    data.data[todoIndex] = this.randomScalingFactor();
                    // this.$set( this.lineData.datasets[index].data,todoIndex,data)
                });
                lineData.datasets[index] = data
            });
            this.lineData = lineData
            this.$refs.line.updateChart()
        },
        addDataset() {
            var colorNames = Object.keys(this.chartColors);
            var colorName = colorNames[this.lineData.datasets.length % colorNames.length];
            var newColor = this.chartColors[colorName];
            var newDataset = {
                label: '第' + (this.lineData.datasets.length + 1) + '项',
                backgroundColor: newColor,
                borderColor: newColor,
                data: [],
                fill: false
            };

            for (var index = 0; index < this.lineData.labels.length; ++index) {
                newDataset.data.push(this.randomScalingFactor());
            }

            this.lineData.datasets.push(newDataset);
            this.$refs.line.updateChart()
        },
        removeDataset() {
            this.lineData.datasets.splice(0, 1);
            this.$refs.line.updateChart();
        },
        addData() {
            if (this.lineData.datasets.length > 0) {
                var month = this.MONTHS[this.lineData.labels.length % this.MONTHS.length];
                this.lineData.labels.push(month);

                this.lineData.datasets.forEach(dataset => {
                    dataset.data.push(this.randomScalingFactor());
                });

                this.$refs.line.updateChart();
            }
        },
        removeData() {
            this.lineData.labels.splice(-1, 1); // remove the label first

            this.lineData.datasets.forEach(function (dataset) {
                dataset.data.pop();
            });
            this.$refs.line.updateChart();
        }
    },
    components: { lineChart }
}
</script>
<style lang="less" scoped>

.btn-content{
    flex-wrap: wrap;

    button{
        margin-top: 20px;
    }
}
</style>
