<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>
						<view>this.pop.rolaFrequency</view>
					</slot>
				</view>
			</main>
			<footer v-if="footer">
				<slot name="footer">
					<!-- #ifdef APP-PLUS -->
					<view class="tc-foot">
						<view @click="confirm(true)">确定</view>
						<view @click="confirm(false)">取消</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<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;
		padding: 20px;

		.tc-title {
			font-size: 34rpx;
			font-weight: bold;
		}

		.tc-content {
			font-size: 30rpx;
			margin: 10px 0;
		}

		.tc-foot {
			display: flex;
			justify-content: end;

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

		.tc-foot-c {
			display: flex;
			text-align: center;

			&>view {
				border: 1px solid #f3f3f3;
				flex: 1;
				line-height: 40px;
			}

			&>view:last-child {
				color: #2f7b9f;
				border-left: none;
			}
		}
	}
</style>