<template>
	<div class="edit-detail-wrapper">
		<seller-header
			title="Edit Listing Details"
			:breadcrumbs="[
				{ title: 'My Listings', name: 'myListingsIndex' },
				{ title: 'Select Collection', name: 'myListingsSelect' },
				{ title: 'Select Sketch', name: 'myListingsSelectItem' },
				{ title: 'Edit Listing Details', name: 'EditDetail' }
			]"
		>
			<template #right>
				<div class="operate-menu flex">
					<div class="menu-btn flex align-center save">
						<span>Save Draft</span>
						<SvgIcon name="CSave" color="#000000" size="16" />
					</div>
					<div class="menu-btn flex align-center publish">
						<span>Publish</span>
						<SvgIcon name="CPublish" color="#ffffff" size="16" />
					</div>
				</div>
			</template>
		</seller-header>
		<div class="edit-detail-content flex space-between">
			<div class="left">
				<div class="main-image-container flex">
					<div class="sketch"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import SellerHeader from "../../seller-header.vue"

const currentIndex = ref(0)
const selectList = ref([
	{
		sketch: "",
		mainProductImage: "",
		cover: "",
		productImage: [],
		apparelSketch: [],
		productName: "",
		price: "",
		desc: '',
		gender: '',
		category:''
	}
])
</script>

<style lang="less" scoped>
.c-svg {
	width: initial;
}

.edit-detail-wrapper {
	.menu-btn {
		height: 6rem;
		border: 0.15rem solid #000000;
		border-radius: 4rem;
		text-align: center;
		line-height: 6rem;
		padding: 0 2rem;
		font-weight: 400;
		font-size: 1.6rem;
		column-gap: 0.8rem;
		cursor: pointer;
	}

	.operate-menu {
		column-gap: 2rem;

		.publish {
			background-color: #000000;
			color: #ffffff;
		}
	}

	.edit-detail-content {
		padding-right: 6.4rem;
	}
}
</style>
