<template>
	<view class="vipInfo">
		<view class="msg">
			<text>价格区间(元)</text>
			<text>会员加价率%</text>
			<text>利润空间(元）</text>
		</view>
		<view class="classifyContainer">
			<view class="category">
				<view class="rangeHandle" @click="addCatego(list.length)">
					<view class="addFlag">+</view>
					<text>新增分类模板</text>
				</view>
				<view class="rangeHandle" @click="delCatego('',1)" style="border-left:1px solid #E2E2E2;">
					<view class="delBtn">-</view>
					<text>删除分类模板</text>
				</view>
			</view>
			<view class="classifyItem" v-for="(item,index_1) in list" :key="index_1">
				<view class="classTitle">
					<view class="category_box" @click="onCategory(item.category,index_1)">
						<text class="maxWith">{{item.category_name?item.category_name:'请选择分类'}}</text>
						<u-icon name="arrow-right" color="#292929" size="28"></u-icon>
					</view>
					<view class="category" style="padding: 0;">
						<view class="rangeHandle" v-if="list.length>1" @click="delCatego(index_1,2)">
							<view class="delBtn">-</view>
							<text>删除分类</text>
						</view>
					</view>
				</view>
				<view class="priceRange">
					<view class="rangeItem" v-for="(val,index_2) in item.price_list" :key="index_2">
						<view class="rangeInput" @click="setUp(index_1,index_2)">
							<text v-if="val. min>=0 && val.max>0 ">
								<text>{{val. min}}</text> - <text>{{val.max}}</text>
							</text>
							<text v-else style="color: #8F8F8F;">请设置</text>
						</view>
						<view class="rangeInput fix">
							<input type="text" :min="5" style="border: none;" @input="onRate($event,index_1,index_2)"
								placeholder="请设置" v-model="val.add_price_rate" />
						</view>
						<view class="profit">
							<text>{{val.startProfit}}</text> - <text>{{val.endProfit}}</text>
						</view>

					</view>
				</view>
				<view class="rangeBtn">
					<view class="rangeHandle" @click="addHandle(index_1)">
						<view class="addFlag">+</view>
						<text>新增价格区间</text>
					</view>
					<view class="rangeHandle" @click="delHandle(item)" style="border-left:1px solid #E2E2E2;">
						<view class="delBtn">-</view>
						<text>删除价格区间</text>
					</view>
				</view>
			</view>
			<view class="ruleText" v-if="type==1">
				备注：利润低于_元的商品不展示在商城里。
			</view>
		</view>
		<view class="price-fd">
			<view class="btn" @click="onSubmit">提交</view>
		</view>
		<setRange ref="setRange" @getprice="getprice"></setRange>
		<category ref="category" :tabList='categoryList' @getChoseCategory="getChoseCategory"
			:activeIndex='activeIndex'></category>
	</view>
</template>

<script>
	import * as newFunApi from '@/api/newFun'
	import setRange from './components/setRange.vue'
	import category from './components/category.vue'
	export default {
		components: {
			setRange,
			category
		},
		data() {
			return {
				activeIndex: [],
				categoryIndex: '',
				index_1: '',
				index_2: '',
				list: [],
				categoryList: '',
				type: '',
			}
		},
		onLoad(op) {
			this.type = op.type
			this.getCategory()

		},
		methods: {
			// 获取详情
			async getInfor() {
				let {
					status,
					message,
					data
				} = await newFunApi.getStorePriceInfo({
					type: this.type
				});
				if (status == 200) {
					if (data.list.length > 0) {
						data.list.forEach((item_1, index_1) => {
							let name = this.findElementsById(this.categoryList, item_1.category.split(",").map(
								item => Number(item)))
							item_1.category_name = name.join(',') + (name.length > 0 ? '等' : '');
							item_1.price_list.forEach((item_2, index_2) => {
								item_2.startProfit = Number((Number(item_2.min) * (Number(item_2
									.add_price_rate) / 100)).toFixed(2));
								item_2.endProfit = Number((Number(item_2.max) * (Number(item_2
									.add_price_rate) / 100)).toFixed(2));
							})
						})
						this.list = data.list
					} else {
						this.list = []
					}
				}
			},
			// 提交参数
			async onSubmit() {
				let that = this
				let step = 0;
				let list = this.list
				list.forEach((item, index) => {
					if (!item.category_name) {
						step++
						let name = "请选择第" + (index + 1) + '行分类'
						uni.showToast({
							title: name,
							duration: 3000,
							icon: 'none'
						});
						return
					}
					if (item.price_list.length > 0) {
						item.price_list.forEach((item_1, index_1) => {
							if (!item_1.min) {
								step++
								let name = "请完善" + item.category_name + "第" + (index_1 + 1) +
									'行分类的最低价格'
								uni.showToast({
									title: name,
									duration: 3000,
									icon: 'none'
								});
								return
							}
							if (!item_1.max) {
								step++
								let name = "请完善" + item.category_name + "第" + (index_1 + 1) +
									'行分类的最高价格'
								uni.showToast({
									title: name,
									duration: 3000,
									icon: 'none'
								});
								return
							}
							if (!item_1.add_price_rate) {
								step++
								let name = "请完善" + item.category_name + "第" + (index_1 + 1) +
									'行分类的会员加价率'
								uni.showToast({
									title: name,
									duration: 3000,
									icon: 'none'
								});
								return
							}

						});
					} else {
						step++
						let name = "请新增第" + (index + 1) + '行的价格区间'
						uni.showToast({
							title: name,
							duration: 3000,
							icon: 'none'
						});
						return
					}
				});
				if (step == 0) {
					list.forEach((item, index) => {
						delete item.category_name
						list.forEach((item_1, index) => {
							delete item_1.endProfit
							delete item_1.startProfit
						})
					})
					let {
						status,
						message,
						data
					} = await newFunApi.setStorePrice({
						list: list,
						type: this.type
					});
					if (status == 200) {
						uni.showToast({
							title: "保存成功"
						})
						this.getCategory()
					}
				}
			},
			// 獲取分类
			async getCategory() {
				let {
					status,
					message,
					data
				} = await newFunApi.category();
				this.categoryList = data.list
				this.list = []
				this.list.push({
					category_name: '',
					category: '',
					price_list: [],
				})
				this.getInfor()
			},
			// 计算利润率
			onRate(e, index_1, index_2) {
				let rate = Number(e.detail.value)
				if (5 > rate) {
					this.list[this.index_1].price_list[this.index_2].add_price_rate = ''
					return this.$toast('最低利率不能低于5%')
				}
				this.list[this.index_1].price_list[this.index_2].startProfit = Number((this.list[this.index_1].price_list[
						this
						.index_2]
					.min * (rate / 100)).toFixed(2))
				this.list[this.index_1].price_list[this.index_2].endProfit = Number((this.list[this.index_1].price_list[
						this
						.index_2]
					.max * (rate / 100)).toFixed(2))
				this.list[this.index_1].price_list[this.index_2].add_price_rate = rate
			},
			// 获取区间价格
			getprice(res) {
				this.list[this.index_1].price_list[this.index_2].min = Number(res.min)
				this.list[this.index_1].price_list[this.index_2].max = Number(res.max)
				this.$refs.setRange.afterSale = false;
			},
			// 新增价格区间
			addHandle(index_1) {
				if (this.list[index_1].price_list.length > 19) {
					return this.$toast('最多可新增20条')
				} else {
					this.list[index_1].price_list.push({
						min: null,
						max: null,
						add_price_rate: null,
						startProfit: null,
						endProfit: null
					})
					this.index_1 = index_1
					this.index_2 = this.list[index_1].price_list.length - 1;

					this.$refs.setRange.afterSale = true;
				}

			},
			// 获取当前设置的索引
			setUp(index_1, index_2) {
				this.index_1 = index_1;
				this.index_2 = index_2;
				this.$refs.setRange.afterSale = true;
			},
			// 删除区间价格
			delHandle(item) {
				if (item.price_list.length == 0) {
					return this.$toast('暂无可删除的价格区间')
				}
				item.price_list.pop()
			},
			// 选择分类
			onCategory(categoryId, index) {
				let newId = []
				this.categoryIndex = index;
				this.activeIndex = [];
				this.list.forEach((item, index) => {
					if (item.category) {
						newId = newId.concat((item.category.split(",").map(item => Number(item))))
					}
				})
				let list = Array.from(new Set(newId));
				this.activeIndex = list
				uni.setStorageSync('list', list)
				this.$refs.category.afterSale = true;
			},
			findElementsById(arr, ids) {
				let result = []
				arr.forEach(item => {
					if (ids.indexOf(item.category_id) > -1) {
						result.push(item.name);
					}
					item.children.forEach(item1 => {
						if (ids.indexOf(item1.category_id) > -1) {
							result.push(item1.name);
						}
					});
				});
				return result;
			},
			// 获取分类
			getChoseCategory(res) {
				let nameList = [];
				let list = [];
				if (this.list[this.categoryIndex].category) {
					list = this.list[this.categoryIndex].category.split(",").map(item => Number(item))
				}
				let newList = list.concat(res.category_id);
				nameList = this.findElementsById(this.categoryList, newList);
				this.list[this.categoryIndex].category_name = nameList.join(',') + (nameList.length > 0 ? '等' : '');
				this.list[this.categoryIndex].category = newList.join(',')
				this.$refs.category.afterSale = false;
			},
			// 新增分类
			addCatego(index) {
				if (this.list > 19) {
					return this.$toast('暂无可新增的分类模块')
				}
				this.list.push({
					category_name: '',
					category: '',
					price_list: [],
				})
			},
			// 删除分类
			delCatego(index, type) {
				if (this.list.length == 1) {
					return this.$toast('暂无可删除的分类模块')
				}
				if (type == 1) {
					this.list.pop()
				} else {
					this.list.splice(index, 1)
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		min-height: 100%;
		padding-bottom: 60upx;
	}

	.ruleText {
		margin: 30rpx 50rpx;
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #8B8B8B;
		line-height: 32px;

	}

	::v-deep .uni-input-wrapper {
		width: 180rpx !important;
		text-align: center !important;
		height: 70rpx !important;
	}

	::v-deep uni-input {
		height: 70rpx !important;
		font-size: 28rpx;
	}

	.category_box {
		display: flex;

		.maxWith {
			max-width: 400rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			display: block;
		}
	}

	.vipInfo {
		.msg {
			background: #FFE7E7;
			border-radius: 0px 0px 0px 0px;
			opacity: 1;
			padding: 36upx 56upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {

				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #3B3B3B;

			}
		}

		.classifyContainer {
			padding-bottom: 200rpx;

			.classifyItem {
				padding: 36upx 56upx;
				background-color: #fff;
				margin-bottom: 14upx;

				.classTitle {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #292929;

				}

				.priceRange {
					margin-top: 40upx;

					.rangeItem {
						margin: 13upx 0;
						display: flex;
					}

					.fix {
						display: flex;
					}

					.rangeInput {
						width: 180rpx;
						height: 70rpx;
						border-radius: 4rpx;
						border: 2rpx solid #DADADA;
						text-align: center;
						line-height: 66rpx;
						margin-right: 50rpx;

						text {
							;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #3B3B3B;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}

					::v-deep .u-input {

						// height: 64upx;
						background: #FFFFFF;
						border-radius: 2px 2px 2px 2px;
						opacity: 1;
						border: 1px solid #DADADA;
						text-align: center !important;

					}

					.profit {
						min-width: 180rpx;
						border: none !important;
						background: transparent !important;
						line-height: 70rpx;
						text-align: center;

						::v-deep .uni-input-placeholder {
							display: none;
						}
					}
				}

				.rangeBtn {
					display: flex;
					margin-top: 30upx;
					border-top: 1px solid #E6E6E6;

					.rangeHandle {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 34rpx;

						.addFlag {
							width: 30upx;
							height: 30upx;
							background: #FF6551;
							border-radius: 50%;
							color: #fff;
							line-height: 26upx;
							text-align: center;
							opacity: 1;
						}

						.delBtn {
							width: 30upx;
							height: 30upx;
							line-height: 26upx;
							text-align: center;
							background: #BDBDBD;
							border-radius: 50%;
							color: #fff;
							opacity: 1;

						}

						text {

							font-size: 24upx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #3B3B3B;
							margin-left: 50upx;
						}
					}
				}
			}
		}
	}

	.category {
		display: flex;
		align-items: center;
		padding: 40rpx 0;

		.rangeHandle {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;

			.addFlag {
				width: 30upx;
				height: 30upx;
				background: #FF6551;
				border-radius: 50%;
				color: #fff;
				line-height: 26upx;
				text-align: center;
				opacity: 1;
			}

			.delBtn {
				width: 30upx;
				height: 30upx;
				line-height: 26upx;
				text-align: center;
				background: #BDBDBD;
				border-radius: 50%;
				color: #fff;
				opacity: 1;

			}

			text {

				font-size: 24upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #3B3B3B;
				margin-left: 10upx;
			}
		}
	}

	.price-fd {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 0.9375rem;
		z-index: 99;
		background-color: #fafafa;
		box-sizing: border-box;

		.btn {
			width: 630rpx;
			line-height: 88rpx;
			background: #F34A40;
			border-radius: 88rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
			margin: auto;
		}
	}
</style>
