import { defineComponent } from 'vue'
import { OhVueIcon, addIcons } from 'oh-vue-icons'
import { MdUpload } from 'oh-vue-icons/icons'
import { message } from 'ant-design-vue'
import upload from './upload'

addIcons(MdUpload)

// !清 asyncLoader 加载使用
export default defineComponent({
  props: {
    ratio: {
      type: Number,
      default: 1
    },
    width: {
      type: Number,
      default: 64
    },
    value: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 4
    }
  },
  emits: {
    'update:value': (() => true) as (val: string) => boolean
  },
  setup(props, ctx) {
    let input: HTMLInputElement | null = null
    return () => (
      <div>
        <input
          type="file"
          accept=".png,.jpeg,.jpg,.svg"
          style="display:none"
          ref={(el) => (input = el as any)}
          onChange={(e) => {
            const file: File | undefined = (e.target as any).files?.[0]
            if (!file) return
            console.log(file.size, props.size)
            if (file.size > props.size * 1000 * 1000) {
              message.warn(`大小不得超过${props.size}mb`)
              return
            }
            upload(file, 'test').then((res) => {
              console.log(res)
              ctx.emit('update:value', res)
            })
          }}
        />
        <div
          class="flex justify-center items-center rounded bg-slate-200 hover:bg-slate-300 transition-all cursor-pointer bg-cover bg-no-repeat bg-center"
          style={{
            width: props.width + 'px',
            height: props.width / props.ratio + 'px',
            backgroundImage: `url('${props.value}')`
          }}
          onClick={() => {
            input?.click()
          }}
        >
          {!props.value && <OhVueIcon name="md-upload" scale={2} fill="rgba(0,0,0,0.2)" />}
        </div>
        <div class="text-xs mt-1 text-black/60">支持上传 .png, .jpeg, .jpg, .svg</div>
      </div>
    )
  }
})