<template>
	<view class="goodsEditStyle" :style="{'height':contentHeight}">
		<view class="listbox">
			<view class="box_c" >
				<image :src="g.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">{{g.Name}}</view>
				</view>
			</view>
			<view style="width: 100%;padding: 0 15px;font-size: 10px;color: #8E8E8E;">
				注：1，百分比范围：{{editMsg.CustomMinPriceRate}}% ~ {{editMsg.CustomMaxPriceRate}}%
			</view>
			<view style="width: 100%;padding: 0 15px;font-size: 10px;color: #8E8E8E" >
				2，固定金额范围：{{editMsg.CustomMinFixedPrice}}元 ~ {{editMsg.CustomMaxFixedPrice}}元
			</view>
			<view class="SupplierListstyle">
				<view style="width: 96%;height: 40px;display: flex;flex-direction: row;align-items: center;justify-content: space-between;border-bottom: 1px solid #E2E2E2;">
					<u-checkbox-group @change="SelectAll"  size='30'>
						<u-checkbox v-model="allchecked" shape="circle" :active-color="mainColor">全选</u-checkbox>
					</u-checkbox-group>
					<view class="allEdit" @click="batchset" >
						批量设置
					</view>
				</view>
				<view class="Sitem" v-for="(x, index2) in g.SpecificationList" :key="index2"  >
					<u-checkbox-group @change="clickcheckbox(x)" size='30' style='margin-right: 5px;width: 50%; ' >
						<u-checkbox v-model="x.checked" shape="circle" :active-color="mainColor" label-size='22'>
							<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>
						</u-checkbox>
					</u-checkbox-group>
					
					<view class="Sitem_k" style="width: 20%;display: flex;flex-direction: row;align-items: center;" @click="selectType(x,index2,1)">
						<view v-if="x.PriceType ==1 ">百分比</view>
						<view v-if="x.PriceType ==2 ">固定金额</view>
						<view v-if="x.PriceType !=1 && x.PriceType !=2 " >请选择</view>
						<u-icon name="arrow-down" style='margin-left: 3px;'></u-icon>
					</view>
					
					<view class="Sitem_k" v-if="x.PriceType ==1 "  style="display: flex;flex-direction: row;align-items: center">
						<view style="width: 44px;">百分比:</view>
						
						<input class="uni-input inputM Sitem_k" v-model="x.UpPrice"  @blur='verification(x,index2)' />
						%
					</view>
					<view class="Sitem_k" v-if="x.PriceType ==2 "  style="display: flex;flex-direction: row;align-items: center;">
						<view style="width: 44px;">国定金额:</view>
						<input class="uni-input inputM Sitem_k" v-model="x.UpPrice" @blur='verification(x,index2)'/>
						元
					</view>
					<view class="Sitem_k" v-if="x.PriceType !=2&& x.PriceType !=1 " style="color: #FF4048;">0</view>
					
				</view>
			</view>
		</view>
		<!-- 修改按钮 -->
		<view class="popup_b" :style="{height:cHeight+'px'}">
			<view class="popup_b_item" :style="{background:mainColor }" @click="determine()">
				<text>保存</text>
			</view>
		</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==null" 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>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: "商品价格设置",
				contentHeight:0,
				mainColor:'',
				secondary:'',
				g:{},
				cHeight:0,
				showmodel:false,
				array:[
					{type:1,Name:'百分比'},{type:2,Name:'固定金额'}
				],
				Stype:1,//1为单个设置 2位批量
				Sindex:0,
				value:'',
				allchecked:false,
				ISpopup:false,
				editMsg:{},
				gotype:1
			}
		},
		onLoad(options){
			
			if(options){
				let data = JSON.parse(decodeURIComponent(options.data))
				this.g = data
				this.g.SpecificationList.forEach(x=>{
					x.checked = false
				})
				this.gotype = options.type
			}
		},
		created(){
			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
			 this.cHeight = this.$uiConfig.is_bang ? 80 : 52;
			 this.mainColor = this.$uiConfig.mainColor;
			 this.secondary = this.$uiConfig.secondary;
			 this.init()
		},
		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: {
			init(){
				this.request2(
					 {
					 	url: '/api/AppletSmallShops/GetSmallShopsGlobalPrice',
					 	data: {}
					 },	
				  (res) => {
						this.editMsg  = res.data;
				  }
				);
			},
			selectType(item,index,type){
				if(item.PriceType ==1){
					this.value = '百分比'
				}else if(item.PriceType ==2){
					this.value = '固定金额'
				}else{
					this.value = ''
				}
				this.Sindex = index;
				this.Stype = type;
				this.showmodel = true
				
			},
			radioChange(item){
				
				if(this.Stype ==1){
					this.g.SpecificationList[this.Sindex].PriceType = item.type;
					if(item.type ==1){//切换类型时 值为范围值的最小值
						this.g.SpecificationList[this.Sindex].UpPrice = this.editMsg.CustomMinPriceRate;
					}else if(item.type ==2){
						this.g.SpecificationList[this.Sindex].UpPrice = this.editMsg.CustomMinFixedPrice;
					}
					
					this.value = item.Name;
					this.showmodel =false
				}else if(this.Stype ==2){
					this.editMsg.PriceType = item.type;
					this.value = item.Name;
					this.showmodel =false
				}
				
			},
			SelectAll(){
				
				if(this.allchecked == true){
					this.g.SpecificationList.forEach(x=>{
						x.checked = true
					})
					
				}else{
					this.g.SpecificationList.forEach(x=>{
						x.checked = false
					})
					
				}
				this.$forceUpdate()
			},
			clickcheckbox(x){
				
				if(x.checked == true){
					let show = true;
					this.g.SpecificationList.forEach(x=>{
						
						if(x.checked == false){
							show = false
						}
					})
					if(show==true){
						this.allchecked = true
					}
				}else{
					this.allchecked = false
				}
				this.$forceUpdate()
			},
			batchset(){
				let show = true;
				this.Stype = 2;
				this.g.SpecificationList.forEach(x=>{
					
					if(x.checked == true){
						show = false
					}
				})
				if(show==true){
					uni.showToast({
						title: '请至少选择一个规格',
						icon: "none",
					});
					return
				};
				if(this.editMsg.PriceType ==1){
					this.value = '百分比'
				}else if(this.editMsg.PriceType ==2){
					this.value = '固定金额'
				}
				this.ISpopup = true;
				
			},
			define(){
				if(this.editMsg.PriceType==1 && (this.editMsg.UpPrice<this.editMsg.CustomMinPriceRate || this.editMsg.UpPrice>this.editMsg.CustomMaxPriceRate)){
					uni.showToast({
						title: '百分比不在范围内',
						icon: "none",
					});
					this.editMsg.UpPrice = this.editMsg.CustomMinPriceRate
					return
				}
				if(this.editMsg.PriceType==2 && (this.editMsg.UpPrice<this.editMsg.CustomMinFixedPrice || this.editMsg.UpPrice>this.editMsg.CustomMaxFixedPrice)){
					uni.showToast({
						title: '固定金额不在范围内',
						icon: "none",
					});
					this.editMsg.UpPrice = this.editMsg.CustomMinFixedPrice
					return
				}
				this.g.SpecificationList.forEach(x=>{
					if(x.checked == true){
						x.PriceType = this.editMsg.PriceType;
						x.UpPrice = this.editMsg.UpPrice;
						x.checked = false
					}
				})
				this.allchecked = false
				this.ISpopup = false;
			},
			verification(x,i){
				if(x.PriceType==1 && (x.UpPrice<this.editMsg.CustomMinPriceRate || x.UpPrice>this.editMsg.CustomMaxPriceRate)){
					uni.showToast({
						title: '百分比不在范围内',
						icon: "none",
					});
					this.g.SpecificationList[i].UpPrice = this.editMsg.CustomMinPriceRate
					return
				}
				if(x.PriceType==2 && (x.UpPrice<this.editMsg.CustomMinFixedPrice || x.UpPrice>this.editMsg.CustomMaxFixedPrice)){
					uni.showToast({
						title: '固定金额不在范围内',
						icon: "none",
					});
					this.g.SpecificationList[i].UpPrice = this.editMsg.CustomMinFixedPrice
					return
				}	
			},
			determine(){
				let msg = {
					GoodsId:this.g.GoodsId,
					PriceList:[]
				}
				
				this.g.SpecificationList.forEach(x=>{
					let obj = {}
					
					obj.GoodsId = x.GoodsId;
					obj.SpecificationKey = x.SpecificationKey;
					obj.UpPrice = x.UpPrice;
					obj.PriceType = x.PriceType;
					msg.PriceList.push(obj)
				})
				let pages = getCurrentPages(); // 当前页面
				let beforePage
				if(this.gotype == 1){
					beforePage = pages[pages.length - 2]; // 前一个页面
				}else if(this.gotype == 2){
					beforePage = pages[pages.length - 3]; // 前一个页面
				}
				console.log(beforePage)
				console.log(this.gotype)
				uni.showLoading({
					title: '加载中'
				});
				this.request2(
					 {
					 	url: '/api/AppletSmallShops/SetSmallShopsGoodsPrice',
					 	data: msg
					 },	
				  (res) => {
					  uni.hideLoading();
						uni.showToast({
							title: res.message,
							icon: "none",
						});
						if(this.gotype == 1){
							setTimeout(()=>{
								 uni.navigateBack({
									 delta:1,
									 success: function() {
										 beforePage.$vm.getSmallShopsGoodsPricePageList(2); // 执行前一个页面的方法
									 }
								 });
							},1000)
						}else if(this.gotype == 2){
							setTimeout(()=>{
								 uni.navigateBack({
									 delta:2,
									 success: function() {
										 beforePage.$vm.getSmallShopsGoodsPricePageList(2); // 执行前一个页面的方法
									 }
								 });
							},1000)
						}
							
						
						
				  }
				);
			},
		
		
		
		}
	}
</script>

<style>
.goodsEditStyle{
	background: #f3f4f6;
	
	
}

	.goodsEditStyle .listbox{
		width: 100%;
		margin-bottom: 100px;
		/* padding: 15px; */
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		
	}
	.goodsEditStyle .box_c{
		display: flex;
		flex-direction: row;
		
		width: 100%;
		overflow: hidden;
		margin-top: 15px;
		padding: 15px;
	}
	.goodsEditStyle .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;
	}
	.goodsEditStyle .box_r_b{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 3px;
	}
	.goodsEditStyle .SupplierListstyle{
		width: 100%;
		/* background: #F8F6F5; */
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10px;
	}
	.goodsEditStyle .Sitem{
		width: 96%;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 10px;
		color: #888888;
		height: 35px;
		
		border-bottom: 1px solid #E2E2E2;
		
	}
	.goodsEditStyle .Sitem_gg{
		width: 100%;
		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: 35%;
		text-align: center;
		/* line-height: 25px; */
	}
	.goodsEditStyle .inputM{
		width: 45%;
		border: 1px solid #E2E2E2;
		margin: 0 3px;
	}
	.goodsEditStyle .popupBox_tr{
		width: 100%;
		padding-bottom: 15px;
	}
	.goodsEditStyle .popupBox_tr .popup_top{
		width: 100%;
		height: 45px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		
	}
	
	.goodsEditStyle .typeitem{
		padding: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-top:1px solid #f5f5f5
	}
	.goodsEditStyle .allEdit{
		width: 80px;
		height: 24px;
		border-radius: 12px;
		background: #FF4048;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF
	}
	
	.goodsEditStyle .popupbox_t{
		width: 100%;
		border-radius: 10px;
		background: #FFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px;
		position: relative;
	}
	.goodsEditStyle .popup_b{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #FFFFFF;
		
	}
	.goodsEditStyle .popup_b_item{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		font-size: 14px;
		padding-top: 15px;
	}
</style>
