<template>
	<view class="content">
		<view class="topBox">
			<view class="inputBox">
				<input type="text" value="" placeholder="搜索" />
				<image src="../../static/ic_14@2x.png" mode="" class="cartImg"></image>
			</view>
			<view class="selectBox">
				<view :class="activeIndex==0?'selectItem active':'selectItem'">
					综合
				</view>
				<view :class="activeIndex==1?'selectItem active':'selectItem'">
					销量
					<image src="../../static/ic_17@2x.png" mode="" class="arrow"></image>
				</view>
				<view :class="activeIndex==2?'selectItem active':'selectItem'">
					价格
					<image src="../../static/ic_17@2x.png" mode="" class="arrow"></image>
				</view>
			</view>
		</view>
		<view class="listBox">
			<view class="rightBox">
				<view :class="index==rightList.length-1?'rightItem lastItem':'rightItem'"
					v-for="(item,index) in rightList" :key="index">
					<view class="itemImg">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="itemRight">
						<view class="goodName">
							{{item.title}}
						</view>
						<view class="goodDeatil">
							<view class="">
								{{item.detail}}
							</view>
							<view class="scrole">
								月销{{item.total_sales}}件
							</view>
						</view>
						<view class="goodPrice">
							<view class="price">
								<text style="font-size: 20rpx;">￥</text>
								{{item.price}}
							</view>
							<view class="cartImg" @click="addCart(index)">
								<image src="../../static/ic_18@2x.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 购物车弹框 -->
		<view class="cartBox" v-if="cartShow">
			<view class="cartGoodBox">
				<view class="cartGoodInner">
					<view class="cartImgs">
						<image :src="skuGoodData.image" mode="" class="cartImage"></image>
					</view>
					<view class="cartName">
						{{cartTitle}}
						<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 rightList[selectGoodIndex].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" @click="reduce">
							-
						</view>
						<view class="countNum">
							{{cartNum}}
						</view>
						<view class="addImg" @click="addCount">
							+
						</view>
					</view>
				</view>
				<view class="addCartBtn" @click="addCartConfrim">
					加入购物车
				</view>
			</view>
		</view>
		<view class="masks" v-if="mask" @click="closeMask">

		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				keywords: '', //搜索关键字
				activeIndex: 0,
				sales: true, //true升序  fasle降序  销量
				price: true, //true升序  fasle降序  价格
				selectGoodIndex:'',  //点击商品
				cartShow: false, //购物车弹框
				cartTitle: '', //购物车弹框商品名称
				cartGood: '', //加入购物车商品
				outerIndex: 0, //购物车规格
				innerIndex: 0, //购物车规格
				skuId: [], //购物车弹框选择id
				stock: 0, //点击商品库存
				skuNum: 0, //规格id转换数字
				activeSkuid: '', //选择购物车规格id
				skuGoodData: '', //购物车弹框商品
				cartNum: 1, //加入购物车商品数量
				mask: false, //遮罩层
				rightList: [{
					image: '../../static/ic_10@2x.png',
					title: '科麦斯无油静音空吗压 力小型气550W-8L科麦斯无油静音空吗压 力小型气550W-8L',
					detail: '工业级/无油/无压',
					price: '50',
					list: [{
						title: '颜色',
						child: ['红色', '蓝色']
					}]
				}, {
					image: '../../static/ic_10@2x.png',
					title: '科麦斯无油静音空吗压 力小型气550W-8L科麦斯无油静音空吗压 力小型气550W-8L',
					detail: '工业级/无油/无压',
					price: '50'
				}],
			}
		},
		onLoad(options) {
			// this.keywords = options.keyword
			this.keywords = '华为mate40'
			this.getlist()
		},
		methods: {
			//获取商品列表、
			getlist() {
				if (this.activeIndex == 0) {
					var postData = {
						page: 1,
						keywords: '华为',
						defaultOrder: ''
					}
				} else if (this.activeIndex == 1) {
					var postData = {
						page: 1,
						keywords: '华为',
						salesOrder: this.sales == true ? '1' : '2'
					}
				} else {
					var postData = {
						page: 1,
						keywords: '华为',
						priceOrder: this.price == true ? '1' : '2'
					}
				}
				request.get('/api/goods/lists', postData).then(res => {
					if (res.code == 1) {
						this.rightList = res.data.data
					}
				}).catch(err => {

				})
			},
			//加入购物车弹窗
			addCart(indexs) {
				this.mask = true
				this.cartShow = true
				this.selectGoodIndex=indexs
				this.rightList.forEach((item, index) => {
					if (index == indexs) {
						this.cartTitle = this.rightList[indexs].title
						this.skuId.push(item.sku_price[0].id)
						this.skuGoodData = item.sku_price[0]
						this.stock = item.sku_price[0].stock
						this.activeSkuid=this.skuGoodData.id
					}
				})
			},
			//选择规格
			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.rightList[this.selectGoodIndex].sku_price.forEach((item, index) => {
					var itemNUM = this.number((item.goods_sku_ids).split(','))
					if (this.skuNum == itemNUM) {
						this.activeSkuid = item.id
						this.stock = item.stock
						this.skuGoodData = item
					}
				})
			},
			//关闭遮罩层s
			closeMask() {
				this.mask = false
				this.cartShow = false
				this.skuNum=1
			},
			//确定加入购物车
			addCartConfrim() {
				this.mask = false
				this.cartShow = false
				this.skuNum=1
				let list=[{goods_id:this.rightList[this.selectGoodIndex].id,goods_num:this.cartNum,sku_price_id:this.activeSkuid}]
				let postData=JSON.stringify(list)
				request.post('/api/cart/add',postData).then(res=>{
					if(res.code==1){
						uni.showToast({
							title:'添加成功'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				}).catch(err=>{
					
				})
			},
			//数量减少
			reduce() {
				if (Number(this.cartNum) == 1) {
					uni.showToast({
						title: '已经是最少了哦~',
						icon: 'none'
					})
					return false
				} else {
					--this.cartNum
				}
			},
			//数量增加
			addCount() {
				if (Number(this.cartNum )==Number( this.stock)) {
					uni.showToast({
						title: '已达到最大库存',
						icon: 'none'
					})
					return false
				} else {
                    ++this.cartNum
				}
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background: #f7f8fa;
		padding-top: 246rpx;
		box-sizing: border-box;
	}

	.cartImg {
		width: 56rpx;
		height: 56rpx;
	}

	.topBox {
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}

	.itemRight {
		flex: 1;
	}

	.inputBox {
		padding: 16rpx 32rpx;
		height: 104rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	input {
		width: 598rpx;
		height: 72rpx;
		background: #f7f8fa;
		border-radius: 94rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.arrow {
		width: 26rpx;
		height: 26rpx;
		margin-left: 6rpx;
	}

	.selectBox {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.selectItem {
		padding: 32rpx 0;
		box-sizing: border-box;
		color: #323233;
		font-size: 28rpx;
	}

	.active {
		color: #FF6730;
		border-bottom: 10rpx solid #FF6730;
	}

	/* s搜索列表 */
	.rightBox {
		flex: 1;
	}

	.leftItem {
		font-size: 28rpx;
		color: #969799;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
	}

	.leftActive {
		background-color: #fff;
	}

	.itemImg {
		margin-right: 32rpx;
	}

	.itemImg image {
		width: 152rpx;
		height: 152rpx;
	}

	.rightItem {
		display: flex;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-bottom: 24rpx;
	}

	.lastItem {
		border-bottom-color: #fff;
	}

	.goodName {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 28rpx;
		color: #323233;
		font-weight: 600;
	}

	.goodDeatil {
		font-size: 24rpx;
		font-weight: 400;
		text-align: LEFT;
		color: #c8c9cc;
		margin-top: 8rpx;
		display: flex;
		justify-content: space-between;
	}

	.scrole {
		padding: 4rpx 14rpx;
		box-sizing: border-box;
		background: #f2f3f5;
		border-radius: 38rpx;
		color: #969799;
		font-size: 20rpx;
	}

	.cartImg image {
		width: 46rpx;
		height: 46rpx;
	}

	.goodPrice {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.price {
		font-size: 36rpx;
		color: #FF2F2F;
		font-weight: 600;
	}

	/* 遮罩层 */
	.masks {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #323233;
		opacity: 0.6;
	}

	.addCartBtn {
		margin-top: 26rpx;
		width: 100%;
		height: 80rpx;
		background-color: #FF2F2F;
		color: #fff;
		font-size: 28rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 8rpx;
	}

	/* 购物车 */
	.cartBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 32rpx 32rpx 0px 0px;
		z-index: 4;
	}

	.cartGoodInner {
		display: flex;
	}

	.cartImg {
		margin-right: 24rpx;
	}

	.cartImage {
		width: 120rpx !important;
		height: 120rpx !important;
	}

	.cartName {
		width: 406rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 32rpx;
		color: #323233;
		white-space: nowrap;
	}

	.cartPrice {
		font-size: 28rpx;
		color: #FE0E1F;
		margin-top: 40rpx;
	}

	.countBox {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.reduceImg {
		width: 60rpx;
		height: 60rpx;
		background-color: #f2f3f5;
		line-height: 60rpx;
		margin-left: 10rpx;
		text-align: center;
		border-radius: 4rpx;
	}

	.countNum {
		width: 60rpx;
		height: 60rpx;
		background-color: #f2f3f5;
		line-height: 60rpx;
		margin-left: 10rpx;
		text-align: center;
		border-radius: 4rpx;
	}

	.addImg {
		width: 60rpx;
		height: 60rpx;
		background-color: #f2f3f5;
		line-height: 60rpx;
		margin-left: 10rpx;
		text-align: center;
		border-radius: 4rpx;
	}

	/* 购物车规格 */
	.specificationBox {}

	.specificalItem {
		margin-top: 28rpx;
		font-size: 26rpx;
		background: aliceblue;
		color: #323233;
		background: #f7f8fa;
		border-radius: 48px;
		width: auto;
		padding: 10rpx 24rpx;
		margin-right: 16rpx;
	}
</style>