<template>
	<view>
		<view class="container">
			<far-bottom></far-bottom>
			<view class="orderList">
				<view class="dis-flex flex-dir-column orderList-header">
					<view class="orderList-search">
						<view class="search-main">
							<view class="search-box dis-flex flex-y-center">
								<view class="search-input">
									<view class="i icon iconfont icon-sousuo"></view>
									<input
										type="text"
										value=""
										placeholder="请输入关键字进行搜索"
										placeholder-style="color:#999999;margin-left:10upx;"
										class="f-24"
										v-model="keyword"
										@blur="doSearch"
									/>
								</view>
								<view class="pullDown">
									<picker @change="bindPickerChange" :value="index" :range="array">
										<view class="uni-input t-r f-28" style="color: #999999;">
											{{ array[index] }}
											<text class="iconfont icon-unfold" style="font-size: 28upx;"></text>
										</view>
									</picker>
								</view>
							</view>
						</view>
					</view>
					<view class="topNav">
						<view @click="changeStatus(2)">
							<view :class="status == 2 ? 'check' : ''">
								<span>出售中</span>
								<view class="line"></view>
							</view>
						</view>
						<view @click="changeStatus(4)">
							<view :class="status == 4 ? 'check' : ''">
								<span>已下架</span>
								<view class="line"></view>
							</view>
						</view>
						<view @click="changeStatus(5)">
							<view :class="status == 5 ? 'check' : ''">
								<span>审核中</span>
								<view class="line"></view>
							</view>
						</view>
						<view @click="changeStatus(8)">
							<view :class="status == 8 ? 'check' : ''">
								<span>回收站</span>
								<view class="line"></view>
							</view>
						</view>
					</view>
				</view>

				<view class="full"></view>

				<!-- 列表区域 -->
				<scroll-view class="scrollList" :style="{ height: scrollHeight }" :scroll-y="true" @scrolltolower="load" :lower-threshold="0">
					<!-- 循环模板 -->
					<nonemores v-if="total == 0"></nonemores>
					<view class="orderMb" v-for="(item, index) in goodsList" v-if="total !== 0">
						<view class="orderMbPackage">
							<view class="mbLeft"><image :src="item.thumb" /></view>
							<view class="mbRight">
								<view>
									<view class="mbRightTitle">
										<!-- <view><span>{{typeList[item.type-1]}}</span></view> -->
										<span style="display: block;width: 440upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ item.name }}</span>
									</view>
									<view class="mbRightBody">
										<view>
											<span>销量:{{ item.salenum || '0' }}</span>
										</view>
										<view>
											<text>
												{{
													item.status == '4'
														? '已下架'
														: item.status == '2'
														? '出售中'
														: item.status == '5'
														? '审核中'
														: item.status == '8'
														? '回收站'
														: ''
												}}
											</text>
										</view>
									</view>
									<view class="mbRightFoot">
										<span>
											<span></span>
										<!-- 	{{ item.price }} -->
										</span>
										<view @click="popT(index)">
											<view></view>
											<view></view>
											<view></view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="popView" v-if="indexs == index" @click="indexs = null">
							<view @click="changeGoodsStatus(item, 2)" v-if="item.status == '4'">
								<view><image :src="imgfixUrls + 'merchant/sj.png'" /></view>
								<span>上架</span>
							</view>
							<view @click="changeGoodsStatus(item, 4)" v-if="item.status == '2'">
								<view><image :src="imgfixUrls + 'merchant/xj.png'" /></view>
								<span>下架</span>
							</view>
							<view @click="changeGoodsStatus(item, 8)" v-if="item.status !== '8'">
								<view><image :src="imgfixUrls + 'merchant/sc.png'" /></view>
								<span>删除</span>
							</view>
						<!-- 	<view @click="changeGoodsStatus(item, 8)" v-if="item.status == '8'">
								<view><image :src="imgfixUrls + 'merchant/sc.png'" /></view>
								<span>删除</span>
							</view> -->
							<view @click="goBj(item)">
								<view><image :src="imgfixUrls + 'merchant/bianj.png'" /></view>
								<span>编辑</span>
							</view>
						</view>
					</view>
					<!-- 循环模板 -->
					<view class="tips" v-if="total !== 0"><loadmore :isMore="isMore"></loadmore></view>
				</scroll-view>
			</view>
		</view>

		<view class="addOrderButton" @click="goAddGoods"><text class="iconfont icon-add f-w"></text></view>

		<popup-view :show="show" type="bottom" @clickmask="onShows" :bottom="'0%'">
			<view class="b-f popup">
				<view class="dis-flex" style="padding: 50upx 0;">
					<view class="flex-box t-c" @click="addGoods">
						<view
							class="iconfont icon-goodsfill"
							style="width: 100upx;height: 100upx;border-radius: 60upx;background-color: #FBC420;margin: 0 auto 30upx;line-height: 100upx;font-size: 40upx;color: #FFFFFF;"
						></view>
						<view  style="font-size: 28upx;">添加商品</view>
					</view>
					<view class="flex-box t-c" @click="lookclass">
						<view
							class="iconfont icon-jingdianwanfa1"
							style="width: 100upx;height: 100upx;border-radius: 60upx;background-color: #4693FF;margin: 0 auto 30upx;line-height: 100upx;font-size: 40upx;color: #FFFFFF;"
						></view>
						<view  style="font-size: 28upx;">查看分类</view>
					</view>
				</view>
				<view class="t-c" style="font-size: 28upx;padding: 20upx 0;border-top: 1px solid #f8f8f8;" @click="onShows">关闭</view>
			</view>
		</popup-view>
	</view>
</template>
<script>
import App from '@/common/js/app.js';
import Loadlogo from '@/components/template/loadlogo';
import nonemores from '@/components/template/nonemores.vue';
import loadmore from '@/components/template/loadmore.vue';
import PopupView from '@/components/template/PopManager.vue';
// import TabBars from '@/components/template/tabBar.vue'
export default {
	data() {
		const date = new Date();
		const years = [];
		const year = date.getFullYear();
		const months = [];
		const month = date.getMonth() + 1;
		const days = [];
		const day = date.getDate();
		for (let i = 1990; i <= date.getFullYear(); i++) {
			years.push(i);
		}
		for (let i = 1; i <= 12; i++) {
			months.push(i);
		}
		for (let i = 1; i <= 31; i++) {
			days.push(i);
		}
		return {
			hidegoods: 1,
			isMore: true,
			indexs: null,
			typeList: ['抢购', '团购', '拼团', '', '优惠卷', '', '砍价商品'],
			total: null,
			goodsList: [],
			typeShow: 'bottom',
			keyword: '',
			popShow: false,
			scdpText: '',
			orderlist: [],
			orderInfo: {},
			storeid: null,
			pagetotal: null,
			type: '',
			status: 2,
			sort: '',
			time: '',
			page: 1,
			array: [],
			catelist: [],
			index: 0,
			loadlogo: false,
			shopShow: '',
			filterDialog: true,
			title: 'picker-view',
			years,
			year,
			months,
			month,
			days,
			day,
			value: [9999, month - 1, day - 1],
			visible: true,
			indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`,
			show: false,
			itemid:''
		};
	},
	components: {
		Loadlogo,
		nonemores,
		loadmore,
		PopupView
	},
	computed: {},
	onLoad(e) {
		let _this = this;
		uni.getSystemInfo({
			success(res) {
				_this.phoneHight = res.windowHeight;
				_this.scrollHeight = _this.phoneHight - 125 + 'px';
			}
		});
		
	},
	onShow(e) {
		let _this = this;
		 uni.$on('datagoods',function(data){
		        _this.goodsList.forEach((item,index)=>{
					if(data.id == item.id){
						console.log(data,_this.goodsList)
						_this.$set(item,'name',data.name);
						_this.$set(item,'thumb',data.thumb);
						if(data.status !== item.status){
							_this.goodsList.splice(index,1)
						}
					}
				})
		    });
			uni.getStorage({
				key: 'checkStoreid',
				success: function(res) {
					_this.storeid = res.data;
					_this.getStoreGoods('',false,1);
				}
			});
			console.log(_this.goodsList)
	},
	mounted() {},
	//#ifndef H5
	onReachBottom() {
		let _this = this;
		if (_this.total == _this.page) {
			_this.isMore = true;
		} else {
			_this.page++;
			console.log('下拉了')
			_this.getStoreGoods('',true);
		}
	},
	//#endif
	methods: {
		bindPickerChange(e) {
			this.goodsList =[];
			console.log(e);
			this.index = e.target.value;
			if (this.index == 0) {
				this.getStoreGoods();
			} else {
				this.catelist.map(item => {
					if (this.array[this.index] === item.name) {
						this.itemid = item.id;
						this.getStoreGoods(item.id);
					}
				});
			}
		},
		// 添加商品
		addGoods() {
			App.navigationTo({
				url: 'pages/subPages2/management/addGoods/addGoods'
			});
		},
		// 查看分类
		lookclass() {
			App.navigationTo({
				url: 'pages/subPages2/management/foodclassify/foodclassify'
			});
		},
		// 纯控制显示隐藏
		onShows() {
			this.show = !this.show;
		},
		goBj(item) {
			let _this = this;
			App.navigationTo({
				url: 'pages/subPages2/management/addGoods/addGoods?id=' + item.id
			});
		},
		goAddGoods() {
			this.show = !this.show;
		},
		init() {
			
		},
		goPost(item) {
			let _this = this;
			let type = null;
			if (item.type == '1') {
				type = 3;
			} else if (item.type == '2') {
				type = 4;
			} else if (item.type == '3') {
				type = 6;
			} else if (item.type == '5') {
				type = 5;
			} else {
				type = 7;
			}
			console.info('type', item.type);
			App.navigationTo({
				url: 'pages/mainPages/poster/poster?type=' + type + '&id=' + item.id
			});
		},
		// 上下架删除商品接口
		changeGoodsStatus(item, type) {
			let _this = this;
			let data = {
				storeid: _this.storeid,
				goodsid: item.id,
				status: type
			};
			App._post_form('&p=citydelivery&do=changeGoodStatus', data, res => {
				_this.doSearch();
				uni.showToast({
					icon: 'none',
					title: '操作成功',
					duration: 2000
				});
			});
		},
		popT(index) {
			let _this = this;
			_this.popShow = true;
			_this.indexs = index;
		},
		load() {
			let _this = this;
			if (_this.total == _this.page) {
				_this.isMore = true;
			} else {
				_this.page++;
				console.log('下拉了')
				_this.getStoreGoods('',true);
			}
		},
		doSearch() {
			let _this = this;
			_this.isMore = false;
			_this.page = 1;
			_this.indexs = null;
			let data = {
				cateid: _this.itemid || '',
				storeid: _this.storeid,
				page: _this.page,
				initialization: 1,
				status: _this.status,
				name: _this.keyword
			};
			App._post_form('&p=citydelivery&do=deliveGoodsList', data, res => {
				console.log(res);
				_this.goodsList = res.data.list;
				_this.total = res.data.total;
				_this.isMore = true;
			});
		},
		// 获取店铺商品信息
		getStoreGoods(cateid,istrue,index) {
			let _this = this;
			if(index > _this.page) return;
			_this.isMore = false;
			let data = {
				cateid: cateid || '',
				storeid: _this.storeid,
				page: index || _this.page,
				initialization: 1,
				status: _this.status,
				name: _this.keyword
			};
			App._post_form('&p=citydelivery&do=deliveGoodsList', data, res => {
				_this.array = ['全部'];
				if(istrue){
					_this.goodsList.push(...res.data.list);
				}else{
					_this.goodsList = res.data.list;
				}
				_this.total = res.data.total;
				_this.catelist = res.data.catelist;
				_this.catelist.map(item => {
					_this.array.push(item.name);
				});
				// for(let i=0;i<res.data.list.length;i++){
				// 	if((res.data.list[i].goods_name).length>30){
				// 		console.info('length',(res.data.list[i].goods_name).length)
				// 		res.data.list[i].goods_name= res.data.list[i].goods_name.slice(0,30)+'...'
				// 	}
				// }
				_this.isMore = true;
				if(!!index){
					_this.getStoreGoods('',true,index+1);
				}
			});
		},
		changeStatus(status) {
			let _this = this;
			_this.status = status;
			_this.doSearch();
		}
	}
};
</script>

<style lang="less">
.popup {
	width: 100vw;
}
.dataPicker1 {
	width: 70upx;
	height: 82upx;
	display: inline-block;
}
.addOrderButton {
	width: 80upx;
	height: 80upx;
	position: fixed;
	border-radius: 60upx;
	bottom: 80upx;
	left: 330upx;
	background: rgba(51, 136, 255, 1);
	text-align: center;
	> text {
		line-height: 76upx;
		font-size: 40upx;
		color: rgba(255, 255, 255, 1);
	}
}
.tips {
	height: 180upx;
	text-align: center;
	> span {
		line-height: 80upx;
		font-size: 28upx;
		color: black;
	}
}
.popView {
	position: relative;
	bottom: 220upx;
	background: rgba(0, 0, 0, 0.5);
	height: 220upx;
	width: 100%;
	display: flex;
	justify-content: space-around;
	> view {
		margin-top: 60upx;
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		> view {
			overflow: hidden;
			width: 66upx;
			height: 66upx;
			border-radius: 50%;
			> image {
				width: 66upx;
				height: 66upx;
			}
		}
		> span {
			display: inline-block;
			margin-top: 10upx;
			font-size: 24upx;
			color: rgba(221, 221, 221, 1);
		}
	}
}
.mbRightFoot {
	display: flex;
	justify-content: space-between;
	> span {
		vertical-align: bottom;
		font-size: 36upx;
		color: rgba(255, 68, 68, 1);
		> span {
			font-size: 24upx;
		}
	}
	> view {
		width: 52upx;
		height: 52upx;
		border: 2upx solid rgba(204, 204, 204, 1);
		border-radius: 50%;
		display: flex;
		justify-content: space-around;
		> view {
			margin-top: 25upx;
			line-height: 52upx;
			width: 7upx;
			height: 7upx;
			background: rgba(102, 102, 102, 1);
			border-radius: 50%;
		}
	}
}
.mbRightBody {
	display: flex;
	justify-content: space-between;
	margin-top: 10upx;
	> view {
		> span {
			font-size: 24upx;
			color: rgba(153, 153, 153, 1);
		}
		> span:nth-child(2) {
			margin-left: 10upx;
		}
	}
	> view {
		> text {
			font-size: 24upx;
			color: #ff4444;
		}
	}
}
.mbRight {
	height: 159upx;
	margin-left: 20upx;
	width: 450upx;
	> view {
		height: 159upx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}
}
.mbRightTitle {
	> view {
		display: inline-block;
		vertical-align: middle;
		width: 52upx;
		height: 30upx;
		background: rgba(255, 68, 68, 1);
		border-radius: 4upx;
		text-align: center;
		> span {
			line-height: 30upx;
			display: inline-block;
			font-size: 20upx;

			color: rgba(255, 255, 255, 1);
		}
	}
	> span {
		margin-left: 10upx;
		vertical-align: middle;
		font-size: 26upx;

		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}
}
.mbLeft {
	width: 159upx;
	height: 159upx;
	border-radius: 10upx;
	> image {
		width: 159upx;
		height: 159upx;
	}
}
.orderMbPackage {
	padding: 30upx;
	> view {
		display: inline-block;
		vertical-align: middle;
	}
}
.orderMb {
	height: 220upx;
	overflow: hidden;
	margin: 20upx auto 0 auto;
	width: 690upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10upx;
}
.full {
	height: 220upx;
	background: #f6f6f6;
}
.scrollList {
	background: #f6f6f6;
}
.tips {
	height: 180upx;
	text-align: center;

	> span {
		line-height: 80upx;
		font-size: 28upx;

		color: black;
	}
}
page {
	font-size: 0;
	background-color: #f6f6f6;
}

.color-33 {
	color: #333333;
}

.color-red {
	color: #ff4444;
}
.container {
	.orderList-header {
		z-index: 2;
		position: fixed;
		top: 0upx;
		left: 0;
		right: 0;
	}
	.topNav {
		// top: 88upx;
		// width: 750upx;
		// height: 86upx;
		background: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: space-between;

		.line {
			position: absolute;
			opacity: 0;
			bottom: 0;
			display: inline-block;
			width: 48upx;
			height: 7upx;
			left: 50%;
			transform: translateX(-50%);
			background: #3388ff;
			border-radius: 4px 4px 0px 0px;
		}

		> view {
			text-align: center;
			width: 20%;
			display: inline-block;

			> view {
				height: 81upx;
				margin: auto;
				border-bottom: 4upx solid rgba(0, 0, 0, 0);
				position: relative;

				> span {
					line-height: 85upx;
					font-size: 24upx;

					color: rgba(51, 51, 51, 1);
				}
			}
		}
	}
	.check {
		.line {
			opacity: 1;
		}

		> span {
			font-size: 28upx !important;

			font-weight: 500 !important;
			color: #3388ff !important;
		}
	}
	// 搜索栏内容
	.search-main {
		.search-box {
			.search-input {
				position: relative;
				padding: 0 60upx 0 80upx;
				margin-right: 40upx;
				background: rgba(246, 246, 246, 1);
				height: 76upx;
				border-radius: 38upx;
				flex: 0.8;

				input {
					width: 100%;
					height: 100%;
				}

				.icon.icon-sousuo {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 30upx;
				}
			}
			.pullDown {
				flex: 0.2;
			}

			.search-select {
				width: 100upx;
				white-space: nowrap;
				color: #333333;

				.icon {
					margin-left: 10upx;
					color: #999999;
				}
			}
		}
	}

	//权限名字
	.permission-name {
		font-size: 28upx;

		color: rgba(153, 153, 153, 1);
	}

	// 头部内容
	.pages-header {
		width: 100%;
		height: 400upx;
		background-repeat: no-repeat;
		background-size: 100% 400upx;
	}

	// 详情内容
	.orderList {
		background-color: #ffffff;
		// padding-bottom: 100upx;
		.orderList-search {
			padding: 30upx;
			background-color: #ffffff;
		}

		.orderList-body {
			padding: 30upx;
			margin-top: 206upx;
			background-color: #f6f6f6;

			.orderList-list-item {
				padding: 30upx;
				border-radius: 10upx;
				background: #ffffff;
				.user-msg {
					padding: 25upx 30upx;
					background: rgba(248, 248, 248, 1);
					border-radius: 8upx;
					color: #999999;
					.blue {
						color: #2196f3;
					}
					.img {
						margin: 0 15upx 0 43upx;
						height: 34upx;
						width: 34upx;
					}
				}
				.orderList-list-item-header {
					padding-bottom: 28upx;
					.color-status {
						color: #3388ff;
					}
					.tag {
						padding: 4upx;
						border: 1px solid #ff4444;
						border-radius: 4upx;
						text-align: center;
						font-size: 20upx;
						margin-right: 20upx;
						color: #ff4444;
					}
				}

				.orderList-list-item-content {
					padding: 30upx 0;
					border-bottom: 1px solid rgb(238, 238, 238);

					.orderList-img {
						width: 130upx;
						height: 130upx;
						border-radius: 4upx;
						margin-right: 30upx;
						flex-shrink: 0;
					}

					.goods-name {
						color: #000000;
						line-height: 36upx;
					}

					.goods-sku {
						color: #999999;
					}
				}

				.orderList-list-item-footer {
					.footer-item {
						padding-top: 30upx;
						.btn {
							width: 109upx;
							height: 50upx;
							line-height: 50upx;
							text-align: center;
							background: #3388ff;
							color: #ffffff;
							font-size: 24upx;
							border-radius: 25upx;
						}
					}
				}
			}
		}
	}
}
</style>
