<template>
    <div>
        <pie-chart ref="pie" :height='150' :chartData='pieData' :options='pieOptions' style="max-width:1000px;margin:auto"></pie-chart>

        <el-row type="flex" style="margin-top:50px" 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-row>

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

    },
    data() {
        return {
            _seed: '',
            pieData: null,
            pieOptions:  {
				responsive: 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.pieData = {
                datasets: [{
                    data: [
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                    ],
                    backgroundColor: [
                        this.chartColors.red,
                        this.chartColors.orange,
                        this.chartColors.yellow,
                        this.chartColors.green,
                        this.chartColors.blue,
                    ],
                    label: '数据集1'
                }],
                labels: [
                    'Red',
                    'Orange',
                    'Yellow',
                    'Green',
                    'Blue'
                ]
            }
        },
        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 pieData = this.pieData
            pieData.datasets.forEach((dataset, index) => {
                var data = dataset
                data.data.forEach((item, todoIndex) => {
                    data.data[todoIndex] = this.randomScalingFactor();
                    // this.$set( this.pieData.datasets[index].data,todoIndex,data)
                });
                pieData.datasets[index] = data
            });
            this.pieData = pieData
            this.$refs.pie.updateChart()
        },
        addDataset() {
            var colorNames = Object.keys(this.chartColors);
            var newDataset = {
				backgroundColor: [],
				data: [],
				label: '新数据集' + this.pieData.datasets.length,
			};

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

				var colorName = colorNames[index % colorNames.length];
				var newColor = this.chartColors[colorName];
				newDataset.backgroundColor.push(newColor);
			}
            this.pieData.datasets.push(newDataset);
            this.$refs.pie.updateChart()
        },
        removeDataset() {
            this.pieData.datasets.splice(0, 1);
            this.$refs.pie.updateChart();
        },
        addData() {
            if (this.pieData.datasets.length > 0) {
                var month = this.MONTHS[this.pieData.labels.length % this.MONTHS.length];
                this.pieData.labels.push(month);

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

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

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