<template>
    <div class="upload-national-card" @click="showImages">
        <img v-if="source" :src="source" />
        <i v-else class="isax isax-document-upload"></i>
        <input ref="input" type="file" hidden @input="chooseImage">
    </div>
</template>

<script setup>
const file = defineModel()
const input = ref()
const source = ref()
const filename = ref()

const showImages = () => input.value.click();

const chooseImage = (e) => {
    const binaryData = [];
    binaryData.push(e.target.files[0]);
    source.value = URL.createObjectURL(new Blob(binaryData, { type: "image" }))
    file.value = e.target.files[0];
}

</script>

<style lang="scss">
.upload-national-card {
    @apply cursor-pointer min-h-14 h-max relative w-[21.8rem] lg:w-[27.1rem] border border-[#CCCCCC] rounded-[0.6rem] p-4 rtl;

    i {
        @apply text-xl float-left;
    }


    img {
        @apply w-full h-[11.6rem] lg:h-[14.4rem] object-cover object-center rounded-[0.6rem];
    }
}
</style>