import { schoolScopeList } from "./centerPage.js";
import { starRatingGetbonusList } from "./index.js";
let trendChartChart=null;
function drawStarRatingTotalChart(data,type){
    return {
        color: ['#07b31f', '#e0f00b', ' #f0080d','#7C7F73','#867C77'],
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '14%',
            right: '40px',
            icon: 'circle',
            width: '80px',
            orient: 'vertical', // 排列方式 horizontal（水平） vertical（垂直） 
            itemHeight: 10, // 控制小圆点的大小
            itemWidth: 12,
            itemGap: 4,
            textStyle: {
                color: '#fff', // 文字颜色
                lineHeight: 16,
                fontFamily: 'myRegular'
            },
            formatter: (name) => {
                let total = 0 // 总数，用来计算百分比
                let number = 0 // 数字
                let pec = 0 // 百分比
                for (let i = 0; i < data.length; i++) {
                    total += data[i].value
                }
                for (let i = 0; i < data.length; i++) {
                    if (data[i].name == name) {
                        number = data[i].value
                        pec = (number / total * 100).toFixed(2)
                    }
                }
                return [
                `${name}`,
                `${number}`,
                ]
            }
        },
        title: { // 用title显示环中间固定的文字
            text: ``, // \n 换行
            subtext:type, // 子标题
            top: '29%',
            left: '24%',
            textAlign: 'center', // 字体居中对齐
            textStyle: {
                color: '#fff',
                fontSize: 40,
                fontWeight: 'bold',
            },
            subtextStyle: { // 子标题样式
                color: '#fff',
                fontSize: 16,
                fontFamily: 'myRegular'
            }
        },
        series: [
            {
                type: 'pie',
                radius: ['60%', '80%'],
                center: ['26%', '55%'], // 环形图中心点
                label: {
                    show: false,
                },
                data: data
            }
        ]
    }  
}
  
function drawSchoolYearScopeChart(timeData,valueData){
    var options={
        color: ['#fff'],
        grid: { // 图表位置
            top: '25px',
            left: '50px',
            right: '50px',
            bottom: '50px'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',//指示类型
            },
            // axisPointer: {
            //     type: 'cross',//指示类型
            //     label: {
            //     // 横纵坐标指示区块颜色
            //     backgroundColor: '#132f6d'
            //     }
            // },
            formatter: (pamars) => {
                var name=pamars[0].name;
                var str=`<span style="font-size:16px;">${name}</span><br/>`;
                for(var i=0;i<schoolScopeList.length;i++){
                    if(name==schoolScopeList[i]["schoolTime"]){
                        str+=`
                            评估时间:${schoolScopeList[i]["timestamp"]}<br/>
                            校园安全:${schoolScopeList[i]["scoreInsideManage"]}/20<br />
                            周边安全:${schoolScopeList[i]["scoreOutsideManage"]}/20<br />
                            隐患整改:${schoolScopeList[i]["scoreRiskManage"]}/25<br />
                            法制宣传:${schoolScopeList[i]["scoreLawEducation"]}/15<br />
                            应急处置:${schoolScopeList[i]["scoreEmcManage"]}/20 
                        `
                    }
                }
                return str;
            }
        },
        textStyle: {
            color: '#ffffff',  //更改坐标轴文字颜色
            fontFamily:'myRegular',
            fontSize:14
        },
        xAxis: {
            type: 'category',
            // boundaryGap: false, // 不留白，从原点开始
            data:timeData,
            axisLine: { // 坐标轴
                show: false,
                lineStyle: { // 坐标轴样式
                color: '#4c70ad'
                }
            },
            axisLabel: {
                textStyle: {
                color: '#ffffff',  //更改坐标轴文字颜色
                }
            },
            splitLine: { // 网格线
                show: false,
                lineStyle: { // 网格线样式
                    color: '#4c80ba',
                }
            },
            axisTick: { // 刻度
                show: false // 控制刻度的显示与隐藏
            },
        },
        yAxis: {
            type: 'value',
            splitNumber: 4, // 间隔数 
            axisLabel: {
                textStyle: {
                    color: '#ffffff',  //更改坐标轴文字颜色
                }
            },
            axisLine: { // 坐标轴
              show: false,
              lineStyle: { // 坐标轴样式
                color: '#6490f1',
                padding: 500
              },
            },
            splitLine: { // 网格线
              show: true, // 显示隐藏 ture false
              lineStyle: { // 网格线样式
                color: '#4c80ba',
                type: 'dashed'
              }
            },
            axisTick: { // 刻度
              show: false // 控制刻度的显示与隐藏
            },
            max:100,
            splitNumber:5,
            min:0
        },
        series: [
            {
                data:valueData,
                type: 'bar',
                barWidth:40,
                lineStyle: {
                    width: 2, // 折线粗细
                    color: '#45cdfa', // 折线颜色
                }, 
                symbolSize: 8,  //设置折线上圆点大小
                symbol: 'circle', // 设置标记的图形为circle
                itemStyle: {    
                    normal: {
                        label: {
                            show: true, // 在折线拐点上显示数据
                            position:'top',
                            formatter: (pamars) => {
                                var value=pamars["value"]
                                if(value>=95){
                                    var text=`五星`;
                                }else if(value>=85){
                                    var text=`四星`;
                                }else if(value>=75){
                                    var text=`三星`;
                                }else if(value>=65){
                                    var text=`二星`;
                                }else{
                                    var text=`一星`;
                                }
                                return  `${text}(${value})`;
                            }, 
                        },
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ // 柱状图渐变色
                          offset: 0,
                          color: 'rgba(69, 176, 255, 0.2)'
                        }, {
                          offset: 1,
                          color: '#45B0FF'
                        }]),

                    },
                },
               
            }
        ]
    }
    trendChartChart=echarts.init(document.getElementById("trendChartChart"));
    //使用制定的配置项和数据显示图表
    trendChartChart.setOption(options);
}

window.onresize=function(e){
    if(trendChartChart!=null){
        trendChartChart.resize();
    }
}

function drawSchoolBonusEchart(){
    var dataName=[]
    var dataValue=[]
    for(var i=0;i<starRatingGetbonusList.length;i++){
        var scoreBonus=Math.abs(parseFloat(starRatingGetbonusList[i]["scoreBonus"]/10));
        var station=starRatingGetbonusList[i]["station"];
        dataValue.push(scoreBonus)
        dataName.push(station)
    }
  
    var option={
        color: ['#fff'],
        grid: { // 图表位置
          top: '25%',
          left: '50px',
          right: '25px',
          bottom: '40px'
        },
        title: {
          text: '加奖学校排名', // 主标题 
          textStyle: { // 标题样式
            color: '#fff',
            fontSize: 15,
            fontWeight: 'normal',
            fontSize:16,
            fontWeight:'bold',
            fontFamily: 'myRegular' 
          },
          top: '20px',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          boundaryGap: true, // 不留白，从原点开始
          data: dataName,

          axisLine: { // 坐标轴
            lineStyle: { // 坐标轴样式
              color: '#4d76b2'
            }
          },
          axisLabel: {
            interval: 0, // 为了让轴上显示全
            rotate: 15, //显示全后重叠，调整角度
            textStyle: {
              color: '#ffffff',  //更改坐标轴文字颜色
              fontFamily: 'myRegular' 
            }
          },
          axisTick: { // 刻度
            show: false // 控制刻度的显示与隐藏
          },
          splitLine: { // 网格线
            show: false,
          },

        },
        yAxis: {
          type: 'value',
          show: true, // 显示隐藏 ture false
          splitNumber: 5, // 间隔数
          max: 20,
          interval: 10 / 2,
          axisLabel: {
            textStyle: {
              color: '#ffffff',  //更改坐标轴文字颜色
            }
          },
          axisLine: { // 坐标轴
            show: false,
            lineStyle: { // 坐标轴样式
              color: '#6490f1'
            }
          },
          splitLine: { // 网格线
            show: true, // 显示隐藏 ture false
            lineStyle: { // 网格线样式
              color: '#4d76b2'
            }
          }
        },
        series: [{
          data: dataValue,
          type: 'bar',
          barWidth: 15,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ // 柱状图渐变色
                offset: 0,
                color: '#2575ca'
              }, {
                offset: 1,
                color: '#02B4FE'
              }]),
            }
          },
        }]
    }
    var mainContentR_top_info_echart=echarts.init(document.getElementById("mainContentR_top_info_echart"));
    //使用制定的配置项和数据显示图表
    mainContentR_top_info_echart.setOption(option);
}

export {
    drawStarRatingTotalChart,
    drawSchoolYearScopeChart,
    drawSchoolBonusEchart
}