import { defineComponent } from 'vue'
import { OhVueIcon, addIcons } from 'oh-vue-icons'
import { MdUpload, FaEye } from 'oh-vue-icons/icons'
import { ConfigProvider, message, theme } from 'ant-design-vue'
import upload from './upload'
import 'viewerjs/dist/viewer.css'
import { api as showViewer } from 'v-viewer'

addIcons(MdUpload, FaEye)

// !清 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>
        <ConfigProvider theme={{ token: theme.defaultAlgorithm(theme.defaultSeed) }}>
          <input
            type="file"
            accept=".png,.jpeg,.jpg,.svg"
            style="display:none"
            ref={(el) => (input = el as any)}
            onChange={(e) => {
              const el = e.target as any
              const file: File | undefined = el.files?.[0]
              el.value = ''
              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) => {
                ctx.emit('update:value', res)
              })
            }}
          />
          <div
            class="flex justify-center items-center rounded bg-slate-200 hover:bg-slate-300 transition-all bg-cover bg-no-repeat bg-center cursor-pointer shadow"
            style={{
              width: props.width + 'px',
              height: props.width / props.ratio + 'px',
              backgroundImage: `url('${props.value}')`
            }}
            onClick={() => {
              input?.click()
            }}
          >
            {props.value ? (
              <div class="w-full h-full opacity-0 hover:opacity-100 relative transition-all bg-slate-800/20 flex justify-center items-center">
                <div
                  class="px-1 rounded hover:bg-white/20"
                  onClick={(e) => {
                    e.stopPropagation()
                    showViewer({
                      images: [props.value],
                      options: {
                        navbar: false,
                        toolbar: false
                      }
                    })
                  }}
                >
                  <OhVueIcon name="fa-eye" scale={1.2} fill="rgba(255,255,255,.4)" />
                </div>
              </div>
            ) : (
              <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>{' '}
        </ConfigProvider>
      </div>
    )
  }
})
