<template>
	<a-modal class="library_setLabel" 
		v-model:visible="setLabelShow" 
		:footer="null" 
		title="Edit tag"
		width="65%"
		:maskClosable="false"
		:centered="true"
		@onCancel="clearSetLabel"
	>
		<div class="setLabel_centent">
			<ul class="optionsItem">
				<li class="optionsItem_title" v-for="optionsItem,optionsIndex in options" :key="optionsItem.id">
					<div class="setLabel_text">
						<a-checkbox v-model:checked="optionsItem.checkAll" @change="onCheckAllChange(optionsItem)"></a-checkbox>
						<span v-show="!optionsItem.openType">{{ optionsItem.classificationName }}</span>
						<input v-show="optionsItem.openType" type="text" v-model="itemName">
						<i v-show="optionsItem.openType" @click.stop="putName(index,'affirm',optionsItem)" class="fi fi-br-check"></i>
						<i v-show="!optionsItem.openType" @click.stop="putName(optionsIndex,'put',optionsItem)" class="fi fi-rr-edit"></i>
					</div>
					
					<ul class="childrenItem active" v-mousewheel>
						<li class="childrenItem_title setLabel_text" v-for="childrenItem,childrenIndex in optionsItem.children" :key="childrenItem.id">
							<a-checkbox v-model:checked="childrenItem.checkAll"></a-checkbox>
							<span v-show="!childrenItem.openType">{{ childrenItem.classificationName }}</span>
							<input v-show="childrenItem.openType" type="text" v-model="itemName">
							<i v-show="childrenItem.openType" @click.stop="putName(index,'affirm',childrenItem)" class="fi fi-br-check"></i>
							<i v-show="!childrenItem.openType" @click.stop="putName(childrenIndex,'put',childrenItem)" class="fi fi-rr-edit"></i>
						</li>
						<li @click="newLabel(optionsItem)" class="newLabel setLabel_text">
							<input v-show="optionsItem.addOpenType" type="text" v-model="itemName">
							<i @click.stop="putName(-1,'affirm',optionsItem)" v-show="optionsItem.addOpenType" class="fi fi-br-check"></i>
							<div v-show="!optionsItem.addOpenType">+</div>
						</li>
					</ul>
				</li>
				<li @click="newLabel('')" class="newLabel setLabel_text optionsItem_title">
					<input v-show="openType" type="text" v-model="itemName">
					<i @click.stop="putName(-1,'affirm','')" v-show="openType" class="fi fi-br-check"></i>
					<div v-show="!openType">+</div>
				</li>
			</ul>
		</div>
	</a-modal>
    
</template>
<script lang="ts">
import { defineComponent,ref,createVNode,watch,nextTick,inject} from 'vue'
import { Https } from "@/tool/https";
import {dataURLtoFile,base64toFile} from "@/tool/util"
import { getCookie } from "@/tool/cookie";
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n';
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';

export default defineComponent({
	components:{
        VueCropper,
    },
    setup() {
		let multiple = ref(false)
		let indeterminate = ref(true)
		let options:any = inject('options')//父组件传过来的数据
		let type:any = inject('type')//父组件传过来的数据
		let checkedList = ref([])
		let openType = ref(false)
		let itemName = ref('')
		let {t} = useI18n()
        return {
			multiple,
			indeterminate,
			value: ref<string[]>([]),
			options,
			checkedList,
			openType,
			type,
			itemName,
			t
        }
    },
    data(){
        return{
			setLabelShow:false,
        }
    }, 
	mounted(){
	},
	watch: {
		
	},
	directives:{
		mousewheel:{
			mounted (el) {
				let bodyDom:any = document.getElementsByClassName('optionsItem')[0]
				nextTick().then(()=>{
					let dom:any = document.getElementsByClassName('childrenItem')
					let domParent:any = document.getElementsByClassName('optionsItem_title')
					let mouseover = ()=>{
						bodyDom.classList.add('active')
					}
					let mouseleave = ()=>{
						bodyDom.classList.remove('active')
					}
					// domParent?.forEach((item:any) => {
					// 	item.addEventListener('mouseover',mouseover)
					// 	item.addEventListener('mouseleave',mouseleave)
					// });
					for (let index = 0; index < domParent.length; index++) {
						domParent[index].addEventListener('mouseover',mouseover)
						domParent[index].addEventListener('mouseover',mouseleave)
					}
				
					el.addEventListener('wheel',(e:WheelEvent)=>{
						let num = 0
						if(e.deltaY > 0){
							num = 25
						}else{
							num = -25
						}
						el.scrollBy(num, 0);
					},true)
				})
				
			}
		}
	},
    methods:{
      init(str:any){
		this.setLabelShow = true
		if(str === 'add'){
			this.multiple = false
		}else{
			this.multiple = true
		}
		
	  },
	  clearSetLabel(){
		this.setLabelShow = false
	  },
	  onCheckAllChange(value:any){
		value.children.forEach((item:any) => {
			item.checkAll = value.checkAll
		});
	  },
	  putName(index:number,v:string,item:any){
			if(v == 'put'){
				this.options.forEach((optionsItem:any) => {
					optionsItem.openType = false
					optionsItem.addOpenType = false
					optionsItem.children.forEach((childrenItem:any) => {
						childrenItem.openType = false
					});
				});
				item.openType = true
				this.itemName = item.label

				
				// this.options[index].openType = true
				// this.itemName = this.workspace.workspaceList[index].workSpaceName
			}else if(v == 'affirm'){
				
				if(index == -1){
					if(this.itemName == ''){
						message.warning(this.t('Habit.jsContent2'));
					}else{
						console.log(this.itemName);
						let data:any = {
							label:this.itemName,
							value:this.itemName,
						}
						if(item){
							item.addOpenType = false
							item.children.push(data)
						}else{
							this.openType = false
							data.children = []
							this.options.push(data)
						}
					}
				}else{
					item.label = this.itemName
					item.openType = false
				}
			}
		},
		newLabel(item:any){
				// console.log(index);
				this.itemName = ''
				this.options.forEach((optionsItem:any) => {
					optionsItem.openType = false
					optionsItem.addOpenType = false
					optionsItem.children.forEach((childrenItem:any) => {
						childrenItem.openType = false
					});
				});
				this.openType = false

				if(item){
					item.addOpenType = true
				}else{
					this.openType = true
				}
				// console.log(item.addOpenType);
				
				// this.options.forEach((optionsItem:any) => {
				// 	optionsItem.openType = false
				// 	optionsItem.children.forEach((childrenItem:any) => {
				// 		childrenItem.openType = false
				// 	});
				// });
				// this.itemName = ''
				// item.openType = true
				this.addLabel()
		},
		addLabel(){
			let data = this.setLabelData()
			console.log(data);
			
			Https.axiosPost(Https.httpUrls.saveOrUpdate, data).then(
                (rv: any) => {
					console.log(rv);
					
                }	
            ).catch((res)=>{
            });
		},
		setLabelData(){
			let data = {
				"classificationIdList": [],
				"classificationName": "123221",
				"createTime": "",
				"deleteConfirm": '',
				"id": '',
				"libraryId": '',
				"parentId": '',
				"type": this.type?.selectCode._value,
				"updateTime": "",
				"userId": ''
			}
			return data
		}
    }
})
</script>
<style lang="less">
.library_setLabel{
	.setLabel_centent{
		display: flex;
		flex-direction: column;
		// height: 300px;
		max-height: 65rem;
		overflow-y: auto;
		// border-radius: ;
		ul{
			display: flex;
			li{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				i{
					cursor: pointer;
				}
				input{
					border: 0;
					width: 80%;
					background: rgba(0,0,0,0);
				}
			}
			.setLabel_text{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin: 0 2rem;
				width: 12rem;
				justify-content: space-between;
				flex-shrink: 0;
				i{
					display: flex;
				}
			}
		}
		.optionsItem{
			flex-direction: column;
			&.active{
				overflow: hidden;
			}
			>li{
				>label{
					align-items: center;
				}
				.childrenItem{
					max-width: 100%;
					overflow: hidden;
					overflow-x: auto;
					height: 7rem;
					margin: 2rem 0;
					&.active::-webkit-scrollbar-button:single-button{
						display: none;
					}
					&.active::-webkit-scrollbar {
						/* 竖轴的宽度 */
						width: 1rem;
						/* 横轴的高度 */
						height: 1rem;
						transition: all .3s;
					}
					/* 进度 */
					&.active::-webkit-scrollbar-thumb {
						border-radius: 1rem;
						background: rgba(238, 238, 244, 0);
					}
					/* 轨道 */
					&.active::-webkit-scrollbar-track {
						border-radius: 1rem;
						background: rgba(238, 238, 244, 0);
					}
					&.active:hover {
						// overflow-x: scroll;
						&.active::-webkit-scrollbar-thumb {
							background: #543087;
						}
						/* 轨道 */
						&.active::-webkit-scrollbar-track {
							background: rgba(84, 48, 135,.2);
						}
					}
					
				}
			}
			.newLabel{
				text-align: center;
				justify-content: center;
				cursor: pointer;
				
				div{
					border-radius: 50%;
					border: 1px solid #000;
					display: inline-block;
					width: 2rem;
					height: 2rem;
					line-height: 2rem;
					text-align: center;
				}
				i{
					cursor: pointer;
				}
			}
		}
	}
}

</style>