<template>
    <div :id="id" style="height: 100%;width:100%;"></div>
</template>

<script>
export default {
    data () {
        return {
            mychat: '',
            total: 0,
            heightlightIndex: 0,
            data:[],
        }
    },
    props:{
        id:{
            type: String
        },
        pieData:{
            type: Object,
            default: function(){
                return {
                    "1": 0, // 一年級
                    "2": 0, // 二年級
                    "3": 0,
                    "4": 0,
                    "5": 0,
                }
            },
        },
        defaultActive: {
            type: Boolean,
            default: function(){
                return false;
            }
        },
        singleColor:{
            type: Boolean,
            default: function(){
                return false;
            }
        },
        title: {
            type: String
        },
        tooltip:{
            type: Boolean,
            default: function(){
                return false;
            }
        }
    },
    mounted(){
        this.drawLine();
    },
    created(){
    },
    watch: {
        pieData() {
            this.drawLine()
        }
    },
    methods:{
        drawLine(){
            let _this = this;
            this.data = [];
            Object.keys(this.pieData).forEach(function(key) {
                _this.data.push({'name': key, 'value': _this.pieData[key]})
            });
            this.data.forEach(item => {
                _this.total += item.value
            });
            // 基于准备好的dom，初始化echarts实例
            this.myChart = this.$echarts.init(document.getElementById(this.id));
            let color =  ['#FF6B6A', '#FF9FF4', '#48DBFC', '#1CD0A1', '#FDC958', '#FFAD76', '#b682f8']; // 大於2
            let color2 =  ['#FF6B6A', '#48DBFC']; // 小於2
            if(Object.keys(this.pieData).length <=2){
                color = color2
            }
            this.myChart.setOption({                
                title:{
                    show: _this.title ? true : false,
                    text: _this.title ? _this.title : '',
                    left: 'center',
                    top: 'middle',
                    textStyle:{
                        color: '#fafafa',
                        fontWeight: 100
                    }                    
                },
                color: _this.singleColor ? 'rgba(228, 233, 220, 0.9)' : color,
                tooltip: {
                    show: _this.tooltip,
                    trigger: 'item',
                    // formatter: function(p){                        
                    //     // 故意不填可用來觸發HighLight
                    // }
                },
                series: [
                    {
                        type:'pie',
                        hoverOffset: 5,
                        radius: _this.singleColor ? ['30%', '70%'] : ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                            },
                            emphasis: {
                                show: false,
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: _this.data,
                        itemStyle: _this.singleColor ? {
                            emphasis: {
                                color: '#1CD0A1',
                            }
                        } : ''
                    }
                ]
            });
            // mouseover觸發項
            this.myChart.on('mouseover', function (params) {
                if(_this.data[_this.heightlightIndex].name != params.name){
                    _this.myChart.dispatchAction({
                        type: 'downplay',
                        dataIndex: _this.heightlightIndex,
                    });
                }
                params.name = _this.resName(params.name)
                _this.$emit('highLightInfo', params);
            });
            if(this.defaultActive){
                if(this.data.length == 0) return false;
                // 預設先給第一筆初始值                
                let now = this.data[0].value;
                let name = this.resName(this.data[0].name)
                let params = {'value': this.data[0].value, 'name': name ,'percent': Number((now/this.total)*100).toFixed(2)}
                this.$emit('extraInfo', params);            
                this.$emit('highLightInfo', params);  
                // 預設第一個
                this.myChart.dispatchAction({
                    type: 'highlight',
                    dataIndex: _this.heightlightIndex,
                });
            }
        },
        // 供外部呼叫用
        heightlight: function(dName){    
            let _this = this;
            if(this.data[this.heightlightIndex].name != dName){
                this.myChart.dispatchAction({
                    type: 'downplay',
                    dataIndex: _this.heightlightIndex,
                });
            }

            this.myChart.dispatchAction({
                type: 'highlight',
                name: dName
            });
            let now = 0;
            this.data.forEach(item => {
                if(item.name == dName){
                    now = item.value
                }
            });
            let params = {'percent': Number((now/this.total)*100).toFixed(2)}


            this.$emit('extraInfo', params);
        },
        downplay: function(dname){
            this.myChart.dispatchAction({
                type: 'downplay',
                name: dname
            });
        },
        resName: function(name){
            switch (name) {
                case 'Orther':
                    return this.$t('classMgmt.Other');
                    break;
                case 'UnKnown':
                    return this.$t('classMgmt.Other');
                    break;
                case 'smartClass':
                    return this.$t('classMgmt.smartClass');
                    break;
                case 'sokratesClass':
                    return this.$t('classMgmt.sokratesClass');
                    break;
                default:
                    return name
                    break;
            }
        }
    }
}

</script>

<style>
</style>
