<template>
	<swiper :current="currentThat" :duration="duration" :autoplay="autoplay" @change="change" :style="{height: getHeight()}">
		<swiper-item :key="i" v-for="(item,i) in list">
			<view :class="classUse">
				<slot :item="item" :config="config"></slot>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		props: ['list', 'duration', "autoplay", "current", 'config'],
		mounted() {
			this.$nextTick()
				.then(() => {
					this.boundingClientRect()
				})
		},
		watch: {
			current(val) {
				this.currentThat = val
			}
		},
		data() {
			return {
				currentThat: this.current || 0,
				items: [],
				classUse: 'item-swiper-use-' + Math.round(Math.random() * 213123)
			}
		},
		methods: {
			change(e) {
				this.currentThat = e.detail.current
				this.$emit('change', e)
			},
			boundingClientRect() {
				const classUse = this.classUse
				const query = uni.createSelectorQuery().in(this)
				query.selectAll(`.${classUse}`).boundingClientRect(data => this.items = data).exec()
				console.log(this.items)
			},
			getHeight() {
				if (this.list.length < 1) return null
				const currentThat = this.currentThat
				const it = this.items[currentThat] || {}
				return this.list[currentThat].height || it.height + 'px'
			}
		}
	}
</script>

<style>
</style>
