FiDA_Front/src/views/home/components/input/StyleSelect.vue

<template>
	<div class="fida-style-select-wrapper">
		<el-select
			:model-value="modelValue"
			:placeholder="placeholder"
			@focus="openStylePopup"
		/>

		<el-popover
			v-model:visible="stylePopupVisible"
			placement="top"
			:width="342"
			:show-arrow="false"
			trigger="click"
			popper-class="fida-style-select-popover"
		>
			<template #reference>
				<div class="fida-style-select-trigger"></div>
			</template>
			<div class="fida-style-popover-content flex flex-col">
				<div class="fida-style-popover-header">
					{{ title }}
				</div>
				<div class="fida-style-popover-grid">
					<div
						v-for="item in options"
						:key="item.value"
						class="fida-style-popover-item flex flex-center"
						:class="{ 'is-selected': tempSelectedValue === item.value }"
						@click="selectStyle(item.value)"
					>
						<img :src="getStyleImage(typeValue, item.value)" class="style-bg" />
						<span class="fida-option-label flex flex-center">{{ item.label }}</span>
						<img
							v-show="tempSelectedValue === item.value"
							src="@/assets/images/checked.png"
							class="checked-item-icon"
						/>
					</div>
				</div>
				<!-- <div class="fida-style-popover-footer flex flex-center">
					<button class="fida-confirm-btn" @click="confirmStyle">
						{{ confirmText }}
					</button>
				</div> -->
			</div>
		</el-popover>
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { getStyleImage } from '../style'
	import type { OptionItem } from './types'

	const props = defineProps<{
		modelValue: string
		typeValue: string
		options: OptionItem[]
		placeholder: string
		title: string
		confirmText: string
	}>()

	const emit = defineEmits<{
		(e: 'update:modelValue', value: string): void
	}>()

	const tempSelectedValue = ref('')
	const stylePopupVisible = ref(false)

	const openStylePopup = () => {
		tempSelectedValue.value = props.modelValue
		stylePopupVisible.value = true
	}

	const selectStyle = (value: string) => {
		tempSelectedValue.value = value
		confirmStyle()
	}

	const confirmStyle = () => {
		emit('update:modelValue', tempSelectedValue.value)
		stylePopupVisible.value = false
	}
</script>

<style lang="less" scoped>
	.fida-style-select-wrapper {
		position: relative;
		width: 13.9rem;
		height: 4rem;

		.el-select {
			width: 13.9rem;
			height: 4rem;

			:deep(.el-select__wrapper) {
				border-radius: 0.8rem;
				height: 100%;
				box-shadow: none;
				border: 0.1rem solid rgba(0, 0, 0, 0.1);
				font-weight: 500;
				font-size: 1.4rem;
				min-height: initial;

				.el-select__placeholder {
					color: #000;
				}

				.el-select__icon {
					color: #000;
				}
			}
		}
	}

	.fida-style-select-trigger {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		cursor: pointer;
	}
</style>

<style lang="less">
	.fida-style-select-popover {
		width: 34.2rem !important;
		padding: 0 !important;
		border-radius: 0.6rem !important;
		box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15) !important;
		background-color: #fff !important;
		border: none !important;
	}

	.fida-style-popover-content {
		padding: 2rem 2.4rem 2.4rem;
	}

	.fida-style-popover-header {
		font-weight: 500;
		font-size: 1.6rem;
		color: #000;
		margin-bottom: 2rem;
		padding: 2rem 2.4rem !important;
	}

	.fida-style-popover-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		justify-content: center;
		height: 28.5rem;
		overflow-y: auto;
		padding-bottom: 2rem !important;
	}

	.fida-style-popover-item {
		height: 9.1rem;
		width: 9.1rem;
		border-radius: 1.4rem;
		cursor: pointer;
		position: relative;
		border: none;

		.checked-item-icon {
			position: absolute;
			bottom: 0;
			right: 0;
			transform: translate(50%, 50%);
			width: 2.4rem;
			height: 2.4rem;
		}

		.style-bg {
			width: 100%;
			height: 100%;
			border-radius: 1.4rem;
		}

		.fida-option-label {
			font-weight: 500;
			font-size: 1.2rem;
			color: #fff;
			text-align: center;
			padding: 0.5rem;
			position: absolute;
			height: 100%;
			width: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			border-radius: 1.4rem;
		}

		&.is-selected {
			border: 0.3rem solid #000;

			.fida-option-label {
				display: none;
			}
		}
	}

	.fida-style-popover-footer {
		padding: 2.4rem 0 !important;
		margin-top: 2.4rem;

		.fida-confirm-btn {
			margin: 0 auto;
			width: 15.7rem;
			height: 3.4rem;
			line-height: 3.4rem;
			background-color: #ff7a51;
			color: #fff;
			border: none;
			border-radius: 3.8rem;
			font-weight: 500;
			font-size: 1.4rem;
			cursor: pointer;
		}
	}
</style>