<template>
	<view>
		<z-paging ref="paging" v-model="list" @query="queryList" :class="msg.length ? '' : 'paging'">
			<!-- <view class="" v-for="(item,index) in msg" :key="index">
				{{msg.discount_price}}
			</view> -->
			<view class="meiyoushuju" v-if="msg.length == 0">
				<image :src="$util.img('/upload/weapp/pageSalesman/customer/kong.jpeg')"></image>
			</view>
			<view class="list" v-for="(item, index) in msg" :key="index">
				<div class="df">
					<div class="list-img">
						<image :src="$util.img(item.goods_image || item.sku_image)" mode=""></image>
					</div>
					<div class="df fdc Product-Introduction">
						<div class="Product-name">
							<view class="df fdc jcsb">
								{{ item.sku_name }}
								<div class="df aic jcsb">
									<div class="number">编号 ：{{ item.goods_code }}</div>
								</div>
								<div class="df aic jcsb">
									<div class="number">产地 ：{{ item.business }}</div>
								</div>
								<div class="df aic jcsb">
									<div class="stock">库存：{{ item.stock | filterCount }}</div>
									<div class="stock">规格：{{ item.sku_name }}</div>
								</div>
								<div class="df aic price">
									<div class="price-before">当前价：￥{{ item.discount_price }}/袋</div>
								</div>
							</view>
						</div>

					</div>
				</div>
				<div class="button df aic jcsb">
					<div class="df aic" @click="sanchu(index)">
						<img :src="$util.img(`/upload/weapp/pageSalesman/reportForm/delete.png`)" />
					</div>
					<!-- <div class="df aic">库存：{{item.stock | filt}}</div> -->
					<div class="df buttoms aic">
						<!-- <u-number-box :disabled=true :value="item.count" min="0" @change="(value)=>valChange(value,item,index)">
						</u-number-box> -->
						×{{ item.count }}
					</div>
				</div>
			</view>


			<template slot="bottom">
				<view class="" style="height: 160rpx;">

				</view>
			</template>

		</z-paging>
		<view class="look-over df aic jcsb">
			<div>
				<div>￥{{ money  }}</div>
				<div>共{{ Several }}种商品{{ altogether }}个</div>
			</div>
			<div class="df aic jcsa look-lan" @click="btn">确认订单</div>
		</view>
	</view>
</template>

<script>
	import {
		EventBus
	} from "@/common/js/event.js";
	import {
		computed
	} from "vue"
	export default {
		components: {},
		props: {
			sendData: String
		},

		data() {
			return {
				value: 0,
				vlaue1: 0,
				msg: [],
				member: '',
				shop: '',
				list: [],
				money: null,
			};
		},
		onLoad(id) {
			this.msg = uni.getStorageSync('valetOrder');
			this.member = id.id;
			this.shop = id.di;
			this.getOrderMoney();
		},
		computed: {

			//共几种商品
			Several: function() {
				var Severala = 0
				for (var i = 0; i < this.msg.length; i++) {
					if (this.msg[i].count) {
						Severala += 1
					}
				}
				return Severala
			},
			//共多少个
			altogether: function() {
				var altogethera = 0
				for (var i = 0; i < this.msg.length; i++) {
					if (this.msg[i].count) {
						altogethera += this.msg[i].count
					}
				}
				return altogethera
			},
		},

		
		methods: {
			getOrderMoney() {
				var arr = [];
				for (var i = 0; i < this.msg.length; i++) {
					if (this.msg[i].count) {
						arr.push({
							'num': this.msg[i].count,
							"sku_id": this.msg[i].sku_id,
						})
					}
				}
				var that=this
				that.$api.sendRequest({
					url: '/api/Salasmanordercreate/calculate',
					data: {
						store_id: that.shop,
						sku_ids: JSON.stringify(arr), //skuid
						member_id: that.member, //客户id
					},
					success(res) {
						that.money = res.data.order_money
					}
				})
			},
			queryList(pageNo, pageSize) {
				// this.$refs.paging.complete(this.msg);
			},
			sanchu(index) {
				this.msg.splice(index, 1)
				uni.setStorageSync('valetOrder', this.msg)
				this.$util.showToast({ title: '删除成功' });
			},
			jia() {
				this.vlaue1++
				console.log(this.vlaue1);
			},
			jian() {
				this.vlaue1--
				console.log(this.vlaue1);
			},
			valChange(e, item, index) {
				item.count = e.value
				this.$set(this.list, index, item)
				console.log(this.list, 'list');
			},
			btn() {
				let _this = this
				if (this.msg.length == 0) {
					this.$util.showToast({
						title: '你还没有选择商品哦'
					});
					return
				}
				setTimeout(() => {
					uni.$emit('box', _this.msg)
					console.log(this.member, this.shop, '888888888');
				}, 500)
				uni.navigateTo({
					url: `/page_salesman_index/affirm_order/affirm_order?id=${this.member}&shop=${this.shop}`
				})
			}
		},
		filters: {
			filterCount(num) {
				return num.toFixed(2)
			},
			filt(value) {
				let num;
				if (value > 9999) { //大于9999显示x.xx万
					num = parseInt((Math.floor(value / 1000) / 10)) + '万+'
				} else if (value < 9999 && value > -9999) {
					num = value
				} else if (value < -9999) { //小于-9999显示-x.xx万
					num = parseInt(-(Math.floor(Math.abs(value) / 1000) / 10)) + '万+'
				}
				return num;
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.zp-container {
			display: none !important;
		}

		.zp-l-container {
			display: none !important;
		}
	}

	.meiyoushuju {
		image {
			width: 750rpx;
			height: 700rpx;
			margin-top: 200rpx;
		}
	}

	.paging {
		background: #FFFFFF;
	}

	// ::v-deep {
	// 	.u-number-box__minus {
	// 		width: 24rpx;
	// 		height: 24rpx !important;
	// 		color: rgb(51, 51, 51);
	// 	}

	// 	.u-number-box__plus {
	// 		width: 24rpx;
	// 		height: 24rpx !important;
	// 		background: #FFFFFF;
	// 		color: rgb(51, 51, 51);
	// 	}

	// 	.u-number-box__input {
	// 		width: 78rpx;
	// 		height: 40rpx;
	// 		background: #F6F6F6;
	// 		border-radius: 8rpx;
	// 		padding: 0;
	// 		margin: 0 8rpx;

	// 	}

	// 	.u-icon__icon {
	// 		color: rgb(51, 51, 51) !important;
	// 	}

	// 	.u-icon__icon {
	// 		color: rgb(51, 51, 51) !important;
	// 	}
	// }

	.head {
		width: 750rpx;
		height: 120rpx;
		background-color: rgb(255, 255, 255);
		box-sizing: border-box;

		.head-head {
			width: 750rpx;
			height: 72rpx;
			position: absolute;
			margin: 0 auto;
			margin: 24rpx 0;

			.placeholder {
				height: 100%;
			}

			input {
				width: 690rpx;
				height: 72rpx;
				background: #F6F6F6;
				border-radius: 36rpx;
				background-color: rgb(246, 246, 246);

				padding-left: 72rpx;
				box-sizing: border-box;

			}

			div {
				position: relative;
				top: 0;
				left: 58rpx;
			}
		}

	}

	.list {
		width: 702rpx;
		padding-bottom: 15rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 auto;
		box-sizing: border-box;
		margin-top: 24rpx;

		.list-img {
			width: 176rpx;
			height: 176rpx;
			border-radius: 8rpx;
			margin: 32rpx 24rpx 0 32rpx;

			image {
				width: 176rpx;
				height: 176rpx;
				border-radius: 8rpx;
			}
		}

		.Product-Introduction {
			.Product-name {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				margin-top: 32rpx;
			}

			.number {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
				// margin-top: 32rpx;
			}

			.stock {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
				// margin-top: 32rpx;
				// margin-left: 90rpx;
			}

			.price {
				// margin-top: 34rpx;

				.price-before {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
				}

				.price-revise {
					input {
						width: 78rpx;
						height: 40rpx;
						background: #F6F6F6;
						border-radius: 8rpx;
					}

					span:nth-child(1) {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #F33B50;
						line-height: 34rpx;
						margin-left: 46rpx;
						margin-right: 16rpx;
					}

					span:nth-child(2) {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
						margin-left: 6rpx;
					}
				}
			}
		}
	}

	.button {
		margin-top: 44rpx;
		// margin-bottom: 32rpx;

		div:nth-child(1) {
			width: 46rpx;
			height: 52rpx;
			margin-right: 158rpx;
			margin-left: 36rpx;

			image {
				width: 46rpx;
				height: 52rpx;
			}
		}

		div:nth-child(2) {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			// margin-right: 124rpx;
		}

	}

	.look-over {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0rpx;
		padding: 60rpx 24rpx 80rpx;
		box-sizing: border-box;
		z-index: 20;

		div:nth-child(1) {
			div:nth-child(1) {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #F45567;
				line-height: 40rpx;
				margin-top: 12rpx;
			}

			div:nth-child(2) {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
				margin-top: 2rpx;
			}
		}

		.look-lan {
			width: 240rpx;
			height: 72rpx;
			background: #21BBF3;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 40rpx;
		}
	}

	.buttoms {
		color: red;
		margin-right: 34rpx;

		.buttoms-one {
			width: 24rpx !important;
			height: 24rpx !important;
			margin: 0 !important;
		}

		input {
			width: 78rpx;
			height: 40rpx;
			background: #F6F6F6;
			border-radius: 8rpx;
			margin: 0 10rpx;
			text-align: center;
		}

		.buttoms-two {
			width: 24rpx;
			height: 24rpx;
		}
	}
</style>