<template>
	<view class="content">
		<view style="height: 600rpx;">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in goodData.images" :key="index" @click="SwiperPic(item.param)">
					<image :src="item" mode="scaleToFill" class="swiperImg"></image>
				</swiper-item>
			</swiper>
		</view>
		<!--  -->
		<view class="goodNameOuter">
			<text style="font-size: 20rpx;">￥</text>50
			<view class="goodName">
				{{goodData.title}}
			</view>
			<view class="num">
				月销{{goodData.total_sales}}件
			</view>
		</view>
		<!-- 规格 -->
		<view class="guigeBox">
			<view class="">
				规格
			</view>
			<view class="">
				双30缸机械表充气泵
			</view>
		</view>
		<!-- 评价 -->
		<view class="evaluateBox">
			<view class="evaluateBoxTop">
				<view class="" style="display: flex;align-items: center;">
					<image src="../../static/ic_25@2x.png" mode="" class="evaImg"></image>
					<text class="pingjiaText">用户评价</text>
				</view>
				<view class="moreBox">
					<text style="padding-right: 10rpx;">查看更多</text>
					<image src="../../static/ic_21_1@2x.png" mode="" class="moerImg"></image>
				</view>
			</view>
			<view class="evaluateContent">
				<view class="userBox">
					<view class="userLeftBox">
						<image src="../../static/ic_28@2x.png" mode="" class="userImg"></image>
						<view class="userName">
							张**
							<view class="">
								<image src="../../static/ic_33@2x.png" mode="" class="xing"></image>
							</view>
						</view>

					</view>
					<view class="time">
						2021-12-22
					</view>
				</view>
				<view class="evaluateTEXT">
					伏尔泰曾经说过，坚持意志伟大的事业需要始终不渝的精神。这不禁令我深思。 塞内加说过一句富有哲理的话，勇气通往天堂，怯懦通往地狱。这似乎解答了我的疑惑。 一天掉多少根头发，到底应该如何实现。
					莎士比亚曾经说过，意志命运往往背道而驰，决心到最后会全部推倒。这不禁令我深思。 从这个角度来看，
					伏尔泰在不经意间这样说过，不经巨大的困难，不会有伟大的事业。带着这句话，我们还要更加慎重的审视这个问题： 这种事实对本人来说意义重大，相信对这个世界也是有一定意义的。
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="goodDetail">
			<view class="">
				<view class="" style="display: flex;align-items: center;">
					<image src="../../static/ic_25@2x.png" mode="" class="evaImg"></image>
					<text class="pingjiaText">商品详情</text>
				</view>
				<view class="detailImgBox">
					<rich-text :nodes="goodDeatil"></rich-text>
				</view>
			</view>
		</view>
		<!-- 购物车弹框 -->
		<view class="cartBox" v-if="cartShow">
			<view class="cartGoodBox">
				<view class="cartGoodInner">
					<view class="cartImg">
						<image :src="skuGoodData.image" mode="" class="cartImage"></image>
					</view>
					<view class="cartName">
						{{goodData.title}}
						<view class="cartPrice">
							<text
								style="font-size: 20rpx;color:#FE0E1F;margin-right: -2rpx;">￥</text>{{skuGoodData.price}}
						</view>
					</view>
				</view>
				<view class="specificationBox" v-for="(item,index) in goodData.sku" :key="index">
					<view class="" style="font-size: 28rpx;">
						{{item.name}}
					</view>
					<view class="" style="display: flex;flex-wrap: wrap;">
						<view
							:class="skuId.indexOf(items.id)!=-1?'specificalItem activespecificalItem' :'specificalItem'  "
							v-for="(items,indexs) in item.content" :key="indexs" @click="selectSku(index,items.id)">
							{{items.name}}
						</view>
					</view>
				</view>
				<view class="countBox">
					<view class="" style="font-size: 28rpx;">
						数量
					</view>
					<view class="" style="display: flex;">
						<view class="reduceImg">
							-
						</view>
						<view class="countNum">
							{{goodNum}}
						</view>
						<view class="addImg">
							+
						</view>
					</view>
				</view>
				<view class="addCartBtn" @click="addCartConfrim">
					加入购物车
				</view>
			</view>
		</view>
		<!-- 分享弹框 -->
		<view class="shareBox" v-if="shareShow">
			<image src="../../static/ic_26@2x.png" mode="" class="share"></image>

			<view class="weixinFriend">
				微信好友
			</view>
			<view class="concelBtn" @click="concel">
				取消
			</view>
		</view>
		<view class="masks" v-if="mask" @click="closeMask">

		</view>
		<!-- 底部 -->
		<view class="bottomBox">
			<view class="botttomleft">
				<view class="leftItem" @click="share">
					<image src="../../static/ic_22@2x.png" mode="" class="bottomIcon"></image>
					<view class="">
						分享
					</view>
				</view>
				<view class="leftItem" @click="collect">
					<image src="../../static/ic_23@2x.png" mode="" class="bottomIcon"></image>
					<view class="">
						收藏
					</view>
				</view>
				<view class="leftItem">
					<image src="../../static/ic_14@2x.png" mode="" class="bottomIcon"></image>
					<view class="">
						购物车
					</view>
				</view>
			</view>
			<view class="bottomRight" @click="addCart">
				加入购物车
			</view>
		</view>

	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				goodId: '', //商品id
				goodData: '', //商品信息
				goodDeatil: '', //商品详情
				cartGood: '', //加入购物车商品
				outerIndex: 0, //购物车规格
				innerIndex: 0, //购物车规格
				skuId: [], //购物车弹框选择id
				skuNum: 0, //规格id转换数字
				activeSkuid: '', //选择购物车规格id
				skuGoodData: '', //购物车弹框商品
				goodNum: 1, //添加购物车数量
				interval: true,
				// autoplay:true,
				indicatorDots: true,
				duration: 3000,
				cartShow: false, //购物车弹框
				shareShow: false, //分享
				mask: false, //遮罩层
				picList: [{
					param: 1,
					image: '../../static/ic_1@2x.png'
				}, {
					param: 1,
					image: '../../static/ic_21@2x.png'
				}],
				// 购物车规格
				typeList: [{
					title: '型号',
					list: ['55W-8L经典款标配：整机', '550W-8L:黑色钢款', '1600W-30L黑金刚：8个压头', '750W-8L黑金刚款']
				}]
			}
		},
		onLoad(options) {
			this.goodId = options.id
			this.getGoodDetail()
		},
		methods: {
			//收藏
			collect() {
				request.get('/api/collection/add', {
					type_id: this.goodId
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '收藏成功'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {

				})
			},
			//获取商品详情
			getGoodDetail() {
				request.get('/api/goods/detail?id=' + this.goodId, {}).then(res => {
					this.goodData = res.data
					var richtext = res.data.content
					const regex = new RegExp('<img', 'gi');
					richtext = richtext.replace(regex, `<img style="max-width: 100%;display:block"`)
					this.goodDeatil = richtext
					let list = res.data.sku
					list.forEach((item, index) => {
						item.content.forEach((items, indexs) => {
							if (indexs == 0) {
								this.skuId.push(items.id)
							}

						})
					})
					this.skuNum = this.number(this.skuId)

				}).catch(err => {

				})
			},
			//选择规格
			selectSku(index, id) {
				let list = this.skuId.reverse()
				list[index] = id
				this.skuId = list
				this.$forceUpdate()
				this.skuNum = this.number(this.skuId)
				this.judgeSku()
			},
			//数组换数字
			number(a) {
				var sum = 0;
				var arr3 = a.reverse();
				for (var i = 0; i < arr3.length; i++) {
					var num = arr3[i] * Math.pow(10, i)
					sum += num;
				}
				return sum;
			},
			//判断选择规格
			judgeSku() {
				this.goodData.sku_price.forEach((item, index) => {
					var itemNUM = this.number((item.goods_sku_ids).split(','))
					if (this.skuNum == itemNUM) {
						this.activeSkuid = item.id
						this.skuGoodData = item
					}
				})
			},
			//加入购物车弹窗
			addCart() {
				this.judgeSku()
				this.mask = true
				this.cartShow = true
			},
			//关闭遮罩层s
			closeMask() {
				this.mask = false
				this.cartShow = false
			},
			//分享
			share() {
				this.shareShow = true
				this.mask = true
			},
			//取消
			concel() {
				this.mask = false
				this.shareShow = false
			},
			//确定加入购物车
			addCartConfrim() {
				this.mask = false
				this.cartShow = false
				let list = []
				let obj = [{
					goods_id: this.goodId,
					goods_num: this.goodNum,
					sku_price_id: this.activeSkuid
				}]
				let s = JSON.stringify(obj)
				request.post('/api/cart/add', {'goods_list':s}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '添加成功'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {

				})
			},
			//数量增加
			addCount() {

			},
			//数量减少
			reduce() {

			}
		}
	}
</script>

<style>
	@import url("/common/goodDeatil.css");
</style>