<template>
  <div class="space-time-container">
    <div class="layers-box" ref="scrollBox" @mousewheel="handleScroll">
      <ul :style="{'width':layerList.length*154+'px'}" >
        <p v-if="layerList<=0" style="color:#fff;line-height:0px;padding-top:35px;font-size:14px;">暂无数据</p>
        <li v-for="(item,index) in layerList" :key="index" :style="{'border-color':index==currentIndex?'#409eff':'#fff','color':index==currentIndex?'#409eff':'#fff'}" @click="changeLayer(index)">
          <p class="layername"><span>{{item.name}}</span></p>
          <p class="layertime"><span>{{item.collecttime}}</span></p>
        </li>
      </ul>
    </div>
    <div style="width:280px;margin:0px auto;">
      <div class="operate">
        <div class="btn" @click="pausePlay();$emit('drawPolygon');">
          <el-icon><Crop /></el-icon>绘制
        </div>
        <div class="btn" @click="pausePlay();deleteLayer()">
          <el-icon><Delete /></el-icon>删除
        </div>
        <div class="btn" @click="pausePlay();deleteLayer();searchService()">
          <el-icon><Search /></el-icon>查询
        </div>
      </div>
      <div class="last-layer" @click="currentIndex--;arrowChangeLayer(currentIndex)">
        <el-icon><ArrowLeftBold /></el-icon>
      </div>
      <div class="play-btn" @click="autoplay(currentIndex)">
        <el-icon v-if="!isplay"><VideoPlay /></el-icon>
        <el-icon  v-if="isplay"><VideoPause /></el-icon>
      </div>
      <div class="next-layer" @click="currentIndex++;arrowChangeLayer(currentIndex)">
        <el-icon><ArrowRightBold /></el-icon>
      </div>
    </div>


  </div>
</template>
<script>
import { postMethodCommon } from '../../../api/common'
export default {
  name:"SpaceTime",
  props:["wktData"],
  watch:{
    "wktData":function(e){
      if(this.wktData){
        this.searchService();
      }
    }
  },
  data(){
    return {
      currentIndex:-1,
      isplay:false,
      timer:null,
      layerList:[]
    }
  },
  methods:{   
    handleScroll(e) {
        var scrollNum = this.$refs.scrollBox;
        //deltaY属性在向下滚动时返回正值，向上滚动时返回负值，否则为0
        scrollNum.scrollLeft = scrollNum.scrollLeft + e.deltaY;
    },
    deleteLayer(){
      this.$emit('deletePolygon');
      this.layerList = [];
    },
    arrowChangeLayer(index){
      if(this.currentIndex<0){
        this.currentIndex = this.layerList.length - 1;
        index = this.layerList.length - 1;
      }
      if(this.currentIndex>=this.layerList.length){
        this.currentIndex = 0;
        index = 0;
      }

      if(this.isplay == true){
        clearInterval(this.timer);
        this.isplay = false;
      }
      this.$emit("changeSpaceTimeLayer",this.layerList[index])
      this.currentIndex = index;
    },
    changeLayer(index){
      this.$emit("changeSpaceTimeLayer",this.layerList[index])
      this.currentIndex = index;
    },
    autoplay(){
      let _this = this;
      if(this.isplay == true){
        clearInterval(this.timer);
      }else{
        this.timer = setInterval(function(){
          _this.currentIndex++;
          if(_this.currentIndex>_this.layerList.length-1){
            _this.currentIndex = 0;
          }
          _this.changeLayer(_this.currentIndex);
        },5000)
      }
      this.isplay = !this.isplay;
    },
    pausePlay(){
      this.isplay = false;
      clearInterval(this.timer);
    },
    searchService(){
      postMethodCommon("/CimService/GetServiceByWkt?wkt="+this.wktData).then(res=>{
        if(res.code == 200){
          this.layerList = res.result
          //根据事件排序历史影像数组         
          this.layerList.sort((a,b)=>{
            let date_a = new Date(a.collecttime)
            let date_b = new Date(b.collecttime)
            return date_a.getTime() - date_b.getTime()
          })
          //默认加载第一个图层
          this.currentIndex = 0;
          this.changeLayer(this.currentIndex);
        }
      })
    }
    
  }
}
</script>

<style scoped>
  .space-time-container{
    width:1000px;
    height:100px;
    background:rgba(0,0,0,0.5);
    border-radius:5px;
  }
  .space-time-container .operate{
    width:178px;
    padding:5px 0px;
    padding-left:12px;
    height:26px;
    float:left;
  }
  .operate .btn{
    width:46px;
    margin:0px 4px;
    height:24px;
    float:left;
    font-size:14px;
    color:#fff;
    text-align: center;
    border:1px solid #fff;
    border-radius: 3px;
    line-height:24px;
    font-size:12px;
  }
  .operate .btn:hover{
    color:#409eff;
    border-color:#409eff;
    cursor: pointer;
  }
  .layers-box{
    width:1000px;
    height:66px;
    overflow-x:scroll;
    /* float:left; */

  }

  /* 滑道样式 */
.layers-box::-webkit-scrollbar{
  width:2px;
  height:8px;
  display: block;
  background:none;
  border-radius: 6px;
  cursor: pointer;
}
/* 定义滑块的样式 */
.layers-box::-webkit-scrollbar-thumb{
  border-radius: 10px;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
  background-color:rgba(0,0,0,0.3);
}
/* 定义滑块鼠标移入时的样式 */
.layers-box::-webkit-scrollbar-thumb:hover{
  border-radius: 10px;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
  background-color:rgba(0,0,0,0.4);
}

  .space-time-container ul{
    width:1000px;
    height:40px;
    list-style: none;
    float:left;
    min-width:1000px;
    margin:0px auto;
  }
  .last-layer{
    width:30px;
    height:40px;
    text-align: center;
    line-height: 40px;
    color:#fff;
    float:left;
    
  }
  .play-btn{
     width:30px;
    height:40px;
    text-align: center;
    line-height: 40px;
    color:#fff;
    float:left;
    font-size:24px;
  }
  .next-layer{
    width:30px;
    height:40px;
    text-align: center;
    line-height: 40px;
    color:#fff;
    float:left;
  }
  .last-layer:hover{
    color:#409eff;
    cursor:pointer;
  }
  .next-layer:hover{
    color:#409eff;
    cursor:pointer;
    
  }

  .play-btn:hover{
       color:#409eff;
    cursor:pointer; 
  }
  .space-time-container ul li{
    cursor:pointer;
    width:140px;
    height:40px;
    margin:8px 6px;
    float:left;
    color:#fff;
    font-size:12px;
    border:1px solid #fff;
    border-radius:4px;
  }
  .layername{
    margin:2px 0px;
    font-size:12px;
    overflow:hidden;
  }
  .layertime{
    margin:0px 0px;
    font-size:12px;
  }
  ::v-deep .el-button {
    margin-left:8px;
  }
</style>