<template>
    <div class="list-group">
        <label class="list-group-item" style="cursor: pointer;">
            <input
                class="form-check-input me-1"
                :name="data.LOCVOTSEQ"
                :type="multiIs === '1' ? 'checkbox' : 'radio'"
                :value="data.VOTDETSEQ"
                :checked="selectedValues.includes(data.VOTDETSEQ)"
                @change="handleChange"
            >
            {{ data.LOCVOTCON }}
            <a  :style="{ maxWidth: (data.LOCVOTLIK.length * 1) + 'ch' }"
                v-if="data.LOCVOTLIK"
                :href="data.LOCVOTLIK.startsWith('http') ? data.LOCVOTLIK : 'http://' + data.LOCVOTLIK"
                class="text-truncate"
                target="_blank"
                rel="noopener noreferrer">
                {{ data.LOCVOTLIK }}
            </a>
        </label>
    </div>

</template>

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

const props = defineProps({
    data: {
        type: Object,
        required: true,
    },
    multiIs: {
        type: String,
        required: true,
    },
    selectedValues: {
        type: Array,
        required: true,
    },
})
const emit = defineEmits(["update:selectedValues"]);

const handleChange = (event) => {
    const value = event.target.value;
    let updatedValues = [];
    // 체크박스일 때 여러 개 선택 가능
    if (props.multiIs === "1") {
        updatedValues = event.target.checked
            ? [...props.selectedValues, { VOTDETSEQ: value, LOCVOTSEQ: props.data.LOCVOTSEQ, LOCVOTCON: props.data.LOCVOTCON }]
            : props.selectedValues.filter(v => v.VOTDETSEQ !== value);
    } else {
        // 라디오 버튼일 때 하나만 선택 가능
        updatedValues = [{ VOTDETSEQ: value, LOCVOTSEQ: props.data.LOCVOTSEQ, LOCVOTCON: props.data.LOCVOTCON }];
    }
    emit("update:selectedValues", updatedValues);
};
const preventLinkMove = (event) =>{
    event.preventDefault();
}
</script>

<style>
a {
    display: block; /* 링크 텍스트에만 영역 적용 */
    max-width: 500px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
