<template>
  <div class="mainDiv">
    <div class="up" @click="moveActive(-1)"><div class="img"></div></div>

    <div class="images">
      <template v-for="item in showImages" :key="item.index">
        <div  class="item" @click="clickImg(item.index)" :class="getActive(item.index)">
          <img :src="base_img_url2 + item.src + '?imageView2/1/w/200/interlace/1'" />
          <div class="date">{{dateFormat(new Date(item.date),"mm/dd")}}</div>
        </div>
      </template>
    </div>
    <div class="down" @click="moveActive(1)"><div class="img"></div></div>
  </div>
</template>

<script setup>
import {onMounted, ref, toRefs} from "vue";
import {dateFormat} from "../utils/date_util"
import {base_img_url2} from "../api/config.js"
const emit = defineEmits(["selectImg"]);
const props = defineProps({
  current : {
    type:Number,
    required:true
  },
  label:{
    type:String,
    default: ""
  },
  imageList:{
    type:Array,
    required:true
  }
});
const {current,label,imageList} = toRefs(props)

const showImages = ref([]);
const activeIndex = ref(4)
let length = 5;
let start = imageList.value.length - length;
function getActive(val){
  return activeIndex.value == val ? "active" : "";
}

function clickImg(val){
  activeIndex.value = val;
  reCurrent()
  emit("selectImg",showImages.value[activeIndex.value])
}

function moveActive(val){
  let res = activeIndex.value + val;
  if(res == -1 || res > 4){
    move(val)
  }
  res = res < 0 ? 0 : res;
  res = res > 4 ? 4 : res;
  activeIndex.value = res;
  reCurrent()
  emit("selectImg",showImages.value[activeIndex.value])
}
function move(val){
  let res = start + val;
  if(res >=0 && res <= imageList.value.length - length){
    start = res;
  }else{
    return;
  }
  setShowImages();
}

function setShowImagesByCurrent(id){
  //先找尾节点 再找首节点 长度不能超过length
  let last = []; let first = []; let l=0;
  for(let i=imageList.value.length - 1; i >= 0 && l < length;i--){
    if(id >= imageList.value[i].id){
      first.push({id:imageList.value[i].id,src:imageList.value[i].src, date:imageList.value[i].date})
      start = i;
      l++;
    }
  }
  for(let i=0; i< imageList.value.length && l < length ;i++){
    if(id < imageList.value[i].id){
      last.push({id:imageList.value[i].id,src:imageList.value[i].src, date:imageList.value[i].date})
      l++;
    }
  }
  let index = 0;showImages.value = []
  for(let i=first.length-1 ;i>=0;i--){
    first[i].id == id && (activeIndex.value = index);
    showImages.value.push({...first[i], index: index++ })
  }
  last.forEach((item)=>{
    item.id == id && (activeIndex.value = index);
    showImages.value.push({...item, index: index++ })
  })
  return showImages.value[activeIndex.value];
}

function reCurrent(){
  current.value = new Date(showImages.value[activeIndex.value].date).getTime();
}

function setShowImages(){
  showImages.value = [];
  let index = 0;
  for(let i = start;i< start + length;i++){
    showImages.value.push({src:imageList.value[i].src,date:imageList.value[i].date,index:index++})
  }
}
setShowImagesByCurrent(current.value)
defineExpose({setShowImagesByCurrent})
</script>

<style lang="scss" scoped>

.mainDiv{
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding-top: 14px;
  display: flex;
  .up{
    width: 24px;
    height: 100%;
    background: rgba(25,141,177,0.9);
    border-radius: 4px 0px 0px 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    .img{
      width: 8px;
      height: 16px;
      background-image: url("@/assets/img/left.png");
      background-size: 100% 100%;
    }
  }
  .images{
    height: 100%;
    padding-left: 7px;
    padding-right: 7px;
    width: calc(100% - 48px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    .item{
      width: 96px;
      height: 100%;
      background: rgba(0,77,101,0.6);
      border-radius: 4px;
      border: 1px solid rgba(81,233,240,0.3);
      box-sizing: border-box;
      cursor: pointer;
      position: relative;
      font-weight: 400;
      color: #FFFFFF;
      img{
        width: 100%;
        height: 100%;
      }
      .date{
        position: absolute;
        height: 24px;
        width: 100%;
        background: rgba(3,30,35,0.8);
        border-radius: 0px 0px 4px 4px;
        bottom: 0px;
        line-height: 24px;
        text-align: center;
      }
    }
    .active{
      width: 96px;
      height: 100%;
      border-radius: 4px;
      border: 2px solid #51E9F0;
      box-sizing: border-box;
      position: relative;
      color: #00FFF0;
    }
    .active:after{
      position: absolute;
      content:"";
      left: calc(50% - 9px);
      top: -23px;
      width: 0px;
      height: 0px;
      border: 9px solid #000;
      border-radius: 4px;
      border-top-color: transparent;
      border-bottom-color: #51E9F0;
      border-left-color: transparent;
      border-right-color: transparent;
    }
  }
  .down{
    width: 24px;
    height: 100%;
    background: rgba(25,141,177,0.9);
    border-radius: 0px 4px 4px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    .img{
      width: 8px;
      height: 16px;
      background-image: url("@/assets/img/right.png");
      background-size: 100% 100%;
    }
  }
}

</style>
