<template>
	<view class="main" v-if="isDone">
		<view class="header flex flex-align-center bg-w"
			:style="{ 'padding-top': statusBarHeight + wxBtnHeight + 'px' }">
			<text class="iconfont icon" @tap="$navigateBack()">&#xe771;</text>
			<v-tabs :tabs="tabs" v-show="!isFruit" lineHeight="6rpx" activeColor="#FA5151" lineColor="#FA5151"
				:bold="false" :scroll="false" fontSize="30rpx" v-model="current" @change="tabsChange"></v-tabs>
			<v-tabs :tabs="fruittabs" v-show="isFruit" lineHeight="6rpx" activeColor="#FA5151" lineColor="#FA5151"
				:bold="false" :scroll="false" fontSize="30rpx" v-model="current" @change="tabsChange"></v-tabs>
			<view class="iconfont icon" @click="showActive">&#xe60b;</view>
		</view>
		<!-- 商品详情 -->
		<block v-if="(isFruit && current == 0) || !isFruit">
			<swiper class="swiper" :style="{ 'marginTop': statusBarHeight + 50 + 'px' }" :indicator-dots="true"
				:autoplay="true">
				<swiper-item v-for="(item, i) in swiperList" :key="i">
					<image :src="item" mode="" class="img" @click="swiperViewPhotos(i)"></image>
				</swiper-item>
			</swiper>
			<view class="price flex flex-between" v-if="goodsInfo.goodsType === 2">
				<text class="price-text" style="color: aliceblue;">
					<text class="text-xs">¥</text> {{ rangePrice }}
					<!-- <text class="text-del color-b9 font26 del">¥{{goodsInfo.originalPrice}}</text>	 -->
				</text>
				<view class="flex flex-column flex-align-end">
					<view class="flex flex-align-center" style="margin-bottom: 6rpx;">
						<image :src="staticUrl + 'home/boutique.png'" mode="" class="icon"></image>
						<text class="font38 blod " style="color: aliceblue;">精 品 推 荐</text>
					</view>
					<view class="flex flex-align-center color-w">
						<text class="iconfont font34">&#xe639;</text>
						<text class="font26">该商品支持配送上门</text>
					</view>
				</view>
			</view>
			<view class="price flex flex-between" v-if="goodsInfo.goodsType === 12">
				<text class="price-text" style="color: aliceblue;">
					<text class="text-xs">¥</text> {{ rangePrice }}
				</text>
				<view class="flex flex-column flex-align-end font24 color-w">
					<view class="flex flex-column align-center" v-if="time">
						<text>距结束还剩</text>
						<text class="text-cen">{{ time }}</text>
					</view>
					<text v-else>秒杀已结束</text>
				</view>
			</view>
			<view class="new flex flex-between" v-else>
				<text class="price-text" v-if="qvyu != 3">
					<text class="text-xs">¥</text> {{ rangePrice }}
					<!-- <text class="text-del color-b9 font26" style="margin-left: 10rpx;">¥{{goodsInfo.originalPrice}}</text> -->
				</text>
				<text class="blod color-red font40" v-else>
					绿色积分：{{ greenText }} + ¥{{ rmbText }}
					<!-- <text class="text-del color-b9 font26" style="margin-left: 10rpx;">¥{{goodsInfo.originalPrice}}</text> -->
				</text>
			</view>
			<!-- 普通商品才可以使用优惠券 -->
			<view class="flex flex-between d-list"
				v-if="goodsInfo.goodsType == 1 && goodsInfo.discountList && goodsInfo.discountList.length > 0 && false"
				@click="collectCoupons(goodsInfo.discountList)">
				<view class="flex flex-align-center">
					<block v-for="(d, i) in goodsInfo.discountList" :key="i">
						<text class="d-item" v-if="i < 3">满{{ d.useStandardAmount }}减{{ d.discountAmount }}</text>
					</block>
				</view>
				<view class="flex flex-align-center color-red">
					<text class="font28">领券</text>
					<text class="iconfont font34" style="margin-top: 4rpx;">&#xe770;</text>
				</view>
			</view>
			<view class="wrap">
				<view class="name flex flex-align-center flex-between">
					<text class="line line-2">
						<text class="bg-base tips" v-if="goodsInfo.goodsType === 2">精品</text>
						<text class="bg-base tips" v-else-if="goodsInfo.goodsType === 11">新人大礼</text>
						<text class="bg-base tips" v-else-if="goodsInfo.goodsType === 12">秒杀</text>
						<text class="bg-base tips" v-else-if="goodsInfo.goodsType === 13">特价</text>
						<text class="bg-base tips" v-else-if="goodsInfo.goodsType === 14">拼团</text>
						<text class="bg-base tips" v-else-if="goodsInfo.goodsType === 15">积分</text>
						<text class="bg-base tips" v-else-if="goodsInfo.isNewProducts === 2">新品</text>
						{{ goodsInfo.titleName }}

					</text>
					<view class="bg" v-if="goodsInfo.xfz">
						比例 {{ goodsInfo.ratio }}
					</view>
					<!-- <text class="line line-2" :class="{'txt':goodsInfo.goodsType === 2||goodsInfo.isNewProducts === 2}">{{goodsInfo.titleName}}</text> -->
				</view>
				<!-- <view class="font28 color-b9 line">{{goodsInfo.subTitle}}</view> -->
				<view class="flex flex-between color-b9 font28 other">
					<!-- <text>积分：{{ (parseInt((goodsInfo.bonusIntegral/100*goodsInfo.wholesalePrice)*100)/100).toFixed(2) }}</text> -->
					<view class="bg" v-if="goodsInfo.xfz">
						比例 {{ goodsInfo.xfz }}
					</view>
					<!-- <text>积分：{{ goodsInfo.bonusIntegral }}%</text> -->
					<text>已售：{{ goodsInfo.totalSales }}</text>
					<!-- <text v-if="dkUserFlag">附近的配送员：{{ dkUserSize }}</text> -->
					<text>浏览：{{ goodsInfo.visitBrowse }}</text>
				</view>
				<view class="bg-w servies flex flex-align-center font28 color-b9">
					<text>服务说明：</text>
					<view class="flex flex-align-center">
						<text v-if="goodsInfo.deliveryPlatform == 1"><text class="b red">送</text>配送上门</text>
						<text v-if="goodsInfo.deliveryBusiness == 1"><text class="b blue">商</text>商家送货</text>
						<text v-if="goodsInfo.deliveryExpress == 1"><text class="b green">寄</text>快递邮寄</text>
						<text v-if="goodsInfo.deliveryNo == 1"><text class="b green">无</text>无实物，支付成功后自动确认收货</text>
						<!-- <text><text class="b blue">正</text>正品保证</text>
						<text v-if="goodsInfo.deliveryNo === 2 || goodsInfo.deliveryBusiness == 1 || goodsInfo.deliveryPlatform === 1">
							<text class="b green">送</text>配送上门
						</text> -->
					</view>
				</view>
				<view class="reward" v-if="goodsInfo.goodsRewardLevelRule">
					<text>大礼详情：</text>
					<view class="reward-wrap">
						<view class="reward-wrap-cell" v-if="goodsInfo.goodsRewardLevelRule.cardsByPlatform">
							<text class="iconfont iconchoiceO icon"></text>
							<text>{{ goodsInfo.goodsRewardLevelRule.cardsByPlatform.name }}¥{{
		          goodsInfo.goodsRewardLevelRule.cardsByPlatform.amount }}</text>
						</view>
						<view class="reward-wrap-cell">
							<text class="iconfont iconchoiceO icon"></text>
							<text>升级为{{ goodsInfo.goodsRewardLevelRule.roleManagerLevel | filterManager }}掌柜</text>
						</view>
						<view class="reward-wrap-cell">
							<text class="iconfont iconchoiceO icon"></text>
							<text>购买当前商品时自身必须为{{ goodsInfo.goodsRewardLevelRule.limitRoleManagerLevel | filterManager }}掌柜级别</text>
						</view>
						<view class="reward-wrap-cell">
							<text class="iconfont iconchoiceO icon"></text>
							<text v-if="goodsInfo.goodsRewardLevelRule.repeatBuyNumber === -1">不限制购买数量</text>
							<text v-else>人均限购{{ goodsInfo.goodsRewardLevelRule.repeatBuyNumber }}件</text>
						</view>
					</view>
				</view>
				<view class="group" v-if="goodsInfo.goodsType === 14 && groupList.length > 0">
					<view class="title" @click="showSpellPopup()">
						<text class="font28">正在拼单，可直接参与</text>
						<text class="color-b9 font26">查看全部</text>
					</view>
					<block v-for="(item, i) in groupList" :key="i">
						<view class="flex flex-between group-item" v-if="item.groupTrueNumber > 0">
							<image :src="item.groupUserInfo.headPortrait" mode="" class="img"></image>
							<text class="line font28 flex-grow"
								style="width: 200rpx;">{{ item.groupUserInfo.nickname }}</text>
							<text class="font26 color-b6" style="margin-left: 10rpx;">还差{{ item.groupNumber -
		          item.groupTrueNumber }}人拼成</text>
							<button type="primary" size="mini" class="bg-base btn"
								@click="addCartOrBuy(1, item)">去拼单</button>
						</view>
					</block>
				</view>
				<view class="issue bg-w" @tap="goEvaluate" v-if="!isFruit">
					<view class="title flex flex-between">
						<text class="font34">商品评论({{ goodsInfo.totalEvaluate }})</text>
						<view class="flex flex-align-center color-red">
							<text class="font28">查看全部</text>
							<text class="iconfont font38">&#xe770;</text>
						</view>
					</view>
					<view class="list">
						<block v-if="goodsInfo.totalEvaluate > 0">
							<block v-for="(item, i) in commentList" :key="i">
								<view class="list-item" v-if="i < 2">
									<view class="flex flex-align-center">
										<image :src="filterImg(item.evaluateUserInfo.headPortrait, 1)" mode=""
											class="avatar"></image>
										<view class="flex-grow flex flex-column">
											<text class="color-red font26">{{ item.evaluateUserInfo.nickname }}</text>
											<text class="font26 color-b9">{{ item.createTime }}</text>
										</view>
									</view>
									<text class="line line-2 font30 txt">{{ item.evaluateGoodsComment }}</text>
									<view class="imgs"
										v-if="item.evaluateGoodsImages && item.evaluateGoodsImages.length > 0">
										<image :src="filterImg(img, 5)" mode="" class="pic"
											v-for="(img, index) in item.evaluateGoodsImages" :key="index"></image>
									</view>
								</view>
							</block>
						</block>
						<text v-else class="font30 color-b6">暂无评论</text>
					</view>
				</view>
				<view class="flex flex-between store bg-w" v-if="!isFruit">
					<view>
						<image :src="filterImg(storeInfo.logoImage, 1)" mode="" class="img"></image>
					</view>
					<view class="flex flex-column" style="width: 380rpx;">
						<view class="flex flex-align-center">
							<text class="blod font34">{{ storeInfo.name }}</text>
						</view>
						<text class="font26 color-b6 line line-2">{{ storeInfo.introduce }}</text>
					</view>
					<text class="color-red btn font32" @tap="goStore">进店</text>
				</view>
			</view>
			<view class="detail">
				<view class="flex flex-center title">
					<text class="xian">—————</text>
					<text class="font26 color-b9">商品详情</text>
					<text class="xian">—————</text>
				</view>
				<rich-text :nodes="goodsInfo.detailsTextHtml"></rich-text>
				<view v-if="goodsInfo.detailsImgList">
					<image style="width: 750rpx; display: block;" :src="item"
						v-for="(item, i) in goodsInfo.detailsImgList" :key="i" mode="widthFix"></image>
				</view>
			</view>
			<view class="fixed">
				<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="navClick"
					@buttonClick="buttonClick" />
			</view>
			<view class="fixed-height"></view>
			<uni-popup ref="popup" type="bottom">
				<view class="popup bg-w">
					<view class="flex">
						<image :src="mainImage" mode="" class="img" @click="skuViewPhoto(mainImage)"></image>
						<text class="flex-grow color-red font44 blod">¥{{ money }}</text>
						<text class="iconfont font48 color-b9" @click="closePopup">&#xe7be;</text>
					</view>
					<view class="flex flex-column norms">
						<text class="color-b6 font30">商品规格</text>
						<view class="flex flex-align-center list" v-if="skuList">
							<block v-for="(sku, i) in skuList" :key="i">
								<text class="list-item" :class="{ 'active': sku.select }"
									v-if="sku.skuStock && sku.skuStock > 0"
									@click="skuSelect(i)">{{ sku.skuName }}</text>
							</block>
						</view>
					</view>
					<view class="flex flex-between mar" v-if="qvyu != 5">
						<text class="color-b6 font30">购买数量</text>
						<uni-number-box :min="1" :max="numberMax" :value="number"
							@change="numberChange"></uni-number-box>
					</view>
					<view class="flex flex-between mar" v-else>
						<text class="color-b6 font30">购买数量（最多只能购买一件）</text>
						<uni-number-box :min="1" :max="1" value="1" @change="numberChange"></uni-number-box>
					</view>
					<button type="primary" class="bg-base btn"
						@click="addCartOrBuy(btnClickIndex, null)">{{ btnTxt }}</button>
				</view>
			</uni-popup>
			<!-- 优惠明细 -->
			<uni-popup ref="discountPopup" type="bottom">
				<view class="discount">
					<text class="font32 color-red">优惠明细</text>
					<view class="d-list">
						<block v-for="(item, i) in discountList" :key="i">
							<view class="d-list-item" v-if="item.status === 1">
								<view class="left">
									<text class="font26 tip">¥</text>
									<text class="font46 blod">{{ item.discountAmount }}</text>
								</view>
								<view class="right flex flex-column flex-grow">
									<text class="font28">{{ item.titleName }}</text>
									<text class="font30">满{{ item.useStandardAmount }}可用</text>
									<text
										class="font26">{{ item.expireTimeDay > 0 ? `有效期${item.expireTimeDay}天` : '永久有效' }}</text>
								</view>
								<text class="btn" v-if="item.number === 0">已领完</text>
								<text class="btn" v-else
									@tap.stop="onReceive(i)">{{ item.userReceiveFlag ? '立即领取' : '已领取' }}</text>
							</view>
						</block>
					</view>
					<button type="primary" class="bg-base close" @click="closePopup">关闭</button>
				</view>
			</uni-popup>
			<!-- 拼团 -->
			<uni-popup ref="spellPopup" type="center">
				<view class="spell">
					<text class="title">正在拼单</text>
					<scroll-view scroll-y="true" style="height: 600rpx;" @scrolltolower="getGroupList()">
						<block v-for="(item, i) in groupList" :key="i">
							<view class="flex flex-between spell-item" v-if="item.groupTrueNumber > 0">
								<image :src="item.groupUserInfo.headPortrait" mode="" class="img"></image>
								<text class="line font28 flex-grow"
									style="width: 200rpx;">{{ item.groupUserInfo.nickname }}</text>
								<text class="font26 color-b6" style="margin-left: 10rpx;">还差{{ item.groupNumber -
		            item.groupTrueNumber }}人拼成</text>
								<button type="primary" size="mini" class="bg-base btn"
									@click="addCartOrBuy(1, item)">去拼单</button>
							</view>
						</block>
					</scroll-view>
				</view>
			</uni-popup>
		</block>
		<block v-if="isFruit && current == 1">
			<view :style="{height: tabHeight + 'px'}"></view>
			<FruitManage ref="FruitManage" />
		</block>
		<block v-if="isFruit && current == 2">
			<view :style="{height: tabHeight + 'px'}"></view>
			<FruitAward ref="FruitAward"></FruitAward>
		</block>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	import {
		config
	} from '@/config/config.js';
	import url from "@/common/http/url.js"
	import publics from "@/common/utils/public.js"
	import {
		sendRequestJson
	} from "@/common/http/api.js"
	import uniGoodsNav from './components/uni-goods-nav/uni-goods-nav.vue'
	import vTabs from "@/components/v-tabs/v-tabs.vue"
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	import FruitManage from '@/pages/home/fruitCard.vue'
	import FruitAward from '@/pages/home/award.vue'
	let timer = null
	export default {
		components: {
			vTabs,
			uniGoodsNav,
			uniPopup,
			uniNumberBox,
			FruitManage,
			FruitAward
		},
		data() {
			return {
				isFruit: false,
				staticUrl: this.$staticUrl,
				isDone: false,
				statusBarHeight: getApp().statusBarHeight,
				current: 0,
				tabs: ["商品", "评论", "详情"],
				fruittabs: ["购买", "领取", "奖励"],
				options: [{
						text: "店铺",
						icon: "\ue616",
						iconColor: "#333333"
					},
					// { text: "客服", icon: "\ue608", iconColor: "#333333" },
					{
						text: "收藏",
						icon: "\ue615",
						iconColor: "#333333"
					}
				],
				buttonGroup: [{
					text: "立即购买",
					color: "#fff",
					backgroundColor: "#F44646"
				}],
				btnTxt: "立即购买",
				btnClickIndex: null,
				myAddressData: {},
				id: "",
				swiperList: [],
				commentList: [],
				skuList: [],
				skuObj: {},
				mainImage: "",
				money: "",
				goodsInfo: {},
				storeInfo: {},
				isCollection: false, // 收藏
				distanceStoreFlag: false, // 是否支持配送上门
				dkUserFlag: false, // 附近是否有代理
				dkUserSize: 0, // 附近代理人数
				detailTop: 0, // 详情距离顶部的距离
				issueTop: 0, // 评论距离顶部的距离
				storeType: 0,
				number: 1,
				numberMax: 99,
				discountList: [],
				rangePrice: "",
				time: null,
				groupList: [],
				wxBtnHeight: 0,
				isInit: true,
				qvyu: null,
				greenText: null,
				rmbText: null,
				dpi: uni.getStorageSync('dpi'),
				tabHeight: 0
			}
		},
		computed: {
			...mapState(["userInfo"])
		},
		filters: {
			filterManager(val) {
				switch (val) {
					case 0:
						return "不是";
					case 1:
						return "初级";
					case 2:
						return "中级";
					case 3:
						return "高级";
					default:
						return "其他";
				}
			}
		},
		onReachBottom() {
			console.log('6666');
			if (this.isFruit) {
				if (this.current == 1) this.$refs.FruitManage.loadMore()
				else if (this.current == 2) this.$refs.FruitAward.loadMore()
			}
		},
		onLoad(opt) {
			this.qvyu = opt.qvyu || null;
			this.greenText = opt.greenText || null;
			this.rmbText = opt.rmbText || null;
			this.tabHeight = uni.getStorageSync('system').statusBarHeight + 100 / this.dpi
			// #ifdef MP-WEIXIN
			this.wxBtnHeight = wx.getMenuButtonBoundingClientRect().height
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			// #endif
			let addressData = publics.getMyaddressLngLat()
			if (addressData) {
				this.myAddressData = JSON.parse(addressData)
			} else {
				// this.$msg("请先设置您当前的位置")
				// this.openMap()
			}
			let id = opt.id
			this.id = id
			if (id == 642) {
				this.isFruit = true
			}
			if (id) {
				this.getCommentList()
			} else {
				this.$msg("查找不到该商品信息,可能该商品已下架");
				this.$navigateBack(1, 1000);
			}
			this.getScrollTop()
		},
		onShow() {
			// 初始化底部按钮
			this.buttonGroup = [{
				text: "立即购买",
				color: "#fff",
				backgroundColor: "#F44646"
			}]
			this.getGoodsDetail()
		},
		onHide() {
			this.clear()
		},
		onUnload() {
			this.clear()
		},
		onPageScroll(e) {
			if (!this.isFruit) {
				if (e.scrollTop > 0 && e.scrollTop < this.issueTop) {
					this.current = 0
				}
				if (e.scrollTop > this.issueTop && e.scrollTop < this.detailTop) {
					this.current = 1
				}
				if (e.scrollTop > this.detailTop) {
					this.current = 2
				}
			}
		},
		methods: {
			filterImg(img, type) {
				return publics.filterImgUrl(img, type)
			},
			getScrollTop() {
				let _this = this
				setTimeout(() => {
					_this.$getRect(".detail").then(res => {
						if (res) {
							_this.detailTop = res.top - 60
						}
					})
					_this.$getRect(".issue").then(res => {
						if (res) {
							_this.issueTop = res.top - 60
						}
					})
				}, 500)
			},
			getGoodsDetail() {
				let params = {
					goodsId: this.id,
					lng: this.myAddressData.longitude || "0", //经度
					lat: this.myAddressData.latitude || "0" //纬度
				}
				this.$http("GET", url.goods.goodsDetail, params).then(res => {
					this.goodsInfo = res.data
					this.storeInfo = res.data.storeInfo
					this.swiperList = this.goodsInfo.topImgList
					this.skuList = this.goodsInfo.skuList
					this.mainImage = this.goodsInfo.mainImage
					this.isDone = true
					// 是否收藏
					this.isCollection = res.data.isCollection
					if (this.isCollection) {
						this.options[1].icon = "\ue614"
					}
					// 是否具备进货资格(当前商品为精品商品，并且自己为配送员, 并且开启精品商品进货)
					if (res.data.goodsType === 2 && this.userInfo.distributorIsOpen === 1 && res.data
						.boutiqueBuyingStatus === 1) {
						// this.btnTxt = "进货"
						this.buttonGroup.push({
							text: "进货",
							color: "#fff",
							backgroundColor: "#764de8"
						})
					}
					// 幅度价格
					this.rangePrice = this.goodsInfo.wholesalePrice
					if (res.data.skuList) {
						let skuList = res.data.skuList
						if (skuList.length > 1) {
							let maxArray = skuList.sort((a, b) => {
								return b.skuPrice - a.skuPrice
							})
							let maxPrice = maxArray[0].skuPrice
							let minPrice = maxArray[maxArray.length - 1].skuPrice
							this.rangePrice = minPrice + '-' + maxPrice
						}
					}
					this.money = this.rangePrice
					if (res.data.goodsType === 12 && res.data.homeGoodsSeckill) {
						//this.countDown(res.data.homeGoodsSeckill.dueDateTime)
						this.time = this.countTime(res.data.homeGoodsSeckill.dueDateTime);
					}
					if (res.data.goodsType === 14) {
						this.btnTxt = "发起拼单"
						this.buttonGroup[0].text = this.btnTxt
						// this.buttonGroup.push({text: this.btnTxt, color: "#fff", backgroundColor: "#764de8"})
						this.getGroupList()
					}
					this.skuSelect(0)
				}).catch((err) => {
					console.log('err*********', err)
					this.$msg(err.msg)
					this.$navigateBack(1, 1000);
				})
			},
			countTime(dueDateTime) {
				let timeReplace = dueDateTime.replace(/\.|\-/g, '/')

				let startTime = new Date(); // 开始时间
				let endTime = new Date(timeReplace); // 结束时间
				let usedTime = endTime - startTime; // 相差的毫秒数
				let days = Math.floor(usedTime / (24 * 3600 * 1000)); // 计算出天数
				let leavel = usedTime % (24 * 3600 * 1000); // 计算天数后剩余的时间
				let hours = Math.floor(leavel / (3600 * 1000)); // 计算剩余的小时数
				let leavel2 = leavel % (3600 * 1000); // 计算剩余小时后剩余的毫秒数
				let minutes = Math.floor(leavel2 / (60 * 1000)); // 计算剩余的分钟数

				let timer = days + '天' + hours + '时' + minutes + '分';
				return timer;
			},
			countDown(time) {
				if (timer) {
					this.clear()
				}
				timer = setInterval(() => {
					let timeReplace = time.replace(/\.|\-/g, '/')
					let oldTime = new Date(timeReplace).getTime()
					let newTime = new Date().getTime()
					let leftTime = parseInt(oldTime - newTime)
					if (leftTime >= 0) {
						let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
						let m = Math.floor(leftTime / 1000 / 60 % 60);
						let s = Math.floor(leftTime / 1000 % 60);

						function checkTime(i) {
							if (i < 10) {
								i = "0" + i;
							}
							return i;
						}
						h = checkTime(h)
						m = checkTime(m)
						s = checkTime(s)
						this.time = `${h}:${m}:${s}`
					} else {
						this.clear()
					}
				}, 1000)
			},
			clear() {
				if (timer) {
					clearInterval(timer)
					timer = null
					this.time = null
				}
			},
			getCommentList() {
				this.$http("GET", url.goods.getEvaluateList, {
					goodsId: this.id,
					pageNum: 0
				}).then(res => {
					let list = res.data.data
					list.map(v => {
						if (v.sysStaticResources) {
							v.evaluateGoodsImages = []
							v.evaluateDistributionImages = []
							v.sysStaticResources.forEach(k => {
								if (k.type === 20) {
									v.evaluateGoodsImages.push(k.ossUrl)
								}
								if (k.type === 21) {
									v.evaluateDistributionImages.push(k.ossUrl)
								}
							})
						}
					})
					this.commentList = list
				})
			},
			getGroupList() {
				this.$http("GET", url.goods.getGroupById, {
					goodsId: this.id,
					pageNum: this.groupList.length
				}).then(res => {
					this.groupList = this.groupList.concat(res.data)
				})
			},
			openMap() {
				var _this = this;
				uni.chooseLocation({
					keyword: "",
					success: function(res) {
						publics.setMyaddressLngLat(JSON.stringify(res));
						//设置地址
						_this.myAddressData = res;
					}
				});
			},
			navClick(e) {
				if (e.index === 0) {
					this.goStore()
				}
				// else if (e.index === 1) {
				//      this.$navigateTo("../interaction/im-chat?type=3&&id=" + this.storeInfo.imAccount)
				//    } 
				else {
					this.isCollection = !this.isCollection
					this.options[1].icon = this.isCollection ? "\ue614" : "\ue615"
					this.$http("POST", url.goods.collectionGoods, {
						goodsId: this.id
					}).catch(() => {
						this.isCollection = false
						this.options[1].icon = this.isCollection ? "\ue614" : "\ue615"
					})
				}
			},
			buttonClick(e) {
				this.btnClickIndex = e.index
				this.btnTxt = this.buttonGroup[e.index].text
				if (this.goodsInfo.skuList) {
					// if (this.goodsInfo.skuList.length === 1) { // 如果sku只有一个，那么默认选中
					// 	this.skuSelect(0)
					// }
					this.$refs.popup.open()
				} else {
					this.addCartOrBuy(0, null)
				}

			},
			// 立即购买 / 进货 / 发起拼单
			addCartOrBuy(index, row) {
				if (index === 1 && this.goodsInfo.goodsType === 14 && row && row.groupUserInfo.imAccount === this.userInfo
					.imAccount) { // 点击自己发起的拼单
					return this.$msg("不能拼自己发起的拼单")
				}
				if (this.goodsInfo.goodsType === 12 && !this.time) { // 如果是限时秒杀商品并且已结束
					return this.$msg("该商品秒杀已结束")
				}
				if (this.userInfo.userStoreId === this.goodsInfo.userStoreId) {
					return this.$msg("不能购买自己店铺的商品！");
				}
				if (JSON.stringify(this.skuObj) === "{}") {
					return this.$msg("请选择商品规格");
				}
				if (this.skuObj.skuStock < 1) {
					return this.$msg("库存不足！");
				}
				let params = {
					goodsId: this.id,
					number: this.number,
					goodsSkuId: this.skuObj.id,
					orderType: index === 0 ? this.goodsInfo.goodsType : 3, // 订单类型 1-普通 2-精品 3-进货
					groupParentId: 0 //默认拼团id为0，防止传null后台报错
				}
				if (this.goodsInfo.goodsType === 14) {
					params.orderType = this.goodsInfo.goodsType
					params.groupParentId = row ? row.id : 0
				}
				sendRequestJson("GET", url.order.getOrderInfo, params).then(res => {
					let data = res.data
					data.orderType = params.orderType
					uni.setStorageSync("commitOrderData", data)
					this.$navigateTo("/pages/order/createOrder")
				})
			},
			showActive() {
				let _this = this
				uni.showActionSheet({
					itemList: ['举报'],
					success: function(res) {
						if (res.tapIndex === 0) {
							_this.$navigateTo("/pages/report/index?type=4&configType=3&id=" + _this.id)
						}
					}
				});
			},
			swiperViewPhotos(i) {
				let _this = this
				uni.previewImage({
					current: i,
					urls: _this.swiperList
				})
			},
			skuViewPhoto(url) {
				uni.previewImage({
					current: url,
					urls: [url]
				})
			},
			showSpellPopup() {
				this.$refs.spellPopup.open()
			},
			closePopup() {
				this.$refs.popup.close()
				this.$refs.discountPopup.close()
			},
			numberChange(val) {
				console.log(val)
				// if (val > 1 && this.isInit) return this.$msg('最多只能购买一件');
				// this.isInit = true
				this.number = val
			},
			skuSelect(i) {
				this.skuList.map(v => {
					v.select = false
				})
				this.skuList[i].select = true
				this.skuObj = this.skuList[i]
				// if (this.skuObj.id == config.binLangSkuId) {
				// 	this.numberMax = config.binLangMax
				// } else {
					this.numberMax = this.skuList[i].skuStock
				// }
				this.mainImage = this.skuList[i].mainImage
				this.money = this.skuList[i].skuPrice
			},
			collectCoupons(list) {
				this.discountList = list
				this.$refs.discountPopup.open()
			},
			onReceive(index) {
				if (!this.discountList[index].userReceiveFlag) return
				let discountId = this.discountList[index].id
				this.$http("POST", url.user.receiveDiscount, {
					discountId: discountId
				}).then(res => {
					this.$msg("恭喜，抢到了")
					this.discountList[index].userReceiveFlag = false
					if (this.discountList[index].number !== -1) {
						this.discountList[index].number--
					}
					this.goodsInfo.discountList = this.discountList
				})
			},
			tabsChange(i) {
				this.current = i
				if (!this.isFruit) {
					if (i === 0) {
						uni.pageScrollTo({
							scrollTop: 0
						})
					} else if (i === 1) {
						uni.pageScrollTo({
							scrollTop: this.issueTop
						})
					} else {
						uni.pageScrollTo({
							scrollTop: this.detailTop
						})
					}
				}
			},
			goEvaluate() {
				let data = {
					id: this.id,
					all: this.goodsInfo.totalEvaluate,
					good: this.goodsInfo.evaluateGood,
					secondary: this.goodsInfo.evaluateSecondary,
					difference: this.goodsInfo.evaluateDifference
				}
				this.$navigateTo("evaluate?data=" + JSON.stringify(data))
			},
			goStore() {
				this.$navigateTo("store?id=" + this.goodsInfo.userStoreId)
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "@/font.css";

	.color-red {
		color: #E40000;
	}

	.price-text {
		font-family: 'Product-Sans-Bold';
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		align-items: center !important;
		font-size: 70upx;
		color: #E40000;
	}

	.bg {
		padding: 0 10rpx;
		background-color: rgba(255, 59, 71, 0.2);
		color: #E40000;
	}

	.main {
		background-color: #f4f5f6;
	}

	.header {
		padding: 0rpx 30rpx;
		height: 100rpx;
		position: fixed;
		justify-content: space-between;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;

		.icon {
			font-size: 50rpx;
			width: 100rpx;
			margin-bottom: -10rpx;
			text-align: center;
		}
	}

	.swiper {
		// margin-top: 100rpx;
		width: 750rpx;
		height: 700rpx;

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.price {
		background-color: #E40000;
		padding: 20rpx 20rpx;
		margin-bottom: 10rpx;

		.del {
			margin-left: 10rpx;
		}

		.icon {
			width: 56rpx;
			height: 56rpx;
			margin-right: 10rpx;
		}
	}

	.new {
		padding: 0rpx 20rpx;
	}

	.d-list {
		padding: 0 20rpx;

		.d-item {
			font-size: 24rpx;
			color: #E40000;
			background-color: rgba($color: #E40000, $alpha: .3);
			border-radius: 6rpx;
			margin-right: 10rpx;
			padding: 4rpx 10rpx;
		}
	}

	.wrap {
		margin: 0 20rpx;

		.name {
			position: relative;
			margin-bottom: 10rpx;

			.tips {
				color: white;
				font-weight: normal;
				border-radius: 8rpx;
				font-size: 26rpx;
				padding: 0 10rpx;
				margin-right: 6rpx;
				// display: inline-block;
				// position: absolute;
				// left: 0;
				// top: 12rpx;
			}

			// .txt{
			// 	text-indent: 2.2em;
			// }
		}

		.other {
			margin-bottom: 10rpx;
		}

		.servies {
			padding: 26rpx 20rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.b {
				width: 34rpx;
				height: 34rpx;
				font-size: 24rpx;
				color: white;
				text-align: center;
				line-height: 34rpx;
				display: inline-block;
				border-radius: 50%;
				margin-left: 20rpx;
				margin-right: 6rpx;
			}

			.blue {
				background-color: #007AFF;
			}

			.red {
				background-color: #ff342a;
			}

			.green {
				background-color: #00a743;
			}
		}




		.reward {
			background-color: white;
			padding: 26rpx 20rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			color: #999999;
			font-size: 28rpx;

			&-wrap {
				&-cell {
					display: flex;
					align-items: center;
					margin-top: 10rpx;

					.icon {
						font-size: 36rpx;
						margin-right: 10rpx;
						color: #E40000;
					}
				}
			}
		}

		.group {
			background-color: white;
			padding: 20rpx 20rpx 0;
			margin-bottom: 20rpx;
			border-radius: 20rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;
			}

			&-item {
				border-top: 2rpx solid #EEEEEE;
				padding: 20rpx 0;

				.img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				.btn {
					margin: 0;
					margin-left: 10rpx;
				}
			}
		}

		.issue {
			padding: 20rpx;
			border-radius: 16rpx;

			.list {

				// margin-top: 30rpx;
				&-item {
					padding-bottom: 20rpx;
					border-bottom: 2rpx solid #eee;
					margin-top: 30rpx;

					.avatar {
						width: 110rpx;
						height: 110rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.txt {
						margin-top: 20rpx;
						color: #666;
						line-height: 48rpx;
					}

					.imgs {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						margin-top: 10rpx;

						.pic {
							width: 160rpx;
							height: 160rpx;
							margin-right: 10rpx;
							margin-bottom: 10rpx;
							border-radius: 10rpx;
						}
					}
				}

				&-item:last-child {
					border: none;
				}
			}
		}

		.store {
			margin-top: 20rpx;
			padding: 20rpx;
			border-radius: 16rpx;

			.img {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
				display: block;
			}

			.tips {
				color: white;
				font-size: 24rpx;
				border-radius: 30rpx;
				padding: 0 10rpx;
				font-weight: normal;
				margin-left: 10rpx;
				transform: scale(0.9);
				display: inline-block;
			}

			.btn {
				border: 2rpx solid #E40000;
				border-radius: 30rpx;
				padding: 0 20rpx;
				margin-left: 20rpx;
			}
		}
	}

	.detail {
		margin-bottom: 100rpx;

		.title {
			margin: 20rpx;

			.xian {
				font-size: 28rpx;
				color: #cccccc;
				margin: 0 20rpx;
			}
		}
	}

	.fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.fixed-height {
		height: 1px;
	}

	.popup {
		padding: 20rpx 30rpx;

		.img {
			width: 160rpx;
			height: 160rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
		}

		.norms {
			margin-top: 20rpx;
			padding-top: 20rpx;
			border-top: 2rpx solid #f6f4f8;
			border-bottom: 2rpx solid #f6f4f8;

			.list {
				flex-wrap: wrap;
				margin-top: 20rpx;

				&-item {
					color: #555555;
					background-color: #F5F5F5;
					font-size: 28rpx;
					padding: 10rpx 20rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
				}

				.active {
					color: #E40000;
					background-color: rgba(#E40000, .3);
				}
			}
		}

		.mar {
			margin: 20rpx 0 50rpx;
		}

		.btn {
			border-radius: 50rpx;
		}
	}

	.discount {
		padding: 20rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.d-list {
			margin-top: 50rpx;

			&-item {
				width: 650rpx;
				background-color: rgba($color: #E40000, $alpha: .3);
				border-radius: 20rpx;
				padding: 30rpx;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				color: #E40000;

				.left {
					display: flex;
					align-items: flex-end;
					margin-right: 20rpx;

					.tip {
						margin-bottom: 10rpx;
						margin-right: 6rpx;
						display: inline-block;
					}
				}

				.btn {
					margin-right: 10rpx;
					font-size: 34rpx;
				}
			}
		}

		.close {
			width: 710rpx;
			margin-top: 50rpx;
			border-radius: 50rpx;
		}
	}

	.spell {
		// width: 90%;
		width: 100%;
		background-color: white;
		border-radius: 20rpx;

		.title {
			width: 100%;
			text-align: center;
			border-bottom: 2rpx solid #EEEEEE;
			padding: 30rpx 0;
			font-size: 32rpx;
			color: #444444;
			display: block;
		}

		&-item {
			padding: 20rpx;

			.img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.btn {
				margin: 0;
				margin-left: 10rpx;
			}
		}
	}
</style>