<template>
	<view class="cl-confirm">
		<cl-dialog
			v-model="visible"
			:title="conf.title"
			:width="conf.width"
			:close-on-click-modal="conf.closeOnClickModal"
			@close="onClose"
			@closed="onClosed"
		>
			<template #header>
				<view class="cl-confirm__header">
					<text class="cl-icon-toast-error" v-if="conf.type == 'error'"></text>
					<text class="cl-icon-toast-warning" v-else-if="conf.type == 'warning'"></text>
					<text class="cl-icon-toast-success" v-else-if="conf.type == 'success'"></text>
					<text class="cl-confirm__title">{{ conf.title }}</text>
				</view>
			</template>

			<view
				class="cl-confirm__container"
				:style="{
					textAlign: conf.message ? 'center' : 'left',
				}"
			>
				<slot>
					<view class="cl-confirm__message">{{ conf.message }}</view>
				</slot>
			</view>

			<template #footer v-if="conf.showCancelButton || conf.showConfirmButton">
				<view class="cl-confirm__footer">
					<view class="cl-confirm__footer-item" v-if="conf.showCancelButton">
						<cl-button fill @tap="close('cancel')">
							{{ conf.cancelButtonText }}</cl-button
						>
					</view>

					<view class="cl-confirm__footer-item" v-if="conf.showConfirmButton">
						<cl-button fill type="primary" :loading="loading" @tap="close('confirm')">
							{{ conf.confirmButtonText }}
						</cl-button>
					</view>
				</view>
			</template>
		</cl-dialog>
	</view>
</template>

<script lang="ts">
import { defineComponent, nextTick, ref } from "vue";
import { useI18n } from "vue-i18n";

export default defineComponent({
	name: "cl-confirm",

	setup() {
		const { t } = useI18n();

		// 是否可见
		const visible = ref(false);

		// 是否已关闭
		const closed = ref(true);

		// 是否加载中
		const loading = ref(false);

		// 配置
		const conf = ref<ClConfirm.Options>({});

		// 计时器
		let timer: any;

		// 锁
		let lock = false;

		// 打开
		function open(options: ClConfirm.Options) {
			lock = false;
			visible.value = false;
			clearTimeout(timer);

			function next() {
				visible.value = true;
				closed.value = false;

				// 设置选项
				nextTick(() => {
					conf.value = {
						width: "500rpx",
						showCancelButton: true,
						showConfirmButton: true,
						confirmButtonText: t("确认"),
						cancelButtonText: t("取消"),
						closeOnClickModal: true,
						...options,
					};

					// 是否定时关闭
					if (conf.value.duration) {
						timer = setTimeout(() => {
							close("close");
						}, conf.value.duration);
					}
				});
			}

			if (!closed.value) {
				setTimeout(() => {
					next();
				}, 350);
			} else {
				next();
			}
		}

		// 关闭
		function close(action: ClConfirm.Action = "close") {
			lock = true;

			// 完成
			function done() {
				if (conf.value.callback) {
					conf.value.callback(action);
				}

				nextTick(() => {
					visible.value = false;
					hideLoading();
				});
			}

			// 加载中
			function showLoading() {
				loading.value = true;
			}

			// 关闭加载
			function hideLoading() {
				loading.value = false;
			}

			if (conf.value.beforeClose) {
				conf.value.beforeClose(action, { done, showLoading, hideLoading });
			} else {
				done();
			}
		}

		// 监听关闭
		function onClose() {
			clearTimeout(timer);

			if (!lock) {
				close("close");
			}
		}

		// 监听关闭后
		function onClosed() {
			closed.value = true;
		}

		return {
			visible,
			loading,
			conf,
			open,
			close,
			onClose,
			onClosed,
		};
	},
});
</script>
