<template>
  <div class="el-common_learningmap_mobile_1">
    <div class="common_learningmap_mobile_1">
      <div class="big-title">
          <span class="sp1">学习地图</span>
          <!--<span class="sp2"><a href="">更多</a></span>-->
      </div>
      <div class="map-mainbody">
          <div id="study-map1" class="map-sizebg"></div>
          <span class="choose-btn">
            <a @click="selectPt" href="javascript:void(0)">选择分站平台</a>
          </span>
          <div class="choose-city-bg" style="display: none;"><!--选择分站-->
            <div class="choose-city-body">
                <div id="choose-city"></div>
            </div>
          </div>
      </div>

    </div>

    <van-popup v-model="showPicker" round position="bottom">
        <van-picker
        ref="picker"
        show-toolbar
        :columns="columns"
        @change="onChange"
        @cancel="showPicker = false"
        @confirm="onConfirm"
         />




    </van-popup>



  </div>
</template>

<script>
  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 $ from 'fy-kit';
  import { Button,ActionSheet,Picker,Popup,Area,Toast } from 'vant';


export default {
  name: 'ElCommonLearningmapMobile1',
  mixins: [formMixin],
  model: {},
  components:{
    [Button.name]: Button,
    [ActionSheet.name]:ActionSheet,
    [Picker.name]:Picker,
    [Popup.name]:Popup,
    [Area.name]:Area,
    [Toast.name]:Toast,
  },
  data(){
    return {

      showPicker:false,
      columns:[
        {
          values: [],
          defaultIndex: 0,
        },
        {
          values: [],
          defaultIndex: 0,
        },
      ],
      selected:'',
      orgCityId:'',
      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: {
     onConfirm(value) {
      this.showPicker = false;
      this.getSite($.array.getObjByEle(this.areaList,'name',value[1]));

    },
     onChange(picker, values,index) {
       if(!index){
         var getId =$.array.getObjByEle(this.cityList,'name',values[0]).id
         this.getArea(getId);
       }
    },
      selectPt(){

       this.columns[0].values =  $.array.getArrById(this.cityList,'name');
       var getId =$.array.getObjByEle(this.cityList,'name',this.columns[0].values[0]).id
       this.getArea(getId);
        this.showPicker = true;

      },
       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{
                Toast.fail('无有效站点地址！');
              }
            }else{
              Toast.fail('暂未开通站点！');
            }
          } else {
            Toast.fail(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){
             this.columns[1].values =  $.array.getArrById(res.data,'name');
              //res.data.unshift(list);
              this.areaList = res.data;
            }else{
              this.cityList = res.data;
            }
          } else {
            Toast.fail(res.message);
          }
        });
      },

      getMap(){
        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
              }})*/
            }
          ]
        };
        echarts.registerMap('js', jiangsushi);
        let myChart = echarts.init(document.getElementById('study-map1'));
        myChart.setOption(option);
        myChart.on("click",(param)=>{
          this.cityName = param.name;
          this.getSite($.array.getObjByEle(this.cityList,'name',param.name));
        });

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



   },
};
</script>
