<template>
	<view class="content" :style="[theme]">
		<image class="contentimage" :src="lsitform.img" mode="aspectFill"></image>
		<view class="contentbox">
			<view class="contentbox_one">
				{{lsitform.name}}
			</view>
			<view class="contentbox_tow">
				<text>¥</text>{{lsitform.price}}
			</view>
		</view>
		<view class="contentboxtow">
			<view class="onecontentterewone flex-start">
				<view class="onecontenttereone_one">
					产品介绍
				</view>
			</view>
			<view class="introduction_yow" v-html="list.details">

			</view>
		</view>
		<view :style="{height:height}">

		</view>
		<view class="fixedview flex-between">
			<view class="fixedview_letr flex-start">
				<view class="fixedview_letr_item flex-colum" @click="eeInfoindex">
					<image src="@/static/mall/s.png" mode="aspectFill"></image>
					<text>首页</text>
				</view>
				<view class="fixedview_letr_item flex-colum" @click="makePhoneCall">
					<image src="@/static/mall/k.png" mode="aspectFill"></image>
					<text>客服</text>
				</view>
			</view>
			<view class="fixedview_tow flex-between">
				<view class="fixedview_towone" @click="overlayshowsboxs(1)">
					加入购物车
				</view>
				<view class="fixedview_towtow" @click="overlayshowsboxs(2)">
					立即购买
				</view>
				<!-- <view class="fixedview_towtow" style="background: #ccc;">
					立即购买
				</view> -->
			</view>
		</view>
		<u-overlay :show="overlayshow">
			<view class="warp" :style="[theme]">
				<view class="rect" @tap.stop>
					<view class="onerect flex-start" :style="[theme]">
						<image class="onecontentone_image" :src="lsitform.img" mode="aspectFill"></image>
						<view class="nonecontentone_view flex-colum-start">
							<text class="nonecontentone_view_one">{{lsitform.name}}</text>
							<text class="nonecontentone_view_otow">¥{{lsitform.price}}</text>
						</view>
						<view class="onerecticon" @click="overlayshow = false">
							<u-icon @click="overlayshow = false" name="close-circle-fill" color="#000000"
								size="24"></u-icon>
						</view>
					</view>
					<view class="towrect" v-for="(item,n) in list.spec" :key="item.id">
						<view class="towrect_one">
							{{item.spec_name}}
						</view>
						<view class="flex-start">
							<view class="towrect_tow" v-for="(item1,index1) in item.spec_options" :key="index1"
								@click="overlayshowsbox(item1,index1,n,item)">
								<!-- 	<view
									:class="[item1.isShow?'towrect_towtext':'towrect_towtexts',subIndex[index] == index1?'productActive':'noneActive']"> -->
								<view
									:class="[n == 1 && item1.isShow ?'noneActive':'',subIndex[n] == index1?'towrect_towtext':'towrect_towtexts']">

									{{item1.name}}
								</view>
							</view>
						</view>
					</view>
					<view class="thererect flex-between">
						<view class="thererect_one">
							购买数量
						</view>
						<view class="thererect_tow">
							<u-number-box v-model="numberbox" :min="1" button-size="24" color="#ffffff"
								:bgColor="theme.cartpieces" iconStyle="color: #fff" integer></u-number-box>
						</view>
					</view>
					<!-- 	<view class="fuorrect flex-between">
						<view class="fuorrect_one">
							合计
						</view>
						<view class="fuorrect_tow">
							¥{{list.price}}
						</view>
					</view> -->
					<view v-if="!itemuptodate" class="fvirect flex-center" @click="requestSubscribeMessage">
						确定
					</view>
					<view v-else class="fvirect flex-center" style="background:rgb(249, 249, 249);color: #333;">
						确定
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import bottombbar from '@/components/bottombbar.vue'
	export default {
		components: {
			bottombbar
		},
		data() {
			return {
				goods_id: '',
				overlayshow: false,
				towrecttowclass: 0,
				numberbox: 1,
				list: {},
				height: '',
				lsitform: {},
				specid: [],
				itemuptodate: false,
				selectArr: [], //存放被选中的值
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
			}
		},
		computed: {
			theme() {
				return this.$store.getters.theme
			},
		},
		onLoad(e) {
			this.goods_id = e.id
			this.shoppingindexgoodsgoodsdetail()
		},
		onShow() {},
		mounted() {
			var query = uni.createSelectorQuery().in(this).select('.fixedview')
			query.boundingClientRect(ele => {
				var that = this;
				uni.getSystemInfo({
					success(res) {
						that.height = (ele.height) + "px";
						that = null;
					}
				})
			}).exec();
		},
		methods: {
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.list.mobile //打电话
				});
			},
			overlayshowsboxs(e) {
				this.cartshping = e
				this.overlayshow = true
			},
			async overlayshowsbox(item1, index1, index, item) {
				if (item1.isShow && index == 1) {
					uni.showToast({
						title: '库存不足',
						icon: 'none'
					});
					return false;
				}
				if (this.specid[index] != item1.id) {
					this.specid[index] = item1.id //规格id
				} else {
					this.specid[index] = '' //规格id
				}

				if (this.selectArr[index] != item1.name) {
					this.selectArr[index] = item1.name;
					this.subIndex[index] = index1;
				} else {
					this.selectArr[index] = '';
					this.subIndex[index] = -1; //去掉选中的颜色
				}
				let res = await this.api.shoppinggoodsproductspec({
					spec: this.selectArr[0],
					goods_id: this.goods_id,
				})
				if (res) {
					this.shopItemInfo = res
					console.log(this.shopItemInfo[this.subIndex[index]])
					if (this.subIndex[index] != -1) {
						this.lsitform = this.shopItemInfo[this.subIndex[index]]
						this.lsitform.name =this.shopItemInfo[this.subIndex[index]].title_name
					}
				}
				this.checkItem();
			},
			checkItem() {
				var option = this.list.spec;
				var result = []; //定义数组储存被选中的值
				for (var i in option) {
					result[i] = this.selectArr[i] ? this.selectArr[i] : '';
				}
				for (var i in option) {
					var last = result[i]; //把选中的值存放到字符串last去
					for (var k in option[i].spec_options) {
						result[i] = option[i].spec_options[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
						option[i].spec_options[k].isShow = this.isMay(k); //在数据里面添加字段isShow来判断是否可以选择
					}
					result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时被覆盖
				}
				// if (this.shopItemInfo[result]) {
				// 	console.log(this.shopItemInfo[result])
				// 	// this.stock = this.shopItemInfo[result].stock || ''
				// }
				try {
					this.itemuptodate = this.list.spec[1].spec_options[this.subIndex[1]].isShow //最新的
					console.log(this.itemuptodate)
				} catch (e) {
					//TODO handle the exception
				}
				this.$forceUpdate(); //重绘
			},
			isMay(result) {
				let res = ''
				try {
					res = this.shopItemInfo[result].stock == 0 ? true : false
				} catch (e) {
					res = false
				}
				return res; //匹配选中的数据的库存，若不为空返回true反之返回false
			},
			async requestSubscribeMessage() {
				if (this.itemuptodate) {
					uni.showToast({
						title: '暂无库存',
						icon: 'none'
					});
					return false;
				}
				if (this.selectArr[0] == '' || this.selectArr[1] == '' || this.selectArr.length == 0) {
					uni.showToast({
						title: '请选择合法规格',
						icon: 'none'
					});
					return false;
				}
				console.log(this.specid,this.selectArr)
				if (this.cartshping == 1) {
					this.$u.debounce(this.shoppingindexgoodindexsaddcar(), 200);
				} else {
					uni.pro.navigateTo('mall/confirm', {
						type: 2, // 1购物车 2商品详情页
						goods_id: this.goods_id, //商品ID 商品详情页来源时必填
						car_id: '', //购物车ID 1,2 购物车来源时必填
						number: this.numberbox, //商品详情页来源时必填
						spec: this.selectArr.toString(), //规格 商品详情页来源时必填
						address_id: '', //地址ID 可以为空（为空时返回默认地址）
					})
				}
			},
			async shoppingindexgoodindexsaddcar() {
				let res = await this.api.shoppingindexgoodindexsaddcar({
					number: this.numberbox,
					goods_id: this.goods_id,
					spec: this.selectArr.toString(), //规格 商品详情页来源时必填
				})
				if (res == 1) {
					this.overlayshow = false
					console.log(res)
					uni.showToast({
						title: '添加购物车成功',
						icon: 'none'
					});
				}

			},
			eeInfoindex() { //去首页
				uni.pro.navigateTo('mall/index')
			},
			async shoppingindexgoodsgoodsdetail() {
				let res = await this.api.shoppingindexgoodsgoodsdetail({
					goods_id: this.goods_id
				})
				this.list = res
				this.lsitform = res.spec[0]
				this.lsitform.name = res.spec[0].title
				this.lsitform.img = res.host_img
				this.checkItem()
				this.list.details = res.details.replace(/\<img/g, '<img style="max-width:100%;height:auto" ');
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F6F6F6;
	}


	.fixedview {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 24rpx 28rpx;
		background: #FFFFFF;

		.fixedview_letr {
			.fixedview_letr_item:nth-child(1) {
				margin: 0;
			}

			.fixedview_letr_item {
				margin-left: 32rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					margin-top: 8rpx;
					font-size: 20rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.fixedview_one {
			.fixedview_oneone {
				font-size: 28rpx;
				font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
				font-weight: normal;
				color: #333333;
			}

			.fixedview_onetow {
				font-size: 44rpx;
				font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
				font-weight: normal;
				color: #F45C4C;
				font-weight: bold;

				text {
					font-size: 28rpx;
				}
			}
		}

		.fixedview_tow {
			flex: auto;
			padding-left: 24rpx;

			.fixedview_towone {
				width: 50%;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: bold;
				color: var(--cart-text-color);
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				border-radius: 50rpx 0 0 50rpx;
				background: var(--cart-background-color);
			}

			.fixedview_towtow {
				width: 50%;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: bold;
				color: var(--cart-text-color);
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				border-radius: 0 50rpx 50rpx 0;
				background: var(--cartbuy-background-color);
			}
		}

	}

	.warp {
		position: relative;
		height: 100%;

		.rect {
			position: absolute;
			bottom: 0;
			width: 100%;
			background: #FFFFFF;
			border-radius: 60rpx 60rpx 0px 0px;
			padding: 48rpx 32rpx 32rpx 32rpx;

			.onerect {
				position: relative;
				padding-bottom: 34rpx;
				border-bottom: 1rpx solid #F7F7F7;

				image {
					width: 124rpx;
					height: 124rpx;
					border-radius: 16rpx;
				}

				.nonecontentone_view {

					margin-left: 16rpx;

					.nonecontentone_view_one {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 32rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #1A1A1A;
					}

					.nonecontentone_view_otow {
						margin-top: 10rpx;
						font-size: 32rpx;
						font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
						font-weight: normal;
						color: #333333;
					}
				}

				.onerecticon {
					position: absolute;
					top: 0;
					right: 0;
				}
			}

			.towrect {
				padding-bottom: 34rpx;
				border-bottom: 1rpx solid #F7F7F7;
				padding-top: 34rpx;

				.towrect_one {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #1A1A1A;
				}

				.towrect_tow {
					margin-top: 16rpx;
					margin-left: 10rpx;

					.noneActive {
						background-color: #ccc;
						opacity: 0.4;
						color: #000;
						pointer-events: none;
					}

					.towrect_towtext {
						width: 100%;
						background: var(--specbackground-color);
						border-radius: 8rpx;
						border:1rpx solid var(--bg-color-button);
						padding: 8rpx 26rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: var(--spec-text-color);
					}



					.towrect_towtexts {
						width: 100%;
						background: #F7F7F7;
						border-radius: 8rpx;
						padding: 8rpx 26rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color:#333;
					}

				}
			}

			.thererect {
				padding: 34rpx 0;
				border-bottom: 1rpx solid #F7F7F7;
				border-top: 1rpx solid #F7F7F7;

				.thererect_one {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #1A1A1A;
				}

				.thererect_tow {}
			}

			.fuorrect {
				margin-top: 32rpx;

				.fuorrect_one {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #1A1A1A;
				}

				.fuorrect_tow {
					font-weight: bold;
					font-size: 32rpx;
					font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
					color: #333333;
				}
			}

			.fvirect {
				margin-top: 200rpx;
				padding: 16rpx;
				text-align: center;
				background: var(--bg-color-button);
				border-radius: 40rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}

	.content {
		.contentimage {
			width: 100%;
			height: 528rpx;
		}

		.contentbox {
			padding: 28rpx 32rpx;
			width: 100%;
			background: #FFFFFF;

			.contentbox_one {
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #1A1A1A;
			}

			.contentbox_tow {
				margin-top: 12rpx;

				text {
					font-size: 24rpx;
				}

				font-size: 34rpx;
				font-family: SourceHanSansCN-Bold-,
				SourceHanSansCN-Bold;
				font-weight: normal;
				color: #FC5F69;
			}
		}

		.contentboxtow {
			margin-top: 24rpx;
			width: 100%;
			padding: 28rpx 32rpx;
			background: #FFFFFF;

			.onecontentterewone::before {
				content: '';
				display: inline-block;
				width: 4rpx;
				height: 24rpx;
				background: var(--bg-color-button);
				border-radius: 4rpx;
			}

			.onecontentterewone {
				.onecontenttereone_one {
					margin-left: 16rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: bold;
					color: #1A1A1A;

					text {
						color: #999999;
					}
				}

			}

			.introduction_yow {
				margin-top: 18rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #1A1A1A;
				width: 100%;

				/deep/ [alt] {
					width: 100%;
				}

				/deep/ img {
					width: 100%;
				}

				img {
					width: 100%;
				}

				/deep/ p {
					width: 100%;
				}
			}
		}
	}
</style>