<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="search-swert" v-if="!!categories && categories.length > 0">
									<!-- <picker mode="selector" :value="isladderVel" :range="isladder" range-key="name" @change="changeladder">
											<view class="f-26 c-ff4444" style="height: 76upx;line-height: 76upx;">
												{{ isladder[isladderVel].name }}
												<text class="iconfont icon-unfold c-ff4444 f-w" style="font-size: 26upx;"></text>
											</view>
									</picker> -->
									<picker mode="selector" :value="category" :range="categories" range-key="name" @change="changeCategory">
											<view class="f-26 c-ff4444" style="height: 76upx;line-height: 76upx;">
												{{ categories[category].name }}
												<text class="iconfont icon-unfold c-ff4444 f-w" style="font-size: 26upx;"></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(1)">
							<view :class="status == 1 ? '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(8)">
							<view :class="status == 8 ? 'check' : ''">
								<span>回收站</span>
								<view class="line"></view>
							</view>
						</view>
					</view>
				</view>

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

				<!-- 列表区域 -->
				<!-- #ifdef H5 -->
				<scroll-view class="scrollList" :style="{ height: scrollHeight }" :scroll-y="true" @scrolltolower="load"
				 :lower-threshold="0">
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<scroll-view class="scrollList" :style="{ height: scrollHeight }" :scroll-y="true" :lower-threshold="0">
						<!-- #endif -->

						<!-- 循环模板 -->
						<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.logo" />
								</view>
								<view class="mbRight">
									<view>
										<view class="mbRightTitle ">
											<view>
												<span>{{newTypeList[item.cc_id]}}</span>
											</view>
											<span class="dis-il-block" style="width: 330upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{item.goods_name}}</span>
										</view>
										<view class="mbRightBody">
											<view>
												<span>库存:{{item.stk}}</span>
												<span>销量:{{item.buy_num}}</span>
											</view>
											<view>
												<text>{{item.status=='1'?'未开始':item.status=='5'?'待审核':item.status=='6'?'被驳回':''}}</text>
											</view>
										</view>
										<view class="mbRightFoot">
											<span><span></span>{{(item.maxprice && item.minprice)?item.minprice+ '~' + item.maxprice:item.price }}</span>
											<view @click="popT(index)" v-if="item.hidegoods===0">
												<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,1)" v-if="item.status=='3'||item.status=='4'||item.status=='8'">
									<view>
										<image :src="imgfixUrls + 'merchant/sj.png'" />
									</view>
									<span>上架</span>
								</view>
								<view @click="changeGoodsStatus(item,2)" v-if="item.status=='2'||item.status=='1'">
									<view>
										<image :src="imgfixUrls + 'merchant/xj.png'" />
									</view>
									<span>下架</span>
								</view>
								<view @click="changeGoodsStatus(item,3)" v-if="item.status!=='8'">
									<view>
										<image :src="imgfixUrls + 'merchant/sc.png'" />
									</view>
									<span>删除</span>
								</view>
								<view @click="changeGoodsStatus(item,4)" v-if="item.status=='8'">
									<view>
										<image :src="imgfixUrls + 'merchant/sc.png'" />
									</view>
									<span>删除</span>
								</view>
								<view v-if="((item.type-1)=='0'||(item.type-1)=='1'||(item.type-1)=='2'||(item.type-1)=='6') || (item.type-1) == '8'&&(item.hidegoods===0)"
								 @click="goBj(item)">
									<view>
										<image :src="imgfixUrls + 'merchant/bianj.png'" />
									</view>
									<span>编辑</span>
								</view>
								<view v-if="item.status=='2'||item.status=='1'" @click="goPost(item)">
									<view>
										<image :src="imgfixUrls + 'merchant/tg.png'" />
									</view>
									<span>推广</span>
								</view>
							</view>
						</view>
						<!-- 循环模板 -->
						<view class="tips" v-if="total!=0">
							<loadmore :isMore="isMore"></loadmore>
						</view>
					</scroll-view>
			</view>
			<!-- <navBar :tabBarAct="1" /> -->
		</view>

		<view class="addOrderButton f-50" @click="openAdd" v-if="hidegoods===0 && activityflag ==1">
			+
		</view>
		<view class="addOrderButton f-30" style="width: 200upx;" @click="addActivity" v-if="hidegoods===1 && activityflag ==1">
			同城活动
		</view>
		<view class="addOrderButton f-30" style="width: 200upx;" @click="goAddGoods" v-if="hidegoods===0 && activityflag ==0">
			添加商品
		</view>
		<popup-view :show="show" type="bottom" @clickmask="show = false" :bottom="'0%'">
			<view class="b-f popup">
				<view class="dis-flex" style="padding: 50upx 0;">
					<view class="flex-box t-c" @click="goAddGoods">
						<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="addActivity">
						<view class="iconfont icon-huodongxiangqu" 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="show = false">关闭</view>
			</view>
		</popup-view>
	</view>
</template>
<script>
	import App from '@/common/js/app.js';
	import Loadlogo from '@/components/template/loadlogo';
	import navBar from '@/components/template/navBar.vue';
	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: ['抢购', '团购', '拼团', '', '优惠卷', '', '砍价商品','','活动'],
				newTypeList: {
					'1':'技能培训',
					'2':'资格考试',
					'3':'学历提升',
					'4':'岗前培训',
					'51':'生活服务'
				},
				total: null,
				goodsList: [],
				typeShow: 'bottom',
				keyword: '',
				popShow: false,
				scdpText: '',
				orderlist: [],
				show: false,
				orderInfo: {},
				storeid: null,
				pagetotal: null,
				type: '',
				status: 2,
				sort: '',
				time: '',
				page: 1,
				checkStoreid: null,
				loadlogo: false,
				shopShow: '',
				filterDialog: true,
				title: 'picker-view',
				isladderVel:0,
				isladder:[],
				plugin:'rush',
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				activityflag:0,
				visible: true,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`,
				categories: [
					{cc_id: "", name: '全部'},
					{cc_id: "1", name: '技能培训'},
					// {cc_id: "2", name: '资格考试'},
					{cc_id: "3", name: '学历提升'},
					{cc_id: "4", name: '岗前培训'},
					{cc_id: "51", name: '生活服务'}
				],
				category: 0,
			};
		},
		components: {
			Loadlogo,
			navBar,
			nonemores,
			loadmore,
			PopupView
		},
		computed: {},
		mounted() {},
		onLoad(e) {
			let _this = this
			_this.checkStoreid = uni.getStorageSync('checkStoreid');
		},
		onShow(){
			this.goodsList = [];
			this.init();
		},
		onReachBottom: function() {
			console.log('shabi')
			let _this = this
			if (_this.total == _this.page) {
				_this.isMore = true
			} else {
				_this.page++
				_this.getStoreGoods();
			}
		},
		methods: {
			changeladder(e){
				let _this = this;
				_this.isladderVel = e.detail.value;
				_this.plugin = _this.isladder[_this.isladderVel].plugin;
				_this.doSearch(true);
				console.log(e);
			},
			changeCategory(e){
				let _this = this;
				_this.category = e.detail.value;
				_this.cc_id = _this.categories[_this.category].cc_id;
				_this.doSearch(true);
			},
			addActivity() {
				App.navigationTo({
					url: `pages/subPages2/coursegoods/establishDoods/establishDoods?id=${''}&sid=${this.checkStoreid}`
				})
			},
			openAdd() {
				this.show = true;
			},
			goBj(item) {
				let _this = this
				if (item.type == 9) {
					App.navigationTo({
						url: `pages/subPages2/coursegoods/establishDoods/establishDoods?id=${item.id}&sid=${this.checkStoreid}`
					})
				} else {
					App.navigationTo({
						url: 'pages/subPages/createCommodity/index?type=' + item.creategoodstype + '&id=' + item.id + '&cc_id=' + item.cc_id
					})
				}

			},
			goAddGoods() {
				let _this = this
				App.navigationTo({
					url: 'pages/subPages/createCommodity/index'
				})
			},
			init() {
				let _this = this;
				uni.getSystemInfo({
					success(res) {
						_this.phoneHight = res.windowHeight;
						_this.scrollHeight = _this.phoneHight - 125 + 'px';
					}
				});
				uni.getStorage({
					key: 'checkStoreid',
					success: function(res) {
						_this.storeid = res.data;
						_this.getStoreGoods(res.data);
					}
				});

			},
			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 if(item.type == '9'){
					type = 14
				}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,
					operation: type,
					type: item.type,
				}
				App._post_form('&p=store&do=changeGoodsStatus', 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++
					_this.getStoreGoods();
				}
			},
			doSearch(flag) {
				let _this = this
				_this.isMore = false
				_this.page = 1
				_this.indexs = null
				let data = {
					sid: _this.storeid,
					page: _this.page,
					page_index: 10,
					storeflag: 1,
					keyword: _this.keyword,
					status: _this.status,
					plugin:_this.plugin,
					cc_id: _this.cc_id
				};
				
				App._post_form('&p=store&do=getStoreGoods', data, res => {
					_this.goodsList = res.data.list
					_this.total = res.data.total;
					_this.hidegoods = res.data.hidegoods;
					// _this.isladder = res.data.pluginlist;// 废弃数据
					if(res.data.activityflag){
						_this.activityflag = res.data.activityflag;
					}
					// for(let i = 0; i<_this.goodsList.length;i++){
					// 	if(_this.goodsList[i].hidegoods == 0 && _this.goodsList[i].creategoodstype != 'activity'){
					// 		// debugger
					// 		_this.hidegoods = 0;
					// 	}
					// }
					_this.isMore = true
					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) + '...'
						}
					}
				})
			},
			// 获取店铺商品信息
			getStoreGoods(sid) {
				let _this = this
				_this.isMore = false
				let data = {
					sid: sid || _this.storeid,
					page: _this.page,
					page_index: 10,
					storeflag: 1,
					keyword: _this.keyword,
					status: _this.status
				}
				App._post_form('&p=store&do=getStoreGoods', data, res => {
					_this.goodsList = [..._this.goodsList, ...res.data.list]
					_this.total = res.data.total
					_this.hidegoods = res.data.hidegoods;
					// _this.isladder = res.data.pluginlist;// 废弃数据
					// for(let i = 0; i<_this.goodsList.length;i++){
					// 	if(_this.goodsList[i].hidegoods == 0){
					// 		_this.hidegoods = 0;
					// 		// return
					// 	}
					// }
					
					if(res.data.activityflag){
						_this.activityflag = res.data.activityflag;
					}
					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
				})
			},
			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: 150upx;
		left: 50%;
		line-height: 80upx;
		transform: translateX(-50%);
		background: rgba(51, 136, 255, 1);
		text-align: center;
		color: #FFFFFF;
	}

	.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: 100upx;
			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;

		>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 {
				position: relative;
				.search-input {
					position: relative;
					padding: 0 60upx 0 80upx;
					margin-right: 150upx;
					background: rgba(246, 246, 246, 1);
					height: 76upx;
					border-radius: 38upx;
					flex: 1;

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

					.icon.icon-sousuo {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						left: 30upx;
					}
				}
				.search-swert{
					position: absolute;
					right: 0;
					top: 0;
				}

				.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>
