<template>
	<view class="page">
		<u-navbar title="商品详情" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
			title-size='36' height='36' id="navbar">
		</u-navbar>
		<!-- 位置选择弹窗 -->
		<view class="seat-selector" :class="{ 'show': addmenflag }" v-show="addmenflag">
			<view class="selector-header">
				<view class="title">选择卡座位置</view>
				<view class="floor-tabs">
					<view v-for="floor in floors" :key="floor.id"
						:class="['floor-tab', currentFloor === floor.id ? 'active' : '']"
						@click="selectFloor(floor.id)">
						{{floor.name}}
					</view>
				</view>
			</view>
			<view class="selector-content">
				<view class="area-list">
					<view v-for="area in areas" :key="area.id"
						:class="['area-item', currentArea === area.id ? 'active' : '']" @click="selectArea(area.id)">
						{{area.name}}
					</view>
				</view>
				<view class="seat-grid">
					<view v-for="seat in seats" :key="seat.id"
						:class="['seat-item', currentSeat === seat.id ? 'active' : '']" @click="selectSeat(seat)">
						{{seat.name}}
					</view>
				</view>
			</view>
			<view class="selector-footer">
				<view class="btn cancel" @click="addmenflag = false">取消</view>
				<view class="btn confirm" @click="confirmSeatSelection">确认</view>
			</view>
		</view>
		<view class="mask" v-if="addmenflag"></view>

		<view class="product-img-wrap">
			<image class="product-img" :src="shopxqobj.skuList[0].image" mode="aspectFit"></image>
		</view>
		<!-- 商品信息 -->
		<view class="product-info">
			<view class="product-title-row">
				<text class="product-title">{{shopxqobj.skuList[0].goodsName}}</text>
				<text class="product-month">数量x{{shopxqobj.surplusTotal}}</text>
			</view>
			<view class="product-desc-row" style="border-bottom: 1px solid #797979;">
				<text class="desc-label">优惠介绍</text>
				<text class="desc-content">仅可在{{shopxqobj.storeName}}兑换使用</text>
			</view>
			<view class="product-time-row">
				<text class="time-label">获得时间</text>
				<text class="time-content">{{shopxqobj.createTime}}</text>
			</view>
			<view class="product-step-row">
				<text class="step-label">使用步骤</text>
				<view class="step-content">
					<view class="step-item">
						<u-icon name="order" size="28" color="#fff" />
						<text>小程序下单</text>
					</view>
					<u-icon name="arrow-right" size="20" color="#fff" />
					<view class="step-item">
						<u-icon name="checkmark-circle" size="28" color="#fff" />
						<text>自动抵扣</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="seat-selection" @click="chooseSeat">
			<image class="qian" src="https://api.ccttiot.com/smartmeter/img/static/uGlQHVe71tVCmnjW8Tsu" mode="">
			</image> <text>{{kazuoid}}</text>
			<image class="hou" src="https://api.ccttiot.com/smartmeter/img/static/uBrspupsx9JJF7xv7oDQ"
				mode="aspectFit"></image>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-btn-wrap">
			<button class="exchange-btn" @click="btnduih">立即兑换</button>
		</view>
		
	</view>
</template>
<script>
	import {
		number
	} from 'echarts'
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#232020",
				},
				addmenflag: false,
				currentFloor: '',
				currentArea: '',
				currentSeat: '',
				selectedPosition: '',
				floors: [],
				areas: [],
				seats: [],
				kazuoid: '请选择卡座',
				partId: '',
				fenquid: '',
				zuoweiid: '',
				selectedItems: [],
				shopid: '',
				shopxqobj:{},
                channelId:''				
			}
		},
		onLoad(option) {
			this.shopid = option.id
			this.getlouceng()
			this.getxq()
			this.getchannelid()
		},
		onShow() {

		},
		methods: {
			// 请求channelId
			getchannelid(){
				this.$u.get(`/app/channel/list?appId=${this.$store.state.appid}&bstType=2`).then((res) => {
					if (res.code == 200) {
						this.channelId = res.data[0].channelId
					}
				})
			},
			// 点击立即兑换
			btnduih(){
				if(this.kazuoid == '请选择卡座'){
					uni.showToast({
						title: '请选选择卡座信息',
						icon: 'none',
						duration: 2000
					})
					return
				}
				uni.showLoading({
					title: '兑换中...',
					mask: true
				})
				let skuList = []
				skuList.push({
					skuId:this.shopxqobj.skuList[0].id,
					number:this.shopxqobj.surplusTotal
				})
				let data = {
					vipUserId:this.shopid,
					skuList:skuList
				}
				this.$u.post(`/app/goodsOrder/calcGoodsOrderFee`,data).then(res => {
					if (res.code == 200) {
						let datas = {
							storeId:this.$store.state.storeId,
							vipUserId:this.shopid,
							payAmount:res.data.actualAmount,
							shoppingList:skuList,
							boothId:this.currentSeat
						}
						this.$u.post(`/app/goodsOrder`,datas).then(res => {
							if (res.code == 200) {
								let datass = {
									orderNo:res.msg,
									appId:this.$store.state.appid,
									channelId:this.channelId
								}
								this.$u.post(`/app/goodsOrder/pay`,datass).then(res => {
									if (res.code == 200) {
										uni.hideLoading()
										uni.showToast({
											title: '兑换成功',
											icon: 'success',
											duration:3000
										})
										setTimeout(()=>{
											uni.navigateBack()
										},2000)
									}else{
										uni.hideLoading()
										uni.showToast({
											title: res.msg,
											icon: 'success',
											duration:3000
										})
									}
								})
							}else{
								uni.hideLoading()
								uni.showToast({
									title: res.msg,
									icon: 'success',
									duration:3000
								})
							}
						})
					}else{
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration:3000
						})
					}
				})
			},
			// 获取兑换详情
			getxq(){
				this.$u.get(`/app/vipUser/detail?storeId=${this.$store.state.storeId}&id=${this.shopid}`).then(res => {
					if (res.code === 200) {
						this.shopxqobj = res.data
					}
				})
			},
			// 点击选择位置
			confirmSeatSelection() {
				const floor = this.floors.find(f => f.id === this.currentFloor)
				const area = this.areas.find(a => a.id === this.currentArea)
				const seat = this.seats.find(s => s.id === this.currentSeat)
				if (floor && area && seat) { //判断有楼层，分区，卡座
					this.selectedPosition = `${floor.name}-${area.name}-${seat.name}`
					this.kazuoid = `${seat.name}`
					this.boothId = `${seat.id}`
					this.addmenflag = false
				} else if (floor && seat) { //判断只有楼层和卡座
					this.selectedPosition = `${floor.name}-${seat.name}`
					this.kazuoid = `${seat.name}`
					this.boothId = `${seat.id}`
					this.addmenflag = false
				} else {
					uni.showToast({
						title: '请选择完整的卡座信息',
						icon: 'none',
						duration:3000
					})
				}
			},
			// 查询楼层列表
			getlouceng() {
				this.$u.get(`/app/part/list?storeId=${this.$store.state.storeId}&pageNum=1&pageSize=99&isFloor=true`).then(
					res => {
						if (res.code === 200) {
							this.floors = []
							this.partId = res.data.partId
							res.data.forEach(item => {
								if (item.parentId == null) {
									this.floors.push({
										id: item.partId,
										name: item.partName
									})
								}
							})
							if (this.floors.length > 0) {
								this.fenquid = this.floors[0].id
								this.currentFloor = this.floors[0].id
								this.getfenqu()
							}
						}
					})
			},
			// 查询分区
			getfenqu() {
				if (this.floors.length > 0) {
					this.$u.get(`/app/part/list?parentId=${this.fenquid}&pageNum=1&pageSize=99`).then(res => {
						if (res.code === 200) {
							this.areas = []
							if (res.data) {
								res.data.forEach(item => {
									this.areas.push({
										id: item.partId,
										name: item.partName
									})
								})
							}
							if (this.areas.length > 0) { //如果有分区则进行查下去没有分区则直接拿楼层id查卡座
								this.zuoweiid = this.areas[0].id
								this.currentArea = this.areas[0].id
								this.getkazuo()
							} else {
								this.getkazuo()
							}
						}
					})
				}
			},
			// 查询卡座
			getkazuo() {
				this.$u.get(
					`/app/booth/list?partId=${this.zuoweiid == undefined ? this.partId : this.zuoweiid }&pageNum=1&pageSize=99`
					).then(res => {
					if (res.code === 200) {
						this.seats = []
						res.data.forEach(item => {
							this.seats.push({
								id: item.boothId,
								name: item.boothName
							})
						})
					}
				})
			},
			// 切换楼层
			selectFloor(floorId) {
				this.currentFloor = floorId
				this.fenquid = floorId
				this.getfenqu()
			},
			//切换分区
			selectArea(areaId) {
				this.currentArea = areaId
				this.zuoweiid = areaId
				this.getkazuo()
			},
			// 切换卡座
			selectSeat(seat) {
				this.currentSeat = seat.id
				console.log(seat, this.currentSeat);
			},
			// 点击显示选择卡座位置
			chooseSeat() {
				this.addmenflag = true
			},
		}
	}
</script>
<style scoped lang="less">
	page {
		background-color: #111111 !important;
	}
	.page{
		background-color: #111111 !important;
	}

	.duihuan-detail {
		background: #111;
		min-height: 100vh;

	}

	.product-img-wrap {
		background: #232020;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 582rpx;
		.product-img {
			width: 280rpx;
			height: 280rpx;
			border-radius: 20rpx;
		}
	}

	.product-info {
		background: #191919;
        height: 822rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		.product-title-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			font-size: 36rpx;
			margin-bottom: 20rpx;
            border-bottom: 1px solid #797979;
			padding: 40rpx 30rpx 40rpx 30rpx;
			.product-title {
				font-weight: bold;
			}

			.product-month {
				font-size: 24rpx;
				color: #aaa;
			}
		}

		.product-desc-row,
		.product-time-row {
			display: flex;
			margin-bottom: 20rpx;
            padding: 28rpx 30rpx 42rpx 30rpx;
			.desc-label,
			.time-label {
				color: #aaa;
				width: 140rpx;
			}

			.desc-content,
			.time-content {
				color: #fff;
			}
		}

		.product-step-row {
			display: flex;
			padding: 28rpx 30rpx 28rpx 30rpx;
			align-items: center;
			.step-label {
				color: #aaa;
			}

			.step-content {
				display: flex;
				align-items: center;
                margin-left: 30rpx;
				.step-item {
					display: flex;
					align-items: center;
					color: #fff;
					font-size: 26rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.bottom-btn-wrap {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 60rpx;
		background: transparent;
		padding: 30rpx;

		.exchange-btn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			background: #ff8998;
			color: #fff;
			font-size: 32rpx;
			border-radius: 45rpx;
			border: none;
		}
	}

	.mask {
		width: 100%;
		height: 100vh;
		background: #010000;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 0.5;
		position: fixed;
		top: 0;
		left: 0;
	}

	.seat-selector {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 58vh;
		background-color: #0B0B0B;
		border-radius: 40rpx 40rpx 0 0;
		z-index: 999;
		padding-bottom: 100rpx;
		box-sizing: border-box;
		transform: translateY(100%);
		transition: transform 0.3s ease-out;

		&.show {
			transform: translateY(0);
		}

		.selector-header {
			padding: 40rpx 30rpx;

			.title {
				font-size: 32rpx;
				color: #fff;
				margin-bottom: 30rpx;
			}

			.floor-tabs {
				display: flex;
				gap: 20rpx;

				.floor-tab {
					padding: 10rpx 40rpx;
					background: #1A1A1A;
					color: #fff;
					border-radius: 10rpx;
					font-size: 28rpx;

					&.active {
						background: #FF8998;
					}
				}
			}
		}

		.selector-content {
			display: flex;
			height: calc(100% - 300rpx);

			.area-list {
				width: 200rpx;
				background: #1A1A1A;

				.area-item {
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;

					&.active {
						background: #FF8998;
					}
				}
			}

			.seat-grid {
				flex: 1;
				padding: 20rpx;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20rpx;
				overflow-y: auto;

				.seat-item {
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #1A1A1A;
					color: #fff;
					border-radius: 10rpx;
					font-size: 28rpx;

					&.active {
						background: #FF8998;
					}
				}
			}
		}

		.selector-footer {
			position: absolute;
			bottom: 44rpx;
			left: 0;
			width: 100%;
			height: 120rpx;
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			background: #0B0B0B;

			.btn {
				width: 45%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 10rpx;
				font-size: 28rpx;

				&.cancel {
					background: #1A1A1A;
					color: #fff;
				}

				&.confirm {
					background: #FF8998;
					color: #fff;
				}
			}
		}
	}

	.seat-selection {
		display: flex;
		align-items: center;
		width: 100%;
		color: #fff;
		background-color: #111111;
		padding: 15rpx;
		z-index: 1;

		.qian {
			width: 36rpx;
			height: 36rpx;
			margin-right: 14rpx;
		}

		.hou {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.seat-selection text {
		font-size: 28rpx;
	}

	.seat-selection image {
		width: 20rpx;
		height: 20rpx;
	}
</style>