<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__slideInLeft"
    leave-active-class="animate__slideOutLeft"
  >
    <div class="widget-ProjectPhotos">
      <div class="head">
        <div class="title">
          <div class="icon"></div>
          <span class="site-info">项目图册</span>
        </div>
      </div>
      <div class="content-info" ref="content-info">
        <div class="button-list">
          <div
            class="button-item"
            :style="{ height: itemWidth + 'rem' }"
            v-for="(item, index) in photoList"
            :key="index"
            :class="{ isActive: carouselIndex === index }"
            @click="setActive(index)"
          ></div>
        </div>
        <el-carousel direction="vertical" :autoplay="false" ref="carouselRef">
          <el-carousel-item v-for="item in photoList" :key="item.url">
            <!-- <img :src="item.url" alt="" :preview-src-list="srcList" /> -->
            <el-image style="width: 100%; height: 100%" :src="item.url" :preview-src-list="photoList.map((i) => i.url)">
            </el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </transition>
</template>


<script lang="ts">
import request from '@/utils/request'
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { getImgFiles } from '../../apis'
//项目图册
@Component({ name: 'ProjectPhotos' })
export default class ProjectPhotos extends Vue {
  photoList: Array<any> = [
    // { url: require('@/views/groupPage/images/项目图册/1-调蓄池施工.png') },
    // { url: require('@/views/groupPage/images/项目图册/2-江景一街Y-25沉井.png') },
    // { url: require('@/views/groupPage/images/项目图册/3-安全防护施工.png') },
    // { url: require('@/views/groupPage/images/项目图册/4-猴王焊丝厂隧洞开挖支护形象.png') },
    // { url: require('@/views/groupPage/images/项目图册/5-共谊一路雨水口施工.png') },
    // { url: require('@/views/groupPage/images/项目图册/6-中南路隧洞开挖施工.png') },
    // { url: require('@/views/groupPage/images/项目图册/7-领导视察.png') },
    // { url: require('@/views/groupPage/images/项目图册/8-质量培训.png') }
  ]
  carouselIndex = 0
  contentHeight: number = 0
  get itemWidth() {
    return (this.contentHeight / this.photoList.length - 3) / 192
  }
  get projectCode() {
    return this.$store.state.bigScreen.currentProjectCode
  }
  mounted() {
    this.getImgData()
    let target = this.$refs['content-info'] as any
    this.contentHeight = target.offsetHeight
    this.loopPlayback()
  }
  async getImgData() {
    const res = await getImgFiles({ size: 999, imgType: 'gcqj', groupCode: this.projectCode, isShow: 1 })
    const { code, result } = res
    if (code != 1) return
    let list = []
    result.records.forEach((item) => {
      let img =
        request.defaults.baseURL +
        'base/file/loadImg' +
        '?remotePath=' +
        item.path +
        '&access_token=' +
        sessionStorage.getItem('token')
      list.push({ url: img })
    })
    this.photoList = list
  }
  setActive(index) {
    this.carouselIndex = index
    ;(this.$refs.carouselRef as any).setActiveItem(this.carouselIndex)
  }
  loopPlayback() {
    let intervalTime = setInterval(() => {
      if (this.carouselIndex < this.photoList.length - 1) {
        this.carouselIndex++
      } else {
        this.carouselIndex = 0
      }
      this.setActive(this.carouselIndex)
    }, 3000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(intervalTime)
      intervalTime = null
    })
  }
}
</script>

<style lang='scss' scoped>
.animate__slideInLeft,
.animate__slideOutLeft {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-ProjectPhotos {
  $size10: 0.052083rem /* 10/192 */;
  $size20: 0.104167rem /* 20/192 */;
  z-index: 2;
  //position
  bottom: $size10;
  margin-left: $size20 /* 20/192 */;
  left: 0rem /* 0/192 */;
  position: absolute;
  //size
  height: 1.458333rem /* 280/192 */;
  width: 2.083333rem /* 400/192 */;
  //background
  color: #eee;
  //font
  font-family: Source Han Sans CN;
  .head {
    height: 0.166667rem /* 32/192 */;
    width: 100%;
    background: linear-gradient(-90deg, rgba(43, 167, 255, 0.2) 0%, rgba(43, 167, 255, 0.08) 100%);
    font-family: Source Han Sans CN-HEAVY;
    margin-bottom: 0.104167rem /* 20/192 */;
    .title {
      width: 100%;
      height: 100%;
      display: flex;
      font-weight: 400;
      align-items: center;
      .icon {
        height: 0.166667rem /* 32/192 */;
        width: 0.34375rem /* 66/192 */;
        background: url('~@/views/groupPage/images/模块图标/项目图册.png') no-repeat center center;
        background-size: 100% 100%;
      }
      span {
        flex: 1;
        font-weight: bold;
        font-size: 0.083333rem /* 16/192 */;
        color: #ffffff;
        padding: 0.041667rem /* 8/192 */;
        background: linear-gradient(0deg, #9bd2fa 0%, #ffffff 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  .content-info {
    width: 100%;
    height: calc(100% - 0.270833rem /* 52/192 */);
    display: flex;
    .button-list {
      height: 100%;
      width: 0.083333rem /* 16/192 */;
      padding: 0 0.010417rem /* 2/192 */;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      .button-item {
        width: 100%;
        background-color: rgba(14, 167, 255, 0.24);
        cursor: pointer;
      }
      .isActive {
        background: #0ea7ff;
      }
    }
    /deep/ .el-carousel {
      height: 100%;
      width: 100%;
      .el-carousel__container {
        height: inherit;
        width: inherit;
      }
      .el-carousel__indicators {
        display: none;
      }
      .el-carousel__item img {
        width: inherit;
        height: inherit;
      }
    }
  }
}
</style>