<template>
  <div class="alert">
    <el-dialog :visible.sync="dialogVisible" class="carousel-pre" width="980px" @close="onClose">
        <div class="left">
            <el-carousel 
            :autoplay="false" 
            arrow="always" 
            :initial-index="dialogImageIndex" 
            trigger="click"
            height="578px"
            @change="changeCarousel"
            ref="carousel"
            >
                <el-carousel-item v-for="(item,i) in imgsList" :key="i">
                  <img class="carouselImg" :src="item.url" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="right">
            <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="dialogVisible =!dialogVisible"><i class="el-dialog__close el-icon el-icon-close"></i></button>
            <div class="miniimgbox">
                <img :class="index==dialogImageIndex?'miniimg active':'miniimg'" :src="item.url" alt="" v-for="(item,index) in imgsList" :key="index" @click="changeCarousel(index)">
            </div>
        </div>
        <div style="clear: both;"></div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    dialogImageIndex:{
      type:Number,
      default:0
    },
    imgsList: {
      type: Array,
      default:() => {
        return []
      }
    },
    dialogVisible:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      show: false
    }
  },
  methods: {
    changeCarousel(i,j){
        this.dialogImageIndex = i;
        if(!j){
            this.$refs.carousel.setActiveItem(i);
        }
    },
    onClose() {
      this.$emit("closeBox", false);
    },
  }
}
</script>
<style lang="scss" scoped>
.carousel-pre{
    /deep/ .el-dialog__header{
        display: none;
    }
    /deep/ .el-dialog__body{
        padding:0;
    }
    .left{
        width: 820px;
        float: left;
        background: #000;
        .carouselImg{
            width: 83%;
            height: 89%;
            padding: 30px 70px;
        }
        /deep/ .el-carousel__arrow{
                font-size: 30px;
        }
    }
    .right{
        width: 160px;
        float: right;
        .miniimgbox{
            padding: 50px 18px;
            cursor: pointer;
        }
        .miniimg{
            width: 50px;
            height: 50px;
            margin: 5px;
            border: 1px solid #eee;
            &.active{
                border: 1px solid #ff6600;
            }
        }
    }
    .carouselImg{
        width: 100%;
        height: 100%;
        padding: 0 20px;
    }
}
</style>
