<template>
    <div>
        <radar-chart ref="radar" :height='150' :chartData='radarData' :options='radarOptions' style="max-width:1200px;margin:auto"></radar-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 Chart from 'chart.js'
import radarChart from '../components/Radar'
var color = Chart.helpers.color
export default {
    created() {

    },
    data() {
        return {
            _seed: '',
            radarData: null,
            radarOptions: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: '雷达图'
                },
                scale: {
                    ticks: {
                        beginAtZero: true
                    }
                }
            },
            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._seed = Date.now()
            this.radarData = {
                labels: [['Eating', 'Dinner'], ['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'],
                datasets: [{
                    label: '数据集1',
                    backgroundColor: color(this.chartColors.red).alpha(0.2).rgbString(),
                    borderColor: this.chartColors.red,
                    pointBackgroundColor: this.chartColors.red,
                    data: [
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor()
                    ]
                }, {
                    label: '数据集2',
                    backgroundColor: color(this.chartColors.blue).alpha(0.2).rgbString(),
                    borderColor: this.chartColors.blue,
                    pointBackgroundColor: this.chartColors.blue,
                    data: [
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor()
                    ]
                }]
            }
        },
        randomScalingFactor() {

            return Math.round(Math.random() * 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 radarData = this.radarData
            radarData.datasets.forEach((dataset, index) => {
                var data = dataset
                data.data.forEach((item, todoIndex) => {
                    data.data[todoIndex] = this.randomScalingFactor();
                    // this.$set( this.radarData.datasets[index].data,todoIndex,data)
                });
                radarData.datasets[index] = data
            });
            this.radarData = radarData
            this.$refs.radar.updateChart()
        },
        addDataset() {
            var colorNames = Object.keys(this.chartColors);
            var colorName = colorNames[this.radarData.datasets.length % colorNames.length];
            var newColor = this.chartColors[colorName];

            var newDataset = {
                label: '数据集 ' + (this.radarData.datasets.length + 1),
                borderColor: newColor,
                backgroundColor: color(newColor).alpha(0.2).rgbString(),
                pointBorderColor: newColor,
                data: [],
            };

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

            this.radarData.datasets.push(newDataset);
            this.$refs.radar.updateChart()
        },
        removeDataset() {
            this.radarData.datasets.splice(this.radarData.datasets.length-1, 1);
            this.$refs.radar.updateChart();
        },
        addData() {
            if (this.radarData.datasets.length > 0) {
                this.radarData.labels.push('dataset #' + this.radarData.labels.length);

                this.radarData.datasets.forEach((dataset, index) => {
                    this.radarData.datasets[index].data.push(this.randomScalingFactor());
                });

                this.$refs.radar.updateChart();
            }

        },
        removeData() {
            this.radarData.datasets.splice(0, 1);
            this.$refs.radar.updateChart();
        }
    },
    components: { radarChart }
}
</script>
<style lang="less" scoped>
.btn-content{
    flex-wrap: wrap;
    button{
        margin-top: 20px;
    }
}
</style>
