<template>
  <div class="panel-container">
    <div style="width: 96%;height: 97%;margin: 0 2%; position:relative;">
      <div style="width: 100%;height:100%; position: relative;">
        <!-- 彩色数字条 -->
        <div class="totalBox">
          <ul>
            <li v-for="(value,index) in totalData" :key="index">
              <p>{{value.name}}</p>
              <h3>{{value.num}}</h3>
            </li>
          </ul>
        </div>
        <!-- <div style="position:absolute;bottom:.02rem; right:.02rem; z-index:99;">
          <img @click="changeMap(1)" :src="require('@/assets/images/shiliang_1.png')" />
          <img @click="changeMap(2)" :src="require('@/assets/images/shiliang_1.png')" />
        </div> -->
        <!-- 地图 -->
        <div class="mapBox" id="map"></div>
        <!-- 视频播放器 -->
        <div v-show="videoShow" class="videoBox">
          <span class="videoClose" @click="videoShow = false;videoUrl = '';">关闭</span>
          <div class="prism-player" id="player-con"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import L from 'leaflet';
import {tiledMapLayer, wmtsLayer} from '@supermap/iclient-leaflet';
import 'leaflet/dist/leaflet.css'
import '@supermap/iclient-leaflet/dist/iclient-leaflet.css'
// import '../../../static/videoPlay/video.js'
// import '../../../static/videoPlay/video.css'

export default {
  components:{
  },
  data() {
    return {
      rquestUrl: 'http://10.18.0.5:8090',
      map: null,
      totalData:[
        { name: "面积", num: "100" },
        { name: "门户接入", num: "100" },
        { name: "一卡通用户", num: "100" },
        { name: "数据共享", num: "100" },
        { name: "物联网", num: "100" },
        { name: "视频", num: "100" },
        { name: "云资源", num: "100" }
      ],
      videoToken: '',
      videoTimer: null,
      videoCount: 60,
      videoChannels: [],
      videoUrl: '',
      videoShow: false,
      player: null,
      trafficData:[]
    };
  },
  created() {
    
  },
  mounted() {
    this.initMap()
    this.getVideoToken()
    
  },
  methods: {
    ...mapActions(['changeStatus']),
    // 获取交通点位
    getTraffic(){
      let params = {
        request: 'getFeature',
        page: '0',
        rp: '2000',
      }
      this.request({
        url: 'http://10.18.0.3:8080/webframe/biz/httpproxy/httpproxy.jsp?url=http://10.18.0.3:8080/dfc/services/sgssfs/2486?',
        method: 'get',
        params,
      }).then(res => {
        // 注意：有些数据没有名称，编码和坐标信息，不知道是什么数据
        this.trafficData = res.rows;
        this.trafficMarker();
        // if (res.ret_code == 200) {
        //   let xAxisData = [];
        //   let seriesData = [];
        //   res.data.forEach(item=>{
        //     xAxisData.push(item.LX);
        //     seriesData.push(item.COUNT);
        //   })
        //   this.school_num.xAxisData = xAxisData;
        //   this.school_num.seriesData = seriesData;
        //   // 学校数量echart
        //   this.callEchart('school_num_box',this.school_num, 1);
        // }
      })
    },
    getTest(){
      let params = {
        request: 'getFeature',
        page: '0',
        rp: '2000',
      }
      this.request({
        url: 'http://10.18.0.3:8080/webframe/biz/httpproxy/httpproxy.jsp?url=http://10.18.0.3:8080/dfc/services/sgssfs/2486?',
        method: 'get',
        params,
      }).then(res => {
        // 注意：有些数据没有名称，编码和坐标信息，不知道是什么数据
        this.trafficData = res.rows;
        this.trafficMarker();
        // if (res.ret_code == 200) {
        //   let xAxisData = [];
        //   let seriesData = [];
        //   res.data.forEach(item=>{
        //     xAxisData.push(item.LX);
        //     seriesData.push(item.COUNT);
        //   })
        //   this.school_num.xAxisData = xAxisData;
        //   this.school_num.seriesData = seriesData;
        //   // 学校数量echart
        //   this.callEchart('school_num_box',this.school_num, 1);
        // }
      })
    },
    // 添加交通图标
    trafficMarker(){
      var redIcon = L.icon({
        iconUrl: require('@/assets/images/icon-camera-red.png'),
        iconSize: [40, 40],
        shadowSize: [50, 64],
      });
      let markerArr = []
      this.trafficData.map((item,index)=>{
        L.marker([item.SMY, item.SMX], {icon: redIcon,title: item.NAME, riseOnHover:true, data:item.DEVICECODE})
        .addTo(this.map)
        .on('click', (e) => {
          this.videoUrl = ''
        })
      })
    },
    // 获取视频相关参数
    getVideoToken(){
      let params = {
        "userName" : "system",
        "pwd" : "system123",  
      }
      this.request({
        url: this.rquestUrl+'/api/token',
        method: 'get',
        params,
      }).then(res => {
        if (res.code == 1) {
          this.videoToken = res.data;
          this.getChannels();
          this.videoTimer = setInterval(() => {
            if(this.videoCount > 1 ){
              this.videoCount--;
            }else{
              this.getFlushVideoToken()
            }
          }, 1000);
        }
      })
    },
    // 刷新token
    getFlushVideoToken(){
      this.videoCount = 60;
      let params = {
        "token" : this.videoToken,
      }
      this.request({
        url: this.rquestUrl+'/api/flushToken',
        method: 'get',
        params,
      }).then(res => {
        if (res.code == 1) {
          this.videoToken = res.data;
        }
      })
    },
    // 获取所有通道
    getChannels(){
      let params = {
        "token" : this.videoToken,
      }
      this.request({
        url: this.rquestUrl + '/api/channels',
        method: 'get',
        params,
      }).then(res => {
        if (res.code == 1) {
          this.videoChannels = res.data;
          this.vidioMarker();
        }
      })
    },
    // 获取视频
    getVideo(channelId){
      this.videoShow = true;
      let params = {
        "token" : this.videoToken,
        "channelId": channelId
      }
      this.request({
        url: this.rquestUrl + '/api/video',
        method: 'get',
        params,
      }).then(res => {
        if (res.code == 1) {
          this.videoUrl = res.data.url;
          this.videoPlay()
        }
      })
    },
    // 视频播放
    videoPlay(){
      !this.player && (this.player = new Aliplayer({
        id: 'player-con',
        width: '100%',
        height: '100%',
        autoplay: true,  //自动播放
        isLive: true,
        // rePlay: true,  // 重复播放
        //支持播放地址播放,此播放优先级最高
        source : this.videoUrl,
        // //播放方式二：点播用户推荐
        // vid : '1e067a2831b641db90d570b6480fbc40',
        // playauth : 'ddd',
        // cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
        // //播放方式三：仅MPS用户使用
        // vid : '1e067a2831b641db90d570b6480fbc40',
        // accId: 'dd',
        // accSecret: 'dd',
        // stsToken: 'dd',
        // domainRegion: 'dd',
        // authInfo: 'dd',
        // //播放方式四：使用STS方式播放
        // vid : '1e067a2831b641db90d570b6480fbc40',
        // accessKeyId: 'dd',
        // securityToken: 'dd',
        // accessKeySecret: 'dd',
        // region:'cn-shanghai',//eu-central-1,ap-southeast-1
      },function(player){
        console.log('播放器创建好了。')
      }));

      // 切换视频地址
      this.player && this.player.loadByUrl(this.videoUrl);
      
      // 播放器暂停/播放
      var _video = document.querySelector('video');
      this.player.on('play', function(e) {
        _video.removeEventListener('click', play);
        _video.addEventListener('click', pause);
      });
      this.player.on('pause', function(e) {
        _video.removeEventListener('click', pause);
        _video.addEventListener('click', play)
      });

      function play() {
        if (this.player) this.player.play();
      }

      function pause() {
        if (this.player) this.player.pause();
      }
      
    },
    initMap(){
      let res = [1.406249999998048, 0.703124999999024, 0.351562499999512, 0.175781249999756, 0.087890624999878, 0.043945312499939, 0.0219726562499695, 0.01098632812498475, 0.005493164062492375, 0.0027465820312461875, 0.0013732910156230938,  0.0006866455078115469, 0.00034332275390577344, 0.00017166137695288672, 0.00008583068847644336, 0.00004291534423822168, 0.00002145767211911084,  0.00001072883605955542, 0.00000536441802977771, 0.000002682209014888855, 0.0000013411045074444275];
      
      // var bluUrl = tiledMapLayer('http://10.18.0.3:8081/geoesb/proxy/services/maps/rest/cb82b38250904ff38b7966c6dc47bf8d/7c0a01e2f80f4c8a9ecd1e9e0053a310', {noWrap:true});
      var bluUrl = wmtsLayer('http://10.18.0.3:8081/geoesb/proxy/00555e76078e4d15a39ac10fa28f97c3/886e60bb7e014f22a707de23e6f6505d', {noWrap:true})
      var grayUrl = wmtsLayer('http://10.18.0.3:8081/geoesb/proxy/dbddf7afb8c84f22865dd42f29c58ab1/886e60bb7e014f22a707de23e6f6505d',{noWrap:true});
      var whiteUrl = wmtsLayer('http://10.18.0.3:8081/geoesb/proxy/143f8cbbe83e44faaa15ae87cb93c4ad/886e60bb7e014f22a707de23e6f6505d',{noWrap:true});
      this.map = L.map('map', {
        center: [25.771484971135607, 114.87543404061392],
        // maxZoom: 20,
        // minZoom: 13,
        zoom: 15,
        maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180)),
        crs: L.Proj.CRS("EPSG:4326",
        {
          origin: L.point(-180, 90),
          resolutions: res,
          bounds: L.bounds([-180, -90], [180, 90]),
        }),
        // 设置默认显示的图层数组
        layers: [bluUrl]
      });
      var baseMaps = {
        // '<img src="../../../static/shiliang_1.png" />': grayUrl,
        // '<img src="../../../static/shiliang_1.png" />': bluUrl,
        '影像图': grayUrl,
        '蓝色图': bluUrl,
        '矢量图': whiteUrl,
      };
      L.control.layers(baseMaps).addTo(this.map);
      
      // 初始化图层 / 单个地图使用
      // let url = "http://10.18.0.3:8081/geoesb/proxy/00555e76078e4d15a39ac10fa28f97c3/886e60bb7e014f22a707de23e6f6505d";
      // let layer = wmtsLayer(url,
      // {
      //   layer: "rjxqdzdt",
      //   style: "default",
      //   tilematrixSet: "CustomCRS4490Scalerjxqdzdt",
      //   format: "image/png",
      //   maxZoom: 20
      // });
      // layer.addTo(this.map);

      // 获取交通专项坐标信息
      // this.getTraffic();
       this.getTest();

      // 地图点击事件
      this.map.on("click",(e)=>{
        this.videoShow = false;
        this.videoUrl = '';
        // console.log(this.getCenter());
        // console.log(this.getZoom());
      })
    },
    changeMap(id){
      console.log(L.control.layers()._layers)
      // this.map.removeLayer(bluUrl)
      // this.map.addLyer(grayUrl)
      
    },
    // 添加图标
    vidioMarker(){
      var greenIcon = L.icon({
        iconUrl: require('@/assets/images/icon-camera-blu.png'),
        iconSize: [40, 40],
        shadowSize: [50, 64],
      });
      let markerArr = []
      this.videoChannels.map((item,index)=>{
        L.marker([item.gpsY, item.gpsX], {icon: greenIcon,title: item.name, riseOnHover:true, data:item.channelId})
        .addTo(this.map)
        .on('click', (e) => {
          this.videoUrl = ''
          this.getVideo(e.target.options.data);
          // this.changeStatus('MapVideo')  // 切换页面
        })
      })
      // let markerLayer = L.layerGroup(markerArr).addTo(this.map)
      // markerLayer.addTo(this.map)
      // let marker = L.marker([25.776472928388976,114.86362913899589], {icon: greenIcon,title:'我是视频', riseOnHover:true, data:'22222'}).addTo(this.map);
      // marker.on('click', (e) => {
      //   this.getVideo();
      //   console.log(e.target.options.data)
      //   // this.changeStatus('MapVideo')  // 切换页面
      // })
    },
  },
  destroyed(){
    clearInterval(this.videoTimer)
  }
};
</script>

<style scoped>
.panel-container {
  width: 100%;
  flex: 1.1 !important;
  height: 100%;
  overflow: auto;
}
.mapBox{
  width: 100%;
  position:absolute;
  top: 0;
  bottom:0;
  overflow: hidden;
  z-index: 9;
}
.totalBox ul{
  display: flex;
  justify-content: space-between;
  position:absolute;
  top: .1rem;
  right: .9rem;
  left:.9rem;
  z-index: 99;
} 
.totalBox ul li p{
  font-size: .14rem;
  margin-bottom: .12rem;
}
.totalBox ul li h3{
  font-size: .32rem;
  font-family: DS-DigitalBold;
}
.totalBox ul li:nth-last-child(1) h3{
  color:#52bd4b;
}
.totalBox ul li:nth-last-child(2) h3{
  color:#d33c41;
}
.totalBox ul li:nth-last-child(3) h3{
  color:#3deef8;
}
.totalBox ul li:nth-last-child(4) h3{
  color:#ce14cd;
}
.totalBox ul li:nth-last-child(5) h3{
  color:#ffbe00;
}
.totalBox ul li:nth-last-child(6) h3{
  color:#beff0a;
}
.totalBox ul li:nth-last-child(7) h3{
  color:#52bd4b;
}
.videoBox{
  position:absolute;
  bottom:.02rem; 
  right:.02rem;
  z-index:99;
  width:3.8rem;
  height:2.5rem;
  background:#eee;
}
.videoClose{
  position: absolute;
  right: .05rem;
  top: .06rem;
  display: inline-block;
  color:#fff;
  font-size: .09rem;
  z-index:99;
  cursor: pointer;
}
</style>
<style>
.leaflet-container .leaflet-control-attribution,.leaflet-container a>img{
  display:none;
}
.leaflet-control-layers-selector{
  width: .05rem;
  height: .05rem;
}
.leaflet-container{
  background: none !important;
}
::-webkit-scrollbar-thumb{
  background-color: rgba(255, 255, 255,0) !important;
}
</style>