<template>
    <div id="star-pic-vue">
        <el-button v-if="button" type="primary" @click="enlargePic"> {{button}}</el-button>
        <template v-if="data">
            <img v-for="(item,index) in images" alt="" :key="index"
                 :src="item"
                 id="contract_url"
                 @click="enlargePic"/>
        <template v-if="isDialogShow">

        </template>
            <el-scrollbar>
                <el-dialog
                    :visible.sync="centerDialogVisible"
                    modal
                    :width="width"
                    :height="height"
                    close-on-click-modal
                    custom-class="dialog"
                    >
                    <el-carousel :autoplay="true" arrow="always">
                        <el-carousel-item v-for="item in data" :key="item">
                            <img :src="item" alt="" @load="onLoad">
                        </el-carousel-item>
                    </el-carousel>
                </el-dialog>
            </el-scrollbar>
        </template>
    </div>
</template>

<script>
    export default {
        name: "star-pic-list",
        props: ["data","maxShow","button",],
        data(){
            return{
                width:"300px",
                height:"700px",
                centerDialogVisible: false,
                showPic: '',
                isDialogShow: false,
                index: 0,
            }
        },
        computed: {
          images() {
              if (this.data instanceof Array && this.data.length > 2) {
                  return this.data.splice(0,this.maxShow)
              } else {
                  return this.data
              }
          }
        },
        methods: {
            onLoad(e) {
                const img = e.target;
                let width = 0;
                if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
                    width = img.width + 40;
                }
                this.width = width + "px";
                this.height = (img.height+20)+"px"
                console.log( this.width, this.height)
            },
            // 放大图片
            enlargePic(e){
                this.isDialogShow = true;
                this.centerDialogVisible = true;
                this.showPic = this.data[0];
                console.log(this.images)
            },
        }
    }
</script>

<style lang="scss">
.el-scrollbar__wrap {
    overflow-x: hidden!important;
}
#star-pic-vue{
    width: 100px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    img{
        width: 80px;
        height: 80px;
        margin: 4px;
    }
    .dialog {
        img{
            width: 100%;
            height: 100%;
            margin: 0;
        }
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
        height: 100%;
        width: 100%;
    }
    .el-dialog__header{
        display: none;
    }
    .el-dialog__body {
        padding: 0 !important;
        margin: 0 !important;
        height: 700px;
    }
    .el-carousel{
        height: 100%;
    }
    .el-carousel__container {
        height: 100%;
    }
}
</style>