<template>
	<view class="u-wrap">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name">
					属性管理
				</view>
			</view>
		</view>
		<view style="width: 100%;position: fixed;bottom: 10px;background: #fff;z-index: 99;">
			<button size="default" type="default" @tap="inputDialogToggle('add')" hover-class="is-hover">添加属性</button>
		</view>
		<view class="card-list">
			<ul>
				<li v-for="(item, index) in indexList" :key="index" @tap="clickList(item)">
					<view class="name">
						<text>{{item.attributeName}}</text>
						<view style="width: 10px;"></view>
						<uni-icons type="compose" size="22" v-if="item.attributeName != '默认属性'" @tap.stop="inputDialogToggle('edit', item)"></uni-icons>
					</view>
					<button class="bj-btn" @tap.stop="goGategoryLow(item)">管理属性</button>
				</li>
			</ul>
		</view>
		<u-modal :show="show" :title="'删除'" :content="'是否确认删除此属性？'" showCancelButton="true" @cancel="show = false"
			@confirm="delItemModal"></u-modal>
		<uni-popup ref="delDialog" background-color="#fff">
			<view class="add-popup-content attr-name-popup">
				<view class="add-popup-title">
					<text>编辑属性</text>
					<uni-icons class="popup-close" @tap='close' type="closeempty" color='#777' size="18"></uni-icons>
				</view>
				<view class="add-popup-container">
					<view class="form-field">
						<view class="form-label">属性名称</view>
						<uni-easyinput type="text" v-model="inputVal" @blur="handleBlur" placeholder="请输入属性值" />
					</view>
					<view class="popup-actions">
						<view class="popup-action danger" v-if="inputVal != '默认属性'" @tap="dialogDel">删除</view>
						<view class="popup-action primary" @tap="dialogInputConfirm">确认</view>
					</view>
					<!-- <ul>
						<li v-for="(item,index) in defaultList" :key="index">
							<view class="title-fur">
								<view class="name">{{item.name}}</view>
								<u-icon size="20" name="plus" color="#5fd9ee"
									@tap="toggle(index) "></u-icon>
							</view>
							<view class="content-fur">
								<view class="content-low" :class="item1.checked?'checked':''" v-for="(item1,index1) in item.list" :key="index1"
									@tap.stop="addMultipleType(item,item1.value,index1)">{{item1.value}}</view>
							</view>
						</li>
					</ul> -->
				</view>
			</view>
		</uni-popup>
		<!-- 添加属性弹出层 -->
		<uni-popup ref="addTypeDialog" background-color="#fff">
			<view class="add-popup-content attr-name-popup">
				<view class="add-popup-title">
					<text>新增属性</text>
					<uni-icons class="popup-close" @tap='close' type="closeempty" color='#777' size="18"></uni-icons>
				</view>
				<view class="add-popup-container">
					<view class="form-field">
						<view class="form-label">属性名称</view>
						<input type="text" v-model="typeText" class="popup-input" placeholder="请输入属性名称">
					</view>
					<!-- <ul>
						<li v-for="(item,index) in defaultList" :key="index">
							<view class="title-fur">
								<view class="name">{{item.name}}</view>
								<u-icon size="20" name="plus" color="#5fd9ee"
									@tap="toggle(index) "></u-icon>
							</view>
							<view class="content-fur">
								<view class="content-low" :class="item1.checked?'checked':''" v-for="(item1,index1) in item.list" :key="index1"
									@tap.stop="addMultipleType(item,item1.value,index1)">{{item1.value}}</view>
							</view>
						</li>
					</ul> -->
					<view class="add-popup-bottom">
						<view class="add-popup-btn" @tap="dialogInputConfirm(typeText)">确认</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="attrValueDialog" background-color="#fff">
			<view class="add-popup-content attr-value-popup">
				<view class="add-popup-title">
					<text>管理属性</text>
					<uni-icons class="popup-close" @tap='close' type="closeempty" color='#777' size="18"></uni-icons>
				</view>
				<view class="add-popup-container">
					<view class="popup-tip">
						点击右侧“+”号可新增本店铺专属属性值
					</view>
					<view class="attr-value-header">
						<view class="attr-value-title">
							属性列表
						</view>
						<view class="add-value-btn" @tap="toggle()">
							<uni-icons type="plusempty" color="#00231C" size="18"></uni-icons>
							<text>新增</text>
						</view>
					</view>
					<ul class="attr-value-list">
						<li v-for="(item,index) in defaultList" :key="index">
							<view class="title-fur">
								<view class="name">{{item.value}}</view>
								<view class="value-actions" v-if="inputVal != '默认属性'">
									<view class="btn" @tap="editValue(item)">修改</view>
									<view class="btn danger-text" @tap="delValue(item)">删除</view>
								</view>
							</view>
						</li>
					</ul> 
				</view>
			</view>
		</uni-popup>
		
		<!-- 查看商品库存弹出层 -->
		<uni-popup ref="carPopup" background-color="#fff">
			<view class="popup-content" style="height:auto !important;">
				<view style="font-size: 36rpx;font-weight: bold;text-align: center;">提示</view>
				<view v-if="goodsList !=''"
					style="width:100%;font-weight:bold;text-align: center;font-size: 28rpx;margin: 20rpx 0;">
					“{{goodsList[0].productName}}”属性下有以下库存，确认继续删除吗？
				</view>
				<view class="tui-order-item boxbg">
					<view style="display: flex;border-bottom: 1px solid #eee;height: 50rpx;line-height: 50rpx;">
						<view style="width: 70%;text-align: center;border-right: 1px solid #eee;">商品属性</view>
						<view style="width: 29%;text-align: center;">数量</view>
					</view>
					<view class="shop-box" v-for="(item,index) in goodsList" :key="index" style="position: relative;">
						<view style='height: 50rpx;line-height: 50rpx;'>
							<view style="width: 70%;text-align: center;border-right: 1px solid #eee;float: left;height: 50rpx;overflow: hidden;">
								{{item.attributeList | sliceMsg}}
							</view>
							<view style="width: 29%;text-align: center;float: left;">
								{{item.stockCount}}
							</view>
						</view>
					</view>
				</view>
				<!-- <u-loadmore :status="status" /> -->
				<view class="popup-bottom">
					<view class="popup-bottom-left">
						<view class="bottom-btn" @tap="this.$refs.carPopup.close()"
							style="background: linear-gradient(90deg, #FF9797, #FFC1E0);">再想想</view>
					</view>
					<view class="popup-bottom-right">
						<view class="bottom-btn" @tap="this.show = true">确认删除</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="addDialog" background-color="#fff">
			<view class="add-popup-content value-edit-popup">
				<view class="add-popup-title">
					<text>{{isEdieValue ? '修改属性值' : '新增属性值'}}</text>
					<uni-icons class="popup-close" @tap='$refs.addDialog.close()' type="closeempty" color='#777' size="18"></uni-icons>
				</view>
				<view class="add-popup-container">
					<view class="form-field">
						<view class="form-label">属性值名称</view>
						<input type="text" v-model="specVal" class="popup-input" placeholder="请输入属性值名称">
					</view>
					<view class="popup-actions">
						<view class="popup-action plain" @tap="$refs.addDialog.close()">取消</view>
						<view class="popup-action primary" @tap="addSpec(specVal)">确认</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				indexList: [],
				show: false,
				inputVal: '',
				specVal:'',
				addIndex:0,
				typeModel: '',
				editItem: {},
				delItems: {},
				isOpenId: '',
				delType: '',
				goodsList: [],
				dialogTit: '输入属性名',
				typeText:'',
				sortText:'',
				sortTextEdit:'',
				defaultList:[{
					name:'颜色',
					list:[{
						value:'均色',
						checked:false,
					},{
						value:'白色',
						checked:false,
					},{
						value:'黑色',
						checked:false,
					},{
						value:'浅蓝',
						checked:false,
					},{
						value:'蓝色',
						checked:false,
					},{
						value:'灰色',
						checked:false,
					},{
						value:'咖色',
						checked:false,
					},{
						value:'紫色',
						checked:false,
					},{
						value:'红色',
						checked:false,
					},{
						value:'米色',
						checked:false,
					}]
				},{
					name:'尺码',
					list:[{
						value:'均码',
						checked:false,
					},{
						value:'XS码',
						checked:false
					},{
						value:'S码',
						checked:false,
					},{
						value:'M码',
						checked:false,
					},{
						value:'L码',
						checked:false,
					},{
						value:'XL码',
						checked:false,
					},{
						value:'XXL码',
						checked:false,
					},{
						value:'XXXL码',
						checked:false,
					},{
						value:'XXXXL码',
						checked:false,
					},{
						value:'25码',
						checked:false
					},{
						value:'26码',
						checked:false
					},{
						value:'27码',
						checked:false
					},{
						value:'28码',
						checked:false
					},{
						value:'29码',
						checked:false
					},{
						value:'30码',
						checked:false
					},{
						value:'31码',
						checked:false
					},{
						value:'32码',
						checked:false
					},{
						value:'33码',
						checked:false
					},{
						value:'34码',
						checked:false
					},{
						value:'35码',
						checked:false
					},{
						value:'36码',
						checked:false
					},{
						value:'37码',
						checked:false
					},{
						value:'38码',
						checked:false
					},{
						value:'39码',
						checked:false
					},{
						value:'40码',
						checked:false
					},{
						value:'41码',
						checked:false
					},{
						value:'42码',
						checked:false
					},{
						value:'43码',
						checked:false
					},{
						value:'44码',
						checked:false
					},{
						value:'45码',
						checked:false
					}]
				}],
				attrId:'',
				valueEditId:'',
				isEdieValue:false,
				multipleList:[]
			}
		},
		computed: {

		},
		filters: {
			sliceMsg(val) {
				var name = ''
				if (typeof(val) == 'string') {
					let newObj = JSON.parse(val)
					for (let as in newObj) {
						name += newObj[as] + '/'
					}
				}
				return name;
			}
		},
		onShow() {
			this.attrId = uni.getStorageSync('attrId');
			this.getGategoryList()
		},
		methods: {
			editValue(item){
				this.isEdieValue = true
				this.valueEditId = item.id
				this.specVal = item.value
				this.$refs.addDialog.open()
			},
			delValue(item){
				this.NB.sendRequest("/app/productAttributeValue/delById", {
					id: item.id
				}, false, 'post', 'application/x-www-form-urlencoded').then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: "删除成功",
							icon: 'none'
						})
						this.goGategoryLow(this.editItem)
						this.$forceUpdate()
					} else {
						uni.showToast({
							title: "删除失败",
							icon: 'none'
						})
						return;
					}
					uni.hideLoading();
				}).catch((res) => {});
			},
			//初始化获取属性列表
			getGategoryList() {
				this.NB.sendRequest("/app/productAttribute/selectByCategoryId", {
					categoryId:this.attrId
				}, false, 'post', 'application/x-www-form-urlencoded').then((res) => {
					if (res.code == 200) {
						this.indexList = res.result;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					uni.hideLoading();
				}).catch((res) => {});
			},
			//判断需要打开哪个弹窗（删除弹窗、取消弹窗）
			inputDialogToggle(type, item, parent) {
				this.typeModel = type;
				if (type == 'edit') {
					this.inputVal = item.attributeName;
					this.editItem = item;
					this.$refs.delDialog.open('bottom')
				} else if (type == 'add') {
					this.inputVal = '';
					this.isOpenId = item;
					this.dialogTit = '输入属性名'
					this.$refs.addTypeDialog.open('bottom')
				}

			},
			close(){
				this.$refs.attrValueDialog.close()
				this.$refs.delDialog.close()
				this.$refs.addTypeDialog.close()
				this.$refs.addDialog.close()
			},
			handleBlur(e){
				this.inputVal = e.detail.value
			},
			handleBlurSort(e){
				this.sortTextEdit = e.detail.value
			},
			//查询属性下有没有库存
			getTypeToNum(id) {
				let that = this;
				this.NB.sendRequest("/app/stock/getlistByAttributeList", {
					categoryId: id,
				}, false, 'post', 'application/x-www-form-urlencoded').then((res) => {
					if (res.code == 200) {
						if (res.result != '') {
							this.goodsList = res.result
							this.$refs.carPopup.open('bottom')
						} else {
							this.NB.sendRequest("/app/productAttribute/selectByCategoryId", {
								categoryId: this.delItems.id
							}, false, 'post', 'application/x-www-form-urlencoded').then((res1) => {
								if (res1.code == 200) {
									if (res1.result.length > 0) {
										uni.showModal({
											title: "提示",
											content: "此属性已经维护了子属性，确定继续删除吗？",
											success: function(res2) {
												if (res2.confirm) {
													that.delItemModal()
												}
											}
										})
									} else {
										that.show = true
									}
								} else {
									uni.showToast({
										title: res1.message,
										icon: 'none'
									})
								}
								uni.hideLoading();
							}).catch((res) => {});
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					uni.hideLoading();
				}).catch((res) => {});
			},
			//点击选择列表，带参数 返回上一页
			clickList(item) {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.typeItem = item
				uni.navigateBack({
					delta: 1
				})
			},
			back() {
				uni.navigateBack()
			},
			toggle(){
				this.specVal = ''
				this.isEdieValue = false
				this.$refs.addDialog.open()
			},
			addSpec(e){
				let that = this;
				if(e == ''){
					uni.showToast({
						title: "请输入属性值名称",
						icon: 'none'
					})
					return
				}
				if(this.isEdieValue){
					this.NB.sendRequest("/app/productAttributeValue/edit", {
						id: that.valueEditId,
						value:e
					}, false, 'post', 'application/x-www-form-urlencoded').then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: "修改成功",
								icon: 'none'
							})
							that.$refs.addDialog.close()
							that.goGategoryLow(that.editItem)
							that.$forceUpdate()
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
						uni.hideLoading();
					}).catch((res) => {});
				}else{
					this.NB.sendRequest("/app/productAttributeValue/save", {
						attributeId: that.editItem.id,
						value:e
					}, false, 'post', 'application/x-www-form-urlencoded').then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: "添加成功",
								icon: 'none'
							})
							that.$refs.addDialog.close()
							that.goGategoryLow(that.editItem)
							that.$forceUpdate()
						} else {
							uni.showToast({
								title: "添加失败",
								icon: 'none'
							})
						}
						uni.hideLoading();
					}).catch((res) => {});
				}
			},
			//属性编辑（新增，修改）
			dialogInputConfirm(e) {
				let that = this;
				switch (that.typeModel) {
					case 'add':
						for (let i = 0; i < that.indexList.length; i++) {
							if (that.indexList[i].attributeName == e) {
								uni.showToast({
									title: "请勿重复添加！",
									icon: 'error'
								})
								return
							}
						}
						if(e == ''){
							uni.showToast({
								title: "请输入属性名",
								icon: 'none'
							})
							return
						}
						this.NB.sendRequest("/app/productAttribute/save", {
							categoryId: that.attrId,
							attributeName:e
						}, false, 'post', 'application/x-www-form-urlencoded').then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: "添加成功",
									icon: 'none'
								})
								that.$refs.addTypeDialog.close()
								that.getGategoryList()
							} else {
								uni.showToast({
									title: "添加失败",
									icon: 'none'
								})
							}
							uni.hideLoading();
						}).catch((res) => {});
						
						that.typeText = ''
						that.multipleList = []
						break;
					case 'edit':
						this.NB.sendRequest("/app/productAttribute/edit", {
							attributeName: this.inputVal,
							id: that.editItem.id
						}, false, 'post', 'application/x-www-form-urlencoded').then((res) => {
							if (res.code == 200) {
								that.getGategoryList()
								that.sortText = ''
								uni.showToast({
									title: "修改成功",
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: "修改失败",
									icon: 'none'
								})
							}
							uni.hideLoading();
						}).catch((res) => {});
						break;
					default:
				}
				that.$refs.delDialog.close()
				this.inputVal = ""
			},
			//点击取消按钮
			dialogClose() {
				this.inputVal = '';
				this.specVal = '';
				
			},
			//带删除按钮的弹窗
			dialogDel() {
				this.NB.sendRequest("/app/productAttribute/delById", {
					id: this.editItem.id,
				}, false, 'post', 'application/x-www-form-urlencoded').then((res) => {
					if (res.code == 200) {
						this.getGategoryList()
						uni.showToast({
							title: "删除成功",
							icon: 'none'
						})
						this.$refs.carPopup.close()
						this.$refs.delDialog.close()
					} else {
						uni.showToast({
							title: "删除失败",
							icon: 'none'
						})
					}
					uni.hideLoading();
				}).catch((res) => {});
			},
			delItemModal() {
				this.show = false;
				if (this.delType == 'del') {
					this.NB.sendRequest("/app/productCategory/delById", {
						id: this.delItems.id,
					}, false, 'post', 'application/x-www-form-urlencoded').then((res) => {
						if (res.code == 200) {
							this.getGategoryList()
							uni.showToast({
								title: "删除成功",
								icon: 'none'
							})
							this.$refs.carPopup.close()
							this.$refs.delDialog.close()
						} else {
							uni.showToast({
								title: "删除失败",
								icon: 'none'
							})
						}
						uni.hideLoading();
					}).catch((res) => {});
				}
			},
			delItem(item, type) {
				this.delType = type;
				this.delItems = item;
				this.getTypeToNum(this.delItems.id)
			},
			//跳转子属性页
			goGategoryLow(item) {
				this.editItem = item
				this.NB.sendRequest("/app/productAttributeValue/selectByAttributeId", {
					id: item.id,
				}, false, 'get', 'application/x-www-form-urlencoded').then((res) => {
					if (res.code == 200) {
						this.defaultList = res.result;
						this.$refs.attrValueDialog.open();
					} else {
						uni.showToast({
							title: "删除失败",
							icon: 'none'
						})
					}
					uni.hideLoading();
				}).catch((res) => {});
			},
			//选择多个属性保存
			addMultipleType(item,item1,index){
				
				
				item.list[index].checked = !item.list[index].checked
				var list = []
				if(this.multipleList == ''){
					
					list.push(item.list[index])
					var data = {
						attributeName:item.name,
						productAttributeValueVoList: list
					}
					this.multipleList.push(data)
				}else{
					for(var i=0;i<this.multipleList.length;i++){
						if(this.multipleList[i].attributeName == item.name){ //同种属性
							
							
							for(var m=0;m<this.multipleList[i].productAttributeValueVoList.length;m++){
								if(this.multipleList[i].productAttributeValueVoList[m].value == item.list[index].value){ //属性相同
									
									this.multipleList[i].productAttributeValueVoList.splice(m,1)
									
									return;
								}else{ //属性不同
									if(m+1 == this.multipleList[i].productAttributeValueVoList.length){
										
										this.multipleList[i].productAttributeValueVoList.push(item.list[index])
										
										return;
									}
								}
							}
						}else{ //不同属性
							if(this.multipleList.length == i+1){
								
								
								list.push(item.list[index])
								var data = {
									attributeName:item.name,
									productAttributeValueVoList: list
								}
								this.multipleList.push(data)
								
								return;
							}
						}
					}
				}
				
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,.page1{
		font-size: 28rpx;
	}
	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;

		.top {
			line-height: 70rpx;
			margin: 20rpx 0;
			padding: 0 20rpx;
			background-color: #fff;

			.u-collapse-content {
				.icon {
					display: flex;
					float: right;

					.u-icon {
						flex: 1;
					}
				}

			}

			.name {
				font-size: 28rpx;

				.rightBox {
					display: flex;
					float: right;
				}
			}

			.attr {
				line-height: 56rpx;
				margin-left: 20rpx;

				.attrName {
					color: #767a82;
					font-size: 24rpx;
					display: flex;
					box-sizing: border-box;
					width: 100%;
					margin-top: 20rpx;
				}

				.attrs {
					margin-left: 20rpx;

					.u-tag-wrapper {
						width: 20%;
					}
				}
			}
		}
	}

	button {
		color: #ffffff;
		background: #5fd9ee;
		width: 90%;
		margin: 20rpx auto 20rpx;
	}

	.card-list {
		width: 95%;
		border-radius: 10upx;
		background: #fff;
		height: auto;
		margin: -200rpx auto 0;

	}
	.checked{
		background: #60F3FF;
		color: #fff;
	}
	.card-list ul {}

	.card-list li {
		width: 95%;
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 20rpx;
		font-size: 37rpx;
		border-bottom: 0.5px solid #eee;
		margin: 0 auto;
	}

	.bj-btn {
		width: 120rpx;
		height: 60rpx;
		font-size: 26rpx;
		background: red;
		margin: 20rpx 0;
		float: left;
		padding: 0;
		line-height: 60rpx;
	}

	.name {
		width: 75%;
		float: left;
		display: flex;
	}

	.data-v-5ff5d986 {}

	.popup-content {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		height: 1200rpx;
		background-color: #fff;
		margin-bottom: 100rpx;
		overflow: scroll;
	}

	.popup-container {
		width: 100%;
		background: #fff;
		height: 50rpx;
	}

	.checkList {
		display: flex;
		height: 50rpx;
		font-size: 28rpx;
		line-height: 50rpx;
		margin: 20rpx 0;
	}

	.checkList-box {
		height: 50rpx;
		width: 60%;
	}
	.title {
		flex-shrink: 0;
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		background-size: 100%;
		width: 100%;
		height: 400rpx;
		padding-bottom: 20rpx;
	}
	
	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}
	
	.back-btn {
		padding-top: 110rpx;
	}
	.btn{
		min-width: 88rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		color: #00231C;
		border-radius: 48rpx;
		background: rgba(166, 255, 234, 0.45);
		margin-left: 16rpx;
		font-size: 24rpx;
	}
	.danger-text {
		color: #FF5A4F;
		background: #FFF0E6;
	}
	
	.title-search {
		margin-top: 110rpx;
		display: flex;
		background: #fff;
		height: 54rpx;
		margin-left: 20rpx;
		border-radius: 54rpx;
		width: 380rpx;
		flex: 1;
	
		input {
			height: 54rpx;
			line-height: 54rpx;
		}
	}
	.popup-bottom {
		width: 95%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 2.5%;
		display: flex;
		z-index: 99;
		background: #fff;
	}

	.popup-bottom-left {
		width: 50%;
		line-height: 80rpx;
	}

	.popup-bottom-right {
		width: 50%;
		line-height: 100rpx;
	}

	.bottom-btn {
		width: 70%;
		line-height: 70rpx;
		height: 70rpx;
		text-align: center;
		/* margin-top: 10rpx; */
		color: #fff;
		font-size: 28rpx;
		margin: 0 auto;
		background: linear-gradient(90deg, #60F3FF, #088FEB);
		border-radius: 70rpx;
	}
	.add-popup-content {
		width: 640rpx;
		max-width: 92vw;
		max-height: 82vh;
		background: #fff;
		border-radius: 28rpx;
		padding: 34rpx 30rpx 30rpx;
		box-sizing: border-box;
		overflow: hidden;
	}
	.attr-name-popup {
		width: 100vw;
		max-width: 100vw;
		border-radius: 28rpx 28rpx 0 0;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	}
	
	.add-popup-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: left;
		position: relative;
		color: #00231C;
		padding-right: 70rpx;
	}
	.popup-close {
		position: absolute !important;
		top: 4rpx;
		right: 0;
		width: 48rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		border-radius: 50%;
		background: #F7F8F8;
	}
	
	.add-popup-container {
		margin-top: 28rpx;
	}
	.form-field {
		margin-top: 26rpx;
	}
	.form-label {
		font-size: 28rpx;
		font-weight: 700;
		color: #00231C;
		margin-bottom: 16rpx;
	}
	.popup-input {
		width: 100%;
		height: 84rpx;
		line-height: 84rpx;
		border: 2rpx solid #E8ECEB;
		background: #F7F8F8;
		border-radius: 18rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		font-size: 28rpx;
	}
	.popup-actions {
		display: flex;
		gap: 20rpx;
		margin-top: 42rpx;
	}
	.popup-action {
		flex: 1;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		border-radius: 84rpx;
		font-size: 30rpx;
		font-weight: 700;
	}
	.popup-action.primary {
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		color: #00231C;
	}
	.popup-action.danger {
		background: #FFF0E6;
		color: #FF5A4F;
	}
	.popup-action.plain {
		background: #F7F8F8;
		color: #00231C;
	}
	.title-name {
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}
	.add-popup-bottom {
		display: flex;
		height: 80rpx;
		color: #fff;
		line-height: 80rpx;
		margin-top: 42rpx;
	}
	
	.add-popup-btn {
		flex: 1;
		text-align: center;
		height: 84rpx;
		line-height: 84rpx;
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		color: #00231C;
		border-radius: 84rpx;
		font-size: 30rpx;
		font-weight: 700;
	}
	.attr-value-popup {
		width: 680rpx;
		padding-bottom: 20rpx;
	}
	.value-edit-popup {
		width: 620rpx;
	}
	.popup-tip {
		padding: 18rpx 22rpx;
		background: rgba(166, 255, 234, 0.24);
		color: #005849;
		border-radius: 16rpx;
		font-size: 24rpx;
		line-height: 36rpx;
	}
	.attr-value-header {
		display: flex;
		align-items: center;
		height: 88rpx;
	}
	.attr-value-title {
		flex: 1;
		font-size: 30rpx;
		font-weight: 700;
		color: #00231C;
	}
	.add-value-btn {
		display: flex;
		align-items: center;
		height: 58rpx;
		line-height: 58rpx;
		padding: 0 22rpx;
		border-radius: 58rpx;
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		font-size: 26rpx;
		font-weight: 700;
		color: #00231C;
	}
	.add-value-btn text {
		margin-left: 6rpx;
	}
	.attr-value-list {
		max-height: 58vh;
		overflow-y: auto;
		padding-bottom: 10rpx;
	}
	.title-fur {
		width: 100%;
		min-height: 82rpx;
		margin: 0 auto;
		border-bottom: 1px solid #eee;
		display: flex;
		align-items: center;
		.name {
			font-size: 30rpx;
			flex: 1;
			min-width: 0;
			line-height: 40rpx;
			color: #00231C;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.value-actions {
		display: flex;
		align-items: center;
	}
	.content-fur {
		padding-bottom: 25rpx;
	}
	
	.content-low {
		width: auto;
		border: 1px solid #eee;
		display: inline-block;
		min-width: 90rpx;
		padding: 5rpx;
		font-size: 35rpx;
		text-align: center;
		color: #777;
		margin: 20rpx 0 0 20rpx;
	}
	.type-popup{
		width: 500rpx;
		height: auto;
		background: #fff;
		border-radius: 10px;
		position: relative;
		margin-bottom: 40rpx;
	}
	@media screen and (min-width: 760px) {
		.add-popup-content{
			max-height: 700px !important;
		}
		.vue-ref{
			padding-bottom:0 !important;
		}
	}
</style>