<template>
	<view class="container">
		<swiper :autoplay="autoplay" circular class="swiper" :duration="duration" :indicatorDots="indicatorDots"
			:interval="interval">
			<swiper-item>
				<view class="swiper-item uni-bg-red" style="height:700rpx;">
					<image mode="aspectFill" :src="BASE_URL+item.url" style="width:100%;height:100%;"
						v-for="(item,index) in model.banner" :key="index"></image>
				</view>
			</swiper-item>
		</swiper>
		<view style="background-color:white;border-radius:20rpx;margin:20rpx;padding:25rpx;">
			<view style="font-weight:bold;color:red;font-size:45rpx;">{{'￥'+model.startMoneys+'-'+model.endMoneys+''}}
			</view>
			<view style="margin-top:20rpx;font-size:28rpx;">{{''+model.title+''}}</view>
		</view>
		<view @click="OpenGoods" style="background-color:white;border-radius:20rpx;margin:20rpx;padding:25rpx;">
			<view style="display:flex;align-items:center;justify-content:space-between;">
				<view style="display:flex;align-items:center;font-size:28rpx;">
					<view style="color:gray;">选择</view>
					<view style="margin-left:20rpx;">请选择规格</view>
				</view>
				<view>
					<image :src="BASE_URL+'/api/File/Image/annexpic/right.png'" style="width:40rpx;height:40rpx;">
					</image>
				</view>
			</view>
			<view style="display:flex;align-items:center;justify-content:center;margin-top:10rpx;">
				<view style="padding:10rpx 20rpx;color:gray;background-color:#F7F7F7;font-size:27rpx;margin-right:5rpx;"
					v-if="index<2" v-for="(item,index) in cardlist" :key="index">{{''+item.Title+''}}</view>
				<view style="padding:10rpx 20rpx;color:gray;background-color:#F7F7F7;font-size:27rpx;">
					{{'共'+cardlist.length+'个规格可选'}}
				</view>
			</view>
		</view>
		<view style="background-color:white;border-radius:20rpx;margin:20rpx;padding:25rpx;">
			<view style="display:flex;align-items:center;justify-content:space-between;">
				<view>{{'商品评价（'+commenttotal+'）'}}</view>
				<view style="display:flex;align-items:center;color:red;">
					<view @click="ShowCommentDetail" style="font-size:25rpx;">查看全部</view>
					<view>
						<image :src="BASE_URL+'/api/File/Image/annexpic/redright.png'"
							style="width:30rpx;height:30rpx;margin-top:9rpx;"></image>
					</view>
				</view>
			</view>
			<view v-for="(item,index) in coomentlist" :key="index">
				<view style="display:flex;align-items:center;justify-content:space-between;margin-top:50rpx;">
					<view style="display:flex;align-items:center;">
						<view>
							<image :src="item.user!=null?item.user.HeadIcon:''"
								style="width:50rpx;height:50rpx;border-radius:100px;"></image>
						</view>
						<view style="margin-left:30rpx;color:gray;font-size:25rpx;">
							{{''+(item.user&&item.user.RealName)+''}}
						</view>
					</view>
					<view style="color:gray;font-size:25rpx;">{{''+item.creatorTime+''}}</view>
				</view>
				<view
					style="font-size:28rpx;margin:20rpx;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;">
					{{''+item.txt+''}}
				</view>
				<view style="font-size:25rpx;margin:20rpx;color:gray;">{{item.title}}</view>
			</view>
		</view>
		<view style="background-color:white;border-radius:20rpx;margin:20rpx;padding:25rpx;">
			<view style="width:100%;margin:0 auto;">
				<image mode="aspectFit" :src="BASE_URL+'/api/File/Image/annexpic/imagedetail.PNG'"
					style="width:100%;height:50rpx;"></image>
			</view>
			<swiper :autoplay="autoplay" circular="true" :duration="duration" :indicatorDots="indicatorDots"
				:interval="interval" style="height:300rpx;width:300rpx;margin-top:20rpx;">
				<swiper-item>
					<view class="swiper-item uni-bg-red" style="background-color:pink;height:300rpx;">
						<image :src="BASE_URL+item.url" style="width:100%;height:100%;"
							v-for="(item,index) in model.banner" :key="index"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view style="width:100%;margin-top:20rpx;text-align:center;">
			<image :src="BASE_URL+'/api/File/Image/annexpic/likeimage.PNG'"
				style="width:280rpx;height:60rpx;text-align:center;"></image>
		</view>
		<view style="border-radius:20rpx;padding:10rpx;margin-bottom:100rpx;">
			<view style="display:flex;flex-wrap:wrap;width:100%;">
				<view style="width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;"
					v-if="likelist.length==0">
					<image mode="aspectFit" :src="BASE_URL+'/api/File/Image/annexpic/nullImg.png'"
						style="width:400rpx;height:400rpx;"></image>
					<text style="color:gray;font-size:30rpx;">暂无数据</text>
				</view>
				<view @click="RedirectMeansDetail(item)"
					style="width:45%;background-color:white;margin:5rpx;box-shadow:0 0 1em 0em #CDC7C7;padding:10rpx;border-radius:10px;"
					v-for="(item,index) in likelist" :key="index">
					<view>
						<image :src="BASE_URL+item.banner[0].url"
							style="width:100%;height:290rpx;border-top-left-radius:10px;border-top-right-radius:10px;">
						</image>
					</view>
					<view style="font-size:25rpx;">{{item.title}}</view>
					<view style="display:flex;align-items:center;justify-content:space-between;margin-top:5px;">
						<view style="font-weight:bold;font-size:32rpx;color:red;">{{'￥'+item.startMoneys}}</view>
						<view>
							<image :src="BASE_URL+'/api/File/Image/annexpic/shop.png'"
								style="width:50rpx;height:50rpx;"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="goodspopup" style="margin:0px !important;">
			<view style="background-color:white;border-radius:20rpx;padding:20rpx;">
				<view
					style="display:flex;justify-content:space-between;padding-bottom:20rpx;border-bottom:1px solid #e0e0e0;">
					<view style="display:flex;align-items:center;">
						<view>
							<image :src="BASE_URL+model.banner[0].url" style="width:120rpx;height:120rpx;"></image>
						</view>
						<view style="margin-left:20rpx;">
							<view style="font-weight:bold;font-size:35rpx;color:red;">{{'￥'+moneys}}</view>
							<view style="color:gray;font-size:25rpx;"></view>
						</view>
					</view>
					<view>
						<image @click="ClosePopup" :src="BASE_URL+'/api/File/Image/annexpic/dels.png'"
							style="width:50rpx;height:50rpx;"></image>
					</view>
				</view>
				<view>
					<view style="font-size:28rpx;color:gray;padding:20rpx;">规格</view>
					<view style="display:flex;align-items:center;flex-wrap:wrap;font-size:25rpx;">
						<view :class="currentIndex==index?'checked':''" @click="CurrentChange(item,index)"
							style="background-color:#F7F7F7;padding:10rpx 25rpx;border-radius:10rpx;margin:20rpx;"
							v-for="(item,index) in cardlist" :key="index">{{''+item.Title+''}}</view>
					</view>
				</view>
				<view
					style="padding:20rpx;display:flex;align-items:center;justify-content:space-between;padding-bottom:20rpx;border-bottom:1px solid #e0e0e0;">
					<view>数量</view>
					<view style="display:flex;align-items:center;">
						<view @click="Reduce"
							style="background-color:#F7F7F7;width:50rpx;height:50rpx;padding:10rpx;text-align:center;display:flex;align-items:center;justify-content:center;">
							<image :src="BASE_URL+'/api/File/Image/annexpic/jian.png'"
								style="width:30rpx;height:30rpx;"></image>
						</view>
						<view
							style="display:flex;align-items:center;justify-content:center;background-color:#F7F7F7;width:80rpx;height:50rpx;padding:10rpx;text-align:center;margin:0px 5rpx 0px 5rpx;color:#CDC7C7;">
							{{''+number+''}}
						</view>
						<view @click="Add"
							style="background-color:#F7F7F7;width:50rpx;height:50rpx;padding:10rpx;text-align:center;display:flex;align-items:center;justify-content:center;">
							<image :src="BASE_URL+'/api/File/Image/annexpic/jia.png'" style="width:35rpx;height:35rpx;">
							</image>
						</view>
					</view>
				</view>
				<view style="margin-top:20rpx;">
					<view style="display:flex;align-items:center;justify-content:space-between;width:100%;">
						<view @click="ConfirmShop"
							style="background-color:#F6B241;padding:20rpx 30rpx 20rpx 30rpx;width:40%;border-radius:20rpx;text-align:center;color:white;font-weight:bold;font-size:28rpx;">
							加入购物车</view>
						<view @click="ConfirmOrder"
							style="background-color:#FF6E6D;padding:20rpx 30rpx 20rpx 30rpx;width:40%;border-radius:20rpx;text-align:center;font-weight:bold;color:white;font-size:28rpx;">
							立即购买</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<view
			style="background-color:white;position:fixed;bottom:0px;width:100%;height:60rpx;padding:20rpx;display:flex;align-items:center;justify-content:space-around;">
			<view @click="RedirectIndex" style="width:10%;text-align:center;">
				<view style="text-align:center;">
					<image mode="aspectFit" :src="BASE_URL+'/api/File/Image/annexpic/house.png'"
						style="width:28rpx;height:28rpx;"></image>
				</view>
				<view style="font-size:20rpx;color:gray;">首页</view>
			</view>
			<view style="width:10%;text-align:center;">
				<view style="text-align:center;display:flex;align-items:center;justify-content:center;">
					<button openType="contact" plain="true"
						style="padding:0px;margin:0px;height:45rpx;display:flex;align-items:center;border:0px;"
						type="default">
						<image mode="aspectFit" :src="BASE_URL+'/api/File/Image/annexpic/message.png'"
							style="width:25rpx;height:25rpx;"></image>
					</button>
				</view>
				<view style="font-size:20rpx;color:gray;">客服</view>
			</view>
			<view @click="ChangeCollect" style="width:10%;text-align:center;">
				<view style="text-align:center;">
					<image mode="aspectFit" :src="BASE_URL+'/api/File/Image/annexpic/yesaixin.png'"
						style="width:40rpx;height:40rpx;" v-if="isshow"></image>
					<image mode="aspectFit" :src="BASE_URL+'/api/File/Image/annexpic/noaixin.png'"
						style="width:28rpx;height:28rpx;" v-else></image>
				</view>
				<view style="font-size:20rpx;color:gray;">收藏</view>
			</view>
			<view style="display:flex;align-items:center;font-size:20rpx;width:70%;margin-left:30rpx;">
				<view @click="JoinGWC"
					style="border-bottom-left-radius:20rpx;border-top-left-radius:20rpx;padding:10rpx;color:white;background-color:#F6B241;width:40%;height:40rpx;line-height:40rpx;text-align:center;">
					加入购物车</view>
				<view @click="Buy"
					style="border-bottom-right-radius:20rpx;border-top-right-radius:20rpx;padding:10rpx;color:white;background-color:#FF6E6D;width:40%;height:40rpx;line-height:40rpx;text-align:center;">
					立即购买</view>
			</view>
		</view>
		<view style="position:fixed;bottom:150px;right:20px;">
			<uni-badge size="small" :text="ShopStock" type="success" v-if="ShopStock>0" absolute="rightTop">
				<view @click="RedirectShop"
					style="background-color:white;border-radius:50px;text-align:center;padding:10rpx;box-shadow:0px -10px 20px -5px #FD96E6;">
					<image mode="aspectFill" :src="BASE_URL+'/api/File/Image/annexpic/shopimg.png'"
						style="width:45rpx;height:45rpx;border-radius:50px;"></image>
				</view>
			</uni-badge>
			<view @click="RedirectShop"
				style="background-color:white;border-radius:50px;text-align:center;padding:10rpx;box-shadow:0px -10px 20px -5px #FD96E6;"
				v-else>
				<image mode="aspectFill" :src="BASE_URL+'/api/File/Image/annexpic/shopimg.png'"
					style="width:45rpx;height:45rpx;border-radius:50px;"></image>
			</view>
		</view>
	</view>

</template>

<script>
	import BASE_URL from '../../common/config.js'
	import service from '../../service/service.js'
	import utils from '../../service/utils.js'
	export default {
		data() {
			return {
				BASE_URL,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				number: 1,
				moneys: 0,
				duration: 500,
				currentIndex: -1,
				isshow: false,
				// 商品评论数
				commenttotal: 0,
				ShopStock: 0,
				model: {

				},
				commentModel: {
					goodsId: '',
					currentPage: 1,
					pageSize: 20,
					sidx: '',
					sort: '',
				},
				coomentlist: [],
				cardlist: [],
				// 商品ID
				goodsId: '',
				likelist: [],
				CreateShopModel: {
					"userId": "",
					"goodsId": "",
					"jsonDetail": "",
					"count": 0,
					"creatorTime": "",
					"lastModifyTime": ""
				},
				JsonDetail: {
					"arrayJsons": [],
					"totalMoneys": 1
				},
				ChildrenJson:{
					"goods": '',
					"jsonDetail": '',
					"count": 1
				}

			}
		},
		 onLoad(data) {
			console.log('这是接收信息', data)
			this.goodsId = data.id
			console.log('这是数据啊', this.model)
			this.commentModel.goodsId = data.id
			 this.ShowGoodsInfo()
			this.ShowComment()
			this.ShowStock()
			this.ShowLikeList()
		},
		onShow() {
			
		},
		methods: {
			// 加入购物车
			ConfirmShop() {
				if (this.CreateShopModel.jsonDetail == '') {
					uni.showToast({
						title: '请选择规格',
						icon: 'none'
					})
				} else if (!(this.number > 0)) {
					uni.showToast({
						title: '请选择数量',
						icon: 'none'
					})
				} else {
					this.CreateShopModel.userId = service.getUser().id
					this.CreateShopModel.goodsId = this.model.id
					this.CreateShopModel.count = this.number
					console.log('这是选择得购物车信息', this.CreateShopModel)
					this.API.CreateZDY(this.CreateShopModel).then(res => {
						console.log('这是创建购物车信息', res)
						if (res.code == 200) {
							uni.showToast({
								title: '添加购物车成功',
								icon: 'none'
							})
							this.$refs.goodspopup.close()
							setTimeout(() => {
								this.ShowStock()
							}, 500)
						} else {
							uni.showToast({
								title: '加入购物车失败',
								icon: 'none'
							})
						}
					})
				}
			},
			// 立即下单
			ConfirmOrder() {
				if(this.ChildrenJson.jsonDetail==''){
					uni.showToast({
						title:'请选择规格',
						icon:'none'
					})
					return
				}
				this.JsonDetail.arrayJsons=[]
				this.JsonDetail.totalMoneys=0
				this.ChildrenJson.goods=this.model
				this.ChildrenJson.count=this.number

				this.ChildrenJson.jsonDetail.Moneys=this.moneys
				delete this.ChildrenJson.goods.bannerstr
				console.log('这是最终数据',this.ChildrenJson)
				this.JsonDetail.arrayJsons.push(this.ChildrenJson)
				this.JsonDetail.totalMoneys=this.number*this.moneys
				console.log('这是最终合并',this.JsonDetail)
				uni.navigateTo({
					url:'/pages/comfirmorder/index?item='+encodeURIComponent(JSON.stringify(this.JsonDetail))
				})
				
			},
			RedirectMeansDetail(item) {
				uni.navigateTo({
					url: '/pages/meansdetail/index?id=' + item.id
				})
			},
			ShowLikeList() {
				let jsons = {
					identy: '',
					currentPage: 1,
					pageSize: 20,
					sidx: '',
					sort: '',
					keyword: ''
				}
				this.API.GetGoodsList(jsons).then(res => {
					console.log('这是商品信息', res)
					res.data.list = res.data.list.filter(o => o.id != this.model.id)
					this.likelist = res.data.list
				})
			},
			JoinGWC() {
				this.$refs.goodspopup.open('bottom')
			},
			Buy() {
				this.$refs.goodspopup.open('bottom')
			},
			RedirectShop() {
				uni.navigateTo({
					url: '/pages/ShopInfo/index'
				})
			},
			ShowGoodsInfo() {
				this.API.GetInfoZDY(this.goodsId).then(res => {
					console.log('这是信息', res)
					this.model = res.data
					this.isshow = this.model.iscollect > 0 ? true : false
					console.log('这是赋值信息', this.model)
					this.ShowCardList()
				})
			},
			ShowStock() {
				let jsons = {
					UserId: service.getUser().id
				}
				this.API.GetCurrentUserShopCount(jsons).then(res => {
					console.log('这是当前用户库存数', res)
					if (res.code == 200) {
						this.ShopStock = res.data
					} else {
						this.ShopStock = 0
						uni.showToast({
							title: '购物车库存错误',
							icon: 'none'
						})
					}
				})
			},
			ShowCommentDetail() {
				uni.navigateTo({
					url: '/pages/commentDetail/index?id='+this.commentModel.goodsId
				})
			},
			Reduce() {
				if (this.number == 1) {
					uni.showToast({
						title: '再减就没啦',
						icon: 'none'
					})
				} else {
					this.number = this.number - 1
				}
			},
			Add() {
				if (this.number > 9) {
					uni.showToast({
						title: '最多只能10个哦',
						icon: 'none'
					})
				} else {
					this.number = this.number + 1
				}
			},
			CurrentChange(item, index) {
				this.currentIndex = index
				this.ChildrenJson.jsonDetail=item
				let jsons = {
					cpkId: this.cardlist[index].IdNo
				}
				this.API.GetCardDetail(jsons).then(res => {
					console.log('选择请求的参数', res)
					this.moneys = res.data.Data.PurPrice
					this.CreateShopModel.jsonDetail = JSON.stringify(res.data.Data)
				})
				// this.moneys=this.cardlist[index].
				this.API.GetCardDetail()
			},
			OpenGoods() {
				console.log('wwwwwww')
				this.$refs.goodspopup.open('bottom')
			},
			ClosePopup() {
				this.$refs.goodspopup.close()
			},
			ShowCardList() {
				let jsons = {
					"pageIndex": 1,
					"pageSize": 100,
					"filterName": "",
					"classId": 0
				}
				this.API.GetCardList(jsons).then(res => {
					console.log('这是获取卡种', res)
					let data = res.data.Data.List.filter(o => o.Title.includes(this.model.identy))
					console.log('这是处理的数据', data)
					this.cardlist = data
					console.log('赋值卡种',this.cardlist)
				})
			},
			ShowComment() {
				this.API.GetCommentList(this.commentModel).then(res => {
					console.log('这是评论信息', res)
					res.data.list.forEach((item,index)=>{
						item.creatorTime=utils.formatTime(item.creatorTime,'yyyy-MM-dd')
					})
					this.coomentlist = res.data.list
					this.commenttotal = res.data.pagination.total
					console.log('这是数据', this.coomentlist)
				})
			},
			RedirectIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 商品收藏和取消收藏
			ChangeCollect() {
				let json = {
					"userId": service.getUser().id,
					"goodsId": this.model.id
				}
				this.isshow = !this.isshow
				this.API.CollectChange(json).then(res => {
					console.log('这是收藏事件', res)

				})
			}
		}
	}
</script>

<style>
	.swiper {
		height: 700rpx;
	}

	.container {
		background-color: #f7f7f7;
	}

	.checked {
		color: white;
		background-color: pink !important;
	}
</style>
