<template>
	<view class="safe-area-inset-bottom">
		<u-cell-item  title="已添加标签" hover-class="none" :arrow="false" :value-style="valueStyle" :value="isEdit?'完成':'编辑'" @click="edit"></u-cell-item>
		<view class="content">
			<u-row gutter="0" justify="center" >
				<u-col span="3" v-for="(item,index) in tagsList" :key="index" >
					<view class="item" >
						<text>{{item.dictKey}}</text>
						<u-icon v-if="isEdit" @click="deleteTag(item,index)" class="u-icon" name="close-circle-fill" ></u-icon>
					</view>
				</u-col>
				<u-col span="3">
					<view class="item add" @click="show=true"><u-icon name="plus"></u-icon></view>
				</u-col>
			</u-row>
		</view>
		<u-popup v-model="show" :safe-area-inset-bottom="true" mode="bottom">
			<view class="popup-title">添加新标签</view>
			<scroll-view scroll-y="true">
				<view class="popup-content">
					<view v-for="(item,index) in tagsSelect" :class="[selectTags.indexOf(item.id)!='-1'?'active':'','popupItem']" :key="index" @click="selectTag(item)">{{item.dictValue}}</view>
				</view>
			</scroll-view>
			<view class="popup-confirm" @click="getSetTag">确定</view>
		</u-popup>
	</view>
</template>

<script>
	import myBar from "@/components/my-bar.vue"
	export default{
		components:{
			myBar
		},
		data(){
			return{
				valueStyle:{
					'color':'#EF9944'
				},
				tagsList:[],
				tagsSelect:[],
				isEdit:false,
				show:false,
				selectTags:[],
				labelKey:[],
				labelParentIds:new Set()
			}
		},
		onLoad() {
			this.getTagManageList()
			this.getTagSelect()
		},
		methods:{
			getTagManageList(){
				let params = {
					id:this.vuex_mallId
				}
				this.$api.mall.detail(params).then(res => {
					let detail=res.data
					if (detail.labelParentIds) {
						let tmp= detail.labelParentIds.split(",")
						this.labelParentIds=new Set(tmp)
						console.log(this.labelParentIds);
					}
					this.labelKey=detail.labelKey? detail.labelKey.split(","):[]
					this.tagsList =detail.labelJson?JSON.parse(detail.labelJson):[]
					this.selectTags =detail.labelValue?detail.labelValue.split(","):[]
				})
			},
			selectTag(item){
				let id=item.id
				let name=item.dictValue
				let parentId=item.parentId
				
				if(this.selectTags.indexOf(id)=="-1"){
					this.selectTags.push(id)
					this.labelKey.push(name)
					this.labelParentIds.add(parentId)
					
				}else{
					let idx = this.selectTags.indexOf(id)
					this.selectTags.splice(idx,1)
					this.labelKey.splice(idx,1)
					this.labelParentIds.delete(parentId)
				}
			},
			getTagSelect(){
				let params = {
					current:1,
					size:50,
					code:'business_label',
					parentId:'1430415753412112385'
				}
				this.$api.mall.getTagSelect(params).then(res => {
					this.tagsSelect = res.data
				})
			},
			edit(){
				this.isEdit = !this.isEdit
			},
			getSetTag(type){
				let tmp=this.tagsSelect.filter(item=>this.selectTags.includes(item.id))
				let labelJson= JSON.stringify(tmp)
				
				let params = {}
				params['labelKey'] = this.labelKey.length>0?this.labelKey.join(","):''
				params['labelValue'] = this.selectTags.length>0?this.selectTags.join(","):''
				params['id'] = this.vuex_mallId
				params['labelJson'] = labelJson
				
				if (this.isEdit) {
					this.labelParentIds=new Set(tmp.map(item=>item.parentId))
				}
				params['labelParentIds']=Array.from(this.labelParentIds).join(",")
				
				this.$api.mall.getSetTag(params).then(res => {
					this.show = false
					this.getTagManageList()
				})
			},
			deleteTag(item,index){
				if(!this.isEdit)return
				let idx= this.labelKey.indexOf(item.dictKey)
				this.labelKey.splice(idx,1)
				let idx1= this.selectTags.indexOf(item.id)
				this.selectTags.splice(idx1,1)
				this.getSetTag()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		padding: 20rpx 12rpx;
		.item{
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 10rpx;
			color: $base-color;
			background-color: #fff;
			position: relative;
			margin: 0 20rpx 20rpx 20rpx;
			.u-icon{
				color: $uni-color-error;
				position: absolute;
				right: -17rpx;
				top: -17rpx;
				font-size: 35rpx;
			}
		}
		.add{
			border: 1px dashed $base-color;
			background-color: transparent;
		}
	}
	.popup-content{
		height: 40vh;
		padding: 20rpx 32rpx 32rpx 32rpx;
	}
	.popup-title{
		text-align: center;
		font-weight: bold;
		height: 80rpx;
		line-height: 80rpx;
	}	
	.popupItem{
		border: 1px solid #999;
		color: #999;
		height: 60rpx;
		line-height: 60rpx;
		margin: 0 auto;
		padding-left: 30rpx;
		margin-bottom: 20rpx;
	}
	.active{
		color: $base-color;
		border: 1px solid $base-color;
	}
	.popup-confirm{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin: 32rpx;
		border-radius: 25px;
		color: #fff;
		background-color: $base-color;
	}
</style>
