<template>
	<div class="generalMenu_printModel">
		<div @click.stop="openPrintModel" :class="driverClass.class1" :style="{...$props.style_,'width':selectWidth}">
			<a-popover v-if="isCanvas">
				<template #content>
					<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
					<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
				</template>
				<span v-if="item?.label">{{ item?.label }}</span>
				<span v-else>{{ item?.name }}</span>
			</a-popover>
			<div v-else>
				<span v-if="item?.label">{{ item?.label }}</span>
				<span v-else>{{ item?.name }}</span>
			</div>
			<div class="icon iconfont icon-xiala" :class="{active:openClick}"></div>
		</div>
		<ul :class="driverClass.class2" v-show="openClick" :style="{'width':selectWidth,...ulStyle}">
			<div>
				<li v-for="listItem,index in dataList" :class="{active:deleteItem == index,hover:((item?.label && item?.label == listItem?.label) || (item?.name && item?.name == listItem?.name))}" class="printModel_item" @click="setprintModel(listItem,index)">
					<a-popover placement="right" v-if="isCanvas">
						<template #content>
							<!-- <span v-if="item.img != -1 && index == dataList?.length -1 " class="icon iconfont icon-shanchu" style="cursor: pointer; position: absolute; right: 10px; top: 10px;" @click.stop="deleteFile(item)"></span> -->
							<img v-if="listItem.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
							<!-- <div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
								<i class="fi fi-br-upload input_border" style="width: 8rem; height: 8rem;padding: 0;" :title="$t('Generate.uploadTitle')">
									<a-upload
										style="height: 100%;"
										class="search_upImg"
										:capture="null"
										:action="uploadUrl + '/api/element/upload'"
										list-type="picture-card"
										:data="{
											...upload,
										}"
										:maxCount='1'
										:headers="{ Authorization: token }"
										accept=".jpg,.png,.jpeg,.bmp"
										@change="(file) => fileUploadChange(file)"
									>
									</a-upload>
								</i>
							</div> -->
							<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>

						</template>
						<span v-if="listItem?.label">{{ listItem?.label }}</span>
						<span v-else>{{ listItem?.name }}</span>
					</a-popover>
					<div v-else>
						<span v-if="listItem?.label">{{ listItem?.label }}</span>
						<span v-else>{{ listItem?.name }}</span>
					</div>
				</li>
			</div>
		</ul>
	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent,ref ,nextTick} from "vue";  
import { useStore } from "vuex";
import { Https } from "@/tool/https";
 import { openGuide,driverObj__ } from "@/tool/guide";
import { getUploadUrl } from "@/tool/util";
import { message, Upload, Modal } from "ant-design-vue";
 export default defineComponent({
	 name:'filterComponent',
	 props:{
		 item:{
			 type:Object
		 },
		 dataList:{
			 type:Array
		 },
		 driver__:{
			 type:Boolean,
			 default:false,
		 },
		 isCanvas:{
			 type:Boolean,
			 default:false,
		 },
		 deleteItem:{
			type:Number,
			default:-1
		 },
		 driverClass:{
			 type:Object,
			 default:{class1:'',class2:'',classList:{item1:'',item2:'',item3:''}},
		 },
		 style_:{
			 type:Object,
			 default:{}
		 },
		 ulStyle:{
			 type:Object,
			 default:{}
		 },
		 selectWidth:{
			 type:String,
			 default:'20rem'
		 }
	 },
	 emits:['setprintModel'],
	 setup(props:any,{emit}){
		let selectIndex = ref(0)
		let openClick = ref(false)
        let store = useStore();
		let openPrintModel = ()=>{
			document.addEventListener('click',removePrintModel)
			openClick.value = true
			nextTick().then(()=>{
				if(props.driver__.driver){
					driverObj__.moveNext()
				}
			})
		}
		let setprintModel = (item:any,index:any)=>{
			if(props.deleteItem == index) return
			if(item.img == -1) return
			openClick.value = false
			selectIndex = index
			nextTick().then(()=>{
				if(props.driver__.driver){
					driverObj__.moveNext()
				}
			})
			emit('setprintModel',item)
		}
		let removePrintModel = ()=>{
			openClick.value = false
			document.removeEventListener('click',removePrintModel)
		}
		let fileUploadChange = (data: any)=>{
            let file = data.file;
			let bor = true
            if (file.status === "done") {
                let res = JSON.parse(file.xhr.response);
				if(res.errCode == 0){
					file.type_ = "upload";
					props.dataList.forEach((item:any)=>{
						if(item.img == -1){
							item.img = res.data.url
							item.id = res.data.id
						}
					})
				}else{
					bor = false
				}
                
            } else if (file.status === "error") {
					bor = false
            }
			if(!bor){
                // let res:any = JSON.parse(file.xhr.response);
					// props.dataList.forEach((item:any)=>{
					// 	if(item.img == -1){
					// 	}
					// })
                // message.warning(res.errMsg);
			}
        }
		let deleteFile = (item:any)=>{
			item.img = -1
			emit('setprintModel',props.dataList[0])
		}
		 return {
			selectIndex,
			openClick,
			store,
			setprintModel,
			openPrintModel,
			fileUploadChange,
			deleteFile,
		 }
		 
	 },
	 data(prop) {
        return {
            upload: {
                isPin: 0,
				gender:'',
                level1Type: 'Sketchboard',
                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            },
            uploadUrl: "",
            type_: {
                type1: "generate",
                type2: 'Sketchboard',
            },
			isTextarea:false,
			isInputFocus:false,
        };
    },
    mounted() {
        this.uploadUrl = getUploadUrl();
		this.upload.gender = this.store.state.Workspace.probjects.sex
	}
 });
 </script>
 <style lang="less">
 .ant-popover-inner-content{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
 <style lang="less">
 //衣服类型下拉菜单
 .generalMenu_printModel{
		margin-right: 2rem;
		height: 5rem;
		.icon-xiala{
			margin-left: auto;
			transition: all .3s;
			&.active{
				transform: rotate(180deg);
			}
		}
		>div{
			// display: flex;
			display: block;
			width: 20rem;
			border-radius: 1rem;
			margin: 0;
			border: 1px solid;
            cursor: pointer;
			padding: 1rem;
			text-align: center;
			display: flex;
			font-size: 1.8rem;
			justify-content: space-around;
			height: 100%;
			box-sizing: border-box;
			align-items: center;
			background: #fff;
			> span{
				white-space: nowrap; 
				overflow: hidden;
				text-overflow: ellipsis;
			}
			>i{
				justify-content: center;
				position: relative;
			}
		}
		ul{
			position: absolute;
			width: 20rem;
			margin-top: calc(.3rem*1.2);
			z-index: 10;
			overflow: hidden;
			border-radius: calc(1rem*1.2);
			> div{
				overflow-y: auto;
				
				height: 100%;
			}
			li{
				// background: rgba(0,0,0,.2);
				background: #fff;
				line-height: 2;
				cursor: pointer;
				white-space: nowrap; 
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 0 calc(1rem*1.2);
				span{
					display: block;
					width: 100%;
				}
				&.active{
					// opacity: .4;
					pointer-events: none;
					color: #a4a4a4 !important;
					background: #ebebeb !important;
					cursor: not-allowed;

				}
				&.hover{
					background: #f3f3f6;
					color: #000;
				}
				:deep(.icon-shanchu){
					cursor: pointer;
					position: absolute;
					right: 10px;
					top: 10px;
				}
			}
			.printModel_item:hover{
				// background: rgba(0,0,0,.4);
				background: #f3f3f6;
				color: #000;
			}
		}
	}
	
 </style>