<template>
	<div class="operate_file_block">
		 <div class="select_img_type">
			 <div
				 class="select_category"
				 :class="driverClass.class1"
				 @click.stop="showFileCategory(item)"
			 >
				 {{ item.category }}
				 <div
					 :class="[
						 'icon',
						 'iconfont',
						 'icon-xiala',
						 item.categoryShow
							 ? 'icon_rotate'
							 : '',
					 ]"
				 ></div>
			 </div>
			 <div
				 class="category_list"
				 :class="driverClass.class2"
				 v-show="item.categoryShow"
			 >
				 <div
					 :class="[
						 'category_item',
						 item.categoryValue == cate.value
							 ? 'select_category_item'
							 : '',
					 ]"
					 v-for="(
						 cate, index
					 ) in disignTypeList"
					 :key="index"
					 @click="
						 selectFileCategory(
							 item,
							 cate
						 )
					 "
				 >
					 {{ cate.name }}
				 </div>
			 </div>
		 </div>
	 </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',
	 emits:['upTypeSucced'],
	 props:{
		 disignTypeList:{
			 type:Object
		 },
		 item:{
			 type:Object
		 },
		 generateList:{
			 type:Array
		 },
		 isSetSketchCategory:{
			 type:Boolean,
			 default:false,
		 },
		 driver__:{
			 type:Boolean,
			 default:false,
		 },
		 driverClass:{
			 type:Object,
			 default:{class1:'',class2:''},
		 }
	 },
	 setup(props:any,{emit}){
		 let showFileCategory = (file:any)=> {
			 file.categoryShow = true;
			 nextTick().then(()=>{
				 if(props.driver__){
					 
					 driverObj__.moveNext()
				 }
			 })
			 document.addEventListener("click", hiddenFileCategory);
		 }
		 let hiddenFileCategory = () => {
			 for (let item of props.generateList) {
				 item.categoryShow = false;
			 }
			 document.removeEventListener("click", hiddenFileCategory);
		 }
		 let selectFileCategory = (file: any, cate: any) => {
			 for (let item of props.generateList) {
				 item.categoryShow = false;
			 }
			 file.categoryValue = cate.value;
			 file.category = cate.name;
			 if(props.isSetSketchCategory){
				 setSketchLibrary(props.item)
			 }
			 if(props.driver__){
				 driverObj__.moveNext()
			 }
				 // this.store.commit("sketchGenerateFiles", this.fileList);
			 
		 }
		 let setSketchLibrary = (item:any)=>{
			 let data = {
				 libraryId:[item.id],
				 level2Type:item.categoryValue,
			 }
			 Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
				 (rv: any) => {
					emit('upTypeSucced')
				 }
			 ).catch((res)=>{
			 });
		 }
		 return {
			 showFileCategory,
			 selectFileCategory,
		 }
		 
	 },
	
 });
 </script>
 <style lang="less" scoped>
 //衣服类型下拉菜单
 .operate_file_block{
	 width: 100%;
	 height: 3rem;
	 font-size: 1.6rem;
	 color: #FFFFFF;
	 position: absolute;
	 left: 0;
	 bottom: 0;
 
	 .select_img_type{
		 height: 100%;
		 line-height: 3rem;
		 text-align: center;
		 background: rgba(0,0,0,0.6);
		 position: relative;
		 overflow: initial !important;
		 .select_category{
			 display: flex;
			 align-items: center;
			 justify-content: center;
 
			 .icon-xiala{
				 margin-left: 0.8rem;
			 }
		 }
 
		 .icon_rotate{
			 -moz-transform:rotate(180deg);
			 -webkit-transform:rotate(180deg);
			 transform: rotate(180deg);
			 animation-direction: 0.5s;
		 }
 
		 .category_list{
			 position: absolute;
			 width: 100%;
			 cursor: pointer;
			 position: absolute;
			 // top: 3.1rem;
			 margin-top: .2rem;
			 left: 0;
			 // background: rgba(0,0,0,0.4);
			 background-color: rgb(177 177 177);
			 border: 1px solid #343579;
			 border-radius: 0.8rem;
			 // overflow: hidden;
			 z-index: 3;
			 height: 9rem;
			 overflow-x: hidden;
			 &.category_list::-webkit-scrollbar{display: none;}
 
			 .category_item{
				 text-align: left;
				 font-size: 1.4rem;
				 padding: 1rem 1.5rem;
				 line-height: 1.6rem;
				 font-weight: 600;
				 color: #595959;
 
				 &.select_category_item{
					 background: linear-gradient(-137deg, #eeefdb, #e7dbed);
				 }
 
				 &:hover{
					 background: linear-gradient(-137deg, #eeefdb, #e7dbed);
				 }
			 }
		 }
	 }
 }
 </style>