<template>
	<view class="box" @touchstart="touchStart" @touchend="touchEnd">
		<view class="head" style="background-color: rgb(255, 255, 255);">
			<view class="head-head df aic">
				<div class="input">
					<u-input placeholder="商品名称/商品编码" v-model="sousuovalue" :clearable="true">
						<div class="prefix" slot="suffix">
							<image :src="$util.img(`/upload/weapp/pageSalesman/search.png`)" mode="" @click="changeone()"></image>
						</div>
					</u-input>
				</div>
			</view>
		</view>


		<view class="">
			<view class="list" v-for="(item, index) in goodsList" :key="index">
				<div class="df">
					<div class="list-img">
						<image :src="$util.img(item.goods_image)" mode=""></image>
					</div>
					<div class="df fdc Product-Introduction">
						<div class="Product-name">{{ item.goods_name }}</div>
						<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 jcsb price">
							<div class="price-before">当前价：￥{{ item.discount_price }}/袋</div>
							<div class="df aic price-revise" v-if="isAuth">
								<span>修改价</span>
								<!-- item.count?'':disabled; -->
								<input v-if="is_auth" maxlength="4" style="text-align: center;" type="text"
									:value="valuearr.length > 0 ? valuearr : item.discount_price" @blur="(value) => change(value, index)">
								<input v-else disabled maxlength="4" style="text-align: center;" type="text"
									:value="valuearr.length > 0 ? valuearr : item.discount_price" @blur="(value) => change(value, index)"
									@click="cck">
								<!-- <span>/袋</span> -->
								<!-- 	<input v-if="is_auth" disabled maxlength="4"  style="text-align: center;" type="text" :value="valuearr.length>0?valuearr:item.discount_price">
									<input v-else  disabled  maxlength="4" style="text-align: center;" type="text" :value="valuearr.length>0?valuearr:item.discount_price" @click="cck">
									 -->
							</div>
						</div>
					</div>
				</div>
				<div class="button df jcf">
					<div style="color: #ccc;margin-right: 40rpx;" v-if="item.max_buy > 1">{{ item.max_buy }}件限购</div>
					<div style="color: #ccc;margin-right: 40rpx;" v-if="item.min_buy > 1">{{ item.min_buy }}件起购</div>
					<div class="df buttoms aic">
						<view class="" style="color: #ccc;" v-if="item.stock == 0">
							商品已售罄
						</view>
						<view class="" v-else>
							<view class="" v-if="item.min_buy > 1 && !item.count">
								<u-number-box @overlimit="(a) => overlimit(a, item.stock, item.max_buy)" :value="item.count"
									max="item.max_buy" :step=item.min_buy
									:max="item.stock && item.max_buy == 0 ? item.stock : item.stock >= item.max_buy ? item.max_buy : item.stock"
									:v-model="value" min="0" @change="(value) => valChange(value, item, index)">
								</u-number-box>
							</view>
							<view class="" v-else>
								<u-number-box @overlimit="(a) => overlimit(a, item.stock, item.max_buy)" :value="item.count"
									:max="item.stock && item.max_buy == 0 ? item.stock : item.stock >= item.max_buy ? item.max_buy : item.stock"
									:v-model="value" min="0" @change="(value) => valChange(value, item, index)">
								</u-number-box>
							</view>
						</view>
					</div>

				</div>
			</view>
			<view class="tiaoshi">

			</view>
		</view>
		<view class="look-over df aic jcsb">
			<div>共{{ Several }}种商品{{ altogether }}个</div>
			<div class="df aic jcsa" @click="btn">查看订货清单</div>
		</view>
		<Popup ref="child"></Popup>


		<Popup ref="child"></Popup>


		<!-- 	<u-modal :show="editPriceModal" :showCancelButton="true" cancelText="取消" confirmText="确认" @cancel="show=false"
			@confirm="confirmEdit()">
			<view class="content">是否确认修改价格</view>
		</u-modal> -->
		<!-- <template>
			<timeaaa :sendData="sendData"></timeaaa>
		</template> -->

	</view>
</template>

<script>
import Popup from "./Popup.vue"
import {
	computed
} from "vue"
import timeaaa from "@/page_salesman_index/Commodity-time/Commodity-time"
import {
	EventBus
} from "@/common/js/event.js";
// import VueRouter from "vue-router";
export default {
	components: {
		Popup,
		timeaaa
	},
	data() {
		return {
			userInfo: uni.getStorageSync('userInfo'), //账号信息
			isAuth: uni.getStorageSync('salesmanAuth').is_auth, //一二类业务员权限
			valuearr: '',
			sousuovalue: '',
			paging: "",
			member: '',
			di: '',
			value: 0,
			initialQuantity: 0,
			goodsskupage: [],
			page: 1,
			vlaue1: 0,
			touchStartX: 0, // 触屏起始点x
			touchStartY: 0, // 触屏起始点y
			list: [],
			listLalis: [], //再次订购数据
			is_auth: false,
			order_goods: [],
			auth_level: '',
			onelist: [],
			editPriceModal: false,
			selectedGoodsList: [],//添加过商品数量的商品数组
		};
	},
	onLoad(id) {
		let _this = this
		console.log(id, 'id');
		uni.$on('listLalis', (data) => {
			console.log(data, '接收的list');
			this.listLalis = data
		})
		uni.$on('zaicidinggou', (data) => {
			console.log(data, '接收的再次订购');
			this.onelist = data.one
		})
		this.di = id.di
		this.member = id.st
	},
	onUnload() {
		uni.$off('listLalis')
		uni.$off('Reorder')
		uni.$off('zaicidinggou')
	},
	onShow() {
		let _this = this
		this.$api.sendRequest({
			url: '/api/salasman/checkCurAuthinfo',
			data: {},
			success: res => {
				console.log(res, '是否有权限编辑');
				this.is_auth = res.data.is_auth
			}
		})
		setTimeout(() => {
			this.$api.sendRequest({
				url: '/api/salasman/info',
				data: {},
				success: res => {
					console.log(res.data.auth_level, '业务员类型');
					this.auth_level = res.data.auth_level
					// this.is_auth=res.data.is_auth
					this.$api.sendRequest({
						url: '/api/goodssku/selectPage',
						data: {
							store_id: this.di,//店铺id
							salasman_type: res.data.auth_level//业务员类型
						},
						success: res => {
							for (let i = 0; i < res.data.list.length; i++) {
								res.data.list[i].price = 0

								for (let a = 0; a < this.onelist.length; a++) {
									if (this.onelist[a].goods_id == res.data.list[i]
										.goods_id) {
										console.log(this.onelist[a].num, 666);
										res.data.list[i].count = Number(this.onelist[a]
											.num)

										this.valChange(this.onelist[a].num, res.data
											.list[i], i)
									} else {
										res.data.list[i].count = 0
									}
								}
							}
							setTimeout(() => {
								_this.list = res.data.list
								console.log(_this.list, '列表');
							}, 500)
						},
						fail: err => { }
					})
				}
			})

		}, 500)
	},
	computed: {
		//共几种商品
		Several: function () {
			var Severala = 0
			for (var i = 0; i < this.list.length; i++) {
				if (this.list[i].count) {
					Severala += 1
				}
			}
			return Severala
		},
		//共多少个
		altogether: function () {
			var altogethera = 0
			for (var i = 0; i < this.list.length; i++) {
				let num;
				if (this.list[i].count) {
					console.log(this.list);
					altogethera += this.list[i].count
				}
			}
			return altogethera
		},
		lisa: function () {
			var lisa = []
			for (var i = 0; i < this.list.length; i++) {
				if (this.list[i].count) {
					lisa.push(this.list[i])
				}
			}
			return lisa
		},

		goodsList() {
			let arr = [];
			// goodsskupage.length ? goodsskupage : listLalis.length ? listLalis : list
			if (this.goodsskupage.length) {
				arr = this.goodsskupage;
			} else if (this.listLalis.length) {
				arr = this.listLalis;
			} else {
				arr = this.list
			}
			return arr;
		}
	},
	methods: {
		confirmEdit() {

		},
		overlimit(value, stock, max_buy) {
			console.log(value, stock, max_buy);
			if (value == 'minus') {
				this.$util.showToast({
					title: '已达到最小值'
				});
				return
			}
			if (value == 'plus') {
				if (max_buy == 0 || max_buy >= stock) {
					this.$util.showToast({
						title: '库存不足'
					});
					return
				}
				if (stock >= max_buy) {
					this.$util.showToast({
						title: '该商品限购' + max_buy + '件'
					});
					return
				}

			}

		},
		//刷新
		async onPullDownRefresh() {
			this.sousuovalue = ''
			await this.$api.sendRequest({
				url: '/api/salasman/info',
				data: {},
				success: res => {
					console.log(res.data.auth_level, '业务员类型');
					this.auth_level = res.data.auth_level
					// this.is_auth=res.data.is_auth
					this.$api.sendRequest({
						url: '/api/goodssku/selectPage',
						data: {
							store_id: this.di,
							salasman_type: res.data.auth_level
						},
						success: res => {
							// pageNo(res)

							uni.stopPullDownRefresh()
							// this.$refs.paging.complete(res.data.list);
							this.list = res.data.list
							this.page = 1
						},
						fail: err => {
							// reject()
							// this.$refs.paging.complete(false);
						}
					})
				}
			})
		},
		async onReachBottom() {
			this.page += 1
			await this.$api.sendRequest({
				url: '/api/salasman/info',
				data: {},
				success: res => {
					console.log(res.data.auth_level, '业务员类型');
					this.auth_level = res.data.auth_level
					// this.is_auth=res.data.is_auth
					this.$api.sendRequest({
						url: '/api/goodssku/selectPage',
						data: {
							store_id: this.di,
							salasman_type: res.data.auth_level,
							page: this.page
						},
						success: res => {
							// pageNo(res)
							uni.stopPullDownRefresh()
							// this.$refs.paging.complete(res.data.list);
							this.list = [...this.list, ...res.data.list]
						},
						fail: err => {
							// reject()
							// this.$refs.paging.complete(false);
						}
					})
				}
			})
		},
		plus(value, e) {
			console.log(value);
			if (e.min_buy > e.count) {
				e.count = e.min_buy
			}
		},
		queryList(pageNo, pageSize) {

		},
		clear() {
			this.changeone()
		},
		changeone() {
			this.$api.sendRequest({
				url: '/api/goodssku/selectPage',
				data: {
					keyword: this.sousuovalue,
					store_id: this.di,
					salasman_type: this.auth_level

				},
				success: res => {
					console.log(res.data.list, '搜索');
					console.log(this.selectedGoodsList, '已添加数量');

					this.list = res.data.list
					// this.list = []
					/**
					 * selectedGoodsList
					 * goods_id 商品id
					 * count 商品数量
					 */
					// 搜索商品后 根据goods_id 将此前已添加数量的商品 赋值到接口返回的列表
					// for (let arri = 0; arri < this.selectedGoodsList.length; arri++) {
					// 	for (let arrj = 0; arrj < res.data.list.length; arrj++) {
					// 		if (res.data.list[arrj].goods_id == this.selectedGoodsList[arri].goods_id) {
					// 			res.data.list[arrj].count = this.selectedGoodsList[arri].count
					// 		}
					// 		this.list.push(res.data.list[arrj])
					// 	}
					// }
				}
			})
		},
		itemClick(item, index) {
			console.log('点击了', item.title);
		},
		change(e, index) {
			console.log(111111111);
			console.log(e, index, '测试的数据');
			// this.lisa[index].price=e.detail.value
			if (e.detail.value > 0) {
				//必须有商品才能修改
				if (this.list[index].count) {
					// 	console.log(111);
					console.log(this.list[index], index, 'this.lisa[index]');
					console.log(e, '数据');
					this.list[index].price = e.detail.value
					this.list[index].discount_price = e.detail.value
				}
			}
		},
		/**  * 触摸开始  **/
		touchStart(e) {
			// console.log("触摸开始")
			this.touchStartX = e.touches[0].clientX;
			this.touchStartY = e.touches[0].clientY;
		},

		/**
		 * 触摸结束
		 **/
		touchEnd(e) {
			// console.log("触摸结束")
			let deltaX = e.changedTouches[0].clientX - this.touchStartX;
			let deltaY = e.changedTouches[0].clientY - this.touchStartY;
			if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
				if (deltaX >= 0) {
					console.log("左滑")
					this.$refs.child.callmethod()
				} else {
					console.log("右滑")
					this.$refs.child.callmethod()
				}
			}
		},
		valChange(e, item, index) {
			console.log(e, item, index, '测试', this.list);
			this.selectedGoodsList.push(item)//用于重新查询数据时,保存将已添加数量的商品
			if (e.value) {
				item.count = e.value
				this.$set(this.list, index, item)
			} else if (e.value == 0) {
				item.count = e.value
				this.$set(this.list, index, item)
			} else {
				item.count = e
				this.$set(this.list, index, item)
			}

			// console.log(this.list, 'list');
		},
		btn() {

			// EventBus.$emit("aMsg", this.list);
			console.log(this.lisa, '最终数据');
			let setobj = true
			let a = ''
			if (this.lisa.length == 0) {
				this.$util.showToast({
					title: '您还未选择商品'
				});
				return
			}
			for (let i = 0; i < this.lisa.length; i++) {
				if (this.lisa[i].count && this.lisa[i].count < this.lisa[i].min_buy) {
					setobj = false
					a = this.lisa[i].goods_name
				}

			}
			if (!setobj) {
				this.$util.showToast({
					title: a + '未达到起购数量，请重新选择'
				});
				return
			}
			//传递list
			setTimeout(() => {
				uni.$emit('update', this.lisa)
			}, 500)
			uni.navigateTo({
				url: `/page_salesman_index/Commodity-time/Commodity-time?id=${this.member}&di=${this.di}`,
			})
		},
		cck() {
			this.$util.showToast({
				title: '请先选择商品和数量'
			});
		}

	},
	filters: {
		filterCount(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">
.tiaoshi {
	height: 24rpx;
	// padding-bottom: 24rpx;
	// box-sizing: border-box;
	// margin-bottom: 24rpx;
}

// ::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;
// 	}
// }

.box {
	min-height: 1460rpx;
	padding-bottom: 100rpx;
	box-sizing: border-box;
	// height: 1660rpx;
	overflow: hidden;
	// overflow-y: hidden;
}

.input {
	flex: 1;

	.prefix {
		image {
			width: 36rpx;
			height: 36rpx;
			position: relative;
			top: 8rpx;
			margin-left: 20rpx;
		}
	}

	::v-deep {
		.u-input--radius {
			border-radius: 16rpx;
			border: 2rpx solid #E8E8E8;
		}
	}
}

.buttoms {
	.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;
	}
}

.head {
	padding: 24rpx 30rpx 0 30rpx;
	box-sizing: border-box;

	.head-head {

		margin: 0 0 24rpx 0;


	}

}

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

	.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: 4rpx;

			.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-right: 48rpx;
}

.look-over {
	width: 750rpx;
	height: 88rpx;
	background: #FFFFFF;
	position: fixed;
	bottom: 0rpx;
	z-index: 20;

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

	div:nth-child(2) {
		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;
		margin-right: 24rpx;
	}
}
</style>
