<template>
	<div class="seller-header">
		<div class="back" @click="() => router.back()">
			<svg-icon name="seller-back" size="24" />
		</div>
		<div class="content">
			<span class="title" v-show="title">{{ title }}</span>
			<span class="tip" v-show="tip">{{ tip }}</span>
			<div class="breadcrumbs" v-show="breadcrumbs.length > 0">
				<template v-for="(v, i) in breadcrumbs" :key="i">
					<span
						class="title"
						:class="{
							last: i === breadcrumbs.length - 1
						}"
						@click="() => router.push({ name: v.name })"
						>{{ v.title }}</span
					>
					<span class="icon" v-show="i < breadcrumbs.length - 1">
						<svg-icon name="seller-arrow_right_solid" size="10" />
					</span>
				</template>
			</div>
		</div>
		<div class="right">
			<slot name="right"></slot>
		</div>
	</div>
</template>

<script setup>
	import { ref, computed } from "vue"
	import { useRoute, useRouter } from "vue-router"
	const props = defineProps({
		title: {
			type: String,
			default: ""
		},
		tip: {
			type: String,
			default: ""
		},
		breadcrumbs: {
			type: Array, // { title: string, name: string }
			default: () => []
		}
	})
	const route = useRoute()
	const router = useRouter()
</script>
<style scoped lang="less">
	.seller-header {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 2.4rem;
		> .back {
			width: 5rem;
			height: 5rem;
			border-radius: 1.2rem;
			border: 1px solid #d7d7d7;
			cursor: pointer;
		}
		> .content {
			flex: 1;
			display: flex;
			flex-direction: column;
			> .title {
				line-height: 130%;
				font-size: 2.4rem;
				color: #000;
			}
			> .tip {
				font-family: "pingfang_medium";
				font-size: 1.4rem;
				line-height: 150%;
				color: #888;
			}
			> .breadcrumbs {
				display: flex;
				align-items: center;
				gap: 1rem;
				> .title {
					font-family: "pingfang_regular";
					color: #999;
					font-size: 1.4rem;
					cursor: pointer;
					&:not(.last) {
						text-decoration: underline;
					}
				}
			}
		}
	}
</style>
