<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.png" mode="widthFix" style="width: 144rpx;"></image>
			<text style="margin-left: 60rpx;">高 端 酱 酒</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } 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 imageData = ref([] as any);
let videoData = ref();
// 通用模板初始数据
let currencyPage = ref();
let popup = ref();

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

// 上传图片
let uploadImage = () => {
	uni.chooseImage({
		success(res: any) {
			imageData.value = res.tempFiles;
			console.log(res);
			uni.navigateTo({
				url: `./uploadImage?imageData=${encodeURIComponent(JSON.stringify(res.tempFiles))}&imageArr=${encodeURIComponent(JSON.stringify(res.tempFilePaths))}`
			});
		}
	});
};

// 上传视频
let uploadVideo = () => {
	uni.chooseVideo({
		sourceType: ['camera', 'album'],
		success(res: any) {
			console.log(res);
			videoData.value = res;
			uni.navigateTo({
				url: `./uploadVideo?videoData=${encodeURIComponent(JSON.stringify(res))}`
			});
		}
	});
};

// 通用
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)}`
	});
};

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

let initHavePage = async () => {
	uni.showLoading({
		title: '加载中...'
	});
	let res: any = await getHavePage();
	if (res.statusCode == 200) {
		console.log(res, '模板数据');
		uni.hideLoading()
		currencyPage.value = res.data.currencyPage;
		uni.$emit('previewData', { previewData: res.data.customPage });
	}
};
initHavePage();
</script>

<style lang="scss" scoped>
.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>
