<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}` : ''
})
</script>

<template>
  <div style="display: flex; justify-content: center; width: 100%; height: 100%">
    <CCImageUploader
      square
      color="secondary"
      accept="image/*,video/*,.pdf"
      v-model="value"
      @storageToFile="storageToFile"
      @fileObjDelete="fileObjDelete"
      :show-custom-menu="{
        download: true,
        delete: false,
        shareUrl: false,
        edit: true,
        close: true,
      }"
    />
  </div>

  {{ value }}
  <div style="text-align: center; margin-top: 30px">
    <div style="font-weight: bold">↓Storageに保存するオブジェクトファイル</div>
    <div>{{ displayObj }}</div>
  </div>
</template>

<style scoped></style>
