<template>
	<view>
		<scroll-view @scrolltolower="scrollbottom" class="test" scroll-y="true">
			<view class="m-search-box">
				<view class="u-input-search">
					<label class="iconfont icon-sousuo-sousuo"></label>
					<input @confirm="SelectProductList" @input="startinput" focus="true" :placeholder="__('请输入搜索关键字')" type="text" v-model="value" />
					<view @tap="SelectProductList" class="u-btn">{{__('搜索')}}</view>
				</view>
				<view class="person_box"></view>
			</view>
			<block>
				<view class="m-product-all" v-if="cartlist.length>0">
					<view class="m-product-list">
						<block v-for="(item, index) in cartlist" :key="index">
							<view class="m-product-item" :data-id="item.item_id">
								<view :class="['m-item-c', (item.item_id==selItemId)?'del':'']">
									<view @click.stop="quanbu" class="m-cart-ck" :data-id="item.item_id" :data-isck="item.checked" :data-sid="item.item_id">
										<uni-icons :color="item.checked?'#DB384C':'#d5d5d5'" :type="item.checked?'circle-filled':'circle' " />
									</view>
									<navigator class="m-product-img" :url="'../productdetail/productdetail?pid=' + item.item_id">
										<image :src="item.product_image" />
									</navigator>
									<view class="m-product-info">
										<navigator :url="'../productdetail/productdetail?pid=' + item.item_id">
											<view class="m-product-name"><label style="padding-top:15rpx;">{{item.product_name}}</label><label class="m-min-name" style="overflow:hiddentext-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1">{{item.speStr==null?"":item.speStr}}</label>
											</view>
											<view class="m-product-price"><label>{{__('￥')}}</label>{{item.product_unit_price}}
											</view>
										</navigator>
										<block></block>
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>
				<view class='weizhaodao' v-else>{{__('没有找到您想搜索的商品，请重新输入')}}</view>
			</block>
			<view class="m-loading-box" v-if="cartlist.length>0">
				<block v-if="ispage">
					<view class="u-loadmore"><label class="u-loading"></label>
						<text class="u-loadmore-tips">{{__('正在加载')}}</text>
					</view>
					<view class="u-cleanbox"></view>
				</block>
				<block v-else>
					<view class="u-loadmore u-loadmore-line" style='margin-bottom:100rpx;background-color: #fff'>
						<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
					</view>
				</block>
			</view>
		</scroll-view>
		<view class='fabu_box'>
			<view class='fabu_box_fb' @tap="AddMemberPosts">{{__('确定')}}</view>
		</view>
	</view>
</template>

<script>
	import dateUtil from "../../helpers/util_date";
	import {
		mapMutations,
		mapState
	} from 'vuex'

	import statusBar from '../../components/status-bar.vue'

	export default {
		data: function() {
			return {
				options: {},
				isckall: false,
				isckall1: false,
				isck: false,
				cartlist: [],
				X_Start: 0,
				X_End: 0,
				selItemId: 0,
				Sel_Id: [],
				ispage: false,
				flag: true,
				isdata: false,
				page: 1,
				ProductName: "",
				objlist: [],
				value: "",
				num: 0,
				listlength: 0,
				item_ids: [],
			}
		},
		components: {
			statusBar
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: this.__('')
			});

			var that = this;
			this.setData({
				options: options
			});
			if (options.item_ids) {
				that.setData({
					item_ids: JSON.parse(options.item_ids)
				})
			}


			this.setData({
				num: options.num
			}), this.SelectProductList()
		},

		onHide: function() {},

		onShow: function() {
			var that = this;
		},

		onUnload: function() {
			let that = this;
		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {

		},

		/**
		 * 页面滚动触发事件的处理函数
		 */
		onPageScroll: function() {},

		methods: {
			...mapMutations(['logout', 'getPlantformInfo', 'forceUserInfo', 'getStoreInfo']),
			SelectProductList: function() {

				var that = this;
				that.setData({
					cartlist: [],
					page: 1
				});

				that.carlist();

			},
			carlist: function() {
				let that = this;

				this.setData({
					flag: false
				});
				var params = {
					keywords: that.value || "",
					page: that.page
				};
				that.$.request({
					url: this.Config.URL.store.product,
					data: params,
					ajaxCache: {
						timeout: this.Config.CACHE_EXPIRE
					},
					success: function(data, status, msg, code) {
						let items = data.items;
						for (var i = 0; i < items.length; i++) {
							items[i]['id'] = items[i]['item_id'];
							items[i]['DefaultProductSkuId'] = items[i]['item_id'];
							items[i]['ProductName'] = items[i]['product_name'];
							items[i]['ProductTips'] = items[i]['product_tips'];
							items[i]['SalesName'] = items[i]['product_name'];
							items[i]['ProductPic'] = items[i]['product_image'];
							items[i]['ItemSalePrice'] = items[i]['product_unit_price'];
							items[i]['SaleNum'] = items[i]['product_sale_num'];
							items[i]['Stock'] = items[i]['product_quantity'];
							items[i]['HasManualSku'] = items[i]['item_color'].length > 1;
							items[i]['DefaultProductSkuId'] = items[i]['item_id'];
							items[i]['user_cart_quantity'] = 1;
							if (that.$.includes(that.item_ids, items[i]['item_id'])) {
								items[i]['checked'] = true;
							} else {
								items[i]['checked'] = false;
							}
						}
						/*
						                        if (that.assist.length == 0)
						                        {
						                            that.setData({
						                                assist: assist
						                            })
						                        }*/

						items.length > 0 ?
							that.page == 1 && items.length < 10 ?
							that.setData({
								cartlist: that.cartlist.concat(items),
								flag: false,
								ispage: false
							}) :
							that.setData({
								cartlist: that.cartlist.concat(items),
								flag: true,
								ispage: true
							}) :
							that.setData({
								flag: false,
								ispage: false
							});
					}
				});
			},
			quanbu: function(t) {
				var that = this,
					e = [];
				if (that.setData({
						listlength: that.objlist.length
					}), that.listlength < that.num) {
					for (var s = 0; s < that.cartlist.length; s++) {
						if (that.cartlist[s].item_id == t.currentTarget.dataset.id) {
							var i = that.cartlist[s];
							that.cartlist[s].checked ? i.checked = false : i.checked = true, e.push(i)
						} else {
							e.push(that.cartlist[s]);
						}
					}
					that.setData({
						cartlist: e
					});
					var l = [];
					for (s = 0; s < this.cartlist.length; s++) {
						this.cartlist[s].checked && l.push(this.cartlist[s]);
					}
					console.log(l)
					that.setData({
						objlist: l
					})
				} else {
					for (s = 0; s < that.cartlist.length; s++) {
						if (that.cartlist[s].item_id == t.currentTarget.dataset.id) {
							i = that.cartlist[s];
							that.cartlist[s].checked && (i.checked = false, that.setData({
								listlength: that.listlength - 1
							})), e.push(i)
						} else {
							e.push(that.cartlist[s]);
						}
					}
					that.setData({
						cartlist: e
					});
					for (l = [], s = 0; s < this.cartlist.length; s++) {
						this.cartlist[s].checked && l.push(this.cartlist[s]);
					}
					that.setData({
						objlist: l
					}), that.listlength >= that.num && that.$.alert(that.sprintf(that.__("最多可添加%s个"), that.num))
				}
			},
			AddMemberPosts: function() {
				var that = this;
				that.$.backpage(1, function() {
					var data = {
						couponItemId: that.objlist
					};
					that.notice.postNotificationName("RefreshCoupon", data)
				})
			},
			startinput: function(t) {
				this.setData({
					value: t.detail.value
				})
			},
			scrollbottom: function(t) {
				var that = this;
				if (this.flag) {
					this.setData({
						flag: false
					}), clearTimeout(e);
					var e = setTimeout(function() {
							that.setData({
								page: parseInt(that.page) + 1
							}), that.carlist()
						},
						500)
				}
			}
		}
	}
</script>


<style lang="scss">
	@import "../../styles/_variables";
	@import '../../styles/layout.scss';

	.m-search-box {
		padding: 20rpx;
		background-color: #EFEFF4;
		overflow: hidden
	}

	.u-input-search {
		width: 100%;
		height: 70rpx;
		background-color: white;
		float: left;
		border-radius: 8rpx;
		overflow: hidden;
		border: 1rpx solid #DFDFDF;
	}

	.u-input-search input {
		font-size: 28rpx;
		height: 100%;
		width: 400rpx;
		float: left;
	}

	.u-input-search label {
		display: block;
		float: left;
		width: 60rpx;
		height: 70rpx;
		position: relative;
		text-align: center;
		line-height: 79rpx;
		font-size: 80rpx;
		color: #888;
	}

	.u-input-search .u-btn {
		height: 70rpx;
		line-height: 70rpx;
		border-left: 1rpx solid #DFDFDF;
		display: block;
		float: right;
		text-align: center;
		text-decoration: none;
		color: #999;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		font-size: 28rpx;
	}

	.phone_one {
		display: flex;
		position: relative;
		justify-content: space-between;
		width: 100rpx;
		height: 70rpx;
		float: left;
	}

	.phone_personal {
		width: 100rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.phone_select {
		margin-top: 0;
		z-index: 100;
		position: absolute;
	}

	.select_one {
		text-align: center;
		width: 100rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		position: absolute;
		top: 52rpx;
		left: 3rpx;
		background-color: white;
	}

	.select_two {
		text-align: center;
		width: 100rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		position: absolute;
		top: 100rpx;
		left: 3rpx;
		background-color: white;
	}

	.personal_image {
		z-index: 100;
		position: absolute;
		right: 2.5%;
		width: 34rpx;
		height: 20rpx;
		margin: 40rpx 20rpx 40rpx 0;
		transition: All 0.4s ease;
		-webkit-transition: All 0.4s ease;
	}

	.rotateRight {
		transform: rotate(180deg);
	}

	.m-search-box-img {
		width: 29rpx;
		height: 22rpx;
		float: left;
		margin-top: 13rpx;
	}

	.m-search-box-image {
		width: 29rpx;
		height: 22rpx;
	}

	.u-cart-num {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		z-index: 2;
	}

	.m-cart-ck {
		float: left;
		width: 90rpx;
		background-color: #fff;
		height: 100%;
		position: relative;
	}

	.m-cart-ck .uni-icons,
	.m-cart-ck icon {
		position: absolute;
		top: 50%;
		left: 51%;
		margin-top: -23rpx;
		margin-left: -12rpx;
		overflow: visible
	}

	.m-product-info {
		width: 438rpx;
		padding: 10rpx;
	}

	.m-product-info::before {
		border: none;
	}

	.m-product-item {
		border-bottom: 1rpx solid #eee;
		position: relative;
		overflow: hidden;
		height: 212rpx
	}

	.m-shop-item {
		display: flex;
		border-bottom: 1rpx solid #eee;
		position: relative;
		overflow: hidden;
		height: 74rpx;
		background-color: #fff;
		line-height: 68rpx;
		margin-top: 20rpx;
		align-items: center
	}

	.quan {
		margin-top: 34rpx;
		margin-left: 33rpx
	}

	.title {
		font-size: 28rpx;
		margin-left: 10rpx;
		margin-top: 5rpx;
	}

	.title_logo {
		width: 40rpx;
		height: 40rpx;
		float: left;
		padding-bottom: 10rpx;
		padding-left: 30rpx;
	}

	.title_logo_img {
		width: 40rpx;
		height: 40rpx;
	}

	.m-item-c {
		position: absolute;
		height: 100%;
		width: 850rpx;
	}

	.u-del {
		width: 100rpx;
		background-color: #DB384C;
		float: right;
		height: 100%;
		color: #fff;
		font-size: 28rpx;
		text-align: center;
		line-height: 212rpx;
	}

	/*底部按钮 start*/
	.m-footer-btn {
		height: 100rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		border-top: 1rpx solid #d5d5d5;
		z-index: 3
	}

	.m-footer-btn-list {
		width: 75%;
		height: 100%;
		position: relative;
		float: left;
	}

	.m-footer-btn-item {
		position: relative;
		float: left;
		width: 50%;
		font-size: 24rpx;
		color: #888;
		line-height: 40rpx;
		padding: 15rpx 0;
		box-sizing: border-box;
		height: 100%;
	}

	.m-footer-btn-main {
		width: 25%;
		height: 100%;
		float: left;
		background-color: #DB384C;
		color: #fff;
		line-height: 100rpx;
		font-size: 32rpx;
		text-align: center;
	}

	.m-cart-total {
		text-align: right;
		padding-right: 20rpx;
	}

	.m-cart-total text {
		font-size: 36rpx;
		color: #DB384C;
	}

	.m-cart-total label {
		color: #DB384C;
	}

	.m-cart-del {
		line-height: 70rpx;
		font-size: 32rpx;
	}

	/*底部按钮 end*/
	.del {
		-webkit-animation: mdel .2s 1;
		animation: mdel .2s 1;
		left: -100rpx;
	}

	@-webkit-keyframes mdel {
		0% {
			left: 0;
		}

		100% {
			left: -100rpx;
		}
	}

	@keyframes mdel {
		0% {
			left: 0;
		}

		100% {
			left: -100rpx
		}
	}

	.m-product-img {
		/*margin-top: 15rpx;*/
	}

	.m-product-name {
		/*height: 100rpx;*/
	}

	.m-product-price label {
		font-size: 32rpx;
	}

	.fabu_box_fb {
		background: #e73533;
		color: #fff;
		width: 750rpx;
		text-align: center;
		float: left;
		line-height: 80rpx;
	}

	.fabu_box {
		height: 79rpx;
		line-height: 79rpx;
		font-size: 30rpx;
		position: fixed;
		bottom: 0;
		display: flex
	}

	.test {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff
	}

	.weizhaodao {
		height: 800rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #666;
		background-color: #fff
	}
</style>