<template>
	<view>
		<view v-if="!beerId" class="search-page">
			<commonTitle title="选择生成酒单" bg="#FDFDFD"></commonTitle>
			<view class="search-box">
				<text class="cuIcon-search" style="font-size: 40rpx;color: #A2A2A2;margin-right: 24rpx;"
					@click="search"></text>
				<input v-model="keyword" type="text" placeholder="搜索酒款" @confirm="searchByBeer" @input="changeSearch">
			</view>
			<scroll-view v-if="beers.length > 0" scroll-y="true" class="my-brandSide" style="flex:1">
				<view class="brandSide-box" v-for="(item, index) in beers" :key="index" @click="toBeer(item)">
					<view class="flex align-center justify-start">
						<image :src="item.cover" class="beerCover"></image>
						<view>
							<view class="title">{{ item.beerName }}</view>
							<view class="desc" style="margin-bottom: 10rpx;">{{item.beerStyles}}</view>
							<view class="desc flex align-center">
								<image :src="item.brandLogo" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;">
								</image>
							{{item.brandName}}</view>
						</view>
					</view>
					
					<view class="flex flex-col justify-between">
						<view class="desc margin-bottom-xs">
							{{ item.beerOverallRating || 0 }}
							<text class="cuIcon-favorfill" style="font-size: 30rpx;margin-left: 10rpx;color:#FEE034"></text>
						</view>
						<view class="desc" style="text-align: right;">
							{{ item.beerReviewsCount || 0}}
							<text class="cuIcon-friend" style="font-size: 30rpx;margin-left: 10rpx;"></text>
						</view>
												
					</view>
				</view>
			</scroll-view>
					
			<view v-else style="flex:1;width: 100%;" class="flex justify-center align-center">
				<view style="color: #979797;font-size: 24rpx;">暂无结果</view>
			</view>
		</view>
		<view v-else class="page">
			<view class="goods-box">
				<image :src="beer.cover" class="cover"></image>
				<view class="flex-1">
					<view style="font-size: 40rpx;color: #141415;font-weight: 600;margin-right: 8rpx;margin-bottom: 28rpx;">
						{{ beer.beerName}}</view>
					<view style="margin-bottom: 18rpx;font-size: 30rpx;color: #5F5F63;">{{ beer.beerStyles}}</view>
					<!-- <view style="margin-bottom: 38rpx;font-size: 30rpx;color: #5F5F63;">{{ beer.launchDate }}</view> -->
					<view class="flex align-center" style="margin-bottom: 18rpx">
						<image :src="beer.brandLogo" style="width: 48rpx;height: 48rpx;margin-right: 12rpx;">
						</image>
						<text class="">{{ beer.brandName}}</text>
					</view>
					<text style="border-radius: 16rpx;background: #F5F5F5;padding: 8rpx 32rpx;color: #5F5F63;">
						<text class="cuIcon-favorfill" style="font-size: 30rpx;color: #FFBC11;margin-right: 18rpx;"></text>
						{{ beer.beerOverallRating}}
					</text>
					<text style="color: #5F5F63;margin-left: 16rpx;">{{beer.beerReviewsCount}} 条评论</text>
				</view>
			</view>
			<view class="form-box">
				<view >
					<view class="line-item">
						<view class="title margin-bottom-xs">输入酒枪编号</view>
						<input v-model="form.no" type="number" placeholder="限输入数字" class="zd-input"></input>
						
					</view>
					<view class="line-item">
						<view class="title margin-bottom-xs" style="margin-bottom: 20rpx;">编辑售卖的规格</view>
						<view class="flex" style="gap: 40rpx;margin-bottom: 40rpx;">
							<input v-model="form.specs" type="number" placeholder="输入规格(ML)" class="zd-input"></input>
							<input v-model="form.amount" type="digit" placeholder="输入金额(¥)" class="zd-input"></input>
						</view>
						<view class="flex" style="gap: 40rpx;">
							<input v-model="form.specs1" type="number" placeholder="输入规格(ML)" class="zd-input"></input>
							<input v-model="form.amount1" type="digit" placeholder="输入金额(¥)" class="zd-input"></input>
						</view>
					</view>
					<view class="line-item" style="border-left-color: transparent;">
						<view class="title">选择导出方式</view>
						<view style="margin-bottom: 50rpx;" @click="toPerview(1)">
							<view class="flex align-center" style="margin-bottom: 18rpx">
								<image src="/static/map.png" style="width: 48rpx;height: 48rpx;margin-right: 32rpx;">
												</image>
								<text class="">以图片形式分享</text>
							</view>
						</view>
						<view  @click="toPerview(2)">
							<view class="flex align-center" style="margin-bottom: 18rpx">
								<image src="/static/printer.png" style="width: 48rpx;height: 48rpx;margin-right: 32rpx;">
												</image>
								<text class="">PDF文件，适合打印（460mm*230mm）</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <button class="cu-btn bg-zd" style="width: 100%;height: 88rpx;">下一步</button> -->
			</view>
		</view>
		<loginPopup ref="loginRef"></loginPopup>
	</view>
	
</template>

<script>
	import commonTitle from '@/components/commonTitle.vue'
	import loginPopup from '@/components/loginPopup.vue';
	import {
		commonSearch,
		popularStyle,
		getBeerByStyle,
		searchByBreweriesApi,
		getBeerList
	} from "@/api/platform.js"
	import {
		getBeerInfo
	} from "@/api/bar.js"
	export default {
		components: {
			commonTitle,
			loginPopup
		},
		data() {
			return {
				keyword:'',
				beerId: '',
				beers:[],
				beer: {},
				form: {
					no: '',
					amount: '',
					amount1: '',
					specs: '',
					specs1: '',
				}
			};
		},
		onLoad(options) {
			if(options.beerId){
				this.beerId = options.beerId
				this.getBeerInfoFun()
			}
			
		},
		methods: {
			changeSearch() {
			  if(this.keyword.length < 2) return
			  
			  // 节流搜索
			  if (this.timer) {
				  clearTimeout(this.timer)
				  this.timer = null
			  }
			  this.timer = setTimeout(()=>{
				  if(this.keyword.length < 2) return
				  this.searchByBeer()
			  },500)
			},
			// 酒款筛选
			searchByBeer() {
				uni.showLoading({
					mask:true
				})
				getBeerList(this.keyword).then(res => {
					console.log(res)
					this.beers = res.rows
					uni.hideLoading()
				}).finally(()=>{
					uni.hideLoading()
				})
			},
			toBeer(item) {
				this.beerId = item.id
				this.getBeerInfoFun()
			},
			getBeerInfoFun() {
				getBeerInfo(this.beerId).then(res => {
					this.beer = res.data
				})
			},
			toPerview(type) {
				if (!uni.getStorageSync('token') && index != 5) {
					this.$refs.loginRef.open()
					return
				}
				if (!this.form.no) {
					uni.showToast({
							title: '请输入酒枪编号',
							icon: 'none',
						})
						return
				}
				if(!this.form.amount || !this.form.specs) {
					uni.showToast({
							title: '请输入售卖规格',
							icon: 'none',
					})
					return
				}
				this.form.type = type
				uni.navigateTo({
					url: `/pagesActivity/bgSelect?type=${type}&beerId=${this.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>
	.search-page {
		height: 100vh;
		background: #FDFDFD;
		.search-box {
			border-radius: 20rpx;
			box-sizing: border-box;
			// width: 100%;
			height: 100rpx;
			background-color: rgba(196, 196, 196, 0.15);
			display: flex;
			align-items: center;
			padding: 20rpx 18rpx;
			margin: 0 30rpx 20rpx 22rpx;
		
			input {
				width: 100%;
				height: 100%;
				background-color: transparent;
				font-size: 28rpx;
			}
		}
		.my-brandSide {
			padding: 28rpx 36rpx;
		
			.brandSide-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #F0F4F9;
				padding: 32rpx 0;
		
				.logo {
					width: 88rpx;
					height: 88rpx;
					border-radius: 12rpx;
					margin-right: 28rpx;
				}
				.beerCover {
					width: 120rpx;
					height: 140rpx;
					border-radius: 12rpx;
					margin-right: 28rpx;
				}
				.title {
					font-size: 28rpx;
					color: #19191B;
					margin-bottom: 20rpx;
				}
		
				.desc {
					font-size: 20rpx;
					color: #9C9BA6;
				}
			}
		}
	}
	
	.page {
		background: #F2F2F2;
		padding: 24rpx 32rpx;
		
		
		.goods-box {
			border-radius: 12rpx;
			background: #fff;
			box-sizing: border-box;
			border: 1px solid #F2F2F2;
			// box-shadow: 0px 5.47px 43.78px 0px rgba(0, 0, 0, 0.05);
			display: flex;
			padding: 24rpx 32rpx;
			margin-bottom: 32rpx;
			.cover {
				width: 208rpx;
				height: 300rpx;
				border-radius: 30rpx;
				margin-right: 14rpx;
			}
		}
		.form-box {
			padding: 24rpx 28rpx;
			border-radius: 12rpx;
			background: #fff;
			box-sizing: border-box;
			.line-item {
				padding-left: 18rpx;
				padding-bottom: 48rpx;
				border-left: 4rpx solid #39E5B1;
				position: relative;
				.title {
					font-family: Roboto;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 130%;
					color: #3D3D3D;
					margin-bottom: 24rpx;
				}
				&::after {
					position: absolute;
					left: -12rpx;
					top:0;
					content: '';
					display: block;
					width: 18rpx;
					height: 18rpx;
					border-radius: 50%;
					background: #39E5B1;
					
				}
			}
			.zd-input {
				// width: 654rpx;
				height: 96rpx;
				border-radius: 16rpx;
				background-color: #FFF;
				padding: 0 30rpx;
				box-sizing: border-box;
				color: #000;
				
				border: 1px solid #C8C8C8;
			}
		}
	}
</style>