<template>
	<view class="boxconstant min-page">
		<view class="bg-fff u-flex u-m-b-32 top">
			<image style="width: 60rpx; height: 60rpx" src="/pageMarket/static/images/cost.png"></image>
			<view class="u-flex-1 u-flex u-p-l-24">
				<view class="u-font-28 u-flex-1 u-p-r-4">
					<view class="color-333 font-bold">私域引流</view>
					<view class="color-666 u-m-t-4 u-font-24">可设置用户下单后展示的群二维码</view>
				</view>
				<!-- <up-switch v-model="form.isEnable" size="18" :active-value="1" :inactive-value="0"></up-switch> -->
			</view>
		</view>
		<view class="boxconstantbox" style="padding: 32rpx 0">
			<view class="u-flex u-row-between x-padding">
				<view class="boxconstantbox_one">群二维码</view>
				<button class="upload" @click="uploadImage">上传</button>
			</view>
			<view class="u-m-t-24 u-flex u-row-center">
				<view class="code" @click="uploadImage">
					<up-icon name="plus" v-if="!form.qrCode" size="20" color="#999"></up-icon>
					<image v-else style="width: 260rpx; height: 260rpx" :src="form.qrCode" mode="scaleToFill" />
				</view>
			</view>
			<view class="u-m-t-32">
				<up-line></up-line>
			</view>
			<view class="u-m-t-32 u-font-28 x-padding">
				<view class="boxconstantbox_one u-m-b-24">模块标题</view>
				<up-input placeholderClass="u-font-28" v-model="form.title" :maxlength="20" placeholder="请输入模块标题"></up-input>
			</view>
			<view class="u-m-t-32">
				<up-line></up-line>
			</view>
			<view class="u-m-t-32 u-font-28 x-padding">
				<view class="boxconstantbox_one u-m-b-24">模块提示语</view>
				<up-input placeholderClass="u-font-28" v-model="defaultNote" :maxlength="20" placeholder="请输入模块提示语" disabled></up-input>
			</view>
			<view class="u-m-t-32">
				<up-line></up-line>
			</view>
			<view class="u-m-t-32 u-font-28 x-padding">
				<view class="boxconstantbox_one u-m-b-24">模块内容</view>
				<up-textarea type="textarea" :maxlength="50" placeholderClass="u-font-28" v-model="form.content" placeholder="请输入模块内容"></up-textarea>
			</view>
			<view class="u-m-t-32">
				<up-line></up-line>
			</view>
			<view class="u-m-t-32 u-font-28 x-padding">
				<view class="boxconstantbox_one u-m-b-24">支付完成弹窗</view>
				<u-switch :active-value="1" :inactive-value="0" v-model="form.orderEnable"></u-switch>
			</view>
			<view class="boxconstantbox">
				<view class="boxconstantbox_one">可使用类型</view>
				<view class="u-m-t-16">
					<my-dine-types v-model="form.orderType"></my-dine-types>
				</view>
			</view>
			<view class="u-m-t-32 u-font-28 x-padding">
				<view class="boxconstantbox_one u-m-b-24">首页弹窗</view>
				<u-switch :active-value="1" :inactive-value="0" v-model="form.homeEnable"></u-switch>
			</view>
			<view class="boxconstantbox">
				<view class="boxconstantbox_one">可使用类型</view>
				<view class="u-m-t-16">
					<u-radio-group v-model="form.homeType">
						<u-radio name="only" label="仅显示1次"></u-radio>
						<u-radio name="day" label="每天显示1次"></u-radio>
						<u-radio name="every" label="每次达成触发条件都显示"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="x-padding u-m-t-32">
				<button class="preview" @click="showPreview = true">预览</button>
			</view>
		</view>
		<up-popup :show="showPreview" mode="center" round="16rpx" closeOnClickOverlay @close="showPreview = false" :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="u-font-28 font-bold color-333">{{ form.title }}</view>
							<view class="u-m-t-16 u-font-24 color-666">{{ form.content }}</view>
						</view>

						<view class="color-999 u-font-24 u-m-t-16">{{ form.note }}</view>
					</view>
					<image :src="form.qrCode" style="width: 240rpx; height: 240rpx" mode="scaleToFill"></image>
				</view>
			</view> -->
			<view class="new_preview">
				<view class="header">{{ shopInfo.shopName }}</view>
				<view class="content">
					<view class="title">{{ form.title }}</view>
					<view class="img_wrap">
						<image class="img" :src="form.qrCode"></image>
					</view>
					<view class="intro">
						{{ form.content }}
					</view>
					<view class="foot">
						{{ form.note }}
					</view>
				</view>
				<view class="close" @click="showPreview = false">
					<u-icon name="close" color="#fff" size="14"></u-icon>
				</view>
			</view>
		</up-popup>
		<my-bottom-btn-group @cancel="cancel" @save="editFreeDing"></my-bottom-btn-group>
	</view>
</template>

<script setup>
import { onShow, onLoad } from '@dcloudio/uni-app';
import { reactive, ref, watch } from 'vue';
import { uploadFile } from '@/http/api/index.js';
import { getConfig, update } from '@/http/api/market/drainageConfig.js';
const shopInfo = ref('');

const showPreview = ref(false);
const defaultNote = ref('如果长按不能识别，可截图或保存二维码图片至相册，通过微信扫码入群');
const form = reactive({
	id: '',
	orderType: [], // 订单页显示类型： 堂食 dine-in 外带 take-out 外卖 take-away
	homeType: '', // 首页显示类型：only 仅显示 1 次，day 每天显示一次，every 每次进入小程序
	qrCode: '',
	title: '',
	content: '', //
	note: defaultNote.value,
	orderEnable: 1, // 订单页是否开启
	homeEnable: 1 // 首页是否开启
});

/**
 * 获取配置信息
 */
const getConfigAjax = async () => {
	let res = await getConfig();
	res.useType = res.useType || [];
	res.note = res.note || '长按识别，微信内扫一扫加好友';
	res.title = res.title || '扫码进取，优惠多多';
	Object.assign(form, res);
};

/**
 * 修改配置信息
 */
const editFreeDing = async () => {
	if (form.orderEnable == 1 && form.orderType.length == 0) {
		return uni.showToast({
			icon: 'none',
			title: '请选择可使用类型'
		});
	}
	if (!form.qrCode) {
		return uni.showToast({
			icon: 'none',
			title: '请上传群二维码'
		});
	}
	if (!form.title) {
		return uni.showToast({
			icon: 'none',
			title: '请输入模块标题'
		});
	}
	if (form.homeEnable == 1 && form.homeType.length == 0) {
		return uni.showToast({
			icon: 'none',
			title: '请选择首页显示类型'
		});
	}
	form.note = defaultNote.value;
	let res = await update(form);
	uni.showToast({
		title: '保存成功'
	});
	Object.assign(form, res);
	setTimeout(() => {
		uni.navigateBack();
	}, 1500);
};

function uploadImage() {
	uni.chooseImage({
		count: 1,
		success: (res) => {
			console.log(res);
			uploadFile(res.tempFiles[0]).then((res) => {
				if (res) {
					form.qrCode = res;
				} else {
					uni.showToast({
						icon: 'none',
						title: '上传失败'
					});
				}
			});
		}
	});
}

function cancel() {
	uni.navigateBack();
}

onLoad(() => {
	shopInfo.value = uni.getStorageSync('shopInfo');
	// uni.$utils.inputReg.bind()()
});

onShow(() => {
	getConfigAjax();
});
</script>

<style lang="scss" scoped>
.x-padding {
	padding-left: 28rpx;
	padding-right: 28rpx;
}
.boxconstant {
	padding: 32rpx 28rpx;
	background: #f7f7f7;
	.boxconstantbox {
		padding: 32rpx 24rpx;
		border-radius: 16rpx;
		margin-top: 32rpx;
		width: 100%;
		background: #ffffff;

		.boxconstantbox_one {
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
		}

		.boxconstantbox_tow {
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			// display: flex;
			// justify-content: flex-start;
			// align-items: center;
			// flex-wrap: wrap;
			// align-content: flex-start;
			.text {
				display: inline-flex;
				text-align: center;
				margin: 0 12rpx;
				width: 118rpx;
				height: 48rpx;
				line-height: 48rpx;
				background: #ffffff;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #e5e5e5;
			}
		}
	}

	.oneboxconstant {
		margin-top: 32rpx;
		width: 100%;
		background: #ffffff;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		padding: 32rpx 24rpx;

		.oneboxconstant_one {
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.save {
		margin: 100rpx auto 50rpx auto;
		width: 530rpx;
		height: 80rpx;
		background: #318afe;
		border-radius: 56rpx 56rpx 56rpx 56rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 80rpx;
		text-align: center;
	}
}
.top {
	padding: 24rpx 20rpx 28rpx 28rpx;
}
.number-box {
	width: 260rpx;
	font-size: 28rpx;
	padding: 10rpx 26rpx;
	border-radius: 6rpx 0 0 6rpx;
	border-top: 2rpx solid #d9d9d9;
	border-bottom: 2rpx solid #d9d9d9;
	border-left: 2rpx solid #d9d9d9;
	background: #fff;
}
.bei {
	display: flex;
	padding: 10rpx 38rpx;
	align-items: center;
	border-radius: 0 6rpx 6rpx 0;
	border: 2rpx solid #d9d9d9;
	background: #f7f7fa;
	font-size: 28rpx;
	color: #999999;
}
.upload {
	padding: 8rpx 32rpx;
	border-radius: 60rpx;
	background: $my-main-color;
	font-size: 28rpx;
	color: #ffffff;
	line-height: 40rpx;
	margin: 0;
}
.code {
	display: flex;
	width: 264rpx;
	height: 264rpx;
	padding: 108rpx;
	justify-content: center;
	align-items: center;
	gap: 20rpx;
	border: 3rpx dashed #d9d9d9;
	background: #fff;
	padding: 2rpx;
}
.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;
}
.new_preview {
	--bg: #3f3b37;
	--color: #f6dfc4;
	--borderColor: #f6dfc45b;
	width: 90vw;
	background-color: var(--bg);
	border-radius: 4px;
	position: relative;
	.close {
		--size: 70upx;
		width: var(--size);
		height: var(--size);
		border-radius: 50%;
		background-color: var(--bg);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: calc(var(--size) * -1 - 20upx);
		left: 50%;
		margin-left: calc(var(--size) / 2 * -1);
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		color: var(--color);
		height: 50px;
		border-bottom: 1px dashed var(--borderColor);
	}

	.content {
		padding-bottom: 14px;

		.title {
			font-size: 14px;
			color: var(--color);
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.img_wrap {
			display: flex;
			justify-content: center;

			.img {
				--size: 220px;
				width: var(--size);
				height: var(--size);
				border-radius: 4px;
			}
		}

		.intro {
			height: 40px;
			font-size: 14px;
			color: var(--color);
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 14px;
		}

		.foot {
			height: 40px;
			color: var(--borderColor);
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 14px;
			text-align: center;
		}
	}
}
</style>
