<template>
	<view
		class="k-message"
		:class="[
			mode,
			visible ? 'message-show' : ''
		]"
		:style="{
			'--message-color': color[type][0],
			'--message-light-color': color[type][1],
			'--message-border-color': color[type][2],
			'--message-size': size + 'px',
			'--message-padding': padding,
			'top': offset + 'px'
		}"
	>
		<view class="k-message-content">
			<view class="k-message-content-left">
				<text class="iconfont message-icon-style" :class="color[type][3]"></text>
				<text>{{ message }}</text>
			</view>
			<view v-if="showClose" class="iconfont message-cancel-icon icon-quxiao" @click.stop="close"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'k-message',
		data() {
			return {
				// 模式位置 默认
				mode: 'top',
				// 是否显示
				visible: false,
				onClose: null,
				timer: null,
				closed: false,
				color: {
					success: ['#67C23A', '#E1F3D8', '#d2e1c9', 'icon-chenggong'],
					error: ['#F56C6C', '#FDE2E2', '#f0d8d8', 'icon-shibai'],
					warning: ['#E6A23C', '#FAECD8', '#ebdfcd', 'icon-jinggao'],
					info: ['#909399', '#E9E9EB', '#d5d5d6', 'icon-xinxi']
				},
				
				// 提示类型
				type: 'success', 
				// 多久关闭提示（ms）
				duration: 2000, 
				// 提示内容
				message: '提示内容',
				 // 偏移量
				offset: 25,
				 // 是否显示关闭按钮
				showClose: false,
				// 文字、图标大小
				size: 18, 
				 // 内边距大小
				padding: '10px 15px',
			}
		},
		mounted() {
			setTimeout(() => {
				this.visible = !this.visible
			}, 100)
			this.startTimer();
		},
		watch: {
		  closed(newVal) {
		    if (newVal) {
		      this.visible = false;
		    }
		  }
		},
		methods: {
			close() {
			  this.closed = true;
				this.clearTimeout() // 清除定时器 // 点击图标清除时
				setTimeout(() => {
					this.handleAfterLeave()
				}, 400)
			  if (typeof this.onClose === 'function') {
			    this.onClose(this);
			  }
			},
			startTimer() {
			  if (this.duration > 0) {
			    this.timer = setTimeout(() => {
			      if (!this.closed) {
			        this.close();
			      }
			    }, this.duration);
			  }
			},
			clearTimeout() {
				clearTimeout(this.timer)
				this.timer = null
			},
			handleAfterLeave() {
			  this.$el.parentNode.removeChild(this.$el);
			},
		}
	}
</script>

<style scoped lang="scss">
	.k-message {
		position: fixed;
		display: flex;
		justify-content: center;
		left: 50%;
		width: 100%;
		transform: translateX(-50%);
		visibility: hidden;
		transition: all 0.4s;
		z-index: 1009999;
		.k-message-content {
			max-width: 85%;
			color: var(--message-color);
			opacity: 0;
			transform: translateY(-50%);
			transition: all 0.4s;
			padding: var(--message-padding);
			box-sizing: border-box;
			background-color: var(--message-light-color);
			border: 1px solid var(--message-border-color);
			border-radius: 4px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0 0 5px var(--message-border-color);
			.k-message-content-left {
				display: flex;
				align-items: center;
				font-size: var(--message-size);
				line-height: var(--message-size);
				.message-icon-style {
					font-size: var(--message-size);
					color: var(--message-color);
					margin-right: 6px;
				}
			}
			.message-cancel-icon {
				font-size: var(--message-size);
				line-height: var(--message-size);
				height: var(--message-size);
				color: #c0c4cb;
				padding: 4px 0 4px 10px;
			}
		} 
	}
	// .top {
	// 	top: 5%;
	// }
	.center {
		top: 50%;
		transform: translateY(-50%, -50%);
	}
	.message-show {
		visibility: visible;
		.k-message-content {
			opacity: 1 !important;
			transform: translateY(0) !important;
		}
	}

</style>
