<template>
	<view class="goodsDetails" :class="['theme', themeObj.name]">
		<!-- 顶部自定义导航栏 -->
		<view class="top_nav">
			<navBar textcolor="#000" :showLeft="true" :showTitle="false"></navBar>
		</view>
		<!-- 轮播图 -->
		<swipers :goodsData="goods" @setShowVideo="setShowVideo"></swipers>
		<!-- 占位 -->
		<!-- #ifndef MP -->
		<view class="place" :style="'top:-' + toBar"></view>
		<!-- #endif -->
		<!-- 商品信息 -->
		<view class="goods_info">
			<view class="goods_name">
				{{goods.goodsName}}
			</view>
			<view class="text-gray text-sm padding-top-xs">
				{{goods.category}}
			</view>
			<view class="goods_price" v-if="hasToken">
				<text class="money text-lg">¥{{goods.price}}</text>
				<text>/{{ goods.unit }}</text>
				<text class="h_money">{{goodsData.hprice}}</text>
			</view>
			<view class="goods_price" v-else>
				<text class="money text-lg">客服询价</text>
				
			</view>
			<!-- <view class="shoucang">
				<view class="sc_icons" @tap="setisColl">
					<text :class="['iconfont',isColl == true?'icon-shoucang1':'icon-shoucang'] " :style="{color: isColl == true? colors :''}"></text>
				</view>
				<view class="sc_text" :style="{color: isColl == true? colors :''}">收藏</view>
			</view> -->
		</view>
		<view class="other">
			 <!-- v-if="goodsData.baoyou == true" -->
			<p>快递: 包邮</p>
			<!-- <p v-else>快递费:10元</p> -->
			<!-- <p>销量:{{goodsData.xiaoliang}}</p> -->
		</view>
		<view class="other">
			<p >分类: {{ goods.category }}</p>
		</view>
		<view class="other">
			<p >厂商: {{ goods.factory }}</p>
		</view>
		<!-- 分享按钮 -->
		<view class="share">
			<!-- <view class="tips" style="color: #666;">
				<text class="iconfont icon-zuanshi" style="color: #FF546E;font-size: 38upx;font-weight: 600;"></text>
				分享商品可获得商城积分
			</view> -->
			<!-- #ifdef MP -->
			<!-- <view class="onshare" style="color: #FF546E;">
				<text class="iconfont icon-fenxiang"></text>
				<button open-type="share" class="share_btn">1</button>
				立即分享
			</view> -->
			<!-- #endif -->
			<!-- <view class="poster" style="color: #FF546E;" @tap="openPoster">
				<text class="iconfont icon-CombinedShape"></text>
				生成海报
			</view> -->
		</view>
		<!-- 店铺信息 -->
		<!-- <view class="shop">
			<image class="shop_img" src="/static/images/log.png" mode="aspectFill"></image>
			<view class="shop_center" style="width: 65%;">
				<view class="shop_name">社区团购自营店</view>
				<view class="shop_address">{{goodsData.stallAddress}}</view>
			</view> -->
			<!-- #ifdef MP -->
			<!-- <view class="shoucang go_btn" @tap="nearAddress">
				<view class="sc_icons">
					<text class="iconfont icon-dizhi"></text>
				</view>
				<view class="sc_text">到这去</view>
			</view> -->
			<!-- #endif -->
			<!-- #ifndef MP -->
			<!-- 直接打开地图需要传递店铺的经纬度 来获取店铺的位置 -->
			<!-- <view class="shoucang go_btn" @tap="openMap">
				<view class="sc_icons">
					<text class="iconfont icon-dizhi"></text>
				</view>
				<view class="sc_text">到这去</view>
			</view> -->
			<!-- #endif -->
		<!-- </view> -->
		<!-- 选择规格和优惠券 -->
		<view class="sku_pon">
			<view class="cell" @tap="openSku">
				<text class="text1">商品规格：</text>
				<text class="text2">{{ goods.specs }}</text>
				<image src="/static/images/home/right.png"></image>
			</view>
			<!-- <view class="cell" style="border:none" @tap="opencoupon">
				<text class="text1">优 惠 券：</text>
				<text class="text2" :style="{color: colors}">领取优惠券</text>
				<image src="/static/images/home/right.png"></image>
			</view> -->
		</view>
		<!-- 商品评价 -->
		<view class="evaluate">
			<p class="eva_title">
				{{ commits.length > 0 ? '商品评价' : '暂无评价' }}<text>({{ commits.length }})</text>
				<text class="seeAll" @click="seeAll" v-if="commits.length > 0">查看全部</text>
			</p>
			<view class="evaluate_box">
				<view class="pingjia">
					<view v-if="commits.length > 0">
						<view class="pingjia_box" v-for="(row, index) in commits" :key="index">
							<view class="box_top">
								<image :src="row.headimg || defaultUserImg" mode="" class="head"></image>
								<view class="right">
									<p class="name">{{ row.userName }}</p>
									<p class="p2">
										<text class="text1">{{ row.createTime }}</text>
										<text class="text2">{{ row.goodsName }}</text>
									</p>
									<p class="p3">
										<image src="/static/images/home/stars.png" v-for="s in +row.qualityScore" :key="s" mode=""></image>
										<image src="/static/images/home/star-no.png" v-for="(s,h) in (5-row.qualityScore)"
										:key="h" mode=""></image>
									</p>
								</view>
							</view>
							<view class="tag_box" v-if="row.tags">
								<view class="tags" v-for="(s,x) in row.tags" :key="x">{{s}}</view>
							</view>
							<view class="ping_neirong">{{ row.content }}</view>
							<fileList v-model="row.fileList" :show-title="false" :show-colse-btn="false"></fileList>
							<view class="huifu" v-if="row.reply && row.reply !== ''">商家回复：{{ row.reply }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="details">
			<view class="details_title">
				—— <text style="color: #666666;margin: 0 20upx;"> 商品详情 </text> ——
			</view>
			<view class="details_content">
				<rich-text :nodes="htmlNode"></rich-text>
			</view>
		</view>
		<!-- 底部操作栏 -->
		<view class="operation">
			<view class="home" @tap="toHome">
				<text class="iconfont icon-shouye"></text>
			</view>
			<view class="cart" @tap="toCart">
				<text class="iconfont icon-gouwuche1"></text>
			</view>
			<view class="btns" v-if="goods.ifSale !== 0">
				<view class="addcart" 
				 @tap="openSku">
					加入购物车
				</view>
				<view  class="dingjin"  @tap="openSku">
					立 即 购 买
				</view>
			</view>
		</view>
		<!-- 规格弹出层 -->
		<sku :goods="goods" :showModal="showModal" :colors="colors" bottoms="0" @onhide="onhide"></sku>
		<!-- 选择优惠券弹出层 -->
		<view class="mask" catchtouchmove="preventTouchMove" v-if="couponshow == true" @tap="hidecoupon"></view>
		<view class="coupon" :style="'bottom:' + (couponshow == true ? '0px':'')">
			<scroll-view class="scrolls" scroll-y>
				<coupon :colors="colors" :couponList="couponList" @onReceive="onReceive"></coupon>
			</scroll-view>
		</view>
		<!-- 返回顶部按钮 -->
		<view class="go_top" :style="'right: ' + (scrollShow == true ? '3%':'-200upx')">
			<view class="ontop" @tap="goTop">
				<image src="/static/images/home/TOP.png"></image>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="center_poter" style="margin: 0 auto;" v-if="shows">
				<!-- #ifndef MP -->
				<image class="close_btn" src="/static/images/goods/close.png" @click="hidePoster">
				</image>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<cover-image class="close_btn" src="/static/images/goods/close.png" @click="hidePoster">
				</cover-image>
				<!-- #endif -->
				<poster :posterData="goodsData"></poster>
			</view>
		</uni-popup>
		<!-- 预览视频弹窗 -->
		<view class="mask" v-if="showVideo == true" @touchmove.stop.prevent="ondefault" 
		@click="hideShow">
			<view class="close">
				<image src="/static/images/goods/close.png"></image>
			</view>
		</view>
		<view class="previewvideo" v-if="showVideo == true">
			<view class="videos">
				<video class="nowvideos" id="nowVideo" v-if="showVideo == true" 
				:src="goods.videos" :autoplay="showVideo"
				 :show-center-play-btn="true" :show-mute-btn="true" :show-fullscreen-btn="false"></video>
			</view>
		</view>
		<!-- 用来承载H5预览视频的 -->
		<view style="position: absolute;top: -999upx;left: -999upx;">
			<video ref="newVideo" id="newVideo" 
			:src="goods.videos"
			:autoplay="showVideo"
			 :show-center-play-btn="false" :show-mute-btn="true" :show-fullscreen-btn="false" 
			 @fullscreenchange="hideShow"></video>
		</view>
		<loading v-if="isShow == true"></loading>
	</view>
</template>

<script>
	var app = getApp();
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import navBar from "../../commponent/public/navBar";
	import sku from "../../commponent/public/sku";
	import coupon from "../../commponent/public/coupon";
	import loading from "../../commponent/public/loading";
	import poster from '../../commponent/goods/poster.vue'
	import swipers from './swiper/swiper.vue'
	import fileList from '@/pages/commponent/public/fileList.vue'

	import {getGoodsDetails,getlocation, getToken, setGoodsHistory} from '@/utils/auth.js'
	import { getGoodsById, addCart, getCommits } from '@/api';
	import CONFIG from '@/config'
	import { getFileList } from'@/utils/util.js'
	export default {
		data() {
			return {
				
				good:{}, //获取数据
				colors: '',
				shows: false,
				statusBarHeight: app.globalData.statusHeight + 'px',
				toBar: app.globalData.toBar+ 'px',
				showdots: false,
				swiperList: [],
				isColl: false,
				latitude: '',
				longitude: '',
				nowList: {},
				goodsData: {
					title: '',
					skuSubTitle:'',
					type: 1,
					goods_id: 201,
					money: 0,
					number: 1,
					hmoney: '',
					img: '',
					youhui: true,
					baoyou: true,
					status: 0, //商品过期状态  0正常  1已失效
					stock: 600,
					xiaoliang:'',//销量
					videos: '',
					imgList: [],
					stallAddress:"社区团购模拟地址",//商家地址（先用获取地址渲染）
					sku: [],
					skuArr: []
				},
				showModal: false,
				couponshow: false,
				isshowVideo: true,
				voice: false,
				showVideo: false,
				isShow: false,
				couponList: [ //优惠券列表
					{
						money: 100,
						reduce: 10,
						date: '2020-02-09 2020-10-02',
						id: 1,
						status: 0,
						condition: ['新人专享', '仅在支付时使用', '可与其他产品共享']
					}, {
						money: 100,
						reduce: 20,
						date: '2020-02-09 2020-10-02',
						id: 2,
						status: 0,
						condition: ['新人专享']
					}, {
						money: 100,
						reduce: 30,
						date: '2020-02-09 2020-10-02',
						id: 3,
						status: 0,
						condition: ['仅在支付时使用', '可与其他产品共享']
					}, {
						money: 100,
						reduce: 40,
						date: '2020-02-09 2020-10-02',
						id: 4,
						status: 0,
						condition: ['新人专享', '可与其他产品共享']
					}, {
						money: 100,
						reduce: 50,
						date: '2020-02-09 2020-10-02',
						id: 5,
						status: 0,
						condition: ['新人专享', '仅在支付时使用']
					}
				],
				htmlNode: '',
				// 商品详情
				descriptionStr: '<div id="commDesc" hasdata="1" style="line-height: 2; transform-origin: 0px 0px; font-size: 30px;width:100%;"><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/99519/11/4669/136444/5de8bbdbE0cba049d/517f1fb75b582456.jpg!q70.dpg.webp" loaded="17"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/92267/13/4771/160442/5de8bbdbE50655175/7dd51e0b966aba15.jpg!q70.dpg.webp" loaded="16"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/93624/28/4672/131382/5de8bbdbE65d14e5d/81bc1227ec775788.jpg!q70.dpg.webp" loaded="15"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/97366/21/4817/101042/5de8bbdbE8854b673/7c4ce7faa45a418b.jpg!q70.dpg.webp" loaded="14"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/98311/21/4778/122770/5de8bbdcE13375754/f4324ca9294eef4c.jpg!q70.dpg.webp" loaded="13"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/103373/15/4747/118973/5de8bbdcE2058ee8e/d921d5f1a4aa5c89.jpg!q70.dpg.webp" loaded="12"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/88841/34/4711/84977/5de8bbdeE0b691b9a/e69796d32a63bbaa.jpg!q70.dpg.webp" loaded="11"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/95248/2/4771/99041/5de8bbdfE06b41b3b/3c4a2b1cb97a5262.jpg!q70.dpg.webp" loaded="10"></div>',

				goodsEva: [ //评价列表
					{
						headimg: '/static/images/face.jpg',
						nickname: '反转',
						create_time: '2020-09-10 15:36',
						goods_name: '测试规格1',
						score: 5,
						comment: '产品很不错,赞',
						images: ['/static/images/goods/two.jpg', '/static/images/goods/one.jpg'],
						reply: '感谢您的支持',
						tags: ['价格合理', '味道好', '价格优惠', '态度好']
					},
					{
						headimg: '/static/images/face.jpg',
						nickname: '清风',
						create_time: '2020-09-10 13:36',
						goods_name: '测试规格2',
						score: 4,
						comment: '味道还不错~',
						images: [],
						reply: '',
						tags: []
					}
				],
				scrollShow: false,
				
				defaultUserImg: '/static/images/face.jpg',
				commits: [],
				goodsId: 0,
				goods: {
					imgList: [],
					_skus: [],
					isSafe: 1
				},
				hasToken: !!getToken(),
				themeObj: app.globalData.themeObj
				
			};
		},
		components: {
			navBar,
			sku,
			coupon,
			loading,
			poster,
			uniPopup,
			swipers,
			fileList
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.colors = app.globalData.newColor
			this.themeObj = app.globalData.themeObj
			// #ifdef APP-PLUS
			this.toBar = app.globalData.toBar + 25 + 'px'
			// #endif
			this.newVideo = uni.createVideoContext('newVideo');
			this.goodsId = options.id
			this.getGoodsById()
	
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {

		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面滚动
		 */
		onPageScroll: function(e) {
			if (e.scrollTop >= 400) {
				this.scrollShow = true
			} else {
				this.scrollShow = false
			}
		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			return {
				title: this.goods.goodsName,
				path: '/pages/views/goods/goodsDetails?id=' + this.goods.id,
				imageUrl: this.goods.url,
			}
		},
		/**
		 * 用户点击右上角分享到朋友圈
		 */
		onShareTimeline: function() {
			return {
				title: this.goods.goodsName,
				path: '/pages/views/goods/goodsDetails',
				imageUrl: this.goods.url
			}
		},
		methods: {
			previewImg(url){ //预览图片
				let arr = []
				arr[0] = url
				uni.previewImage({
					urls:arr
				})
			},
			getCommits(goods) {
				let s = [
					  {		
						  "rule": "eq",
						  "type": "string",
						  "dictCode": "",
						  "val": goods.id,
						  "field": "goodId"
					  },
							  // {
							  		  		
							  //     "rule": "eq",
							  //     "type": "string",
							  //     "dictCode": "",
							  //     "val": getUserInfo().id,
							  //     "field": "goodId"
							  // }
				]
						
				const params = {
					pageNo:1,
					pageSize: 5,
					superQueryParams: s,
					superQueryMatchType: 'and',
					"column": "createTime",
					order: "desc",
				}
				params.superQueryParams = encodeURI(JSON.stringify(s))
				getCommits(params).then(res => {
					const list = res.result.records.map(v => {
						v.fileList = getFileList(v.url)
						return v
					})
					console.log(list)
					this.commits = list
				})
			},
			getGoodsById() {
				uni.showLoading()
				getGoodsById({ id: this.goodsId }).then(res => {
					uni.hideLoading()
					if (res.result) {
						this.initGoodsData(res.result)
					} else {
						this.$toast('商品不存在')
			
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			},
			initGoodsData(goods) {
				this.goods = goods
				this.getCommits(goods)
				if (goods.ifSale !== 1) {
					this.$toast('该商品已下架')
					// uni.navigateBack()
					// return
				}
			
				this.goods.imgList = [this.goods.url]
				this.setFrom(this.goods.url); //处理商品详情 富文本
				
				if(this.goods.specs){
					const specs = this.goods.specs.split('|')
					this.goods._skus = [{
						sku_id: this.goods.id,
						skuname: '规格',
						child: specs.map((v, index) => {
								return {
									tagname: v,
									id: index + 1,
									imgs: '',
									money: this.goods.price
								}
							})
					
					}]

				}
				setGoodsHistory(this.goods)
					// this.getLocation(); //获取位置信息
				// if(getlocation()){this.goodsData.stallAddress =  getlocation().poiaddress}
				
			},
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: res => {
						console.log('获取经纬度成功', res);
						that.setData({
							latitude: res.latitude,
							longitude: res.longitude
						});
					},
					fail: () => {
						console.log('获取经纬度失败');
						that.setData({
							latitude: '',
							longitude: ''
						});
					},
					complete: () => { // 解析地址
					}
				});
			},
			setFrom(html) {
				let _html = `<div> <img src="${html}" />	 </div>`
				//处理富文本 让图片居中适应
				let newContent = _html.replace(/\<img/gi, '<img class="rich-img" ');
				this.setData({
					htmlNode: newContent
				});
			},
			openPoster() { //生成海报
				this.shows = false
				uni.showLoading({
					title: '海报绘制中..'
				})
				this.$refs.popup.open()
				setTimeout(() => {
					uni.hideLoading()
					this.shows = true
				}, 600)
			},
			hidePoster(){//关闭海报
				this.$refs.popup.close()
			},
			setisColl() {
				//收藏与取消收藏
				let iscoll = !this.isColl;
				this.setData({
					isColl: iscoll
				});
			},
			openMap() {
				//打开地图
				let that = this;
				uni.openLocation({
					latitude: 39.90,
					longitude: 116.40,
					success: e => {

					}
				});
			},
			nearAddress() {
				if (this.longitude !== '') {
					this.openMap();
				} else {
					const _this = this; // 处理拒绝再次打开调用设置
					uni.getSetting({
						success(res) {
							if (res && res.authSetting && res.authSetting.hasOwnProperty('scope.userLocation')) {
								uni.openSetting({
									success() {
										_this.getLocation();
									}

								});
							}
						}

					});
				}
			},
			setShowVideo(showVideo, isH5){ //操作视频
				this.showVideo = showVideo
				if(isH5 == true){
					this.newVideo.play()
				}
			},
			hideShow(){
				this.showVideo = false
			},
			ondefault(){ //阻止事件 抛弃
				
			},
			onhide() {
				this.showModal = false
			},
			openSku() {
				if (!this.hasToken) {
					this.$toast('请联系客服人员询价')
					return
				}
				this.nowList = this.goodsData
				this.showModal = true
			},
			opencoupon() {
				this.couponshow = true
			},
			hidecoupon() {
				this.couponshow = false
			},
			toHome() {
				uni.switchTab({
					url: '/pages/views/tabBar/category'
				});
			},

			toCart() {
				uni.switchTab({
					url: '/pages/views/tabBar/cart'
				});
			},
			goTop() { //返回顶部
				uni.pageScrollTo({
					scrollTop: 0
				});
			},
			onReceive(item, index) { //领取优惠券
				console.log(item, index)
				if (item.status == 1) {
					return
				} else {
					this.couponList[index].status = 1 //领取成功
					this.$toast('领取成功')
				}
			},
			seeAll() { //查看全部评论
				uni.navigateTo({
					url: '/pages/views/goods/goodsEvaluate?id=' + this.goods.id
				})
			}
		}
	};
</script>
<style scoped lang="scss">
	@import "./goodsDetails.scss";
	/deep/.rich-img {
		width: 100%;
		height: auto;
	}
</style>
