<template>
	<view>
		<!-- 私域引流 -->
		<up-popup :show="show" mode="center" round="16rpx" closeOnClickOverlay @close="close" :safeAreaInsetBottom="false">
			<view class="preview-box">
				<view class="u-flex" style="align-items: stretch">
					<view class="u-flex-1 u-p-r-24 u-flex u-flex-col" style="align-items: start; justify-content: space-between">
						<view>
							<view class="font-14 font-bold color-333">{{ drainageConfig.title }}</view>
							<view class="u-m-t-16 font-12 color-666">{{ drainageConfig.content }}</view>
						</view>

						<view class="color-999 font-12 u-m-t-16">{{ drainageConfig.note }}</view>
					</view>

					<image :show-menu-by-longpress="true" :src="drainageConfig.qrCode" style="width: 240rpx; height: 240rpx" mode="aspectFit"></image>
				</view>

				<view class="close" @click="close">
					<up-icon name="close-circle" size="34" color="#fff"></up-icon>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
import * as drainageConfigApi from '@/common/api/market/drainageConfig.js';
import { ref, reactive, computed, watch, onMounted } from 'vue';

const showPreview = defineModel({
	type: Boolean,
	default: false
});

const show = ref(false);
const emit = defineEmits(['close']);

function close() {
	show.value = false;
	emit('close');
}
const drainageConfig = ref({});
async function getDrainageConfig() {
	const shopId = uni.cache.get('shopId');
	const drainageConfigRes = await drainageConfigApi.config({
		shopId: shopId
	});
	drainageConfig.value = drainageConfigRes;
	if (drainageConfig.value.isEnable) {
		show.value = true;
	} else {
		close();
	}
}
// onMounted(() => {
//   getDrainageConfig();
// });
watch(
	() => showPreview.value,
	(newVal) => {
		if (newVal) {
			getDrainageConfig();
		}
	}
);
</script>

<style scoped lang="scss">
.u-flex-col {
	flex-direction: column;
}
.preview {
	padding: 8rpx 32rpx;
	border-radius: 12rpx;
	background: $my-main-color;
	color: #ffffff;
	font-size: 28rpx;
	font-weight: 400;
	line-height: 40rpx;
}
.preview-box {
	width: 700rpx;
	padding: 32rpx 28rpx;
	position: relative;
	.close {
		position: absolute;
		left: 50%;
		bottom: -100rpx;
		transform: translateX(-50%);
	}
}
</style>
