<template>
	<view class="status_bar"><!-- 这里是状态栏 --></view>
	<headerVue :color2="color"></headerVue>
	<view class="my-container">
		<view class="herder">
			<text></text>
			<view class="iconfont icon-shezhi icon" @click="openSetting"></view>
		</view>
		<view class="detail">
			<view>中国茅台镇</view>
			<view>高端定制酱酒首选品牌</view>
			<view class="smallsize-font">Maotai Town, China The preferred brand</view>
			<view class="smallsize-font">of high-end customized sauce wine</view>
		</view>
		<view class="content">
			<view class="top">
				<image
					src="../../static/msjf-picture/msjf-09.png"
					mode="widthFix"
					class="top-image"
				></image>
				<image
					src="../../static/msjf-picture/msjf-10.png"
					mode="widthFix"
					class="bottom-image"
					@click="currencyTemplate"
				></image>
			</view>
			<view class="top">
				<image
					src="../../static/msjf-picture/msjf-11.png"
					mode="widthFix"
					class="top-image"
				></image>
				<image
					src="../../static/msjf-picture/msjf-12.png"
					mode="widthFix"
					class="bottom-image"
					@click="blankTemplate"
				/>
			</view>
		</view>

		<upload-preview style="margin-top: 60rpx;" @initHavePage="initHavePage"></upload-preview>

		<view class="qr-code">
			<text style="margin-right: 60rpx;">科 技 赋 能</text>
			<image
				src="../../static/msjf-picture/msjf-13.jpg"
				mode="widthFix"
				style="width: 144rpx;"
			></image>
			<text style="margin-left: 60rpx;">高 端 酱 酒</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { getHavePage, getPageComponent } from '@/services/api';
import headerVue from '@/pages/header/index.vue';
import uploadPreview from './uploadPreview.vue';

let color = ref('#a27443');
// 通用模板初始数据
let currencyPage = ref();

let openSetting = () => {
	uni.navigateTo({
		url: './setting',
	});
};

// 通用
let currencyTemplate = async () => {
	let res: any = await getPageComponent({ pageId: currencyPage.value[0].id });
	console.log(res.data, '通用');
	uni.navigateTo({
		url: `./uploadImageVideo?type=${JSON.stringify('currency')}&currencyPage=${JSON.stringify(
			res.data
		)}&id=${currencyPage.value[0].id}`,
	});
};

// 空白
let blankTemplate = () => {
	uni.navigateTo({
		url: `./uploadImageVideo?type=${JSON.stringify('blank')}`,
	});
};

let initHavePage = async () => {
	uni.showLoading({
		title: '加载中...',
	});
	let res: any = await getHavePage();
	if (res.data) {
		uni.hideLoading();
	}
	currencyPage.value = res.data.currencyPage;
	uni.$emit('previewData', { previewData: res.data });
};

uni.$on('updateData', function() {
	initHavePage();
});

initHavePage();
</script>

<style lang="scss" scoped>
page {
	background-color: #f2f2f2;
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.my-container {
	padding: 20rpx 30rpx 10rpx 30rpx;
	.herder {
		display: flex;
		justify-content: space-between;
		font-size: 18px;
		margin-bottom: 20rpx;

		.icon-shezhi:before {
			font-size: 18px;
		}
	}

	.top {
		position: relative;

		.top-image {
			width: 100%;
		}

		.bottom-image {
			position: absolute;
			left: 62%;
			bottom: 13%;
			width: 200rpx;
		}

		&:nth-child(1) {
			margin-bottom: 20rpx;
		}
	}

	.detail {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 60rpx;

		view {
			color: rgb(211, 168, 130);
			font-size: 32rpx;
			font-weight: 600;

			&:nth-child(3) {
				margin-top: 20rpx;
				text-align: right;
				margin-left: 28%;
			}
			&:nth-child(4) {
				margin-left: 24%;
			}
		}

		.smallsize-font {
			font-size: 12px;
			font-weight: normal;
			-webkit-transform-origin-x: 0;
			-webkit-transform: scale(0.55);
		}
	}

	.qr-code {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		width: 100%;
		height: 140rpx;
		margin: 100rpx 0 50rpx 0;
	}
}

.popup-content {
	width: 100%;
	height: 100vh;

	.popup-upload {
		height: 100rpx;
		font-size: 36rpx;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid #ccc;
	}
}
</style>
