<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
const props = defineProps({
	designerDetail: {
		type: Object,
		default: () => {
			return {
				avatar: '',
				brandBanner: '',
				description: '',
				email: '',
				mobile: '',
				ownerName: '',
				shopName: '',
				socialLinks: '[]',
			}
		},
	},
})
//const emit = defineEmits([
//])
let data = reactive({
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="merchantInfo">
		<div class="profile">
			<img v-avatarLoad="designerDetail.avatar" alt="">
		</div>
		<div class="info">
			<div class="detail">
				<div class="name">{{ designerDetail.ownerName }}</div>
				<div class="title">{{ designerDetail.shopName }}</div>
			</div>
			<div class="contact">
				<div class="title">{{ $t('brandDetail.merchantInfo.Contact') }}</div>
				<div class="email label">
					<div class="icon">
						<svg-icon name="brand-email" size="24" />
					</div>
					<div class="text">{{ designerDetail.email }}</div>
				</div>
				<div class="phone label">
					<div class="icon">
						<svg-icon name="brand-call" size="24" />
					</div>
					<div class="text">{{ designerDetail.mobile }}</div>
				</div>
				<div class="address label" v-for="value in JSON.parse(designerDetail.socialLinks)">
					<div class="icon">
						<svg-icon name="brand-link" size="24" />
					</div>
					<div class="text">{{value}}</div>
				</div>
			</div>
			<div class="about">
				<div class="title">{{ $t('brandDetail.merchantInfo.About') }}</div>
				<div class="content">
					{{ designerDetail.description }}
				</div>
			</div>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.merchantInfo{
		width: 100%;
		height: auto;
		position: relative;
		padding-top: 4rem;
		padding-bottom: 4rem;
		.profile{
			width: 20rem;
			height: 20rem;
			margin-left: 1.8rem;
			>img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.info{
			display: flex;
			flex-direction: column;
			gap: 6rem;
			margin-top: 4rem;
			.title{
				font-family: "KaiseiOpti-Bold";
				font-weight: 700;
				font-size: 3.4rem;
				line-height: 3.6rem;
			}
			> .detail{
				.name{
					margin-bottom: .8rem;
					font-weight: 500;
					font-size: 1.8rem;
					line-height: 100%;
					color: #232323;
				}
			}
			> .contact{
				.title{
					margin-bottom: 2rem;
				}
				.label{
					display: flex;
					gap: 2rem;
					margin-bottom: .6rem;
					font-family: "KaiseiOpti-Regular";
					font-weight: 400;
					font-size: 1.4rem;
					line-height: 100%;
					color: #585858;
					align-items: center;
					
					
					&:last-child{
						margin-bottom: 0;
					}
					> .text{
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						// word-break: break-word;
						// white-space: normal;
					}
				}
			}
			> .about{
				.title{
					margin-bottom: 2rem;
				}
				.content{
					font-family: "KaiseiOpti-Regular";
					font-weight: 400;
					font-size: 1.6rem;
					line-height: 2.3rem;
					color: #585858;
				}
			}
		}
	}
</style>