// components/safety-pie-chart/index.js
import * as echarts from '../../ec-canvas/echarts'

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        chartId:{ 
            type: String
        },
        chartData:{
            type: Array
        },
        title:{
            type: String
        }
    },
    observers: {
        chartData: function (val) {
            this.initChart() 
        },
    },
    /**
     * 组件的初始数据
     */
    data: {
        ec: {
            lazyLoad: true
        },
        chart:undefined,
    },
    lifetimes: {
        created: function(){
        //在组件实例刚刚被创建时执行，注意此时不能调用 setData
        },
        attached: function () {
            //在组件实例进入页面节点树时执行
           
        },
        ready: function () {
            // 在组件在视图层布局完成后执行
          
            this.initChart();
        },
        detached: function () {
            // 在组件实例被从页面节点树移除时执行
        },
        
    },
    /**
     * 组件的方法列表
     */
    methods: {
        initChart(){
            var id ='#' +  this.data.chartId;
            this.component = this.selectComponent(id);
            if(this.component){
                this.component.init((canvas, width, height, dpr) => {
                    let chart = echarts.init(canvas, null, {
                        width: width,
                        height: height,
                        devicePixelRatio: dpr
                    })
                    chart.setOption(this.getData());
                    return chart;
                })
            }
            
        },
        getData() {
            var data = this.data.chartData
            var legendData = []
            var total = 0
            for(var i=0;i<data.length;i++){
                total += Number(data[i].value)
                legendData.push(data[i].name)
            }
            var option = {
                title: {
                  text: total.toFixed(1),
                  subtext: this.data.title,
                  textStyle: {
                    fontSize: 20,
                    color: "#0cd4f5",
                    lineHeight: 15,
                  },
                  subtextStyle: {
                    fontSize: 12,
                    color: "#d5dcf8",
                  },
                  textAlign: "center",
                  left: "21%",
                  top: "39%",
                },
                tooltip: {
                  trigger: "item",
                },
                // grid:{
                //     left:20
                // },
                legend: {
                    icon: "vertical",
                    // right: "0%",
                     left: '44%', // 靠左对齐
                    
                    top: "center",
                    orient: "vertical",
                    // bottom: 40,

                    itemGap: 16,
                    itemWidth: 8,
                    itemHeight: 8,
                    data: legendData,
                    textStyle: {
                    
                        color: "#c3dbfd",
                        rich: {
                            uname: {
                                width: 50,
                                lineHeight: 20,
                                fontSize: 9,
                                // padding:  [10, 10, 10, 10],
                            },
                            unum: {
                                color: "#18DB9F",
                                // width: 24,
                                // align: "left",
                                fontSize: 8,
                                padding: [10, 0, 0, 5],
                                // lineHeight: 20
                            },
                        },
                    },
                    formatter(name) {
                        let res = data.filter((v) => v.name === name);
                        return "{uname| " + name + "}\n{unum|" + Number(res[0].value).toFixed(1) + "}{unum|" + res[0].prop + "%}"
                        //return `{uname|${name}}{unum|1132}`;
                    },
                },
                color: ['#4775ff','#55adf7','#6662da','#1f6086'],
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: ['38%', '55%'],
                        center: ["22%", "50%"],
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        itemStyle: {
                            borderWidth: 5,
                            borderColor: "#1e2336",
                        },
                        data: data
                    },
                    {
                        name: "外边框",
                        type: "pie",
                        clockWise: false, //顺时加载
                        hoverAnimation: false, //鼠标移入变大
                        center: ["22%", "50%"],
                        radius: ["63%", "63%"],
                        label: {
                            normal: {
                                show: false,
                            },
                        },
                        data: [
                            {
                                value: 9,
                                name: "",
                                itemStyle: {
                                    normal: {
                                        borderWidth: 3,
                                        borderColor: "#152c65",
                                    },
                                },
                            },
                        ],
                    },
                ],
            };

            return option;
        }
    }
})