<template>
    <div>
        <polar-area ref="line" :height='150'  :chartData='chartData' :options='options'  style="max-width:1000px;margin:auto"></polar-area>

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

    </div>
</template>
<script>
import polarArea from '../components/PolarArea'
import Chart from 'chart.js'
export default {
    created() {

    },
    data() {
        return {

            options: {
				responsive: true,
				legend: {
					position: 'right',
				},
				title: {
					display: true,
					text: '极地图'
				},
				scale: {
					ticks: {
						beginAtZero: true
					},
					reverse: false
				},
				animation: {
					animateRotate: false,
					animateScale: true
				}
			},

            chartData:null,
            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)'
            },


    }
    },
    mounted() {
        this.updateChart()
    },
    methods: {
        updateChart() {
            this.type = this.$route.query.type
            this._seed = Date.now()
            this.chartData = {
				datasets: [{
					data: [
						this.randomScalingFactor(),
						this.randomScalingFactor(),
						this.randomScalingFactor(),
						this.randomScalingFactor(),
						this.randomScalingFactor(),
					],
					backgroundColor: [
						Chart.helpers.color(this.chartColors.red).alpha(0.5).rgbString(),
						Chart.helpers.color(this.chartColors.orange).alpha(0.5).rgbString(),
						Chart.helpers.color(this.chartColors.yellow).alpha(0.5).rgbString(),
						Chart.helpers.color(this.chartColors.green).alpha(0.5).rgbString(),
						Chart.helpers.color(this.chartColors.blue).alpha(0.5).rgbString(),
					],
					label: 'My dataset' // for legend
				}],
				labels: [
					'Red',
					'Orange',
					'Yellow',
					'Green',
					'Blue'
				]
			}
        },
        randomScalingFactor() {

            return Math.round(Math.random() * 100);
        },

        randomizeData() {
            var chartData = this.chartData
            chartData.datasets.forEach((piece, index) => {
                var data = piece
                data.data.forEach((item, todoIndex) => {
                    data.data[todoIndex] = this.randomScalingFactor();
                    // this.$set( this.chartData.datasets[index].data,todoIndex,data)
                });
                chartData.datasets[index] = data
            });
            this.chartData = chartData
            this.$refs.line.updateChart()
        },

        addData() {

            var colorNames = Object.keys(this.chartColors);

            if (this.chartData.datasets.length > 0) {
                this.chartData.labels.push('data #' + this.chartData.labels.length);
				this.chartData.datasets.forEach((dataset,index) =>{
					var colorName = colorNames[this.chartData.labels.length % colorNames.length];
					this.chartData.datasets[index].backgroundColor.push(this.chartColors[colorName]);
					this.chartData.datasets[index].data.push(this.randomScalingFactor());
                });

                this.$refs.line.updateChart();
            }
        },
        removeData() {
            this.chartData.labels.pop(); // remove the label first
			this.chartData.datasets.forEach((dataset,index) =>{
				this.chartData.datasets[index].backgroundColor.pop();
                this.chartData.datasets[index].data.pop();
            });

            this.$refs.line.updateChart();
        }
    },
    components: { polarArea }
}
</script>
<style lang="less" scoped>
.btn-content{
    flex-wrap: wrap;
    button{
        margin-top: 20px;
    }
}
</style>
