<template>
	<view class="u-wrap">
		<view style="width: 100%;position: fixed;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)"> -->
				<li v-for="(item, index) in indexList" :key="index">
					<view class="name">
						<text>{{item.categoryName}}</text>
						<view @tap.stop="inputDialogToggle('edit', item)">
							<uni-icons type="compose" size='22'></uni-icons>
						</view>
					</view>
					<button class="bj-btn" @tap.stop="goGategoryLow(item.id)">编辑规格</button>
				</li>
			</ul>
		</view>
		<u-modal :show="show" :title="'删除'" :content="'是否确认删除此分类？'" showCancelButton="true" @cancel="show = false"
			@confirm="delItemModal"></u-modal>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" :title="dialogTit" :value="inputVal" placeholder="请输入名称"
				@confirm="dialogInputConfirm" @close="dialogClose">
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="delDialog" type="dialog">
			<view class="type-popup" style="width:100%;margin-bottom: 0;border-radius: 0;height: 650rpx;border-radius: 20rpx;">
				<view style="height: 120rpx;font-size: 36rpx;font-weight: bold;line-height: 120rpx;text-align: center;">
					编辑分类
				</view>
				<view style="height: 80rpx;font-size: 28rpx;line-height: 80rpx;text-align: center;">
					请在下方输入框中输入分类名
				</view>
				<view style="width: 90%;margin: 40rpx auto 0;">
					分类名称：
					<uni-easyinput type="text" v-model="inputVal" @blur="handleBlur" placeholder="请输入规格值" />
				</view>
				<view style="width: 90%;margin: 40rpx auto 0;">
					排序：<uni-easyinput type="text" v-model="sortTextEdit" @blur="handleBlurSort" placeholder="可设置排序" />
				</view>
				<view style="width: 100%;height: 90rpx;line-height: 90rpx;text-align: center;border-radius: 0;color: #fff;display: flex;position: absolute;bottom: 0;">
					<view style="flex: 1;background: linear-gradient(90deg, #60F3FF, #088FEB);" v-if="inputVal != '默认分类'" @tap="dialogDel">删除</view>
					<view style="flex: 1;background: linear-gradient(90deg, #FF9797, #FFC1E0);" @tap="dialogInputConfirm">确认</view>
				</view>
			</view>
		</uni-popup>
		<!-- 添加分类弹出层 -->
		<uni-popup ref="addTypeDialog" background-color="#fff">
			<view class="add-popup-content">
				<view class="add-popup-title">
					<text>新增分类</text>
					<uni-icons @tap='close' type="closeempty" color='red' size="16"
						style="height:40rpx;line-height: 40rpx;position: absolute !important;bottom:0;right: 30rpx;"></uni-icons>
				</view>
				<view class="add-popup-container">
					<input type="text" v-model="typeText" style="width: 100%;border: 1px solid #eee;height: 80rpx;padding-left: 20rpx;margin:20rpx 0;font-size: 25rpx;line-height: 80rpx;" 
						placeholder="请输入分类名称">
					<input type="text" v-model="sortText" style="width: 100%;border: 1px solid #eee;height: 80rpx;padding-left: 20rpx;margin:20rpx 0;font-size: 25rpx;line-height: 80rpx;"
							placeholder="可设置分类排序">
					<view class="add-popup-bottom">
						<view class="add-popup-btn" @tap="dialogInputConfirm(typeText)">确认</view>
					</view>
				</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>
	</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
					}]
				}],
				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.getGategoryList()
		},
		methods: {
			//初始化获取分类列表
			getGategoryList() {
				this.NB.sendRequest('/app/productCategory/list', {}, false, 'get', 'application/json').then(res => {
					if (res.code == 200) {
						this.indexList = res.result;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			//判断需要打开哪个弹窗（删除弹窗、取消弹窗）
			inputDialogToggle(type, item, parent) {
				this.typeModel = type;
				if (type == 'edit') {
					this.inputVal = item.categoryName;
					this.editItem = item;
					this.sortTextEdit = (this.editItem.sort == null || this.editItem.sort == 'null') ? '' : this.editItem.sort
					this.$refs.delDialog.open('bottom')
				} else if (type == 'add') {
					this.inputVal = '';
					this.isOpenId = item;
					this.dialogTit = '输入分类名'
					this.$refs.addTypeDialog.open('bottom')
				}

			},
			close(){
				this.$refs.addTypeDialog.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/json').then(data => {
					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/json').then(data => {
								if (res1.code == 200) {
									if (res1.result.length > 0) {
										uni.showModal({
											title: "提示",
											content: "此分类已经维护了子分类，确定继续删除吗？",
											confirmText: '取消',
											cancelText: '确认',
											success: function(res2) {
												if (res2.cancel) {
													that.delItemModal()
												}
											}
										})
									} else {
										that.show = true
									}
								}
							})
						}
					}
				})
			},
			//点击选择列表，带参数 返回上一页
			clickList(item) {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.typeItem = item
				uni.navigateBack({
					delta: 1
				})
			},
			//分类编辑（新增，修改）
			dialogInputConfirm(e) {
				let that = this;
				switch (that.typeModel) {
					case 'add':
						for (let i = 0; i < that.indexList.length; i++) {
							if (that.indexList[i].categoryName == e) {
								uni.showToast({
									title: "请勿重复添加！",
									icon: 'error'
								})
								return
							}
						}
						if(e == ''){
							uni.showToast({
								title: "请输入分类名",
								icon: 'none'
							})
							return
						}
						//application/x-www-form-urlencoded
						this.NB.sendRequest('/app/productCategory/batchSaveCategoryAndAttribute', {
							categoryName: e,
							sort: that.sortText,
							productAttributeOfAddVos:that.multipleList
						}, false, 'POST', 'application/json').then(data => {
							if (res.code == 200) {
								uni.showToast({
									title: "添加成功",
									icon: 'none'
								})
								that.$refs.addTypeDialog.close()
								that.sortText = ''
								
								that.getGategoryList()
							} else {
								uni.showToast({
									title: "添加失败",
									icon: 'none'
								})
							}
						})
						for(var i=0;i<that.defaultList.length;i++){
							for(var m=0;m<that.defaultList[i].list.length;m++){
								that.defaultList[i].list[m].checked = false
							}
						}
						that.typeText = ''
						that.multipleList = []
						break;
					case 'edit':
						this.NB.sendRequest('/app/productCategory/edit', {
							categoryName: this.inputVal,
							sort: that.sortTextEdit,
							id: that.editItem.id
						}, false, 'POST', 'application/json').then(data => {
							if (res.code == 200) {
								that.getGategoryList()
								that.sortText = ''
								uni.showToast({
									title: "修改成功",
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: "修改失败",
									icon: 'none'
								})
							}
						})
						break;
					default:
				}
				that.$refs.delDialog.close()
				that.$refs.inputClose.val = ''
				this.inputVal = ""
			},
			//点击取消按钮
			dialogClose() {
				this.inputVal = '';
				this.specVal = '';
				this.$refs.inputClose.val = ''
				this.$refs.addClose.val = ''
				
			},
			//带删除按钮的弹窗
			dialogDel() {
				this.delItem(this.editItem, 'del')
			},
			delItemModal() {
				this.show = false;
				if (this.delType == 'del') {
					this.NB.sendRequest('/app/productCategory/delById', {
						id: this.delItems.id,
					}, false, 'POST', 'application/json').then(data => {
						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'
							})
						}
					})
				}
			},
			delItem(item, type) {
				this.delType = type;
				this.delItems = item;
				this.getTypeToNum(this.delItems.id)
			},
			//跳转子分类页
			goGategoryLow(id) {
				uni.navigateTo({
					url: '../goods/gategoryLow?id=' + id
				})
			},
			//选择多个规格保存
			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: 150rpx 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%;
	}

	.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 {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		width: 90%;
		height: 400rpx;
		background-color: #fff;
		overflow: scroll;
	}
	
	.add-popup-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
	}
	
	.add-popup-container {
		margin-top: 20rpx;
	}
	
	.add-popup-bottom {
		display: flex;
		height: 80rpx;
		color: #fff;
		line-height: 80rpx;
		margin-top: 50rpx;
	}
	
	.add-popup-btn {
		flex: 1;
		text-align: center;
		background: linear-gradient(90deg, #60F3FF, #088FEB);
	}
	.title-fur {
		width: 95%;
		height: 70rpx;
		margin: 0 auto;
		border-bottom: 1px solid #eee;
		.name {
			font-size: 30rpx;
			width: 90%;
			float: left;
			height: 70rpx;
			line-height: 70rpx;
		}
	}
	.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;
	}
</style>