import { defineComponent } from 'vue'
import { InboxOutlined } from '@ant-design/icons-vue'
import { UploadChangeParam, message } from 'ant-design-vue'
import { instance } from '@/service/request'

console.log('instance.defaults.proxy:', instance.defaults)

console.log('instance.defaults.baseURL:')

/**
 * @description 通用文件上传组件
 */

export default defineComponent({
  name: 'upload-pro',
  props: {
    action: {
      type: String,
      default: ' '
    },
    accept: {
      type: String,
      default: '.zip,.tar,.gz,.tgz'
    }
  },
  emits: ['done'],
  setup (props, ctx) {
    const handleChange = (info: UploadChangeParam) => {
      const status = info.file.status
      if (status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (status === 'done') {
        ctx.emit('done', info)
        message.success(`${info.file.name} 文件上传成功`)
      } else if (status === 'error') {
        message.error(`${info.file.name} 文件上传失败`)
      }
    }

    return () => (
            <a-upload-dragger
              accept={props.accept}
              value="fileList"
              name="file"
              action={props.action}
              onChange={handleChange}
              maxCount={1}
            >
              <p class="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
              <p class="ant-upload-text">点击选择文件或者拖拽文件到此处</p>
              <p class="ant-upload-hint">
                只能上传{props.accept}尾缀文件
              </p>
            </a-upload-dragger>
    )
  }
})
