Vue.component("roll-carousel", {
    template: `
        <div style="padding: 0px 30px;">
            <el-carousel height="220px" indicator-position="outside" :interval="5000" :loop="true">
                <el-carousel-item v-for="item in forData">
                    <el-row>
                        <el-col :span="4" style="padding:0 5px;" v-for="url in item" v-if="number == 6">
                            <el-image style="width: 200px; height: 200px" :src="url.photo_url"
                            fit="cover" @click="onClickImage(url)"></el-image>
                            <div  style="width: 200px;text-align: center;position: absolute;bottom: 3px;height: 30px;
                            background: rgba(0,0,0,0.5);line-height: 30px;overflow: hidden;white-space:nowrap;
                            text-overflow:ellipsis;">{{url.photo_name}}</div>
                        </el-col>
                        <el-col :span="8" style="padding:0 5px;" v-for="url in item" v-if="number == 3">
                            <el-image style="width: 200px; height: 200px" :src="url.photo_url"
                            fit="cover" @click="onClickImage(url)"></el-image>
                            <div  style="width: 200px;text-align: center;position: absolute;bottom: 2px;height: 30px;
                            background: rgba(0,0,0,0.5);line-height: 30px;overflow: hidden;white-space:nowrap;
                            text-overflow:ellipsis;">{{url.photo_name}}</div>
                        </el-col>
                    </el-row>
                </el-carousel-item>
            </el-carousel>
            <roll-amplify-img :list="imgList" :url="imgUrl" :show="show" @show="onCloseImg"></roll-amplify-img>
        </div>
    `,
    props: {
        list:{
            type:Array
        },
        number:{
            type:Number
        }
    },
    data() {
        return {
            show:false,
            imgUrl:'',
            forData:[],
            imgList:[]
        }
    },
    mounted(){

    },
    methods: {
        init(){
            var len = Math.ceil(this.list.length/this.number)
            var maxArr = []
            for (let i = 0; i < len ; i++) {
                let minArr = []
                for (let j = 0; j < this.number ; j++) {
                    if(this.list[(i*this.number)+j] != undefined){
                        minArr.push(this.list[(i*this.number)+j])
                    }
                }
                maxArr.push(minArr)
            }
            this.forData = maxArr
        },
        onClickImage(url){
            var imgArr = []
            this.list.forEach((x)=>{
                imgArr.push(x.photo_url)
            })
            this.imgList = imgArr
            this.imgUrl = url.photo_url
            this.show = true
        },
        onCloseImg(e){
            this.show = e
        }
    },
    watch:{
        list:function (o,n) {
            this.init()
        }
    },

})