<template>
  <div>
    <el-dialog
      :visible.sync="isShowImageDialog"
      :show-close="false"
      top="8vh"
      center
      width="60%"
    >
      <div class="img-main">
        <div style="width: 100%;margin: auto;">
          <el-carousel arrow="always" indicator-position="outside" height="554px" :autoplay="false" @change="changeImg" ref="carousel" trigger="click" :initial-index="curIdx">
            <el-carousel-item v-for="src in imgs" :key="src">
              <div style="width: 100%;height: 100%;display: flex;align-items: center;">
                <img :src="baseUrl+src" style="max-width: 82%;max-height: 100%;display: block; margin: 0 auto;"/>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div slot="footer">
        <el-button style="width: 138px;" size="mini" type="primary" @click="isShowImageDialog = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
import { baseUrl } from '@/utils/env.js'

export default {
  name: 'ImgPreview',
  data() {
    return {
      imgs: '',
      isShowImageDialog: false,
      curIdx: 0,
      baseUrl
    }
  },
  methods: {
    clearImg() {
      this.imgs = null
    },
    changeImg(index){
      this.curIdx = index
    },
    change(index){
      if (this.$refs.carousel) {
        this.$refs.carousel.setActiveItem(index)
      }
    },
  }
}
</script>
 
<style lang="scss">
  .img-main{
    width: 100%;
    display: flex;
    margin-bottom: 10px;

    .el-carousel__arrow{
      border-radius: 0px;
      width:48px;
      height:68px;
      background:rgba(0,0,0,0.7);
      border-radius:6px 0px 0px 6px;
    }

    .el-carousel__arrow--left{
      left: 0px;
    }

    .el-carousel__arrow--right{
      right: 0px;
      border-radius:0px 6px 6px 0px;
    }

    .el-carousel__arrow i{
      font-size: 35px;
    }

    .el-scrollbar__bar.is-vertical{
      width: 2px;
    }

    img{
    }

    .flex-1{
      flex: 1
    }

    .el-scrollbar__wrap {
       overflow-x: hidden;
       height: 600px;
    }

    .infinite-list{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      margin: 0;
      padding: 0;
      li{
        position: relative;
        width: calc( ( 100% - 20px ) / 2);
        margin-right: 10px;
        height: 108px;
        overflow: hidden;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          width: 100%;
          height: 100%;
          max-width: 100%;
          display: block; 
          margin: 0 auto;
          cursor: pointer;
        }
        .mask{
          position:absolute;
          top: 0;
          width: 100%;
          height: 100%;
          max-height: 100%;
          background:rgba(0,0,0,1);
          opacity:0.6855;
          z-index: 222;
        }
        span{
          position:absolute;
          width: 100%;
          text-align: left;
          bottom:0px;
          padding:0px;
          margin:0px;
          color: #1790FF;
          font-size:13px;
        }
      }
    }
  }
</style>