<template>
	<u-popup :show="showPop" mode="center" @close="close" closeable>
		<view class="tc-box">
			<header>
				<slot name="header">
					<view class="tc-title">
						<view>{{ title }}</view>
						<view class="icon" @click="close" />
					</view>
				</slot>
			</header>
			<main>
				<view class="tc-content">
					<slot></slot>
				</view>
			</main>
			<footer v-if="footer">
				<slot name="footer">
					<!-- #ifdef H5 -->
					<view class="tc-foot">
						<view @click="confirm(true)">确定</view>
						<view @click="confirm(false)">取消</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="tc-foot-c">
						<view @click="confirm(false)">取消</view>
						<view @click="confirm(true)">确定</view>
					</view>
					<!-- #endif -->
				</slot>
			</footer>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'custom-popup',
		emits: ["close", "confirm"],
		props: {
			title: {
				type: String,
				default: "",
			},
			mode: { //top / right / bottom / center
				type: String,
				default: "center",
			},
			footer: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				showPop: false,
			}
		},
		methods: {
			show() {
				this.showPop = true;
			},
			close() {
				this.showPop = false;
				this.$emit('close');
			},
			confirm(flg) {
				this.showPop = false;
				this.$emit('confirm', flg);
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-popup__content {
		border-radius: 4px;
	}

	::v-deep.u-popup__content__close--top-right {
		top: 10;
		right: 10;
	}

	// 弹出框1
	.tc-box {
		max-width: 86vw;
		min-width: 60vw;
		min-height: 100px;
		box-sizing: border-box;

		.tc-title {
			text-align: center;
			padding: 1em 1.6em 0.3em;
			font-weight: 400;
			font-size: 18px;
			box-sizing: border-box;

		}

		.tc-content {
			min-height: 40px;
			font-size: 15px;
			line-height: 1.4;
			word-wrap: break-word;
			word-break: break-all;
			white-space: pre-wrap;
			color: #999999;
			max-height: 400px;
			overflow-x: hidden;
			overflow-y: auto;
		}

		.tc-foot {
			box-sizing: border-box;
			display: flex;
			justify-content: end;
			float: right;
			padding: 0px 20px 10px 20px;

			&>view {padding: 10px;
				margin: 0 10px;
				color: #2f7b9f;
			}
		}

		.tc-foot-c {
			text-align: center;
			position: relative;
			line-height: 48px;
			font-size: 18px;
			display: flex;


			&>view {
				display: block;
				flex: 1;
				color: rgb(0, 0, 0);
				text-decoration: none;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				position: relative;
				cursor: pointer;
			}

			&>view:last-child {
				color: rgb(0, 122, 255);
			}

			&>view:last-child:after {
				content: ' ';
				position: absolute;
				left: 0;
				top: 0;
				width: 1px;
				bottom: 0;
				border-left: 1px solid #d5d5d6;
				color: #d5d5d6;
				transform-origin: 0 0;
				transform: scaleX(0.5);
			}


		}

		.tc-foot-c:after {
			content: ' ';
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			height: 1px;
			border-top: 1px solid #d5d5d6;
			color: #d5d5d6;
			transform-origin: 0 0;
			transform: scaleY(0.5);
		}
	}
</style>