<template>
	<view class="storeManagementStyle" :style="{'height':contentHeight}">
		<!-- 全局设置 -->
		<view style="width: 100%;height: 100%;">
			<view class="overallSet">
				<view class="overallSet_top" style="height: 54px;" >
					<view class="topflex">
						<view style="width: 3px ;height: 13px;background: #007FFF;"></view>
						<span style='font-weight: bold;margin-left: 7px;'>全局设置</span>
					</view>
					<view class="allEdit" @click="popupAll">
						修改
					</view>
				</view>
				<view style="width: 94%;height: 1px;background: #E2E2E2;"></view>
				<view class="overallSet_center" style="height: 72px;">
					<view style="display: flex;flex-direction: column;">
						<span v-if="getSmallGPrice.PriceType==1" style='font-size: 14px;color: #08090E;'>百分比</span>
						<span v-if="getSmallGPrice.PriceType==2" style='font-size: 14px;color: #08090E;'>固定金额</span>
						<span v-if="getSmallGPrice.PriceType==1" style='font-size: 11px;color: #8E8E8E;margin-top: 8px;'>(所有商品在原价基础上上涨的百分比)</span>
						<span v-if="getSmallGPrice.PriceType==2" style='font-size: 11px;color: #8E8E8E;margin-top: 8px;'>(所有商品在原价基础上上涨的固定金额)</span>
						<span  v-if="getSmallGPrice.PriceType==null" style='font-size: 14px;color: #08090E;'>暂无设置</span>
					</view>
					<view style="display: flex;flex-direction: row;align-items: flex-end;">
						<span style='font-size: 20px;color: #000000;'>{{getSmallGPrice.UpPrice?getSmallGPrice.UpPrice:0}}</span>
						<span v-if="getSmallGPrice.PriceType==1" style='font-size: 13px;color: #08090E;margin-left: 3px;'>%</span>
						<span v-if="getSmallGPrice.PriceType==2" style='font-size: 13px;color: #08090E;margin-left: 3px;'>元</span>
					</view>
				</view>
			</view>
			<!-- 商品设置 -->
			<view class="overallSet" style="background: #f3f4f6;">
				<view class="overallSet_top" style="height: 54px;background: #FFF;width: 100%;padding: 0 3%; ">
					<view class="topflex" >
						<view style="width: 3px ;height: 13px;background: #007FFF;"></view>
						<span style='font-weight: bold;margin-left: 7px;'>单独设置</span>
					</view>
					<view style="display: flex;flex-direction: row;align-items: center">
						<view class="allEdit" @click="addShop" style="width: 80px;">
							添加商品
						</view>
						<view style="width: 75px;height: 40px;display: flex;flex-direction: row;align-items: center;justify-content: center;background: #FFFFFF;" @click="show = true">
							<text>筛选</text>
							<image src="../../../static/images/shaix.png" style="width: 11px;height: 13px;"></image>
						</view>
						
					</view>
					
				</view>
				<u-empty v-if="g.length==0" text="暂无数据" mode="data"></u-empty>
				<template v-if="g.length > 0">
					<view  
					  style="
							height: calc(100vh - 54px-54px - 72px - 20px);
							width: calc(100vw);
							padding: 10px 0;
					  ">
						<scroll-view
							:scroll-y="true"
							:enable-back-to-top="true"
							:enable-flex="true"
							@scrolltolower="lower"
							:style="{ 'height': scrollHeight}">
							<view style="display: flex;flex-direction: column;align-items: center;">
								<view v-for="(item, index) in g" :key="index" class="listbox">
									<view class="box_c" >
										<image :src="item.CoverImage" style="width: 65px;height: 65px;border-radius: 6px;"></image>	
										<view style="width: calc(100vw - 30px - 65px - 15px);display: flex;flex-direction: column;margin-left: 15px;">
											<view class="box_c_name">{{item.Name}}</view>
											<view style="width:100%;height: 20px;display: flex;align-items: center;justify-content: flex-end;">
												<view style="width: 20px;height: 20px;align-items: center;justify-content: center;display: flex;" @click="itemEdit(item)">
													<image src="../../../static/images/edit.png" style="width: 20px;height: 20px;"></image>	
												</view>
											</view>
										</view>
									</view>
									<view class="SupplierListstyle">
										<view class="Sitem" v-for="(x, index2) in item.SpecificationList" :key="index2" v-if='item.showdetail == true || index2==0' @click=" isdetail(index,index2) ">
											<view class="Sitem_gg" >
												<text v-for="(j, index3) in x.AttrList" :key="index3">{{j.attr_group_name}}:{{j.attr_name}}{{x.attr_list.length==index3+1?'':','}}</text>
											</view>
											<view class="Sitem_k" >原:￥{{x.SellingPrice}}</view>
											<view class="Sitem_k" v-if="x.PriceType ==1 " style="color: #007FFF;">
												<image src="../../../static/images/backtop.png" style="width: 16px;height: 16px;"></image>
												{{x.UpPrice}}%
											</view>
											<view class="Sitem_k" v-if="x.PriceType ==2 " style="color: #007FFF;">
												<image src="../../../static/images/backtop.png" style="width: 16px;height: 16px;"></image>
												{{x.UpPrice}}元
											</view>
											<view class="Sitem_k" v-if="x.PriceType !=2&& x.PriceType !=1 " style="color: #FF4048;">未设置</view>
											<view class="Sitem_k" >店:￥{{x.SmallShopsPrice}}</view>
			
											<u-icon name="arrow" v-if='item.showdetail==false && index2==0&&  item.SpecificationList.length>1' ></u-icon>
											<u-icon name="arrow-down" v-if='item.showdetail==true && index2==0&&  item.SpecificationList.length>1'></u-icon>
										</view>
									</view>
								</view>
								
							</view>
								<u-loadmore
								  :status="status"
								  :load-text="loadText"
								  :font-size="24"
								  :margin-top="20"
								  :margin-bottom="20"
								  bg-color="#f3f4f6"
								/>
						</scroll-view>
						
					</view>
				</template>
				
			</view>
			
			
			
			<u-popup v-model="ISpopup"
				mode="center"
				length="90%"
			>
					<view class="popupbox_t">
						<view style="padding: 10px 0;">
							全局设置
						</view>
						<view style="width: 90%;height: 45px;border: 1px solid #DCDCDC;display: flex;flex-direction: row;align-items: center;justify-content: space-around;border-radius: 22.5px;margin:15px 0;" @click="showmodel=true">
							<view></view>
							<span v-if="editMsg.PriceType==1" style='font-size: 14px;color: #08090E;'>百分比</span>
							<span v-if="editMsg.PriceType==2" style='font-size: 14px;color: #08090E;'>固定金额</span>
							<span  v-if="editMsg.PriceType==0" style='font-size: 14px;color: #08090E;'>请选择</span>
							<u-icon name="arrow-down" size="20" color="#000"></u-icon>
						</view>
						<span v-if="editMsg.PriceType==1" style='font-size: 11px;'>百分比范围：{{editMsg.CustomMinPriceRate}}% ~ {{editMsg.CustomMaxPriceRate}}%</span>
						<span v-if="editMsg.PriceType==2" style='font-size: 11px;'>固定金额范围：{{editMsg.CustomMinFixedPrice}}元 ~ {{editMsg.CustomMaxFixedPrice}}元</span>
						<view style="width: 90%;display: flex;flex-direction: row;border-bottom: 1px solid #ABABAB;align-items: center;justify-content: center;">
							<input type="text" style="width: 100px;text-align: center;padding: 10px 0;font-size: 35px;height: 50px;" v-model="editMsg.UpPrice">
							<span v-if="editMsg.PriceType==1" style='font-size: 20px;margin-left: 15px;'>%</span>
							<span v-if="editMsg.PriceType==2" style='font-size: 20px;margin-left: 15px;'>元</span>
						</view>
						
						<view style="width: 90%;height: 45px;border-radius: 22.5px;background: #FF4048;font-size: 16px;color: #FFFFFF;display: flex;align-items: center;justify-content: center;margin: 15px 0;" @click="define">
							确认
						</view>
						<view style="position: absolute;right: 0;top: 0;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;" @click="ISpopup= false">
							<u-icon name="cross" size="24" color="#000" ></u-icon>
						</view>
						
					</view>
					
			</u-popup>
			
			
			<u-popup v-model="showmodel"
					mode="bottom"
					border-radius="16"
					>
				<view class="popupBox_tr">
					<view class="popup_top">
						<view></view>
						<Text>类型</Text>
						<u-icon name="cross" color='#9F9F9F' @click='showmodel=false' size="40"></u-icon>
					</view>
					<view class="txtype">
						<view class="typeitem" v-for="(item, index) in array" :key="index" >
								<Text>{{item.Name}}</Text>
								<u-radio-group  v-model="value">
									<u-radio 
										v-model = 'item.checked'
										:active-color="mainColor"
										shape="circle"
										:name="item.Name"
										@change="radioChange(item)" 
									>
									</u-radio>
								</u-radio-group>
							</view>
					</view>
				</view>
			</u-popup>
			<u-popup v-model="show"
				mode="right"
				length="70%"
				height='100%'
			>
					<view class="popupbox">
						
						<text class="popupbox_text" style="margin-top: 15px;">商品名称</text>
						<view class="popup_item">
							<input class="uni-input inputM" v-model="msg.GoodsName" />
						</view>
						
						<view class="popup_b" :style="{height:cHeight+'px'}">
							<view class="popup_b_item" style="background: #FAF8F9;color: #000000;" @click="goreset()">
								<text>重置</text>
							</view>
							<view class="popup_b_item" :style="{background:mainColor }" @click="determine()">
								<text>确定</text>
							</view>
						</view>
					</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: "店铺价格设置",
				contentHeight:0,
				mainColor:'',
				secondary:'',
				getSmallGPrice:{},
				ISpopup:false,
				showmodel:false,
				array:[
					{type:1,Name:'百分比'},{type:2,Name:'固定金额'}
				],
				editMsg:{},
				value:'',
				g:[],
				page_count:1,
				status: "loadmore",
				loadText: {
				  loadmore: "轻轻上拉，加载更多",
				  loading: "努力加载中",
				  nomore: "没有更多了",
				},
				msg:{
					pageIndex: 1,
					pageSize:10,
					GoodsId:'',
					GoodsName:'',
				},
				show:false,
				cHeight:0,
				scrollHeight:0,
			}
		},
		onLoad(){
			
		},
		created(){
			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
			 this.scrollHeight = this.$utils.calcContentHeight(-40+210)+'px';
			 this.cHeight = this.$uiConfig.is_bang ? 80 : 52;
			 this.mainColor = this.$uiConfig.mainColor;
			 this.secondary = this.$uiConfig.secondary;
			 this.getSmallShopsGlobalPrice()
		},
		mounted() {
			let currentPages = getCurrentPages();
			 let u = "/" + currentPages[currentPages.length-1].route;
			 let pages = wx.getStorageSync("basedata")
			   ? wx.getStorageSync("basedata").bar_title
			   : [];
			 pages.forEach((x) => {
			   if (x.value == u) {
			     this.pageTitle = x.new_name ? x.new_name : x.name;
			   }
			 });
			 uni.setNavigationBarTitle({
			   title: this.pageTitle,
			 });
		},
		methods: {
			getSmallShopsGlobalPrice(type=1){
				uni.showLoading({
					title: '加载中'
				});
				this.request2(
					 {
					 	url: '/api/AppletSmallShops/GetSmallShopsGlobalPrice',
					 	data: {}
					 },	
				  (res) => {
						this.getSmallGPrice  = res.data;
						if(this.getSmallGPrice.PriceType ==1){
							this.value = '百分比'
						}else if(this.getSmallGPrice.PriceType ==2){
							this.value = '固定金额'
						}
						
					
				  }
				);
				if(type==1){
					this.getSmallShopsGoodsPricePageList()
				}else{
					uni.hideLoading();
				}
				
			},
			getSmallShopsGoodsPricePageList(type=1){
				if(type==2){
					this.msg.GoodsId='';
					this.msg.GoodsName='';
					this.msg.pageIndex=1;
					this.g=[]
				}
				this.request2(
					 {
					 	url: '/api/AppletSmallShops/GetSmallShopsGoodsPricePageList',
					 	data: this.msg
					 },	
				  (res) => {
						uni.hideLoading();
						let data  = res.data.pageData
						data.forEach(x=>{
							x.showdetail = false
						})
						this.g = this.g.concat(data);
						this.page_count = res.data.pageCount;
						if (this.page_count == 1) {
						  this.status = "nomore";
						}
						
					
				  }
				);
			},
			lower(e) {
			  if (this.msg.pageIndex < this.page_count) {
				this.msg.pageIndex++;
				this.status = "loading";
				this.init();
			  } else {
				this.status = "nomore";
			  }
			},
			isdetail(index,index2){
				if(index2==0){
					this.g[index].showdetail = !this.g[index].showdetail;
					this.$forceUpdate()
				}
				
			},
			popupAll(){
				this.ISpopup = true;
				this.editMsg = JSON.parse(JSON.stringify(this.getSmallGPrice));
				if(this.editMsg.UpPrice==null){
					this.editMsg.UpPrice = 0
				}
			},
			radioChange(item){
				
				this.editMsg.PriceType = item.type;
				this.value = item.Name
				this.showmodel =false
				
			},
			define(){
				let msg ={
					UpPrice:0,
					PriceType:0
				}
				msg.UpPrice = this.editMsg.UpPrice;
				msg.PriceType = this.editMsg.PriceType;
				this.request2(
					 {
					 	url: '/api/AppletSmallShops/SetSmallShopsGlobalPrice',
					 	data: msg
					 },	
				  (res) => {
					  uni.showToast({
					  	title: res.message,
					  	icon: "none",
					  });
						this.getSmallShopsGlobalPrice(2)
						this.ISpopup = false;
				  }
				);
			},
			addShop(){
				uni.navigateTo({
						url:'/pages/microShop/storeManagement/addGoods'
				});
			},
			goreset(){//重置
			
				this.show=false;
				this.msg.GoodsId='';
				this.msg.GoodsName='';
				this.msg.pageIndex=1;
				this.g=[]
				this.getSmallShopsGoodsPricePageList()
			},
			determine(){//确认
				
				this.show=false
				this.msg.pageIndex=1;
				this.g=[]
				this.getSmallShopsGoodsPricePageList()
			},
			itemEdit(item){
				
				let data = encodeURIComponent(JSON.stringify(item)) 
				uni.navigateTo({
						url:'/pages/microShop/storeManagement/goodsEdit?data='+data+'&type=1'
				});
			}
		
		}
	}
</script>

<style>
.storeManagementStyle{
	background: #f3f4f6;
	
	
}
.storeManagementStyle .overallSet{
	width: 100%;
	background: #FFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 10px;
}
.storeManagementStyle .overallSet_top{
	/* padding: 15px 0; */
	width: 94%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	
}
.storeManagementStyle .topflex{
	display: flex;flex-direction: row;align-items: center;
	font-size: 14px;
	color: #08090E;
}
.storeManagementStyle .allEdit{
	width: 60px;
	height: 24px;
	border-radius: 12px;
	background: #FF4048;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF
}
.storeManagementStyle .overallSet_center{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	/* padding: 15px 0; */
	width: 94%;
}
.storeManagementStyle .listbox{
		width: 100%;
		margin-bottom: 10px;
		padding: 15px;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center
		
	}
.storeManagementStyle .popupbox_t{
	width: 100%;
	border-radius: 10px;
	background: #FFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px;
	position: relative;
}
	.storeManagementStyle .box_c{
		display: flex;
		flex-direction: row;
		
		width: 100%;
		overflow: hidden;
		margin-top: 15px;
	}
	.storeManagementStyle .box_c_name{
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 13px;
		color: #111111;
	}
	.storeManagementStyle .box_r_b{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 3px;
	}
	.storeManagementStyle .OrderNoStyle{
		width: 100%;
		height: 35px;
		background: #F8F6F5;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 11px;
		color: #888888;
		margin-top: 15px;
		
	}
	.storeManagementStyle .SupplierListstyle{
		width: 100%;
		background: #F8F6F5;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10px;
	}
	.storeManagementStyle .Sitem{
		width: 96%;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 13px;
		color: #888888;
		height: 35px;
		margin-left: 2%;
		
	}
	.storeManagementStyle .Sitem_gg{
		width: 41%;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.Sitem_k{
		width: 18%;
		text-align: center;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.storeManagementStyle .popupbox{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		
	}
	.storeManagementStyle .popupbox_text{
		font-size: 12px;
		color: #111111;
		margin-left: 5%;
	}
	.storeManagementStyle .popup_item{
		width: 90%;
		height: 40px;
		margin-left: 5%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 5px;
		margin-top: 10px;
		background: #F1F1F1;
	}
	.storeManagementStyle .inputM{
		width: 100%;
	}
	.storeManagementStyle .popup_b{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #FFFFFF;
		
	}
	 .storeManagementStyle .popup_b_item{
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		font-size: 14px;
		padding-top: 15px;
	}
	.storeManagementStyle .popupBox_tr{
		width: 100%;
		padding-bottom: 15px;
	}
	.storeManagementStyle .popupBox_tr .popup_top{
		width: 100%;
		height: 45px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		
	}

	.storeManagementStyle .typeitem{
		padding: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-top:1px solid #f5f5f5
	}
</style>
