import { stationList,ipcAlarmList } from "./index.js";
var threeColor_echart=null;
let indexMapChart=null;
let mapNameList=[];
let mapStatusUpdate=[];
export function drawSchoolLevelEchart(colorGreen,colorRed,colorYellow){
    var dataName=["红色","黄色","绿色"]
    var dataValue=[colorRed,colorYellow,colorGreen]
    var option={
        grid: { // 图表位置
          top: '10%',
          left: '50px',
          right: '25px',
          bottom: '20px'
        },
        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: 0, //显示全后重叠，调整角度
            textStyle: {
              color: '#ffffff',  //更改坐标轴文字颜色
              fontFamily: 'myRegular' 
            }
          },
          axisTick: { // 刻度
            show: false // 控制刻度的显示与隐藏
          },
          splitLine: { // 网格线
            show: false,
          },

        },
        yAxis: {
          type: 'value',
          show: true, // 显示隐藏 ture false
          splitNumber: 5, // 间隔数
           max:300,
        //   interval: 10 / 5,
          axisLabel: {
            textStyle: {
              color: '#ffffff',  //更改坐标轴文字颜色
              fontFamily: 'myRegular' 
            }
          },
          axisLine: { // 坐标轴
            show: false,
            lineStyle: { // 坐标轴样式
              color: '#6490f1'
            }
          },
          splitLine: { // 网格线
            show: true, // 显示隐藏 ture false
            lineStyle: { // 网格线样式
              color: '#4d76b2'
            }
          }
        },
        series: [{
          data: dataValue,
          type: 'bar',
          barWidth: 25,
          itemStyle: {
              normal: {
                color: function(params) {
                    // 定义一个颜色数组colorList
                    var colorList =   ['red','yellow','#2f8555'];
                    return colorList[params.dataIndex]
                },
                label:{
                  show:true,
                  color:'#fff',
                  fontSize:18,
                  fontFamily: 'myRegular',
                  position: 'top',
                  formatter: function (param) {
                     return param.value
                  },
                },
              },
            
          },
        }]
    }

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

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

$(".navSilde").on('click',function(){
  var state=$(this).attr("state");
  if(state=="open"){
    $(this).attr("state","close");
    $("#schoolNavList").css("display","none");
    $(".cityManageContent").css("width","100%");
  }else{
    $(this).attr("state","open");
    $("#schoolNavList").css("display","block");
    $(".cityManageContent").css("width","calc(100% - 120px)");
  }
  if(threeColor_echart!=null){
    threeColor_echart.resize();
  }
})




function drawIndexMap(){
  $.getJSON("../../pages/newIndex/js/furong.json").then(res=>{
    indexMapChart= echarts.init(document.getElementById("marinContentMap"));   
    echarts.registerMap("myMap", res);
    var option = {
            tooltip: {
            trigger: 'item',
            textStyle: { 
              fontSize: '14', 
              color: '#fff', 
              fontFamily: 'myRegular',
             
             },
             borderWidth:0,
            backgroundColor: '#092b6a',
            formatter: (params) => {
              let name = params.name
              return echartMapTips(name)
            },
        },
        series: [
        {
            type: 'map3D',
            name: '地图',  
            selectedMode: 'single', // 地图高亮单选
            regionHeight: 3, // 地图高度
            map: 'myMap',
            viewControl: {
              distance:56, // 地图视角 控制初始大小
              alpha: 45,// 倾斜角度
              rotateSensitivity: [1, 1]
            },
            label: {
              show: true, // 是否显示名字
              textStyle:{
                color:"#fff",//文字颜色
                fontSize:18,//文字大小
                fontFamily: 'myRegular',
                backgroundColor:"rgba(0,0,0,0)",//透明度0清空文字背景 
              },
              formatter: (params) => {
                var name=params["name"];
                if(name=="五里牌"){
                  return  '{a|' + name + '}';
                }
              },
              rich:{
                a:{
                  color: '#fff',
                  fontSize:18,//文字大小
                  padding:[14,30],
                  fontFamily: 'myRegular',
                  backgroundColor:"rgba(0,0,0,0)",//透明度0清空文字背景 
                }
              },
            },
            itemStyle: {
              color: '#27519e', // 地图背景颜色
              borderWidth: 1, // 分界线wdith
              borderColor: '#a4d8f0', // 分界线颜色
              opacity: 0.9
            },
            emphasis: {
              label: {
                  show: true, // 是否显示高亮
                  textStyle: {
                    color: '#fff' // 高亮文字颜色
                  }
              },
              itemStyle: {
                  color: '#3a69c1', // 地图高亮颜色
                  borderWidth: 10, // 分界线width
                  borderColor: '#6BECF5'// 分界线颜色
              }
            },
            light: {
              main: {
                  color: '#fff',
                  intensity: 1,
                  shadow: true,
                  shadowQuality: 'high',
                  alpha: 25, //
                  beta: 20
              },
              ambient: {
                color: '#fff',
                intensity: 0.6
              }
            }
          }
        ]
    };
    indexMapChart.setOption(option);

    createMapNameList(res);
    indexMapChart.on('mouseover', function (params) {
      updateMapStatusColor(); 
    });

  })  
}

function createMapNameList(res){
  var features=res["features"];
  for(var i=0;i<features.length;i++){
    var name=features[i]["properties"]["name"];
    mapNameList.push(name);
  }
  updateMapStatus();
}


function updateMapStatus(){
  mapStatusUpdate=[]
  for(var i=0;i<ipcAlarmList.length;i++){
      var borough=ipcAlarmList[i]["borough"];
      for(var j=0;j<mapNameList.length;j++){
        if(borough.indexOf(mapNameList[j])!=-1){  
          if(mapStatusUpdate.indexOf(mapNameList[j])==-1){
            mapStatusUpdate.push(mapNameList[j]);
          }  
          break;
        }
      }
  }
  updateMapStatusColor();
}


function updateMapStatusColor(){
  if(indexMapChart!=null){
      var getOptions=indexMapChart.getOption()
      var data=[]
      for(var i=0;i<mapStatusUpdate.length;i++){
        var obj={
          "name":mapStatusUpdate[i],
          "itemStyle": { color: "#D37636" }
        }
        data.push(obj);
      }
      if(data.length!=0){
        getOptions["series"][0]["data"]=data
        indexMapChart.setOption(getOptions)
      }
    }
}


function echartMapTips(title){
  var tempArr=[];
  stationList.forEach((item=>{
      var borough=item["borough"];
      if(borough.indexOf(title)!=-1){
          tempArr.push(item);
      }
  }))
  var schoolType=showSchoolDistribution(tempArr)
  return `<div style="padding:10px;">
    <p>${title}</p>
    <p>幼儿园:${schoolType["school_y"].length} </p>
    <p>小学:${schoolType["school_x"].length}</p>
    <p>中学:${schoolType["school_z"].length}</p>
    </div>` 
}



function  showSchoolDistribution(tempArr){
  let school_y=[];
  let school_x=[];
  let school_z=[];
  tempArr.forEach(item=>{
      var type=item["type"];
      switch(type){
          case "幼儿园":
              school_y.push(item);
              break;
          case "小学":
              school_x.push(item);
              break;
          case "中学":
              school_z.push(item);
              break;
          default:
              break;
      }
  })
  return {
      school_y,school_x,school_z
  }
}




export {threeColor_echart,drawIndexMap,indexMapChart}