/**
 * 顶部header
 */
Vue.component("cz-warning-survey", {
    template: `
       <div :style="{height: height+'px'}" id="warningSurvey">

       </div>
    `,
    props: {
        title:{
            type: String,
        },
        height:{
            type: Number,
        },
        distribute:{
            type: Array,
        },
    },
    data() {
        return {
            active:0
        }
    },
    mounted(){
        this.init()
    },
    methods: {
        init(){
            this.warningChart(this.distribute,'warningSurvey','次')
        },
        //预警概况  Echart
        warningChart(datas,id,unit){
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                var myChart = echarts.init(document.getElementById(id));
                var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
                var charPie3currentIndex = 0
                var startCharts;
                let legendData = []
                for (var j = 0; j < datas.length; j++) {
                    var data = {
                        name: datas[j].name,
                        //icon: 'circle',
                        textStyle: {
                            fontSize: 14,
                            color: '#c1d1f3',
                        }
                    }
                    legendData.push(data)
                }
                let objData = array2obj(datas, 'name')
                var colorList = ['#00fff1', '#04c8fa', '#aa01fe', '#4e84fe', '#ff7b79','#edae5e', '#fe4101','#14d18f']
                var chChart1 = echarts.init(document.getElementById(id));
                option1 = {
                    tooltip: {
                        show:true,
                        trigger: 'item',
                        formatter: function(params,tichet,callback){
                            var name = params.name;
                            var value = params.value;
                            var percent=params.percent
                            res = '<div style="text-align: center;font-size: 16px;color: #c1d1f3;font-weight: bold;" id="toolTipBox1">' +
                                    '<p style="padding-bottom:10px;">' +
                                        '<span style="color: #01fff0;font-size: 20px;padding-right: 5px">'+value+'</span> '+
                                        '<span style="color: #01fff0;font-size: 20px">'+percent+'%</span>' +
                                    '</p>'+
                                    '<p>'+name+'</p>'+
                                '</div>'
                            //res =''+params.name+'\n\n'+params.value+'（'+params.percent+'%）'
                            return res;
                        },
                        position: function(point,params ,dom,rect, size){
                            var marginW = Math.ceil(size.contentSize[0]/2);
                            var marginH = Math.ceil(size.contentSize[1]/2);
                            dom.style.marginLeft = "-" + marginW + "px";
                            dom.style.marginTop = "-" + marginH + "px";
                            return ['50%', '30%']
                        },
                        alwaysShowcontent:true,
                        backgroundColor:'none',
                        textStyle:{
                            color:'#fff'
                        }
                        //formatter: '{b}\n\n{c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        itemWidth: 15,
                        itemHeight: 10,
                        itemGap: 10,

                        top: '55%',
                        left: 'center',
                        data: legendData,
                        formatter: function (name) {
                            return `${name}   ${objData[name].value} ${unit}  ${objData[name].percent}% `
                        },
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: ['28%', '45%'],
                            center: ['50%', '30%'],
                            avoidLabelOverlap: false,
                            //selectedMode: 'single',
                            data:datas,
                            itemStyle: {

                                normal: {
                                    borderWidth: 7,
                                    borderColor: "#040e27",
                                    color: function(params) {
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },
                            label: {
                                show: false,
                                position: 'center',
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                label : {
                                    show: false,
                                    fontSize: '20',
                                    color: "#fff",
                                    fontWeight: 'bold',
                                    formatter: "{b}\n\n{c} ({d}%)"
                                }
                            }
                        }
                    ]
                };

                chChart1.setOption(option1);
                window.onresize = chChart1.resize;

                function array2obj (array, key) {
                    var resObj = {}
                    for (var i = 0; i < array.length; i++) {
                        resObj[array[i][key]] = array[i]
                    }
                    return resObj
                }
                chChart1.on('mouseover', function (param) {
                    isSet = false
                    clearInterval(startCharts)
                    // 取消之前高亮的图形
                    chChart1.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: charPie3currentIndex
                    })
                    // 高亮当前图形
                    chChart1.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: param.dataIndex
                    })
                    // 显示 tooltip
                    chChart1.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: param.dataIndex
                    })
                    $("#toolTipBox1").fadeOut(3000)
                })
                var chartHover = function () {
                    var dataLen = option1.series[0].data.length
                    // 取消之前高亮的图形
                    chChart1.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: charPie3currentIndex
                    })
                    charPie3currentIndex = (charPie3currentIndex + 1) % dataLen
                    // 高亮当前图形
                    chChart1.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: charPie3currentIndex
                    })
                    // 显示 tooltip
                    chChart1.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: charPie3currentIndex,
                    })
                    $("#toolTipBox1").fadeOut(3000)
                }
                startCharts = setInterval(chartHover, 3000)
                // 4、鼠标移出之后，恢复自动高亮
                chChart1.on('mouseout', function (param) {
                    if (!isSet) {
                        startCharts = setInterval(chartHover, 3000)
                        isSet = true
                    }
                })

            })
        },
    },
    watch:{
        distribute: function (n,o) {
            this.warningChart(this.distribute,'warningSurvey','次')
        }
    },
})