<template>
    <div class="mb-4 row">
        <label for="input-ss" class="col-md-2 col-form-label" :class="isLabel ? 'd-block' : 'd-none'">
            {{ title }}
            <span :class="isEssential ? 'text-red' : 'none'">*</span>
        </label>
        <div class="col-md-10">
            <select class="form-select" id="input-ss" v-model="selectData">
                <option v-for="(item , i) in data" :key="item" :value="i" :selected="value == i">{{ 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: true,
    }
});

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

watchEffect(() => {
    emit('update:data', selectData.value);
})
</script>
