<template>
	<a-modal class="library_setLabel" 
		v-model:visible="setLabelShow" 
		:footer="null" 
		title="Edit tag"
		width="65%"
		:maskClosable="false"
		:centered="true"
		@onCancel="clearSetLabel"
	>
		<div>
			<ul>
				<li></li>
			</ul>
		</div>
	</a-modal>
    
</template>
<script lang="ts">
import { defineComponent,ref,createVNode} 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 cropperTime:any = ref()
		let multiple = ref(false)
		const options: CascaderProps['options'] = [
			{
				label: 'Light',
				value: 'light',
				children: new Array(20)
				.fill(null)
				.map((_, index) => ({ label: `Number ${index}`, value: index })),
			},
			{
				label: 'Bamboo',
				value: 'bamboo',
				children: [
				{
					label: 'Little',
					value: 'little',
					children: [
					{
						label: `'Toy Fish'`,
						value: 'fish',
					},
					{
						label: 'Toy Cards',
						value: 'cards',
					},
					{
						label: 'Toy Bird',
						value: 'bird',
					},
					],
				},
				],
			},
		];
		let {t} = useI18n()
        return {
			multiple,
			value: ref<string[]>([]),
			options,

			t
        }
    },
    data(){
        return{
			setLabelShow:false,
        }
    }, 
	mounted(){
	},
	watch: {
		sex:{
			handler(newVal:any,oldVal:any){
				// let imgbox:any = this.$refs.imgbox
				// let imgBoxSizeBG = imgbox?.getElementsByClassName('cropper-view-box-BG')?.[0]
				// if(imgBoxSizeBG){
				// 	if(newVal == 'Male'){
				// 		imgBoxSizeBG.style.background = `url(./image/maleBG.png) no-repeat 0 0 / 100% 100%`
				// 	}else{
				// 		imgBoxSizeBG.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
				// 	}
				// }

			},
		},
	},
    methods:{
      init(str:any){
		this.setLabelShow = true
		if(str === 'add'){
			this.multiple = false
		}else{
			this.multiple = true
		}
		
	  },
	  clearSetLabel(){
		this.setLabelShow = false
	  }
    
    }
})
</script>
<style lang="less">
.library_setLabel{

}

</style>