<template>
	<view>
		<!-- 模态框 -->
		<view class="cu-modal" :class="isShow?'show':''">
			<view class="cu-dialog">
				<view class="padding-xl">
					<view class="grid flex-sub padding-lr col-3 grid-square" v-if="imgList && imgList.length > 0">
						<view class="bg-img" :style="'background-image:url(' + url + ');'"
							v-for="(url, index) in imgList" :key="index" :data-url="url" @click="viewImage($event)">
						</view>
					</view>
					<view v-else class="text-center text-lg text-gray">
						无图片上传记录
					</view>
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-main-color solid-left" @tap="hideModal">{{confirmMsg}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'pic-modal',
		props: {
			imgList: {
				type: Array,
				default: []
			},
			confirmMsg: {
				type: String,
				default: '确定'
			}
		},
		data() {
			return {
				isShow: false
			}
		},
		methods: {
			showModal(e) {
				this.isShow = true
			},
			hideModal(e) {
				this.isShow = false
			},
			viewImage(e) {
				console.log(this.imgList)
				console.log(e.currentTarget.dataset.url)
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			}
		}
	}
</script>

<style>
</style>
