<template>
	<!-- 道具商城页面 -->
	<view class="view-page">
		<view v-if="!errorPage">
			<!-- 自定义选项卡 -->
			<NavigationTabs :tabs-data="tabs" :default-active="currentIndex" @tab-change="handleTabChange" />
			<view class="swiper-view">
			</view>
			<scroll-view scroll-y="true" class="list-view">
				<view class="flex-container" v-if="listData && listData.length">
					<!-- 循环生成子元素 -->
					<view v-for="(item,index) in listData" @click="openPopup(item)" :key="index"
						class="flex-item decorate-box">
						<view class="decorate-content">
							<view class="decorate-image">
								<img :src="item.base_image" alt="" />
							</view>
							<view class="decorate-title w-fill color-3 font-28">
								{{item.title}}
							</view>
							<view class="decorate-price color-3 w-fill">
								<img class="icon-goin" src="@/static/image/goin.png" alt="" /> {{item.price}}
							</view>
							<view class="decorate-tag" v-if="[6,7,8].includes(item.type)">
								<span v-if="item.type === 6">个人靓号</span>
								<span v-if="item.type === 7">房间靓号</span>
								<span v-if="item.type === 8">公会靓号</span>
							</view>
						</view>
					</view>
				</view>
				<view class="color-9" v-else style="text-align: center;font-size: 24rpx;">
					暂无数据
				</view>
			</scroll-view>
			<uni-popup ref="popup" borderRadius="32rpx 32rpx 0 0" type="bottom" background-color="#fff">
				<view class="popup-view" v-if="decorateDetail.tab.type !== 12">
					<view class="decorate-image">
						<img :src="decorateDetail.base_image" alt="" />
					</view>
					<view class="decorate-title w-fill color-3 font-28">
						{{decorateDetail.title}}
					</view>
					<view class="decorate-info">
						<view class="info-line">
							<view class="line-lable">
								商品名称
							</view>
							<view class="">
								{{decorateDetail.title}}
							</view>
						</view>
						<view class="info-line">
							<view class="line-lable">
								商品价格
							</view>
							<view class="flex-line">
								{{payData.price}} <img class="icon-goin ml-6" src="@/static/image/goin.png" alt="" />
							</view>
						</view>
						<template v-if="decorateDetail.decorate && decorateDetail.decorate.price_list">
							<view class="info-line">
								<view class="line-lable">
									有效期至
								</view>
								<view class="">
									{{payData.end_time}}
								</view>

							</view>
							<view style="padding: 18rpx 0;">
								<view class="line-lable" style="text-align: left;">
									购买时长
								</view>
							</view>
							<view class="info-line setmenut" style="justify-content: flex-start">
								<view :class="currentMenuIndex === menuIndex ? 'active-menubox' : 'menubox'"
									v-for="(menu,menuIndex) in decorateDetail.decorate.price_list"
									@click="changePayData(menu,menuIndex)">
									<view>
										{{menu.day}}天
									</view>
								</view>
							</view>
						</template>
					</view>
					<view class="flex-line user-account font-28">
						<view class="">
							<img class="icon-goin ml-6" src="@/static/image/goin.png" alt="" />
						</view>
						<view class="color-6 ml-20">
							{{decorateDetail.user_info.user_coin}}
						</view>
						<view class="chongzhi-text ml-20" v-if="isShow" @click="RechargeCoin">
							去充值
						</view>
					</view>
					<view class="button-footer">
						<view class="pay-button" @click="toPay">
							确认支付
						</view>
					</view>
				</view>
				<view class="popup-view" v-else>
					<view class="decorate-image" style="width: 280rpx;height: 300rpx;">
						<img :src="decorateDetail.base_image" alt="" />
					</view>
					<view class="decorate-title w-fill color-3 font-28">
						{{decorateDetail.title}}
					</view>
					<view class="decorate-info">
						<view class="info-line">
							<view class="line-lable">
								商品名称
							</view>
							<view class="">
								{{decorateDetail.title}}
							</view>
						</view>
						<view class="info-line">
							<view class="line-lable">
								商品单价
							</view>
							<view class="flex-line">
								{{decorateDetail.decorate.price}} <img class="icon-goin ml-6"
									src="@/static/image/goin.png" alt="" />
							</view>
						</view>
						<view class="info-line">
							<view class="line-lable">
								购买次数
							</view>
							<view class="flex-line">
								<uni-number-box v-model="payData.number" @change="changeValue" />
							</view>
						</view>
						<view class="info-line">
							<view class="line-lable">
								商品总价
							</view>
							<view class="flex-line">
								{{payData.allPrice}}
							</view>
						</view>
					</view>
					<view class="flex-line user-account font-28">
						<view class="">
							<img class="icon-goin ml-6" src="@/static/image/goin.png" alt="" />
						</view>
						<view class="color-6 ml-20">
							{{decorateDetail.user_info.user_coin}}
						</view>
						<view class="chongzhi-text ml-20" v-if="isShow" @click="RechargeCoin">
							去充值
						</view>
					</view>
					<view class="button-footer">
						<view class="pay-button" @click="toPay">
							确认支付
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<view v-else>
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import http from '@/until/http.js';
	import NavigationTabs from '@/component/tab.vue'
	export default {
		components: {
			NavigationTabs
		},
		data() {
			return {
				errorPage: true,
				tabs: [],
				listData: [],
				currentIndex: 0,
				indicatorLeft: 5,
				decorateDetail: null,
				currentMenuIndex: 0,
				payData: null,
				isShow: true,
				msgType:"success",
				messageText:"操作成功"
			}
		},
		onLoad(options) {
			this.errorPage = true
			const {
				id,
				is_show
			} = options
			uni.setStorageSync('token', id)
			if (is_show) {
				const flag = Number(is_show)
				this.isShow = flag === 1 ? true : false
			} else {
				this.isShow = true
			}
			if (uni.getStorageSync('token')) this.gettabs()
		},
		methods: {
			async gettabs() {
				http.get('/api/Decorate/get_type_list', {
					token: uni.getStorageSync('token') || '',
					have_hot: 0
				}).then(response => {
					const {
						data,
						code
					} = response
					// let list = []
					if (code) {
						// console.log(data)
						this.tabs = data.map(ele => {
							return {
								type: ele.id,
								value: ele.name
							}
						})
					}
					// this.tabs = list
					this.errorPage = false
					this.$nextTick(() => {
						this.getDecorate(this.tabs[0].type)
					})
				}).catch(error => {
					this.tabs = []
					this.errorPage = true
				});
			},
			async getDecorate(type) {
				http.get('/api/Decorate/get_decorate_list', {
					token: uni.getStorageSync('token') || '',
					type
				}).then(response => {
					const {
						data,
						code
					} = response
					this.listData = code ? data : []

				}).catch(error => {
					this.tabs = []
					this.errorPage = true
				});
			},
			async getDecorateDetail(id, detail) {
				// console.log(id, detail)
				this.payData = {}
				http.get('/api/Decorate/get_decorate_detail', {
					token: uni.getStorageSync('token') || '',
					did: id
				}).then(response => {
					const {
						data,
						code
					} = response
					this.decorateDetail = code ? {
						...detail,
						...data,
						tab: this.tabs[this.currentIndex]
					} : null
					this.currentMenuIndex = 0
					if (this.decorateDetail.tab.type !== 12) {
						this.payData = this.decorateDetail.decorate.price_list[this.currentMenuIndex]
					} else {
						this.payData.price = this.decorateDetail.decorate.price
						this.payData.number = 1
						this.payData.allPrice = this.decorateDetail.decorate.price * 1
					}
					// console.log(this.decorateDetail)
					this.$refs.popup.open('bottom')

				}).catch(error => {});
			},
			changeValue(value) {
				// console.log(value)
				// console.log(this.payData)
				this.payData.allPrice = value * this.payData.price
			},
			changePayData(data, index) {
				this.payData = data
				this.currentMenuIndex = index
			},
			handleTabChange({
				index,
				tab
			}) {
				this.currentIndex = index;
				console.log(index, tab)
				const {
					type
				} = tab
				this.getDecorate(type)
			},
			// 打开弹框
			openPopup(data) {
				this.getDecorateDetail(data.did, data)
			},
			closePopup() {
				this.decorateDetail = null
				this.currentMenuIndex = 0
				this.payData = null
				this.$refs.popup.close()
			},
			// 去支付
			toPay() {
				if (this.decorateDetail.tab.type !== 12) {
					if (this.payData.price > this.decorateDetail.user_info.user_coin) {
						// 余额不足 
						this.messageText = "余额不足"
						this.msgType = 'error'
						this.$refs.message.open()
						return
					}

				} else {
					// 降身卡
					if (this.payData.allPrice > this.decorateDetail.user_info.user_coin) {
						// 余额不足 
						this.messageText = "余额不足"
						this.msgType = 'error'
						this.$refs.message.open()
						return
					}
				}
				// 余额足 调购买装扮接口
				this.payDecorate(this.decorateDetail.tab.type)
			},
			payDecorate(type) {
				uni.showLoading({
					mask: true
				})
				http.post('/api/Decorate/pay_decorate', {
					token: uni.getStorageSync('token') || '',
					did: this.decorateDetail.did,
					day: type !== 12 ? this.payData.day : 0,
					num: type !== 12 ? 0 : this.payData.number
				}).then(response => {
					if (response.code) {
						this.messageText = "购买成功"
						this.msgType = 'success'
						this.$refs.message.open()
						uni.hideLoading()
						this.closePopup()
					} else {
						this.messageText = response.msg
						this.msgType = 'error'
						this.$refs.message.open()
					}

				}).catch(error => {});

			},
			// 点击去充值
			RechargeCoin() {
				const platform = uni.getSystemInfoSync().platform;
				if (platform === 'ios') {
					// 通过 messageHandlers 调用 iOS 原生方法
					window.webkit.messageHandlers.nativeHandler.postMessage({
						'action': 'Recharge'
					});
				} else if (platform === 'android') {
					// 调用 Android 原生方法
					window.Android.Recharge();

				}

			}
		}
	}
</script>
<style lang="scss" scoped>
	.view-page {
		padding: 0 32rpx;
		min-height: 100vh;
		background: #00000000;

		.decorate-box {
			margin: 0 auto;

			.decorate-content {
				width: 95%;
				background: #EFF2F8;
				border-radius: 20rpx;
				position: relative;
				text-align: center;
				display: inline-flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: center;
				align-content: center;
				margin-bottom: 14rpx;
				padding: 12rpx 0;

				.decorate-image {
					// width: 120rpx;
					height: 120rpx;
					margin: 12rpx 0;
					width: 100%;
					// background-color: #5B5B5B;
					display: inline-flex;
					align-items: center;
					justify-content: center;

					img {
						width: 120rpx;
						object-fit: contain;
					}
				}

				.decorate-price {
					.icon-goin {
						width: 24rpx;
						height: 24rpx;
					}
				}

				.decorate-tag {
					position: absolute;
					right: 0;
					top: 0;
					font-size: 20rpx;
					padding: 8rpx 10rpx;
					background-image: url('@/static/image/lhbg.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}
			}

		}

		.decorate-image {
			width: 120rpx;
			height: 120rpx;
			margin: 12rpx 0;

			// background-color: #5B5B5B;
			img {
				object-fit: contain;
			}
		}

		.swiper-view {
			width: 686rpx;
			height: 200rpx;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			background-image: url('@/static/image/swipers.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin-bottom: 32rpx;
		}

		// background-color: bisque;
		.list-view {
			width: calc(100vw - 64rpx);
			height: calc(100vh - 200rpx - 32rpx - 100rpx);
		}

		.popup-view {
			height: 63vh;
			padding: 32rpx;
			width: calc(100vw - 64rpx);
			display: inline-flex;
			flex-wrap: wrap;
			flex-direction: row;
			align-content: flex-start;
			align-items: center;
			justify-content: center;
			text-align: center;

			.decorate-title {
				font-size: 28rpx;
			}

			.decorate-info {
				width: calc(100vw - 64rpx);
				margin-top: 48rpx;
				color: #333333;

				.info-line {
					width: 100%;
					display: inline-flex;
					align-content: flex-start;
					align-items: center;
					justify-content: space-between;
					text-align: center;
					padding: 18rpx 0;

					.icon-goin {
						width: 28rpx;
						height: 28rpx;
						margin-top: 6rpx;
					}
				}

				.setmenut {

					.menubox,
					.active-menubox {
						width: 152rpx;
						height: 124rpx;
						// padding: 26rpx 38rpx;
						// line-height: 94rpx;
						display: inline-flex;
						align-items: center;
						justify-content: center;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						border: 2rpx solid #F1F2F3;
						position: relative;
						margin-right: 20rpx;
					}

					.active-menubox {
						background: linear-gradient(180deg, #FBFBFF 0%, #F7EBFF 100%);
						border: 2rpx solid;
						border-radius: 12rpx;
						background-repeat: no-repeat;
						background-size: 100% 100%;
						color: var(--primary-color);

					}

					.sale {
						position: absolute;
						top: 0;
						right: 0;
						font-size: 20rpx;
						color: #fff;
						padding: 0 8rpx;
						background-image: url('@/static/image/sale.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
					}

				}


			}

			.user-account {
				width: 100%;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				margin: 30rpx 0;

				.icon-goin {
					width: 24rpx;
					height: 24rpx;
				}

				.chongzhi-text {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: var(--primary-color);
				}
			}

			.button-footer {
				width: 100%;
				display: inline-flex;
				align-items: center;
				justify-content: space-around;

				.give-button {
					width: 190rpx;
					height: 84rpx;
					background-image: url('@/static/image/propMall/give.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}

				.pay-button {

					width: 376rpx;
					height: 84rpx;
					// background-image: url('@/static/image/propMall/pay.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					background: var(--primary-color);
					color: var(--font-button-color);
					font-size: var(--font-button-size-p);
					border-radius: 106rpx;
					display: inline-flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.flex-container {
			display: flex;
			/* 启用 Flex 布局 */
			flex-wrap: wrap;
			/* 允许换行 */
		}

		.flex-item {
			flex: 0 0 calc(33% - 10px);
			/* 基础宽度25% 减去间隔 */
			margin: 5px;
			/* 元素间距 */
			box-sizing: border-box;
			/* 包含内边距和边框 */
			border-radius: 14rpx;
			/* 样式美化（可选） */
			background-color: #fff;
			// padding: 20rpx;
			text-align: center;

			.image {
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
</style>