<template>
  <!--学习地图组件2开始-->
  <div class="common_learningmap_pc_2">
    <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>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="learningmap-nav">
            <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <div class="learningmap-nav-map" id="study-map2">
                  <!-- <img src="images/map.png" alt=""> -->

                </div>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <div class="learningmap-nav-screen">
                        <span class="sp1">选择区域：
                           <select name="" @change="onChange" id="" v-model="selected">
                              <option value="-1">全部</option>
                              <option :value="list.name" v-for="(list,i) in cityList" :key="i">{{list.name}}</option>

                           </select>
                        </span>
                 <!-- <span class="sp1">机构类型：
                           <select name="" id="">
                              <option value="">全部</option>
                              <option value="">开放大学</option>
                           </select>
                        </span> -->
                </div>
                <div class="learningmap-nav-list" >

                  <div class="learningmap-nav-list-part uLi" @click="getDetail(list,0,$event)" v-for="(list,i) in queryList" :key="i"><!--循环-->
                    <span class="sp1">{{list.orgName}}</span>
                    <ul class="ul1 clearfix">
                      <li style="width: 100%;"><span>地址：</span>{{list.orgAddressDetail}}</li>
                      <li><span>电话：</span>{{list.orgTelephone}}</li>
                      <li><span>网址：</span><a :href="'//'+list.orgPortalSiteDomain | orgPortalSiteDomain">{{list.orgPortalSiteDomain | orgPortalSiteDomain}}</a></li>
                    </ul>
                  </div>




                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <div class="learningmap2-left">
            <span class="sp1">

              <img v-if="detail.orgImgUrl" :src="detail.orgImgUrl" alt="">
              <img v-else src="../../theme-chalk/src/images/map-school-pic.png" alt="">

            </span>
            <span class="sp2">
                  <ul>
                     <span class="spp1">{{detail.orgName}}</span>
                     <li><span>地址：</span>{{detail.orgAddressDetail}}</li>
                     <li><span>电话：</span>{{detail.orgTelephone}}</li>
                     <li><span>邮编：</span>{{detail.orgPostalCode}}</li>
                     <li><span>网址：</span><a :href="'//'+detail.siteDomain | orgPortalSiteDomain">{{detail.siteDomain |  orgPortalSiteDomain}}</a></li>
                  </ul>
               </span>
          </div>
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
          <div class="learningmap2-right">
            <ul class="ul1">
              <li :class="{'active':tab=='1'}" @click="tab='1'"><a href="javascript:void(0)">机构介绍</a></li>
             <!-- <li><a href="">培训班报名</a></li> -->
              <li  :class="{'active':tab=='2'}" @click="tab='2'"><a href="javascript:void(0)">活动报名</a></li>
              <li  :class="{'active':tab=='3'}" @click="tab='3'"><a href="javascript:void(0)">在线课程</a></li>
            </ul>
            <div v-show="tab=='1'" class="learningmap2-right-intro" v-html="detail.orgIntroduction">

            </div>
           <!-- <div class="learningmap2-right-class">
              <div class="list-part">
                <span class="sp1">2020年秋季书法培训第一期<a href="">查看详情>></a></span>
                <span class="sp2">报名费用<i>免费</i></span>
                <span class="sp3">报名时间：<i>2020.10.01-2020.10.31</i></span>
              </div>

            </div>-->
            <div v-show="tab=='2'" class="learningmap2-right-baoming">
              <div class="list-part2" v-for="(list,i) in activeLists" :key="i"><!--循环-->
                <div class="row">
                  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                           <span class="list-part2-img">
                              <img v-if="list.actPhoto" :src="list.actPhoto" alt="">
                              <img v-else src="../../theme-chalk/src/images/jslndx-active-pic01.png" alt="">
                           </span>
                  </div>
                  <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                    <div class="list-part2-info">
                      <span class="sp1">{{list.actTitle}}</span>
                      <ul class="list-part2-ul1">
                        <li><span>活动时间：</span>{{list.actStartDate}} 至 {{list.actEndDate}}</li>
                        <li><span>活动区域：</span>{{list.actAreaId}}</li>
                        <li><span>活动类型：</span>{{list.actType=='1'?'宣传活动':'评比类活动'}}</li>
                      </ul>
                      <span class="sp2"><a target="_blank" :href='"/activedetail?id="+list.actId+"&orgId="+list.orgId'>活动详情</a></span>
                    </div>
                  </div>
                </div>
              </div>

              <div style="margin-top:30px;">
                  <el-pagination
                  background
                  layout="total, sizes, prev, pager, next, jumper"
                  :page-sizes="[10, 20, 50, 100]"
                  @size-change="handleSizeChange0"
                  @current-change="handleCurrentChange0"
                  :current-page="currentPage0"
                  :total="totalCount0">
                  </el-pagination>
                </div>

            </div>
            <div v-show="tab=='3'" class="learningmap2-right-online">
              <div class="row">

                <div v-for="(list,i) in courseLists" :key="i" class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><!--循环-->
                  <div class="showlist-part" @click="toDetail(list)">
                           <span class="sp1">
                               <a href="">
                                 <img v-if="list.csPhoto" :src="list.csPhoto" alt="">
                                 <img v-else src="../../theme-chalk/src/images/jslndx-pic02.png" alt="">
                              </a>
                               <span class="spp1">
                                   <span class="tip1">浏览人数：{{Number(list.browseNum)}}</span>
                                   <!--<span class="tip2">课程</span> -->
                               </span>
                           </span>
                    <span class="sp2"><a href="javascript:void(0)">{{list.csName}}</a></span>
                    <span class="sp3">发布日期：{{list.csPubDate}}</span>
                  </div>
                </div>


              </div>

              <div style="margin-top:30px;">
                  <el-pagination
                  background
                  layout="total, sizes, prev, pager, next, jumper"
                  :page-sizes="[10, 20, 50, 100]"
                  @size-change="handleSizeChange1"
                  @current-change="handleCurrentChange1"
                  :current-page="currentPage1"
                  :total="totalCount1">
                  </el-pagination>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--学习地图组件2结束-->
</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 pagination from "../../pagination";
  import msg from "../../message";
export default {
  name: 'ElCommonLearningmapPc2',
  mixins: [formMixin],
  model: {},
  data(){
    return {
      tab:'1',
      //选中
      selected:"-1",
      choose:null,
      cityList:[],
      areaList:[],
      reqData:{
        parentId:"0100104",
        cascade:1,
        ptId:''
      },
       orgCityId:"",//江苏省id
      queryList:[],
      detail:{},
      activeLists:[],
      courseLists:[],
      page0:1,
      page1:1,
      rows0:10,
      rows1:10,
      totalCount0:0,
      totalCount1:1,
      currentPage0:1,
      currentPage1:1,
      JSONS:{},
      option:{

      },
      myChart:null,

    }
   },
  components: {
    msg,
    pagination
  },
  filters:{
    orgPortalSiteDomain(val){
      if(val){
        return  val.split(',')[0]
      }else{
        return '';
      }

    }
  },
   mounted() {
    this.getMap();
    this.getArea();
    this.list();
   },
   created() {
      //this.JSON();
      this.siteData = lenye_base.site_data.getsiteData();
      this.reqData.ptId = this.siteData.ptId;

   },
   computed: {},
   methods: {
     /*JSON(){
       $.util
        .ajax(
          lenye_base.base_data.getapiUrl() +
            "/base-service/common/cfgAreaMap/queryById.do",
          lenye_base.base_data.getformatting({
            "areaId":"0100104"
          })
        )
        .then(res => {
          if (res.success == "1") {
            var mapJson = res.data.mapJson;
            console.log(mapJson)
            this.JSONS =  mapJson;
          } else {
            msg.error(res.message);
          }
        });
     },*/
     toDetail(list){
       window.open('/coursedetail?id='+list.csId+"&orgId="+list.orgId)

     },
     handleSizeChange0(val) {
        this.rows0 = val;
        this.activeList();

    },
    handleCurrentChange0(val) {
        this.page0 = val;
        this.activeList();
    },
    handleSizeChange1(val) {
        this.rows1 = val;
        this.courseList();

    },
    handleCurrentChange1(val) {
        this.page1 = val;
        this.courseList();
    },
   async getUrl(siteId){
     if(!siteId){
       msg.warning("接口未返回站点Id！")
       return  false;
     }
     let res =  await $.util
        .ajax(
          lenye_base.base_data.getapiUrl() +
            "/base-service/api/ptsetSite/queryById.do",
          lenye_base.base_data.getformatting({
            siteId
          })
        )
        if (res.success == "1") {
          return res.data.siteDomain;
        } else {
            msg.error(res.message);
        }
    },
     async getDetail({orgId},num,ev){



       let res = await  $.util
        .ajax(
          lenye_base.base_data.getapiUrl() +
            "/reporting-service/api/rpOrganization/queryById.do",
          lenye_base.base_data.getformatting({
            orgId:orgId
          })
        )
        if (res.success == "1") {

            var siteDomain =  await this.getUrl(res.data.orgPortalSiteId);
            res.data['siteDomain'] = siteDomain;
            this.detail= res.data;
            this.orgId = orgId;
            this.activeList();
            this.courseList();

             if(num){
                $._.default('.uLi').eq(0).addClass('actives1');

            }else{
              var $this =  $._.default(ev.target);
                $this.parents('.learningmap-nav-list').find('.uLi').removeClass('actives1');
                $this.parents('.uLi').addClass('actives1');
            }
          } else {
            msg.error(res.message);
          }

     },
     courseList(){
        $.util
        .ajax(
          lenye_base.base_data.getapiUrl() +
            "/reporting-service/api/rpOrganizationCourseRel/queryPage.do",
          lenye_base.base_data.getformatting({
            orgId:this.orgId,
            page:this.page1,
            rows:this.rows1,
          })
        )
        .then(res => {
          if (res.success == "1") {
            this.courseLists= res.data;
            this.totalCount1 = res.totalCount;
          } else {
            msg.error(res.message);
          }
        });
     },
     activeList(){
        $.util
        .ajax(
          lenye_base.base_data.getapiUrl() +
            "/reporting-service/api/rpOrganizationActivityRel/queryPage.do",
          lenye_base.base_data.getformatting({
            orgId:this.orgId,
            page:this.page0,
            rows:this.rows0,
          })
        )
        .then(res => {
          if (res.success == "1") {
            this.activeLists= res.data;
            this.totalCount0 = res.totalCount;
          } else {
            msg.error(res.message);
          }
        });
     },
     list(){
       $.util
        .ajax(
          lenye_base.base_data.getapiUrl() +
            "/reporting-service/api/rpOrganization/queryPage.do",
          lenye_base.base_data.getformatting({
            orgCityId:this.orgCityId,
            orgPubStatus:1
          })
        )
        .then(res => {
          if (res.success == "1") {
            this.queryList = res.data;
            if(res.data.length){
               this.getDetail(res.data[0],1)
            }else{
              this.courseLists= [];
              this.totalCount1 = 0;
              this.activeLists= [];
              this.totalCount0 = 0;
              this.detail = {};
            }
          } else {
            msg.error(res.message);
          }
        });
     },
     //事件切换
     onChange(v){
       console.log(this.selected,1233)
       if(this.selected=='-1'){
          this.orgCityId = "";
       }else{
         this.orgCityId =  $.array.getObjByEle(this.cityList,'name',this.selected).id;
       }

       this.list();
       this.changeMap();
     },
      getArea(pId){
        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.areaList = res.data;
            }else{
              this.cityList = res.data;
            }
          } else {
            msg.error(res.message);
          }
        });
      },
       getMap(){
        this.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: [

              ]

            }
          ]
        };
        //const echarts = require('echarts');
        echarts.registerMap('js', jiangsushi);
        this.myChart = echarts.init(document.getElementById('study-map2'));
        this.myChart.setOption(this.option);
        this.myChart.on("click",(param)=>{
          this.selected = param.name;
          this.onChange();
          this.changeMap();
        });

      },
      changeMap(){
        this.option.series[0].data = [{name: this.selected, selected: true}]
        this.myChart.setOption(this.option);
      },
      query(){
        $.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.areaList = res.data;
            }else{
              this.cityList = res.data;
            }
          } else {
            msg.error(res.message);
          }
        });
      }
   },
};
</script>
