<script setup lang="ts">
/**
 * Fileをv-model化
 */
import { ref, computed } from 'vue'
import CCImageUploader from '../CCImageUploader.vue'
import CCButton from '../../CCButton/CCButton.vue'

const storageObj = ref<File | null>(null)

const storageToFile = (file: File) => {
  storageObj.value = file
}

const fileObjDelete = () => {
  storageObj.value = null
}

const displayObj = computed(() => {
  return storageObj.value ? `${storageObj.value.name}の${storageObj.value}` : ''
})

const selectImage = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = 'image/*'
  input.onchange = (e: any) => {
    const file = e.target.files[0]
    storageToFile(file)
  }
  input.click()
}
</script>

<template>
  <CCButton label="画像を選択する" @click="selectImage" />
  <div style="display: flex; justify-content: center; margin-top: 200px">
    <CCImageUploader
      square
      :uploaded="false"
      color="secondary"
      url="https://codelic.co/image/top/top1_5.webp"
      isNotOpen
      @onSelect="() => console.log('onSelect')"
      @storageToFile="storageToFile"
      @fileObjDelete="fileObjDelete"
    />
  </div>
  <div style="text-align: center; margin-top: 30px">
    <div style="font-weight: bold">↓Storageに保存するオブジェクトファイル</div>
    <div>{{ displayObj }}</div>
  </div>
</template>

<style scoped></style>
