aida_front/src/views/SellerDashboard/BrandProfile/brand-info.vue

<template>
	<div class="brand-info">
		<a-form :model="formData" :rules="isEdit ? formRules : {}" layout="vertical" ref="formRef">
			<div class="form-group">
				<a-form-item :label="$t('Seller.storeName')" name="shopName">
					<a-input
						v-model:value="formData.shopName"
						:placeholder="$t('Seller.storeNameDesc')"
						:maxlength="80"
						:readonly="!isEdit"
					/>
					<span v-show="isEdit" class="tip-length"
						>{{ formData.shopName.length }}/80</span
					>
				</a-form-item>
				<a-form-item :label="$t('Seller.ownerName')" name="ownerName">
					<a-input
						v-model:value="formData.ownerName"
						:placeholder="$t('Seller.ownerNameDesc')"
						:readonly="!isEdit"
					/>
				</a-form-item>
			</div>
			<div class="form-group">
				<a-form-item :label="$t('Seller.email')" name="email">
					<a-input
						type="email"
						v-model:value="formData.email"
						:placeholder="$t('Seller.emailDesc')"
						:readonly="!isEdit"
					/>
				</a-form-item>
				<a-form-item :label="$t('Seller.mobile')" name="mobile">
					<a-input
						type="tel"
						v-model:value="formData.mobile"
						:placeholder="$t('Seller.mobileDesc')"
						:readonly="!isEdit"
					/>
				</a-form-item>
			</div>
			<div class="form-group">
				<a-form-item :label="$t('Seller.links')">
					<a-input
						placeholder="https://"
						v-for="(v, i) in formData.socialLinks"
						:key="i"
						v-model:value="formData.socialLinks[i]"
						:readonly="!isEdit"
					>
						<template #prefix>{{ $t("Seller.link", { index: i + 1 }) }}</template>
					</a-input>
					<a-input
						placeholder="https://"
						v-model:value="newLink"
						@keyup.enter.prevent="addLink"
						v-if="isEdit"
					>
						<template #prefix>
							<span @click="addLink" style="cursor: pointer">
								<svg-icon name="seller-add" size="20" />
							</span>
						</template>
					</a-input>
				</a-form-item>
				<a-form-item :label="$t('Seller.storeDescription')" name="description">
					<a-textarea
						v-model:value="formData.description"
						:placeholder="$t('Seller.storeDescriptionDesc')"
						:maxlength="500"
						:readonly="!isEdit"
					/>
					<span v-show="isEdit" class="tip-length"
						>{{ formData.description.length }}/500</span
					>
				</a-form-item>
			</div>
		</a-form>
	</div>
</template>

<script setup>
	import { ref, reactive, watch } from "vue"
	import { useRoute, useRouter } from "vue-router"
	import { useStore } from "vuex"
	import { useI18n } from "vue-i18n"
	const { t } = useI18n()

	const store = useStore()
	const designerInfo = computed(() => store.state.seller.designerInfo)
	const route = useRoute()
	const router = useRouter()
	const props = defineProps({
		isEdit: {
			type: Boolean,
			default: false
		}
	})
	const formRules = {
		shopName: [{ required: true, message: t("Seller.storeNameDesc") }],
		ownerName: [{ required: true, message: t("Seller.ownerNameDesc") }],
		email: [{ required: true, message: t("Seller.emailDesc") }],
		mobile: [{ required: true, message: t("Seller.mobileDesc") }],
		description: [{ required: true, message: t("Seller.storeDescriptionErr") }]
	}

	const formRef = ref(null)
	const formData = reactive({
		shopName: "",
		ownerName: "",
		email: "",
		mobile: "",
		description: "",
		socialLinks: ["", ""]
	})
	const newLink = ref("")
	const addLink = () => {
		formData.socialLinks.push(newLink.value)
		newLink.value = ""
	}
	watch(
		() => designerInfo.value,
		(v) => updateFormData()
	)
	const updateFormData = () => {
		formData.shopName = designerInfo.value.shopName
		formData.ownerName = designerInfo.value.ownerName
		formData.email = designerInfo.value.email
		formData.mobile = designerInfo.value.mobile
		formData.description = designerInfo.value.description
		formData.socialLinks = JSON.parse(JSON.stringify(designerInfo.value.socialLinks))
	}
	updateFormData()

	watch(
		() => props.isEdit,
		(v) => (v ? edit() : cancel())
	)
	const edit = () => {}
	const cancel = () => {
		formRef.value.clearValidate()
		updateFormData()
	}
	const submit = async () => {
		await formRef.value.validate()
		return JSON.parse(JSON.stringify(formData))
	}
	defineExpose({
		submit
	})
</script>
<style scoped lang="less">
	@import "@/assets/style/ant-from-style.less";
	.brand-info {
		// width: 100%;
		// height: 100%;
		// overflow: hidden;
		// padding: 0 10rem;
	}
</style>