<template>
	<div class="generalMenu_printModel">
		<div @click.stop="openPrintModel" :class="driverClass.class1">{{ item.label }}</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)">{{ item.label }}</li>
		</ul>
	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent,ref ,nextTick} from "vue";  
 import { Https } from "@/tool/https";
 import { openGuide,driverObj__ } from "@/tool/guide";
 export default defineComponent({
	 name:'filterComponent',
	 props:{
		 item:{
			 type:Object
		 },
		 dataList:{
			 type:Array
		 },
		 driver__:{
			 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 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
			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)
		}
		 return {
			selectIndex,
			openClick,
			setprintModel,
			openPrintModel,
		 }
		 
	 },
	
 });
 </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;
					pointer-events: none;
					color: #a4a4a4 !important;
					background: #ebebeb !important;
					cursor: not-allowed;

				}
			}
			.printModel_item:hover{
				// background: rgba(0,0,0,.4);
				background: #999999;
				color: #000;
			}
		}
	}
 </style>