<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import sellerHeader from "../../seller-header.vue"
import historyList from "./historyList.vue"
import { useRouter } from "vue-router"


//const props = defineProps({
//})
//const emit = defineEmits([
//])
const router = useRouter()
let getCollectionListData = reactive({
	process: [],
	projectName: '',

})
const isShowMark = ref(false)
const historyListRef = ref(null) as any
const handleSearch = () => {
	historyListRef.value.getCreateList()
}
const setProcess = (type:any) => {
	if(type){
		getCollectionListData.process = [type]
	}else{
		getCollectionListData.process = []
	}
	historyListRef.value.getCreateList()
}
const selectCollectionItem = (item:any) => {
	router.push({path:'/home/seller/myListings/select/'+item.id})
}

onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
</script>
<template>
	<div class="create-select">
		<seller-header
			title="Select Collection"
			:breadcrumbs="[
				{title:'My Listings', name:'myListingsIndex'},
				{title:'Select Collection', name: 'myListingsSelect' }
			]"
		>
		</seller-header>
		<div class="content">
			<div class="title">
				<div class="left">
					<div :class="{active:!getCollectionListData.process?.[0]}" @click="setProcess('')">All</div>
					<div :class="{active:getCollectionListData.process[0] == 'SERIES_DESIGN'}" @click="setProcess('SERIES_DESIGN')">Series Design</div>
					<div :class="{active:getCollectionListData.process[0] == 'SINGLE_DESIGN'}" @click="setProcess('SINGLE_DESIGN')">Single Design</div>
				</div>
				<div class="right">
					<div class="search_input flex flex-align-center">
						<input
							class="search_input_inner"
							v-model="getCollectionListData.projectName"
							:bordered="false"
							@keydown.enter="handleSearch"
							placeholder="Search"
						/>
						<!-- <SearchOutlined class="search_input_icon" @click="handleSearch" /> -->
						<SvgIcon name="CSearch" size="20" class="search_input_icon" @click="handleSearch" />
					</div>
				</div>
			</div>
			<historyList ref="historyListRef" :getCollectionListData="getCollectionListData" @selectCollectionItem="selectCollectionItem"></historyList>
		</div>
	</div>
</template>
<style scoped lang="less">
	.create-select {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
		> .content {
			margin-top: 2rem;
			flex: 1;
			overflow: hidden;
			padding: 2.4rem 3rem; 
			background-color: #f9fafa;
			border-radius: 2rem;
			display: flex;
			flex-direction: column;
			> .title{
				display: flex;
				justify-content: space-between;
				> .left{
					display: flex;
					align-items: center;
					gap: 1.2rem;
					> div{
						min-width: 9rem;
						padding: .4rem 2.6rem;
						background-color: #fff;
						border-radius: 4rem;
						border: 1px solid #000000;
						font-weight: 500;
						font-size: 1.6rem;
						line-height: 150%;
						text-align: center;
						cursor: pointer;
						&:hover{
							color: #fff;
							background-color: #000;

						}
					}
					> .active{
						color: #fff;
						background-color: #000;
					}
				}
				> .right{
					.search_input {
						height: 3.2rem;
						width: 27rem; // 默认宽度
						background-color: #fff;
						border: 1px solid #000;
						border-radius: 3rem;
						// column-gap: 3rem;
						padding: 0 2rem;
						.search_input_inner {
							border: none;
							height: 100%;
							width: calc(100% - 2rem);
							padding: .6rem 0;
							font-size: 1.2rem;
							&::placeholder {
								font-size: 1.2rem;
							}
							&::-webkit-input-placeholder{
								font-size: 1.2rem;
							}
						}
						.search_input_icon {
							font-size: 1.6rem;
							color: #000;
							width: initial;
							height: initial;
						}
					}
				}
			}
		}
	}
</style>