<template>
  <div class="swipe-box" :style="{'padding':comp.props.padding.val}">
		<mt-swipe :auto="4000" class="warp">
			<mt-swipe-item v-for="(item,index) in comp.props.items.val" :key="index">
				<img class="imgheight" v-bind:src="item.imgUrl" :style="{'border-radius':comp.props.radius.val}">
			</mt-swipe-item>
		</mt-swipe>
  </div>
</template>

<script>

export default {
	name: 'CompSwiper',
	props: ["comp", "cfg", "selectedPage"],
	data() {
		return {
			imgs: [
				{url:'http://image.supercarrier8.com/product/earphone/1.png'}
            ]
		}
	},
	methods: {
        
	},
    watch:{
        // "comp.props.items.val":function(n){
        //     if(n.length>0){
        //         setTimeout(()=>{
        //             $(".warp").height($(".imgheight").height()+"px");
        //             // this.height = $(".imgheight").height()+"px";
        //         },1000);
        //     }
            
        // }
    },
	created(){
		let that=this;
		// 合并参数是为了当实际属性少于基础属性时 补位
		that.mergeCompProps(that.comp);
		that.comp.props.items.val = that.comp.props.items.val || [];

		that.style = {};
		switch (that.sup8.env) {
		case that.sup8._def.env.design:
			break;
		case that.sup8._def.env.preview:
			break;
		case that.sup8._def.env.run:
			break;
		default:
			break;
        }
        
	},
	mounted () {
        setTimeout(()=>{
            // this.height = $(".imgheight").height()+"px";
            let h = $(".imgheight").height()>0?$(".imgheight").height():160;
            $(".warp").height(h+"px");
        },1100);
    }
}
</script>

<style scoped>
.swipe-box {
    /* transition: all .2s; */
    /* height: 1px; */
    box-sizing: content-box;
}
.warp{
    height: 160px;
}
.mint-swipe-item img {
  width: 100%;
  display: block;
}
</style>
