<template>
	<view class="cu-modal" :class="!!isOpen ? 'show' : ''">
		<view class="cu-dialog">
			<view class="cu-bar bg-white justify-end">
				<view class="modal-content">{{ title }}</view>
				<view class="action" @tap="closeModal">
					<image :src="closeModalImg" class="close-modal-icon"></image>
				</view>
			</view>
			<view class="padding bg-white" style="padding-top: 0;">
				<image :src="errorModalImg" v-show="showErrorModalImg" class="modal-icon"></image>
				<text class="modal-text">{{ content }}</text>
				<view class="flex justify-between align-center flex-direction" style="margin-top: 8rpx;">
					<button class="main-button-xs font30" style="width: 40%;"
						@tap="confirmModal">{{ confirmText }}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import i_close_modal from '../static/img/lltl/i-close-modal.png';
	import error_icon from '../static/img/modal/error-icon.png';
	export default {
		name: 'qModal',
		props: {
			title: {
				// 标题
				type: String,
				default: ''
			},
			content: {
				// 内容
				type: String,
				default: ''
			},
			confirmText: {
				// 确认文本
				type: String,
				default: ''
			},
			show: {
				//是否显示模态框
				type: [Boolean, String],
				default: false
			},
			showErrorModalImg: {
				type: [Boolean, String],
				default: false
			},
		},
		watch: {
			show(val) {
				this.isOpen = val;
			}
		},
		created() {
			this.isOpen = this.show;
		},
		data() {
			return {
				closeModalImg: i_close_modal,
				errorModalImg: error_icon,
				isOpen: false
			};
		},
		methods: {
			// 取消
			closeModal() {
				this.isOpen = false;
				this.$emit('closeModal');
			},
			// 确定
			confirmModal() {
				setTimeout(() => {
					this.$emit('confirmModal');
				}, 200);
				// this.closeModal();
			}
		}
	};
</script>

<style lang="less" scoped>
	.close-modal-icon {
		width: 36rpx;
		height: 36rpx;
		vertical-align: middle;
	}

	// modal样式
	.modal-icon {
		width: 200rpx;
		height: 170rpx;
	}
	.modal-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.modal-text {
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		display: block;
	}
</style>