<template>
	<view>
		<uni-nav-bar  left-icon="left" :statusBar="true"  title="Flash Sale" 
		color="#000000"  @clickLeft="back" @clickRight="isDelete=!isDelete" :border="false"/>
		
		<view class="body">
			<view class="countDown">
				<text>Ends in</text>
				<uni-countdown :showDay="false" :hour="curEndTime |hours" :minute="curEndTime|minutes" :second="curEndTime|seconds"  
				color="#FFFFFF" background-color="#1B1B1B" class="countDown_assembly" />
			</view>
			<view class="tips">
				Chic selects commodities from time to time to carry
				 out special price activities. 
			</view>
			<view class="tips1">The quantity of special price commodities is limited and will be sold out</view>
			<view class="recommend">
				<view class="recommend_content">
					<view class="recommend_content_item" v-for="(item,index) in list " :key="index" >
						<view class="recommend_content_item_image">
							<image :src="item.goods_img" mode="" @click="goDetails(item.id)"></image>
						</view>
						<view class="recommend_content_item_name">{{item.name}}</view>
						<view class="recommend_item_operation">
							<view>
								<view class="recommend_content_item_pric">US${{item.promote_price?item.promote_price:item.shop_price}}</view>
								<view class="recommend_content_item_pric1">US${{item.shop_price}}</view>
							</view>
							<image src="../../static/img/add.png"  @click="Cart(item)" ></image>
						</view>
						
					</view>
				</view>
			</view>
				<view class="mask" @click="isCart=false" v-show="isCart"></view>
			<view class="addCard" v-show="isCart">
				<image src="/static/img/close1.png" mode="" class="addCard_close" @click="isCart=false"></image>
				<scroll-view class="spike1 " scroll-x="true" :show-scrollbar="false"  >
					<image  mode="" class="addCard_scroll" :src="item.img_url"  v-for="(item,index) in gallery_list"  :key="index" ></image>
				</scroll-view>
			<scroll-view class="addCard_body" scroll-y="true">
				<view >{{ goodsDate.goods_name}}</view>
				<view class="addCard_price">US${{goodsDate.is_promote==0? goodsDate.shop_price :goodsDate.promote_price}}</view>
				<view  v-for="(item,index) in goods_attr_list" :key="item.attr_id">
					<view >{{item.name}}</view>
					<view class="color_select variations_select_size">
						<!-- <view class="select_size_item"
						v-for="(item1,index1) in item.goods_attrs"  
					   :key="item1.goods_attr_id" 
					   :class="goods_attr_list[index].goods_attr_id==item1.goods_attr_id?'active_color':''"
					@click="selectAttr(item.attr_id,item1.goods_attr_id,index)">
							{{item1.attr_value}}
						</view> -->
						<view class="color_select_item" v-for="(item1,index1) in item.list"  :key="item1.attr_value"
						:class="goods_attr_list[index].goods_attr_id==item1.goods_attr_id?'active_color':''" @click="selectAttr(item.attr_id,item1.goods_attr_id,index1)">
						<view class="color_select_item_zoom" v-if="item1.attr_img!=''">
							<image src="/static/icon/big2.png" mode=""></image>
						</view>
						<image :src="item1.attr_img"  mode="" v-if="item1.attr_img!=''"></image>
						<view class="color_select_item_bottom" v-if="item1.attr_img!=''">【{{ item1.attr_value}}】</view>
						<view  class="color_select_item_bottom" v-if="!item1.attr_img">{{ item1.attr_value}}</view>
						</view>
					
					</view>
				</view>
			</scroll-view>
			<view class="quantity">
				<text>Quantity</text>
				<uni-number-box  background="#fff" v-model="cartQuery.goods_number"  :min="1"></uni-number-box>
			</view>
			<button @click="addCart">ADD TO CART</button>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {defaultRequest,defaultRequest2} from '../../api/index.js'
	export default {
		data() {
			return {
				list:[],
				isCart:false,
				query:{
					_action:'getgoodsdetail',
					goods_id:''
				},
				Is_attr:0,//是否有规格
				goodsDate:{
					comment_summary:[
						{comment_summary:'',commentlabel: ""}
					],
					gallery_list:[
						{content:''}
					],
					
				},
				//选择规格的数组
				goods_attr_list:[],
				gallery_list:[],
				catQuery:{
					_action:'getgoods',
					cat:'',
					page_index:1,
					page_size:10
				},
				// 添加到购物车请求参数
				cartQuery:{
					_action:'addtocart',
					goods_id:'',
					goods_parent_id:0,
					goods_number:1,
					goods_attr_id:'',
					goods_is_package:0
				},
				isLogin:-1,
				current:0,
			
			}
		},
		computed:{
			//当天结束时间
			curEndTime(){
				const endtime = new Date(new Date().setHours(23,59,59,999)).getTime()
				 // 获取当前时间
				const nowtime=(new Date()).getTime();
				var date3 = nowtime - endtime;   //时间差的毫秒数      
				date3 = Math.abs(date3)
			  return date3;
			}
		},
		filters:{
			hours (timestamp){
				var leave1=timestamp%(24*3600*1000)    //计算天数后剩余的毫秒数
				var hours=Math.floor(leave1/(3600*1000))
				return hours
			},
			minutes(timestamp){
				var leave2=(timestamp%(24*3600*1000))%(3600*1000)        //计算小时数后剩余的毫秒数
				var minutes=Math.floor(leave2/(60*1000))
				return minutes
			},
			seconds(timestamp){
				var leave3=((timestamp%(24*3600*1000))%(3600*1000))%(60*1000)      //计算分钟数后剩余的毫秒数
				var seconds=Math.round(leave3/1000)
				return seconds
			}
			
		},
		methods:{
			
			
			
			goDetails(id){
				uni.navigateTo({
					url:"../productDetails/index?goodid="+id
				})
			},
			getList(){
				let data ={_action:'getseckillgoods',gid:''}
				let query={
					_action:'getgoods',type:'promote',order_type:0,page_size:50,page_index:0
				}
				
				defaultRequest(query).then(res=>{
					 console.info(res,'p')
					let gid_lists = ''
					if(res.error==0){
						this.list=res.data
					}
				})
				
			},
			back(){
				uni.navigateBack()
			},
			Cart(e){
				this.isCart = true
				this.goods_attr_list =[]
				this.query.goods_id = e.id
				this.cartQuery.goods_id = e.id
				defaultRequest(this.query).then(res=>{
					if(res.error==0){
					console.log(res)
					this.goodsDate=res.data
					this.gallery_list = res.data.gallery_list
					if(this.goodsDate.attr_list){
						this.Is_attr = this.goodsDate.attr_list[0].goods_attrs.length
						this.goodsDate.attr_list.map(item=>{
							if(item.attr_name=="Color"){
								this.colorNum=item.goods_attrs.length
							}
							let data={name:item.attr_name,goods_attr_id:'',attr_id:item.attr_id,list:item.goods_attrs}
							this.goods_attr_list.push(data)
						})
					}else{
						this.goods_attr_list=[]
						this.Is_attr = 0
					}
					this.catQuery.cat=res.data.cat_id
					}
				})
			},
			// 选择规格
			selectAttr(attr_id,goods_attr_id,index){
				this.current = index
				let data={attr_id:attr_id,goods_attr_id:goods_attr_id}
				if(this.goods_attr_list.length==0){
					this.goods_attr_list.push(data)
				}else{
					// 判断是否有新的规格加入
					let isNew=false
					for(let i in this.goods_attr_list){
						let item=this.goods_attr_list[i]
						if(item.attr_id==attr_id){
							if(item.goods_attr_id==goods_attr_id){
								this.goods_attr_list[i].goods_attr_id=''
							}else{
								this.goods_attr_list[i].goods_attr_id=goods_attr_id
							}
							isNew=false
							break
						}else{
							isNew=true
						}
					}
					if(isNew){
						this.goods_attr_list.splice(index,0,data)
					}
				}
				
			},
			// 添加到购物车
			addCart(){
				let isall = 1
				 if(this.Is_attr>0){
					 console.log(this.goods_attr_list,'规格')
					let goods_attr_id =''
					for(let i of this.goods_attr_list){
						if(i.goods_attr_id!=''){
						goods_attr_id+=i.goods_attr_id+','
							}
					}
					// this.goods_attr_list.map(item=>{
					// 	if(item.goods_attr_id!=''){
					// 		goods_attr_id+=item.goods_attr_id+','
					// 	}
						
					// })
					
					this.goods_attr_list.map(item =>{
						console.log(item.goods_attr_id)
						if(item.goods_attr_id==''){
							isall = 0
						}
					})
					if(isall==0){
						uni.showToast({
							title:'Please select the product specification',
							icon:'none'
						})
						return
					}
					
					this.cartQuery.goods_attr_id=goods_attr_id.substring(0,goods_attr_id.lastIndexOf(','));
					// console.log(this.cartQuery,'yyy')
				}
				if(this.isLogin == 1){
				defaultRequest2(this.cartQuery).then(res=>{
					
					if(res.error==0){
						
						if(res.data[0].success){
							this.cartQuery.goods_attr_id = ''
							uni.showToast({
								title:'Successfully added',
								icon:'none'
							})
						}
						this.isCart = false
					}
				})
				}
				else if (this.isLogin == 0){
					uni.navigateTo({
						url:'../login/index'
					})
				}
				
			},
			
			
		},
		onLoad() {
			this.getList()
			this.isLogin = uni.getStorageSync('isLogin')
			
		}
	}
</script>

<style lang="scss" scoped>
	.uni-navbar{
		font-size: 32rpx;
		font-weight: bold;
	}
	.body{
		border-top: 13.33rpx #F7F7F7 solid;
		padding:0 26rpx;
		padding-top: 34rpx;
	}
	.recommend{
		padding: 0;
		
		.recommend_item_operation{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 10rpx;
			.recommend_content_item_pric{
				color: #B22234;
				font-weight: 600;
				font-size: 32rpx;
				margin-top: 0;
			}
			.recommend_content_item_pric1{
				font-size: 24rpx;
				color: #666666;
				text-decoration: line-through;
			}
			image{
				width: 58.67rpx;
				height: 58.67rpx;
			}
		}
	}
	.recommend_content_item_name{
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */
		-webkit-box-orient: vertical; /* 垂直排列 */
		word-break: break-all;  /* 内容自动换行 */
	}
	.countDown{
		display: flex;
		align-items: center;
		font-size: 41.33rpx;
		justify-content: center;
		margin-bottom: 34rpx;
		
		.countDown_assembly{
			margin-left: 12.67rpx;
		}
		
	}
	.tips{
		width: 572.67rpx;
		margin: 0 auto;
		font-size: 24rpx;
		margin-bottom: 14rpx;
		text-align: center;
	}
	.tips1{
		font-size: 20rpx;
		color: #666666;
		margin-bottom: 30rpx;
		text-align: center;
	}
	.addCard{
		z-index: 999;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: white;
		padding-left: 29.33rpx;
		box-sizing: border-box;
		padding-top: 77.67rpx;
		width: 100%;
		font-size: 30.67rpx;
		font-weight: 400;
		padding-bottom: 44.67rpx;
		
		.addCard_close{
			width: 21.33rpx;
			height: 21.33rpx;
			position: absolute;
			right: 24.67rpx;
			top: 18.67rpx;
		}
		.spike1{
			margin-top: 0;
			margin-bottom: 34rpx;
			padding-bottom: 0;
			border-bottom: none;
			.addCard_scroll{
				width: 286.67rpx;
				height: 286.67rpx;
				margin-left: 10.67rpx;
				&:first-child{
					margin-left: 0;
				}
				&:last-child{
					margin-right: 15rpx;
				}
			}
		}
		.addCard_body{
			padding-right: 31.33rpx;
			min-height: 400rpx;
			max-height: 600rpx;
			.addCard_price{
				font-size: 44rpx;
				font-weight: 500;
				margin-top: 27.33rpx;
				margin-bottom: 51.33rpx;
			}
			.color_select{
				
				display: flex;
				font-size: 16.67rpx;
				color: #666666;
				flex-wrap: wrap;
				margin-bottom: 59.33rpx;
				.color_select_item{
					margin-top: 22rpx;
					position: relative;
					background-color: #F9F7FA;
					border-radius: 6.67rpx;
					margin-right: 12.67rpx;
					width: 134.67rpx;
					image{
						width: 134.67rpx;
						height: 133.33rpx;
						border-radius: 6.67rpx 6.67rpx 0 0; 
					}
					.color_select_item_zoom{
						width: 20.33rpx;
						height: 20.33rpx;
						// background-color: rgba(0, 0, 0, 0.3);
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						right: 12.67rpx;
						top: 9.33rpx;
						z-index: 99;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.color_select_item_bottom{
						padding: 10rpx 0rpx;
						font-size: 24rpx;
						text-align: center;
						
					}
				}
				.active_color{
					color: #B22234;
					background-color: white;
					border: 1px solid #000000;
				}
			}
			.variations_select_size{
				margin-left: 0;
				margin-top: 26.67rpx;
				margin-bottom: 40.67rpx;
				.select_size_item{
					margin-bottom: 16.67rpx !important; 
					&:nth-child(4n+4){
						margin-right: 0;
					}
				}
			}
		
		}
		
		
	}
	.quantity{
		display: flex;
		background-color: white;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 43.33rpx;
		margin-left: 10rpx;
		
		.uni-numbox{
			border: 1px solid #999999;
			border-radius: 14rpx;
			height: 42.67rpx;
			margin-right: 17rpx;
			/deep/ .uni-numbox__minus{
				border-radius: 14rpx;
			}
			/deep/.uni-numbox__plus{
				border-radius: 14rpx;
			}
			/deep/.uni-numbox__value{
				border-left: 1px solid #999999;
				border-right: 1px solid #999999;
				height: 100%;
				width: 63.33rpx;
				font-size: 21.33rpx;
			}
		}
	}
	button{
		width: 98%;
		margin: 0 1%;
		height: 73.33rpx;
		line-height: 73.33rpx;
		background-color: #191919;
		color: white;
		font-weight: bold;
		font-size: 26.67rpx;
	}
	.spike1{
		white-space: nowrap;
		width: 100%;
		margin-top: 36.67rpx;
		padding-bottom: 34rpx;
		border-bottom: 1px solid #E2E2E2;
		::-webkit-scrollbar {
			width: 0;
			height: 0;
			background-color: transparent;
		} 
		.spike1_item{
			width: 410rpx;
			background-color: #F6F6F6;
			padding: 21.33rpx 24.67rpx;
			margin-right: 19.33rpx;
			font-size: 20rpx;
			display: inline-block;
			color: #737373;
			&:last-child{
				margin-right: 0;
			}
			view{
				margin-bottom: 10rpx;
			}
			.spike1_item_title{
				font-weight: bold;
				
				.text_black{
					color: black;
					display: inline-block;
					margin-left: 10rpx;
				}
				.text_red{
					color: #B22234;
					display: inline-block;
					margin-left: 10rpx;
				}
			}
		}
		.spike1_item1{
				color: #191919;
				font-size: 29.33rpx;
				margin-right: 16.67rpx;
				width: 200rpx;
				display: inline-block;
				font-weight: bold;
				.spike1_item_img{
					width: 200rpx;
					height: 200rpx;
					
					background-color: #999999;
				}
				.spike1_item_bottom{
					padding-left: 9.33rpx;
					margin-top: 22.67rpx;
					
					.spike1_item_text{
						color: #9D9D9D;
						font-size: 21.33rpx;
						text-decoration: line-through;
					}
					.spike1_item_text1{
						color: #9D9D9D;
						font-size: 21.33rpx;
					}
				}
				.spike1_item_bottom1{
					padding-left: 9.33rpx;
					margin-top: 19.33rpx;
					font-weight: bold;
					
					.spike1_item_text{
						color: #000000;
						font-size: 16rpx;
						font-weight: 400;
						margin-bottom: 20.67rpx;
						white-space: break-spaces;
						
					}
				}
				
			}
			.spike1_item:last-child{
				margin-right: 0;
			}
	}
	.variations_select_size{
		margin-left: 20.67rpx;
		display: flex;
		flex-wrap: wrap;
		.select_size_item{
			background-color: #F8F8F8;
			min-width: 121.33rpx;
			height: 54.67rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 12.67rpx;
			color: #666666;
			font-size: 24rpx;
			margin-right: 18.67rpx;
			border: 1px solid #F8F8F8;
			padding: 0 10rpx;
			margin-bottom: 16.67rpx;
			
			// &:nth-child(-n+2){
			// 	margin-bottom: 16.67rpx;
			// }
		}
	}
	.mask {
	    position: fixed;
	    width: 100%;
	    height: 100%;
	    background-color: black;
	    opacity: 0.5;
	    z-index: 998;
	    top: 0;
	    left: 0;
	}
</style>