<template>
    <div class="mb-2" :class="isRow ? 'row' : ''">
        <label :for="name" class="col-md-2 col-form-label" :class="isLabel ? 'd-block' : 'd-none'">
            {{ title }}
            <span :class="isEssential ? 'link-danger' : 'none'">*</span>
        </label>
        <div :class="isRow ? 'col-md-10' : 'col-md-12'">
            <select class="form-select" :id="name" v-model="selectData">
                <option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i">
                    {{ isCommon ? item.label : item }}
                </option>
            </select>
        </div>
        <div v-if="isAlert" class="invalid-feedback">{{ title }}을 확인해주세요.</div>
    </div>
</template>

<script setup>
import { ref, watch, watchEffect } from 'vue';

const props = defineProps({
    title: {
        type: String,
        default: '라벨',
        required: true,
    },
    name: {
        type: String,
        default: 'nameplz',
        required: true,
    },
    isEssential: {
        type: Boolean,
        default: false,
        required: false,
    },
    data: {
        type: Array,
        default: [],
        required: true,
    },
    value: {
        type: String,
        default: '0',
        require: false,
    },
    isAlert : {
        type: Boolean,
        default: false,
        required: false,
    },
    isLabel : {
        type: Boolean,
        default: true,
        required: false,
    },
    isRow : {
        type: Boolean,
        default: true,
        required: false,
    },
    isCommon : {
        type: Boolean,
        default: false,
        required: false,
    }
});

const emit = defineEmits(['update:data']);
const selectData = ref(props.value);


watchEffect(() => {
    if (props.isCommon && props.data.length > 0) {
        selectData.value = props.data[0].value; // 첫 번째 옵션의 값으로 설정
    } else {
        selectData.value = props.value; // 기본값으로 설정
    }
    emit('update:data', selectData.value);
})
</script>
