<template>
    <div class="selectList">
		<div class="switch_type_list" v-if="type != 'element'">
			<div
				@click.stop="openCurrent()"
				class="switch_type_item"
				:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
			>
				<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
			</div>
			<div
				@click.stop="openUpload()"
				class="switch_type_item"
				:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
			>
				<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
			</div>
			<div
				@click.stop="openLibrary()"
				class="switch_type_item"
				:class="[selectTitle == 'library' ? 'select_swtich' : '']"
			>
				<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
			</div>
		</div>
		<div class="print_content_list">
			<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element'">
				<currentList ref="currentList" :level1Type="level1Type" :type="type" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
			</div>
			<div class="content_item" v-show="selectTitle == 'upload'" v-if="type != 'element'">
				<uploadList @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadList>
			</div>
			<div class="content_item" v-show="selectTitle == 'library'">
				<libraryList @selectImgItem="selectImgItem" :randomId="randomId" :level1Type="level1Type" :type="type" ref="libraryList" :catecoryList="catecoryList"></libraryList>
			</div>
		</div>
    </div>
    
</template>
<script lang="ts">
import { defineComponent,computed,onMounted,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import libraryList from './libraryList.vue'
import uploadList from './uploadList.vue'
import currentList from './currentList.vue'
export default defineComponent({
    components:{
		currentList,
		libraryList,
		uploadList,
    },
	props:{
		catecoryList:{
			type:Array,
			default:()=>[]
		},
		randomId:{
			type:Boolean,
			default:true,
			required:false
		},
		type:{
		    type:String,
			default:'' as any,
			required:true
		},
		level1Type:{
		    type:String,
			default:'' as any,
			required:true
		},
	},
	emits:['selectImgItem'],
    setup(props,{emit}) {
        const store = useStore();
		const detailData = reactive({
			selectTitle: props.type == 'element'?'library':'current',
			printList:[]
		})
		const getDetailListDom = reactive({
			libraryList:null as any,
		})
		const openCurrent = ()=>{
			detailData.selectTitle = 'current'
		}
		const openUpload = ()=>{
			detailData.selectTitle = 'upload'
		}
		const openLibrary = ()=>{
			detailData.selectTitle = 'library'
			getDetailListDom.libraryList.init()
		}
		const selectImgItem = (data:any)=>{
			emit('selectImgItem',data)
		}
		onMounted(()=>{
			if(props.type == 'element'){
				openLibrary()
			}
		})
        return{
			...toRefs(detailData),
			...toRefs(getDetailListDom),

			openCurrent,
			openUpload,
			openLibrary,
			selectImgItem,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .selectList{
		// width: 34rem;
		flex: 1;
		overflow: hidden;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		> .switch_type_list{
			display: flex;
			margin-bottom: 2.5rem;
			> .switch_type_item:last-child{
				margin-right: 0;
			}
			> .switch_type_item{
				position: relative;
				cursor: pointer;
				margin-right: 6.5rem;
			}
			> .switch_type_item::before {
                    position: absolute;
                    content: "";
                    display: block;
                    background: #000;
                    height: calc(.4rem*1.2);
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: -.5rem;
                    width: 0px;
                    transition: 0.3s all;
                }
			> .select_swtich {
				color: #000;
				font-weight: 600;
			}
			> .select_swtich::before {
				width: 100%;
			}
		}
		> .print_content_list{
			flex: 1;
			overflow: hidden;
			> .content_item{
				height: 100%;
				margin-top: 1rem;
			}
		}
	}
</style>