<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;">
				<text style='width: 23px;display: inline-block;'>注：</text>
				1，百分比范围：{{editMsg.CustomMinPriceRate}}% ~ {{editMsg.CustomMaxPriceRate}}%
			</view>
			<view style="width: 100%;padding: 0 15px;font-size: 10px;color: #8E8E8E">
				<text style='width: 23px;display: inline-block;'></text>
				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 style="display: flex;flex-direction: row;">
						<view class="allEdit" @click="batchset2" style="margin-right: 10px;">
							清空
						</view>
						<view class="allEdit" @click="batchset">
							批量设置
						</view>
					</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='24'>
							<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">
						<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;">
						<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==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>
	</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;
			},
			batchset2() {
				let show = true;
				this.g.SpecificationList.forEach(x => {
					if (x.checked == true) {
						show = false
					}
				})
				if (show == true) {
					uni.showToast({
						title: '请至少选择一个规格',
						icon: "none",
					});
					return
				};
				this.allchecked = false;
				this.g.SpecificationList.forEach(x => {
					if (x.checked == true) {
						x.UpPrice = 0;
						x.PriceType = 0;
						x.checked = false
					}
				})
			},
			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
				}
				uni.showLoading({
					title: '设置中'
				});
				this.g.SpecificationList.forEach(x => {
					if (x.checked == true) {
						x.PriceType = this.editMsg.PriceType;
						x.UpPrice = this.editMsg.UpPrice;
						x.checked = false
					}
				})
				uni.hideLoading();
				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]; // 前一个页面
				}
				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;
		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%;
		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: 12px;
		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: 25%;
		text-align: center;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.goodsEditStyle .inputM {
		width: 60%;
		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;
		font-size: 13px;
	}

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