<template>
	<view class="content">
		<view class="nav">
			<view>
				<u-navbar autoBack placeholder bgColor="" leftIconColor="white">
					<view class="navSlot" slot="center">
						<!-- <u-icon name="arrow-left" size="19"></u-icon> -->
					</view>
				</u-navbar>
			</view>
			<view class="area">
				<u-swiper class="banner" :list="details.carouselImageList" @click="click" height="480"></u-swiper>
			</view>
		</view>
		<view class="card">
			<view class="cardgoods">
				<view class="price">￥{{details.goodsOriginalPrice}}</view>
				<view class="goodsName">{{details.goodsName}}</view>
				<view class="salesVolume">总销 {{details.salesVolume || 0}}</view>
			</view>

			<view class="specificationsTitle" @click="isShow">

				<view>查看规格</view>
				<view class="specifications">
					<view class="spec"></view>
					<view>
						<image style="width: 8rpx; height: 16rpx; padding-left: 15rpx;"
							src="../../static/tabar/ic_left.png"></image>
					</view>
				</view>
			</view>

			<view class="productDetails">
				<view>
					<u-divider text="商品详情" textColor="#FF4502" lineColor="#FF4A09"></u-divider>
				</view>

				<u-parse :content="details.serviceIntroduction"></u-parse>
			</view>
		</view>
		<u-popup :show="show" mode="bottom" round="20rpx" @close="show = false">
			<view style="position: relative;">
				<u-icon @click="show = false" style="position: absolute;right: 20rpx;top: 10rpx;" size="24"
					name="close-circle-fill"></u-icon>
				<view class="goodsDetails">
					<image class="img" :src="details.goodsImage"></image>
					<view class="goodsInfo">
						<view class="goodsName" style="width: 500rpx;">{{details.goodsName}}</view>
						<view style="display: flex; padding-top: 20rpx;" v-if="specificationsItem.originalPrice">
							<view class="price">￥{{specificationsItem.originalPrice}}</view>
							<view class="storePrices" v-if="specificationsItem.unitPrice">
								门店到手价格￥{{specificationsItem.unitPrice}}
							</view>
						</view>
						<view style="display: flex; padding-top: 20rpx;" v-else>
							<view class="price">￥{{details.goodsOriginalPrice}}</view>
							<view class="storePrices" v-if="details.commodityPrice">门店到手价格￥{{details.commodityPrice}}
							</view>
						</view>
					</view>
				</view>
				<view class="colorSize">
					<view class="color-size">颜色、尺寸</view>

					<view class="item" :class="{active:specificationsItem.specificationsId == item.specificationsId}"
						v-for="(item,index) in details.specificationsList" :key="index" @click="getItem(item)">
						<view class="modelItem">
							<view>{{item.specificationsName}}</view>
							<view style="display: flex;align-items: center;" @click.stop="inventoryEdit(item)">
								<view style="color: #999999;">库存{{item.inventory}}</view>
								<view style="display: flex;align-items: center;">
									<image class="img" src="../../static/tabar/ic_edit.png"></image>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="inventoryShow" mode="center" border-radius="14" @close="inventoryShow = false" round="20rpx"
			zIndex="999999" maskCustomStyle="z-index:99999" maskZIndex="99999">
			<view class="inventory">
				<view class="edit">
					<view>库存编辑</view>
					<u--input maxlength="5" style="margin-top: 20rpx; background: #fff;" type="number" v-model="value1"
						placeholder="输入库存"></u--input>
					<view class="butsave" @click="butsaveon">保存</view>
				</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				value1: "",
				show: false,
				inventoryShow: false,

				curent: '',
				details: {},
				inventoryItem: "",

				specificationsItem: {},
			}
		},

		onLoad(op) {
			console.log(op)
			this.id = op.id
			this.storeGoodsDetails()
		},

		methods: {
			butsaveon() {
				this.$http.post('/api/store/storeGoods/modifyInventory', {
					goodsId: this.id,
					specificationsId: this.inventoryItem.specificationsId,
					inventory: this.value1
				}).then(res => {
					console.log(res);
					this.inventoryShow = false
					this.storeGoodsDetails()
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				})
			},
			//商品详情
			storeGoodsDetails() {
				this.$http.get('/api/store/storeGoods/storeDetails', {
					id: this.id
				}).then(res => {
					console.log(res.data)
					this.details = res.data
					this.specificationsItem = res.data.specificationsList ? res.data.specificationsList[0] : ''
					// this.curent = res.data.specificationsList[0].specificationsId
				})
			},
			editStoreGoods() {
				this.$http.get('/api/store/storeGoods/editStoreGoods', {
					id: this.id
				}).then(res => {
					console.log(res)
					this.details = res.data
				})
			},

			startHistor() {

			},
			startHisGarage() {

			},
			isShow() {
				this.show = true;
			},
			getItem(e) {
				console.log(e);
				this.specificationsItem = e
			},
			inventoryEdit(item) {
				this.inventoryShow = true;
				this.inventoryItem = item;
			},


		}
	}
</script>

<style lang="scss">
	.inventory {
		width: 624rpx;
		padding: 24rpx;
		height: 481rpx;
		background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
		border-radius: 14rpx 14rpx 14rpx 14rpx;

		.edit {
			text-align: center;
			margin-top: 20rpx;
			text-align: center;

			.butsave {
				width: 194rpx;
				height: 57rpx;
				line-height: 57rpx;
				margin: 56rpx auto 0;
				background: #FF4502;
				justify-content: center;
				border-radius: 29rpx 29rpx 29rpx 29rpx;
				color: white;
			}
		}
	}

	.active {

		background: #FFEFE9;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		border: 1rpx solid #FF4502;
		font-size: 28rpx;
		color: #FF4502 !important;
	}

	.item {
		margin-top: 20rpx;
		display: block;
		color: #333333;
		background: #F9F9F9;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		font-size: 28rpx;
		padding: 10upx;

		.modelItem {
			justify-content: space-between;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			padding-top: 5rpx;
			padding-bottom: 5rpx;
			padding-right: 20rpx;

			.img {
				padding-top: 5rpx;
				padding-left: 5rpx;
				width: 38rpx;
				height: 38rpx;
			}
		}
	}

	.colorSize {
		padding: 24rpx;
		padding-bottom: 50rpx;

		.color-size {
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.goodsDetails {
		display: flex;
		padding: 24rpx;

		.goodsInfo {
			padding-left: 20rpx;
			padding-top: 20rpx;

			.goodsName {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			.storePrices {
				padding: 20rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FF4502;
			}



			.price {
				font-weight: bold;
				font-size: 44rpx;
				color: #FF4502;
			}
		}

		.img {
			width: 156rpx;
			height: 156rpx;
		}
	}

	.card {
		width: 100%;
		box-sizing: border-box;
		height: 100vh;
		background: #FAFBFF;
		padding: 24rpx;
		border-top-right-radius: 40px;
		border-top-left-radius: 40px;
		position: absolute;
		z-index: 18;
		top: 440rpx;

		.productDetails {
			padding: 24rpx;
			justify-content: space-between;
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
		}

		.specificationsTitle {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			padding: 24rpx;
			text-align: center;

			.specifications {
				display: flex;

				.spec {
					padding-top: 10rpx;
					font-family: Microsoft YaHei, Microsoft YaHei;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
				}
			}
		}

		.cardgoods {
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			padding: 24rpx;

			.price {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: bold;
				font-size: 44rpx;
				color: #FF4502;
			}

			.goodsName {
				padding-top: 15rpx;
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
			}

			.salesVolume {
				padding-top: 15rpx;
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}

	.content {
		overflow: hidden;
	}

	.nav {
		width: 100%;
		height: 500rpx;
		z-index: 2;
		position: relative;
		background-size: 100%;
	}

	.area {

		position: relative;
	}

	.banner {
		position: absolute;
		top: -50px;
		left: 0;
		width: 100%;
		z-index: 3;
	}

	.navSlot .title {
		color: white !important;
	}
</style>