<template>
    <chart :options="Opts" ref="pie" theme="ovilia-green" autoresize :style="{width,height}" />
</template>
<script>
import ECharts from "../../src/components/ECharts";
import "echarts/lib/component/legend";
import "echarts/lib/component/tooltip";
import "echarts/lib/chart/pie";
import getPie from "../../src/_unit/pie";
export default {
    name: "DoPie",
    components: {
        chart: ECharts
    },
    props: {
        charsData: {
            type: Array,
            default: () => {
                return [
                    { value: 335, name: "直接访问" },
                    { value: 310, name: "邮件营销" },
                    { value: 234, name: "联盟广告" },
                    { value: 135, name: "视频广告" },
                    { value: 1548, name: "搜索引擎" }
                ];
            }
        },
        animation: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
        animationTime: {
            type: Number,
            default: () => {
                return 1000;
            }
        },
        color: {
            type: [Array, String],
            default: () => {
                return ["#2fe7ab", "#1e6af4", "#1ac2ef", "#7447ff", "#e2ab08"];
            }
        },
        center: {
            type: Array,
            default: () => {
                return ['50%', '60%'];
            }
        },
        width: {
            type: String,
            default: () => {
                return "600px";
            }
        },
        height: {
            type: String,
            default: () => {
                return "400px";
            }
        },
        tooltipFormatter: {
            type: Function,
            default: params => {
                if (params.length) {
                    var res = "";
                    for (var i = 0; i < params.length; i++) {
                        let returnData = params[i].data;
                        res +=
                            params[i].marker +
                            params[i].seriesName +
                            "：" +
                            returnData +
                            "<br>";
                    }
                    return res;
                } else {
                    return `${params.marker}${params.value}`;
                }
            }
        },
        pieFormatter: {
            type: Function,
            default: params => `${params.name}\n${params.percent}%`
        },
        pieOpt: {
            type: Object
        },
        insertPieOpt: {
            type: Object
        },
        insertText: {
            type: String,
            default:()=>{
                return '测试\n文案'
            }
        },
        insertColor:{
            type: String,
            default:()=>{
                return '#02072C'
            }
        },
        insertTextColor:{
            type: String,
            default:()=>{
                return '#02cdff'
            }
        },
        changeOpt: {
            type: Object
        },
        type: {
            type: String,
            default: () => {
                return "white";
            },
            validator: value => {
                return ["dark", "white"].indexOf(value) !== -1;
            }
        }
    },
    data() {
        return {
            interval: null
        };
    },
    computed: {
        Opts() {
            return getPie(
                this.charsData,
                this.color,
                this.center,
                this.tooltipFormatter,
                this.pieFormatter,
                this.pieOpt,
                this.insertPieOpt,
                this.insertText,
                this.insertColor,
                this.insertTextColor,
                this.changeOpt,
                this.type
            );
        }
    },
    watch: {
        animation: {
            immediate: true,
            handler(val) {
                if (val) {
                    this.animationFunction();
                } else {
                    this.stopAnimation();
                }
            }
        }
    },
    methods: {
        animationFunction() {
            let dataIndex = -1;
            let pie = this.$refs.pie;
            let dataLen = pie.options.series[0].data.length;
            this.interval = setInterval(() => {
                pie.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex
                });
                dataIndex = (dataIndex + 1) % dataLen;
                pie.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex
                });
                pie.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex
                });
            }, this.animationTime);
        },
        stopAnimation() {
            clearInterval(this.interval);
        }
    },
    mounted() {
        if (this.animation) {
            this.animationFunction();
        }
    }
};
</script>