<template>
	<view class="page">
		<view v-if="type == 1" class="bg-container">
			<view class="bg-item" v-for="(it,index) in bgList" :key="index"
				:style="{ backgroundImage: `url(${it.elements.templateCover})` }"
				:class="{'active': currentId == it.id}"
				@click="currentId = it.id"
			></view>
			
		</view>
		<view v-if="type == 2" class="bg-container2">
			<view class="bg-item2" v-for="(it,index) in bgList" :key="index"
			    :style="{ backgroundImage: `url(${it.elements.templateCover})` }"
				:class="{'active': currentId == it.id}"
				@click="currentId = it.id"
			></view>
			
		</view>
		<view class="btn-box">
			<view class="btn" @click="preview">预览</view>
		</view>
	</view>
</template>

<script>
import { getBillTemplateList } from "@/api/bar.js"

	export default {
		data() {
			return {
				type: 1,
				currentId: 0,
				bgList:[],
				form: {
					
				}
			};
		},
		onLoad(options) {
			console.log(options)
			this.type = options.type
			this.form = {
				amount: options.amount,
				amount1: options.amount1,
				specs: options.specs,
				specs1: options.specs1,
				no: options.no,
				beerId: options.beerId,
			}
			this.getList()
			uni.setNavigationBarTitle({
				title: this.type == 1 ? '选择图片样式' : '选择打印样式'
			})
		},
		methods: {
			getList() {
				getBillTemplateList().then(res => {
					this.bgList = res.data.filter(it => it.templateType == this.type)
					this.bgList = this.bgList.map(it => {
						if(it.elements) {
							it.elements = JSON.parse(it.elements)
						} else {
							it.elements = {}
						}
						return it
					})
				})
			},
			preview() {
				if(!this.currentId) {
					uni.showToast({
						title: '请选择模板',
						icon: 'none'
					})
					return 
				}
				if(this.type == 1) {
					uni.navigateTo({
						url: `/pagesActivity/preview?templateId=${this.currentId}&beerId=${this.form.beerId}&no=${this.form.no}&amount=${this.form.amount}&amount1=${this.form.amount1}&specs=${this.form.specs}&specs1=${this.form.specs1}`
					})
				} else if(this.type == 2) {
					uni.navigateTo({
						url: `/pagesActivity/pdfPreview?templateId=${this.currentId}&beerId=${this.form.beerId}&no=${this.form.no}&amount=${this.form.amount}&amount1=${this.form.amount1}&specs=${this.form.specs}&specs1=${this.form.specs1}`
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	
	background: #FFF;
	height: 100vh;
	display: flex;
	flex-direction: column;
	
	.bg-container {
		flex: 1;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		overflow-y: auto;
		gap: 24rpx;
		padding: 32rpx 42rpx;
		.bg-item {
			width: 320rpx;
			height: 568rpx;
			border: 2rpx solid #D8D8D8;
			background-repeat: round;
		}
		.active {
			border: 2rpx solid #39E5B1;
		}
	}
	.bg-container2 {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		flex-wrap: wrap;
		overflow-y: auto;
		gap: 24rpx;
		padding: 32rpx 42rpx;
		.bg-item2 {
			background-repeat: round;
			width: 680rpx;
			height: 340rpx;
			border: 2rpx solid #D8D8D8;
		}
		.active {
			border: 2rpx solid #39E5B1;
		}
	}
	.btn-box{
		width: 100%;
		height: 200rpx;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFF;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.btn{
			width: 434rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #39E5B1;
			color: #0B0E26;
			border-radius: 12rpx;
			font-size: 36rpx;
			font-weight: 500;
		}
	}
}
</style>
