<template>
	<uv-popup
		ref="modalPopup"
		mode="center"
		:zoom="zoom"
    :zIndex="zIndex"
		:customStyle="{
			borderRadius: '6px', 
			overflow: 'hidden',
			marginTop: `-${$uv.addUnit(negativeTop)}`
		}"
		:closeOnClickOverlay="closeOnClickOverlay"
		:safeAreaInsetBottom="false"
		:duration="400"
		@change="popupChange"
	>
		<view
			class="uv-modal"
			:style="{
				width: $uv.addUnit(width),
			}"
		>
			<text
				class="uv-modal__title"
				v-if="title"
			>{{ title }}</text>
			<view
				class="uv-modal__content"
				:style="{
					paddingTop: `${title ? 12 : 25}px`
				}"
			>
				<slot>
					<text 
						class="uv-modal__content__text"
						:style="[
							{
								textAlign: align
							},
							nvueStyle,
							$uv.addStyle(textStyle)
						]"
					>{{ content }}</text>
				</slot>
			</view>
			<slot name="confirmButton">
				<uv-line></uv-line>
				<view
					v-if="showConfirmButton || showCancelButton"
					class="uv-modal__button-group"
					:style="{
						flexDirection: buttonReverse ? 'row-reverse' : 'row'
					}"
				>
					<view
						class="uv-modal__button-group__wrapper uv-modal__button-group__wrapper--cancel"
						:hover-stay-time="150"
						hover-class="uv-modal__button-group__wrapper--hover"
						:class="[showCancelButton && !showConfirmButton && 'uv-modal__button-group__wrapper--only-cancel']"
						v-if="showCancelButton"
						@tap="cancelHandler"
					>
						<text
							class="uv-modal__button-group__wrapper__text"
							:style="{
								color: cancelColor
							}"
						>{{ cancelText }}</text>
					</view>
					<uv-line
						direction="column"
						v-if="showConfirmButton && showCancelButton"
					></uv-line>
					<view
						class="uv-modal__button-group__wrapper uv-modal__button-group__wrapper--confirm"
						:hover-stay-time="150"
						hover-class="uv-modal__button-group__wrapper--hover"
						:class="[!showCancelButton && showConfirmButton && 'uv-modal__button-group__wrapper--only-confirm']"
						v-if="showConfirmButton"
						@tap="confirmHandler"
					>
						<uv-loading-icon v-if="loading"></uv-loading-icon>
						<text
							v-else
							class="uv-modal__button-group__wrapper__text"
							:style="{
								color: confirmColor
							}"
						>{{ confirmText }}</text>
					</view>
				</view>
			</slot>
		</view>
	</uv-popup>
</template>

<script>
	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
	import props from './props.js';
	/**
	 * Modal 模態框
	 * @description 彈出模態框，常用於消息提示、消息確認、在當前頁面內完成特定的交互操作。
	 * @tutorial https://www.uvui.cn/components/modul.html
	 * @property {String}			title				標題內容
	 * @property {String}			content				模態框內容，如傳入slot內容，則此參數無效
	 * @property {String}			confirmText			確認按鈕的文字 （默認 '確認' ）
	 * @property {String}			cancelText			取消按鈕的文字 （默認 '取消' ）
	 * @property {Boolean}			showConfirmButton	是否顯示確認按鈕 （默認 true ）
	 * @property {Boolean}			showCancelButton	是否顯示取消按鈕 （默認 false ）
	 * @property {String}			confirmColor		確認按鈕的顏色 （默認 '#2979ff' ）
	 * @property {String}			cancelColor			取消按鈕的顏色 （默認 '#606266' ）
	 * @property {Boolean}			buttonReverse		對調確認和取消的位置 （默認 false ）
	 * @property {Boolean}			zoom				是否開啟縮放模式 （默認 true ）
	 * @property {Boolean}			asyncClose			是否異步關閉，只對確定按鈕有效，見上方說明 （默認 false ）
	 * @property {Boolean}			closeOnClickOverlay	是否允許點擊遮罩關閉該組件 （默認 true ）
	 * @property {String | Number}	negativeTop			往上偏移的值，給壹個負的margin-top，往上偏移，避免和鍵盤重合的情況，單位任意，數值則默認為px單位 （默認 0 ）
	 * @property {String | Number}	width				modal寬度，不支持百分比，可以數值，px，rpx單位 （默認 '650rpx' ）
	 * @property {String} align 文本對齊方式 （默認'left'） 
	 * @property {String | Object} textStyle 文本擴展樣式
	 * @event {Function} confirm	點擊確認按鈕時觸發
	 * @event {Function} cancel		點擊取消按鈕時觸發
	 * @event {Function} close		點擊遮罩關閉出發，closeOnClickOverlay為true有效
	 * @example <uv-modal ref="modalPopup" title="title" content="content"></uv-modal>
	 */
	export default {
		name: 'uv-modal',
		mixins: [mpMixin, mixin, props],
		data() {
			return {
				loading: false
			}
		},
		computed: {
			nvueStyle() {
				const style = {};
				// 避免nvue中不能換行的問題
				// #ifdef APP-NVUE
				style.width = this.$uv.addUnit(this.$uv.getPx(this.width) - 50,'px');
				// #endif
				return style;
			}
		},
		methods: {
			open() {
				this.$refs.modalPopup.open();
				if (this.loading) this.loading = false;
			},
			close() {
				this.$refs.modalPopup.close();
			},
			popupChange(e) {
				if(!e.show) this.$emit('close');
			},
			// 點擊確定按鈕
			confirmHandler() {
				if(!this.loading) {
					this.$emit('confirm');
				}
				// 如果配置了異步關閉，將按鈕值為loading狀態
				if (this.asyncClose) {
					this.loading = true;
				} else {
					this.close();
				}
			},
			// 點擊取消按鈕
			cancelHandler() {
				this.$emit('cancel');
				this.close();
			},
			closeLoading() {
				this.$nextTick(()=>{
					this.loading = false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
	@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
	$uv-modal-border-radius: 6px;

	.uv-modal {
		width: 650rpx;
		border-radius: $uv-modal-border-radius;
		overflow: hidden;

		&__title {
			font-size: 16px;
			font-weight: bold;
			color: $uv-content-color;
			text-align: center;
			padding-top: 25px;
		}

		&__content {
			padding: 12px 25px 25px 25px;
			@include flex;
			justify-content: center;

			&__text {
				line-height: 48rpx;
				font-size: 15px;
				color: $uv-content-color;
				flex: 1;
			}
		}

		&__button-group {
			@include flex;
			height: 48px;

			&__wrapper {
				flex: 1;
				@include flex;
				justify-content: center;
				align-items: center;
				height: 48px;
				
				&--confirm,
				&--only-cancel {
					border-bottom-right-radius: $uv-modal-border-radius;
				}
				
				&--cancel,
				&--only-confirm {
					border-bottom-left-radius: $uv-modal-border-radius;
				}

				&--hover {
					background-color: $uv-bg-color;
				}

				&__text {
					color: $uv-content-color;
					font-size: 16px;
					text-align: center;
				}
			}
		}
	}
</style>
