<template>
	<div class="generalMenu_printModel">
		<div @click.stop="openPrintModel" :class="driverClass.class1">
			<a-popover v-if="isCanvas">
				<template #content>
					<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
				</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>
		<ul :class="driverClass.class2" v-show="openClick">
			<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">
				<a-popover placement="right" v-if="isCanvas">
					<template #content>
						<img v-if="item.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>
					</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>
			</li>
		</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 { getCookie } from "@/tool/cookie";
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:''}},
		 }
	 },
	 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)=>{
			console.log(item.img);
			
			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);
			}
        }
		 return {
			selectIndex,
			openClick,
			store,
			setprintModel,
			openPrintModel,
			fileUploadChange,
		 }
		 
	 },
	 data(prop) {
        return {
            upload: {
                isPin: 0,
				gender:'',
                level1Type: 'Sketchboard',
                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            },
            token: "",
            uploadUrl: "",
            type_: {
                type1: "generate",
                type2: 'Sketchboard',
            },
			workspaceCom:{},
			isTextarea:false,
			isInputFocus:false,
        };
    },
    mounted() {
        this.uploadUrl = getUploadUrl();
        this.token = getCookie("token") || "";
		this.upload.gender = this.store?.state?.Workspace?.workspace?.sexEnum?.value
	}
 });
 </script>
 <style lang="less">
 //衣服类型下拉菜单
 .generalMenu_printModel{
		margin-right: 2rem;
		>div{
			width: calc(13rem*1.2);
			// display: flex;
			display: block;
			border-radius: calc(1rem*1.2);
			margin: 0;
			border: 2px solid;
            cursor: pointer;
			white-space: nowrap; 
			overflow: hidden;
			text-overflow: ellipsis;
			padding: 0 calc(1rem*1.2);
			text-align: center;
		}
		ul{
			position: absolute;
			width: calc(13rem*1.2);
			text-align: center;
			margin-top: calc(.3rem*1.2);
			border-radius: calc(1rem*1.2);
			overflow: hidden;
			z-index: 3;
			li{
				// background: rgba(0,0,0,.2);
				background: #cccccc;
				line-height: 2;
				cursor: pointer;
				white-space: nowrap; 
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 0 calc(1rem*1.2);
				&.active{
					// opacity: .4;
					color: #a4a4a4 !important;
					background: #ebebeb !important;
					cursor: not-allowed;
				}
			}
			.printModel_item:hover{
				// background: rgba(0,0,0,.4);
				background: #999999;
				color: #000;
			}
		}
	}
	.generalMenu_printModel_upload{
		>i{
			justify-content: center;
		}
	}
 </style>