<template name="show-modal">
	<view>
		<u-modal v-model="show" :title-style="{color: 'red'}" :title="title" :showTitle="false"
			:showConfirmButton="false" ref="modal">
			<view class="" style="width: 100%;display: flex; align-items: center; justify-content: center;margin-top: 10rpx; " >
				<view class="" style="">
					版本号 : {{version}}
				</view>
			</view>
			
			<view class="slot-content">
				<slot name="icon">
					<image class="icon" :src="icon" />
				</slot>
				<slot name="content">
					<rich-text class="content" :nodes="content" :style="{'color': textColor}" :key='count'>
					</rich-text>
				</slot>
			<view class='split_line'></view>
				<slot name="button">
					<view class="uni-flex uni-row u-col-center space-between" style="width: 100%;height: 48px;">
						<view v-if="showCancelButton" class="cance_button" @tap="cancelClose">
							<text :style="{'color':cancelColor}">{{ cancelText }}</text>
						</view>
						<u-line direction="col" length="100%"></u-line>
						<view v-if="showConfirmButton" class="confirm_button" @tap="confirmClose">
							<text :style="{'color':confirmColor}">{{confirmText}}</text>
							<text v-if="showConfirmCountdown">({{seconds}}s关闭)</text>
						</view>
					</view>
				</slot>
			</view>
		</u-modal>
	</view>
</template>

<script>
	/**
	 * modal 模态框
	 * @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
	 * */
	export default {
		data() {
			return {
				timer: null,
				show: false, // 是否显示
				iconType: '消息',
				icon: '../../static/icons/error-circle.svg',
				title: '', // 提示标题
				content: '', // 提示内容
				cancelText: '取消', // 取消按钮的文字  
				confirmText: '确定', // 确认按钮文字  
				showCancel: true, // 是否显示取消按钮，默认为 true
				confirmColor: '#007aff', // 确定按钮颜色
				cancelColor: null, // 取消按钮颜色
				showConfirmButton: true, // 是否显示确认按钮
				showConfirmCountdown: true, // 是否显示确定倒计时
				showCancelButton: true, // 是否显示取消按钮
				showClose: false,
				confirm: false, //为 true 时，表示用户点击了确定按钮
				cancel: false, //为 true 时，表示用户点击了取消
				isDisabled: true, //为 true 时，表示用户可以点击，反之则不可以
				seconds: 0,
				success: () => {} ,// 回调方法
				version:"",
				textColor:'#000',
				count:0
			}
		},
		
		mounted() {
			// const systemInfo = uni.getSystemInfoSync();
			// // #ifdef H5
			// this.version = systemInfo.appVersion;
			// console.log(systemInfo.appVersion, '版本号');
			// // #endif
			
			// // #ifdef APP
			// this.version = systemInfo.appWgtVersion;
			// // #endif
		},


		methods: {
			
			getVersionCode(){
			const systemInfo = uni.getSystemInfoSync();
			// #ifdef H5
			this.version = systemInfo.appVersion;
			console.log(systemInfo.appVersion, '版本号');
			// #endif
			
			// #ifdef APP
			this.version = systemInfo.appWgtVersion;
			// #endif
			},
			
			open() {
				this.getVersionCode()
				this.show = true;
				this.isDisabled = true;
			},
			close() {
				this.$.refs.modal.popupClose();
				this.isDisabled = false;
			},
			confirmClose() {
				if (!this.isDisabled) return
				this.isDisabled = false
				// console.log('确定点击')
				if (this.show) {
					this.show = false;
					clearInterval(this.timer) //清空timer
					if(this.$refs.modal){
						this.$refs.modal.popupClose();
					}
					this.success({
						// cancel: false,
						confirm: true,
					});
				}
			},

			cancelClose() {
				if (!this.isDisabled) return
				this.isDisabled = false
				clearInterval(this.timer) //清空timer
				this.$.refs.modal.popupClose();
				this.success({
					// cancel: true,
					confirm: false,
				});
			},

			// 打开消息弹框(确定+倒计时)
			showMessage(mContent, callback) {
				this.showConfirmCountdownModal("消息", mContent, callback);
			},

			// 打开成功弹框(确定+倒计时)
			showSuccessMessage(mContent, callback) {
				this.showConfirmCountdownModal("成功", mContent, callback);
			},

			// 打开失败弹框(确定）
			showErrorMessage(mContent, callback) {
				this.showConfirmModal("失败", mContent, callback);
			},

			// 显示崩溃消息(无确定）
			showBreakMessage(mContent, callback) {
				this.showNoButtonModal("失败", mContent, callback);
			},

			// 打开疑问弹框(取消+确定）
			showQuestionMessage(mContent, callback) {
				this.showSelectModal("疑问", mContent, callback);
			},
			// 打开疑问弹框(取消+确定）
			showQuestionMessage1(mContent,textColor, callback) {
				console.log(textColor)
				this.showSelectModal1("疑问", mContent, callback,textColor);
			},
			// 打开警告弹框(确定+倒计时)
			showWarningMessage(mContent, callback) {
				this.showConfirmCountdownModal("警告", mContent, callback);
			},

			// 打开失败弹框(确定+倒计时)
			showConfirmCountdownFailModal(mContent, callback) {
				this.showConfirmCountdownModal("失败", mContent, callback);
			},

			// 打开消息弹框(确定）
			showConfirmMessageModal(mContent, callback) {
				this.showConfirmModal("消息", mContent, callback);
			},

			// 打开成功弹框(确定）
			showConfirmSuccessModal(mContent, callback) {
				this.showConfirmModal("成功", mContent, callback);
			},


			// 打开警告弹框(确定）
			showConfirmWarningModal(mContent, callback) {
				this.showConfirmModal("警告", mContent, callback);
			},

			// 打开疑问弹框(确定）
			showConfirmQuestionModal(mContent, callback) {
				this.showConfirmModal("疑问", mContent, callback);
			},
			
			// 初始化弹框并打开(确定）
			showNoButtonModal(mIconType, mContent, callback) {
				this.showModal({
					iconType: mIconType,
					content: mContent,
					showConfirmButton:false,
					showCancelButton: false,
					success: function(res) {
						if (callback != undefined) {
							if (res.confirm == true) {
								callback(true);
							} else {
								callback(false);
							}
						}
			
					}
				});
			},

			// 初始化弹框并打开(确定）
			showConfirmModal(mIconType, mContent, callback) {
				this.showModal({
					iconType: mIconType,
					content: mContent,
					showCancelButton: false,
					success: function(res) {
						if (callback != undefined) {
							if (res.confirm == true) {
								callback(true);
							} else {
								callback(false);
							}
						}

					}
				});
			},

			// 打开消息弹框(取消+确定）
			showSelectMessageModal(mContent, callback) {
				this.showSelectModal("消息", mContent, callback);
			},

			// 打开成功弹框(取消+确定）
			showSelectSuccessModal(mContent, callback) {
				this.showSelectModal("成功", mContent, callback);
			},

			// 打开失败弹框(取消+确定）
			showSelectFailModal(mContent, callback) {
				this.showSelectModal("失败", mContent, callback);
			},

			// 打开警告弹框(取消+确定）
			showSelectWarningModal(mContent, callback) {
				this.showSelectModal("警告", mContent, callback);
			},

			// 初始化弹框并打开(取消+确定）
			showSelectModal(mIconType, mContent, callback) {
				this.showModal({
					iconType: mIconType,
					content: mContent,
					success: function(res) {
						if (callback != undefined) {
							if (res.confirm == true) {
								callback(true);
								console.log('用户点击确定')
							} else {
								callback(false);
								console.log('用户点击取消')
							}
						}

					}
				});
			},
			// 初始化弹框并打开(取消+确定）
			showSelectModal1(mIconType, mContent, callback,textColor) {
				this.showModal({
					iconType: mIconType,
					content: mContent,
					textColor:textColor,
					success: function(res) {
						if (callback != undefined) {
							if (res.confirm == true) {
								callback(true);
								console.log('用户点击确定')
							} else {
								callback(false);
								console.log('用户点击取消')
							}
						}
			
					}
				});
			},

			// 打开疑问弹框(确定+倒计时)
			showConfirmCountdownQuestionModal(mContent, callback) {
				this.showConfirmCountdownModal("疑问", mContent, callback);
			},

			// 初始化弹框并打开(确定+倒计时)
			showConfirmCountdownModal(mIconType, mContent, callback) {
				this.showModal({
					iconType: mIconType,
					content: mContent,
					showCancelButton: false,
					showConfirmCountdown: true,
					success: function(res) {
						if (callback != undefined) {
							if (res.confirm == true) {
								callback(true);
							} else {
								callback(false);
							}
						}
					}
				});
			},

			// 打开消息弹框(取消+确定+倒计时)
			showSelectCountdownMessageModal(mContent, callback) {
				this.showSelectCountdownModal("消息", mContent, callback);
			},

			// 打开成功弹框(取消+确定+倒计时)
			showSelectCountdownSuccessModal(mContent, callback) {
				this.showSelectCountdownModal("成功", mContent, callback);
			},

			// 打开失败弹框(取消+确定+倒计时)
			showSelectCountdownFailModal(mContent, callback) {
				this.showSelectCountdownModal("失败", mContent, callback);
			},

			// 打开警告弹框(取消+确定+倒计时)
			showSelectCountdownWarningModal(mContent, callback) {
				this.showSelectCountdownModal("警告", mContent, callback);
			},

			// 打开疑问弹框(取消+确定+倒计时)
			showSelectCountdownQuestionModal(mContent, callback) {
				this.showSelectCountdownModal("疑问", mContent, callback);
			},

			// 初始化弹框并打开(取消+确定+倒计时)
			showSelectCountdownModal(mIconType, mContent, callback) {
				this.showModal({
					iconType: mIconType,
					content: mContent,
					showConfirmCountdown: true,
					success: function(res) {
						if (callback != undefined) {
							if (res.confirm == true) {
								callback(true);
								console.log('用户点击确定')
							} else {
								callback(false);
								console.log('用户点击取消')
							}
						}
					}
				});
			},

			// 初始化弹框并打开
			showModal(data) {
				if (data.iconType) {
					this.iconType = data.iconType
					switch (data.iconType) {
						case '消息':
							this.icon = '/static/icons/error-circle.svg';
							break;
						case '成功':
							this.icon = '/static/icons/checkmark-circle.svg';
							break;
						case '失败':
							this.icon = '/static/icons/close-circle.svg';
							break;
						case '警告':
							this.icon = '/static/icons/warning.svg';
							break;
						case '疑问':
							this.icon = '/static/icons/question-circle.svg';
							break;
						default:
							break;
					}
				}
				// image
				if (data.title) {
					this.title = data.title
				}
				if (data.content) {
					this.content = data.content
				} else {
					this.content = ''
				}
				if (data.cancelText) {
					this.cancelText = data.cancelText
				} else {
					this.cancelText = '取消'
				}
				if (data.confirmText) {
					this.confirmText = data.confirmText
				} else {
					this.confirmText = '确定'
				}

				if (data.showCancel === false || data.showCancel === true) {
					this.showCancel = data.showCancel
				} else {
					this.showCancel = true
				}

				if (data.confirmColor) {
					this.confirmColor = data.confirmColor
				} else {
					this.confirmColor = '#007aff'
				}

				if (data.cancelColor) {
					this.cancelColor = data.cancelColor
				} else {
					this.cancelColor = '#666F83'
				}

				if (data.textColor) {
					this.textColor = data.textColor
				} else {
					this.textColor = '#000'
				}
				if (data.showConfirmButton === false || data.showConfirmButton === true) {
					this.showConfirmButton = data.showConfirmButton
				} else {
					this.showConfirmButton = true
				}

				if (data.showConfirmCountdown === false || data.showConfirmCountdown === true) {
					this.showConfirmCountdown = data.showConfirmCountdown
				} else {
					this.showConfirmCountdown = false
				}

				if (data.showCancelButton === false || data.showCancelButton === true) {
					this.showCancelButton = data.showCancelButton
				} else {
					this.showCancelButton = true
				}

				if (data.success) {
					this.success = data.success
				} else {
					this.success = () => {}
				}
				setTimeout(res => {
					this.open();
				}, 500)
				if (this.showConfirmCountdown) {
					this.startTimer();
				}

			},

			startTimer() {
				this.seconds = 3;
				clearInterval(this.timer)
				this.timer = setInterval(() => {
					this.seconds--
					// console.log("倒计时时间", this.seconds);
					if (this.seconds <= 0) {
						this.timeUp()
						return
					}
				}, 1000)
			},

			timeUp() {
				// clearInterval(this.timer)
				console.log('时间到')
				this.confirmClose();
			},

		},



	}
</script>
<style lang="scss" scoped>
	.slot-content {
		font-size: 36rpx;
		display: flex; //弹性布局
		flex-direction: column; //垂直排列
		align-items: center; //子元素居中
		// background-image: url()
	}

	.icon {
		width: 70rpx;
		height: 70rpx;
		opacity: 1; //透明度
		margin-top: 16px;
	}

	.title {
		font-size: 35rpx;
	}

	.content {
		width: 100%;
		margin-top: 16px;
		margin-bottom: 16px;
		margin-left: 8px;
		margin-right: 8px;
		font-size: 32rpx;
		text-align: center;
	}

	.cance_button {
		width: 100%;
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.confirm_button {
		width: 100%;
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.confirm_text {
		// color: $uni-color-primary;
	}

	.def_text {
		color: $uni-color-primary;
	}
</style>
