<script setup lang="ts">
// 製作者 樋渡
import { ref, computed } from 'vue'
import CCImageUploader from '../CCImageUploader.vue'

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

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

const fileObjDelete = () => {
  storageObj.value = null
}
const value = ref()
const displayObj = computed(() => {
  return value.value ? `${value.value.name}の${value.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>
  <div style="height: 100px; overflow: hidden">
    <div style="height: 400px; display: flex; justify-content: center; gap: 20px">
      <CCImageUploader
        square
        :uploaded="false"
        :allMiniSize="true"
        color="secondary"
        url="https://codelic.co/image/top/top1_5.webp"
        @onSelect="() => console.log('onSelect')"
        @storageToFile="storageToFile"
        @fileObjDelete="fileObjDelete"
      />
      <CCImageUploader
        square
        :key="1"
        :uploaded="false"
        v-model="value"
        :allMiniSize="true"
        :isNotUpload="true"
        @storageToFile="storageToFile"
        @fileObjDelete="fileObjDelete"
      />
    </div>
  </div>
  {{ value }}
  <div style="text-align: center; margin-top: 30px">
    <div style="font-weight: bold; height: 100px">↓Storageに保存するオブジェクトファイル</div>
    <div>{{ displayObj }}</div>
  </div>
</template>

<style scoped></style>
