import * as echarts from '../../../../ec-canvas/echarts';
import {notSatisfactionTrend} from "../../../../utils/statisticsApi";

var chart = null;

function initChart(canvas, width, height, dpr) {
    chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素比
    });
    canvas.setChart(chart);

    return chart;
}

Component({
    properties: {},
    data: {
        ec: {
            onInit: initChart
        }
    },
    lifetimes: {
        ready() {
            this.getData()
        }
    },
    methods: {
        getData() {
            notSatisfactionTrend().then(({data}) => {
                let xData = data.monthTimes.map(item => (item.split('-')[1] - 0) + '月');
                let series = []
                let color = ['#3A80E7', '#EB8E16', '#10B2A5',]
                data.series.forEach((item,index) => {
                    series.push({
                        name:item.name,
                        type: 'line',
                        showAllSymbol: true,
                        symbol: 'circle',
                        symbolSize: 0,
                        lineStyle: {
                            normal: {
                                color: color[index],
                            },
                        },
                        label: {
                            show: false,
                        },
                        itemStyle: {
                            show: false,
                            color: '#FFF',
                            borderColor: color[index],
                            borderWidth: 1,
                        },
                        data: item.data,
                    },)
                })
                var option = {
                    title: {
                        show: false,
                        text: '',
                        x: 'center',
                        top: '15px',
                        textStyle: {
                            color: '#333333',
                            fontWeight: 500,
                            fontSize: 18,
                        },
                    },

                    legend: {
                        // icon: 'circle',
                        data: data.series.map(item => item.name),
                        itemGap: 12,
                        itemWidth: 12,
                        itemHeight: 5,
                        x: 'left',
                        top: '0%',
                        textStyle: {
                            color: '#999999',
                            fontSize: 10,
                            // padding:[0, 10, 0, 10],
                        }
                    },
                    grid: {
                        top: '18%',
                        left: '2%',
                        right: '4%',
                        bottom: '8%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#323c41'
                                }
                            },
                            axisLabel: {
                                interval: 0,
                                align: 'center',
                                textStyle: {
                                    fontSize: 11,
                                    color: '#C1C1C1'
                                }
                            },
                            boundaryGap: true,
                            data: xData,
                        },
                    ],

                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                color: '#999999',
                                textStyle: {
                                    fontSize: 11
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        }

                    ],
                    series,
                };
                chart.setOption(option);

            })
        }
    }
});