<template>
	<view class="lc-wrap">
		<view class="lc-frame">
			<LenticularCard
				:layers="lenticularLayers"
				:transforms="layerTransforms"
				gyro-source="simulation"
				:approximate-preview="true"
				tilt-hint-text="滑动卡片预览光栅效果"
				@simulate="simulate"
			/>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue'
import LenticularCard from './LenticularCard.vue'
import { useLenticularPreview } from '@/composables/useLenticularPreview.js'
import { buildLenticularLayers } from '@/utils/castloveMintForm.js'

const props = defineProps({
	/** 用户上传图：作为光栅主体层 */
	imageSrc: {
		type: String,
		default: '',
	},
})

const lenticularLayers = ref(buildLenticularLayers(props.imageSrc || ''))

watch(
	() => props.imageSrc,
	(s) => {
		lenticularLayers.value = buildLenticularLayers(s || '')
	}
)

const { layerTransforms, simulate } = useLenticularPreview(lenticularLayers)
</script>

<style scoped>
.lc-wrap {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 16rpx 0 32rpx;
}

.lc-frame {
	width: 100%;
	height: 520rpx;
	max-height: 70vh;
}
</style>
