<template>
	<u-popup v-model="isShow" mode="center" border-radius="14" :closeable="true" length="80%" class="commentPopup-wrap">
		<view class="popup-con">
			<view class="popup-tit">查看评论</view>
			<view class="popup-main">
				<u-swiper v-if="list.length > 0" :list="list" :autoplay="false" :height="400" class="popup-swiper" @click="clickSwiper"></u-swiper>
				<view class="popup-des">{{comments}}</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default{
		name: 'CommentPopup',
		props: {
			openPopup: {
				type: Boolean,
				default: false
			},
			comments: {  //  评论
				type: String,
				default: ''
			},
			taskTargetPhotoList: {  //  评论图片
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data(){
			return{
				isShow: this.openPopup,  //  是否显示弹框
				list: this.taskTargetPhotoList,  //  评论图片
				current: 0  //  幻灯片当前下标
			}
		},
		methods: {
			//  查看评论大图
			clickSwiper(e){
				// 预览图片
				uni.previewImage({
					current: e,
					urls: this.list
				})
			}
		},
		watch: {
			openPopup(val){
				this.isShow = val
			},
			isShow(val){
				if(!val){
					this.$emit('close')
				}
			},
			taskTargetPhotoList: {
				handler(newV, oldV){
					this.list = newV
				},
				deep: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.commentPopup-wrap{
		.popup-con{
			padding: 26upx 0 10upx;
			.popup-tit{
				padding: 10upx 30upx 26upx;
				border-bottom: 1upx solid #f8f8f8;
			}
			.popup-main{
				.popup-swiper{
					margin: 20upx 30upx 0;
				}
				.popup-des{
					padding: 20upx 30upx;
				}
			}
		}
	}
</style>
