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="Store Name" name="storeName">
					<a-input
						v-model:value="formData.storeName"
						placeholder="Enter the store name"
						:maxlength="80"
						:readonly="!isEdit"
					/>
					<span v-show="isEdit" class="tip-length"
						>{{ formData.storeName.length }}/80</span
					>
				</a-form-item>
				<a-form-item label="Owner’s Full Name" name="fullName">
					<a-input
						v-model:value="formData.fullName"
						placeholder="Enter store owner's full name"
						:readonly="!isEdit"
					/>
				</a-form-item>
			</div>
			<div class="form-group">
				<a-form-item label="Email" name="email">
					<a-input
						type="email"
						v-model:value="formData.email"
						placeholder="Enter email"
						:readonly="!isEdit"
					/>
				</a-form-item>
				<a-form-item label="Phone Number" name="phoneNumber">
					<a-input
						type="tel"
						v-model:value="formData.phoneNumber"
						placeholder="Enter phone number"
						:readonly="!isEdit"
					/>
				</a-form-item>
			</div>
			<div class="form-group">
				<a-form-item label="Portfoilo/Social Media Links">
					<a-input
						placeholder="https://"
						v-for="(v, i) in formData.links"
						:key="i"
						v-model:value="formData.links[i]"
						:readonly="!isEdit"
					>
						<template #prefix>Link {{ 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="Store Description" name="description">
					<a-textarea
						v-model:value="formData.description"
						placeholder="Briefly describe your design style and store features..."
						: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"
	const route = useRoute()
	const router = useRouter()
	const props = defineProps({
		isEdit: {
			type: Boolean,
			default: false
		}
	})
	const formRules = {
		storeName: [{ required: true, message: "Enter the store name" }],
		fullName: [{ required: true, message: "Enter store owner's full name" }],
		email: [{ required: true, message: "Enter email" }],
		phoneNumber: [{ required: true, message: "Enter phone number" }],
		description: [{ required: true, message: "Enter store description" }]
	}

	const formRef = ref(null)
	const formData = reactive({
		storeName: "",
		fullName: "",
		email: "",
		phoneNumber: "",
		description: "",
		links: ["", ""]
	})
	const newLink = ref("")
	const addLink = () => {
		formData.links.push(newLink.value)
		newLink.value = ""
	}
	watch(
		() => props.isEdit,
		(v) => (v ? edit() : cancel())
	)
	const edit = () => {}
	const cancel = () => {}
	const submit = async () => {
		const valid = await formRef.value.validate()
		if (!valid) return Promise.reject(false)
		console.log(valid)
		return valid
	}
	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>