<template>
	<up-popup :show="popShow" @close="close" @open="open" mode="center" :round="12">

		<view class="bg-fff box u-font-28 w-full u-relative">
			<view class="u-absolute close">
				<u-icon name="close" size="20" @click="close"></u-icon>
			</view>
			<scroll-view scroll-y="true" class="scroll-box" >
				<template v-if="data.images.length>1">
					<swiper class="scroll-box" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="300">
						<swiper-item v-for="(item,index) in data.images" :key="index">
							<view class="swiper-item">
								<!-- <image class="coverImg w-full" @click="prveImg(data.images,item)"  :src="item" mode="widthFix"></image> -->
								<image class="coverImg w-full"   :src="item" mode="widthFix"></image>
							</view>
						</swiper-item>
					</swiper>
				</template>
				<template v-else>
					<view class="u-flex u-row-center">
						<!-- <image class="coverImg w-full" @click="prveImg([data.coverImg],data.coverImg) " :src="data.coverImg" mode="widthFix"></image> -->
						<image class="coverImg w-full"  :src="data.coverImg" mode="widthFix"></image>
					</view>
				</template>

				<view class="u-p-20">
					<view class="u-font-16 font-bold">{{data.name}}</view>
					<view class="u-m-t-12 color-666">
						<rich-text :nodes="data.shortTitle"></rich-text>
					</view>
				</view>
			</scroll-view>

		</view>
	</up-popup>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		watch,
		nextTick
	} from 'vue';
	import {prveImg} from '@/commons/utils/prveImg.js'
	const refForm = ref(null)
	let searchVal = ref('')

	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		goods: {
			type: Object,
			default: () => {
				return {
					images: []
				}
			}
		}
	})
	let data = ref(props.goods)
	const emits = defineEmits(['update:show', 'search'])
	const form = reactive({
		note: ''
	})
	let popShow = ref(props.show)
	watch(() => props.show, (newval) => {
		popShow.value = newval
		if (newval) {
			data.value = {
				...props.goods,
				images: typeof props.goods.images === 'string' ? JSON.parse(props.goods.images) : props.goods
					.images
			}
		}
	})
	watch(() => popShow.value, (newval) => {
		emits('update:show', newval)
	})

	function close() {
		popShow.value = false
	}

	function open() {

	}

	function search() {
		emits('search', searchVal.value)
		close()
	}
</script>

<style lang="scss" scoped>
	.coverImg {
		// width: calc(100vw - 80px);
	}

	.box {
		width: calc(100vw - 80px);
		border-radius: 14px;
		overflow: hidden;
		box-sizing: border-box;
	}

	.scroll-box {
		height: calc(100vh - var(--status-bar-height) - 20px);
	}

	.close {
		position: absolute;
		right: 14px;
		top: 14px;
		background-color: #fff;
		z-index: 10;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 2px #eee;
	}

	.number {
		color: #EE4646;
	}
</style>