<template>
  <!--学习地图组件1开始-->
  <div class="common_learningmap_pc_1">
    <div class="map-top">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="learningtool-title">
              <span class="sp1">学习地图</span>
            </div>
            <span class="learningtool-title-tip">对学习地图的简单简介，一小段话进行描述即可，老年同学可选择所在的分站平台进行学习</span>
          </div>
        </div>
      </div>
    </div>
    <div class="map-body">
      <div class="container">
        <div class="row">
          <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
            <!-- <img src="images/map.png" alt=""> -->
            <div id="study-map1" class="map-sizebg"></div>
          </div>
          <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
            <div class="map-body-right">
              <span class="sp1">选择分站平台</span>
              <ul class="ul1">
                <li
                  v-for="(item,index) in cityList" :key="index" :id="item.name" @click="clvkclass(item,index);getArea(item.id,item)" :class="{active:index==choose}">
                  <a href="javascript:;">{{item.name}}</a>
                </li>
              </ul>
              <ul class="ul2">
                <li @click="getSite(item)"
                  v-for="(item,index) in areaList" :key="index" >
                  <a href="javascript:;">{{item.name}}</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--学习地图组件1结束-->
</template>

<script>
  import {httpPost} from '../../../src/utils/utils';
  import formMixin from '../../../src/mixins/formMixin';
  import lenye_base from 'lenye_base';
  import echarts from 'echarts';
  import jiangsushi from '../../theme-chalk/src/images/jiangsu-map.json'
  //import anhui from './anhui.json'
  //import hefei from './hefei.json'
  import $ from 'fy-kit';
  import msg from '../../message';
export default {
  name: 'ElCommonLearningmapPc1',
  mixins: [formMixin],
  model: {},
  data(){
    return {
      //选中
      choose:null,
      cityList:[],
      areaList:[],
      reqData:{
        parentId:"0100104",//江苏省id
        cascade:1,
        ptId:''
      },
      cityName:''
    }
   },
   created() {
      this.siteData = lenye_base.site_data.getsiteData();
      this.reqData.ptId = this.siteData.ptId;
   },
   mounted() {
     this.getArea();
     this.getMap();
   },
   computed: {},
   methods: {
     getSite({id}){
        $.util
        .ajax(
          lenye_base.base_data.getapiUrl() +
            "/base-service/api/ptsetSite/queryList.do",
          lenye_base.base_data.getformatting({
            areaId:id
          })
        )
        .then(res => {
          if (res.success == "1") {
            if(res.data.length){
              var url = res.data[0].siteDomain;
              if(url){
                var url = res.data[0].siteDomain;
                var newUrl = url.split(",")[0]
                var http = "http://";
                if(newUrl.split(http).length===1){
                    newUrl = http+newUrl
                }
                window.open(newUrl);
              }else{
                msg.warning('无有效站点地址！');
              }
            }else{
              msg.warning('暂未开通站点！');
            }
          } else {
            msg.error(res.message);
          }
        });
     },
      getArea(pId,list){
        if(pId){
          this.reqData.parentId=pId;
        }
        $.util
        .ajax(
          lenye_base.base_data.getapiUrl() +
            "/base-service/api/cfgArea/querylistTree.do",
          lenye_base.base_data.getformatting(this.reqData)
        )
        .then(res => {
          if (res.success == "1") {
           if(pId){
              res.data.unshift(list);
              this.areaList = res.data;
            }else{
              this.cityList = res.data;
            }
          } else {
            msg.error(res.message);
          }
        });
      },

      getMap(){
        let center = {
          /*"南京市":[118.767413,32.041544],
          "无锡市":[120.301663,31.574729],
          "徐州市":[117.184811,34.261792],
          "常州市":[119.946973,31.772752],
          "苏州市":[120.619585,31.299379],
          "南通市":[120.864608,32.016212],
          "连云港市":[119.178821,34.600018],
          "淮安市":[119.021265,33.597506],
          "盐城市":[120.139998,33.377631],
          "扬州市":[119.421003,32.393159],
          "镇江市":[119.452753,32.204402],
          "泰州市":[119.915176,32.484882],
          "宿迁市":[118.275162,33.963008]*/
        };

        let option = {
          visualMap: {
            show: false,
            max: 100,
            seriesIndex: [3],
            inRange: {
              color: ['#A5DCF4', '#006edd']
            }
          },
          geo: [{
            map: 'js',
            roam: false, //是否允许缩放
            zoom: 1.1, //默认显示级别
            scaleLimit: {
              min: 0,
              max: 3
            }, //缩放级别
            itemStyle: {
              normal: {
                areaColor: '#013C62',
                shadowColor: '#d2dde1',
                shadowBlur: 20,
                shadowOffsetX: -5,
                shadowOffsetY: 15,
              }
            },
            tooltip: {
              show: false
            }
          }],
          series: [
            //地图
            {
              type: 'map',
              mapType: 'js',
              geoIndex: -1,
              zoom: 1.1, //默认显示级别
              label: {
                show: true,
                color: '#000000',
                emphasis: {
                  color: 'white',
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  borderColor: '#2980b9',
                  borderWidth: 1,
                  areaColor: '#d2dde1'
                },
                emphasis: {
                  areaColor: '#3e8f88',
                  borderWidth: 0,
                  color: 'green'
                }
              },
              /*data: Object.keys(center).map(name => {return {
                name: name,
                value: Math.random()*100
              }})*/
            }
          ]
        };
        //const echarts = require('echarts');
        echarts.registerMap('js', jiangsushi);
        let myChart = echarts.init(document.getElementById('study-map1'));
        myChart.setOption(option);
        myChart.on("click",function(param){
          console.log(param.name);
          this.cityName = param.name;
          document.getElementById(param.name).click();
        });

      },
      clvkclass(item,index){
        //alert(index)
        this.choose=index;
      }
   },

};
</script>
