text: import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
  import { ref, reactive, defineComponent } from 'vue'; // Utils
  
  import { pick, extend, isPromise, truthProp, getSizeStyle } from '../utils';
  import { bem, name, toArray, isOversize, filterFiles, isImageFile, readFileContent } from './utils'; // Composables
  
  import { useExpose } from '../composables/use-expose';
  import { useLinkField } from '../composables/use-link-field'; // Components
  
  import { Icon } from '../icon';
  import { ImagePreview } from '../image-preview';
  import UploaderPreviewItem from './UploaderPreviewItem'; // Types
  
  export default defineComponent({
    name,
    props: {
      capture: String,
      multiple: Boolean,
      disabled: Boolean,
      lazyLoad: Boolean,
      uploadText: String,
      deletable: truthProp,
      afterRead: Function,
      showUpload: truthProp,
      beforeRead: Function,
      beforeDelete: Function,
      previewSize: [Number, String],
      previewImage: truthProp,
      previewOptions: Object,
      previewFullImage: truthProp,
      name: {
        type: [Number, String],
        default: ''
      },
      accept: {
        type: String,
        default: 'image/*'
      },
      modelValue: {
        type: Array,
        default: () => []
      },
      maxSize: {
        type: [Number, String],
        default: Number.MAX_VALUE
      },
      maxCount: {
        type: [Number, String],
        default: Number.MAX_VALUE
      },
      imageFit: {
        type: String,
        default: 'cover'
      },
      resultType: {
        type: String,
        default: 'dataUrl'
      },
      uploadIcon: {
        type: String,
        default: 'photograph'
      }
    },
    emits: ['delete', 'oversize', 'close-preview', 'click-preview', 'update:modelValue'],
  
    setup(props, {
      emit,
      slots
    }) {
      var inputRef = ref();
  
      var getDetail = (index = props.modelValue.length) => ({
        name: props.name,
        index
      });
  
      var resetInput = () => {
        if (inputRef.value) {
          inputRef.value.value = '';
        }
      };
  
      var onAfterRead = items => {
        resetInput();
  
        if (isOversize(items, props.maxSize)) {
          if (Array.isArray(items)) {
            var result = filterFiles(items, props.maxSize);
            items = result.valid;
            emit('oversize', result.invalid, getDetail());
  
            if (!items.length) {
              return;
            }
          } else {
            emit('oversize', items, getDetail());
            return;
          }
        }
  
        items = reactive(items);
        emit('update:modelValue', [...props.modelValue, ...toArray(items)]);
  
        if (props.afterRead) {
          props.afterRead(items, getDetail());
        }
      };
  
      var readFile = files => {
        var {
          maxCount,
          modelValue,
          resultType
        } = props;
  
        if (Array.isArray(files)) {
          var remainCount = +maxCount - modelValue.length;
  
          if (files.length > remainCount) {
            files = files.slice(0, remainCount);
          }
  
          Promise.all(files.map(file => readFileContent(file, resultType))).then(contents => {
            var fileList = files.map((file, index) => {
              var result = {
                file,
                status: '',
                message: ''
              };
  
              if (contents[index]) {
                result.content = contents[index];
              }
  
              return result;
            });
            onAfterRead(fileList);
          });
        } else {
          readFileContent(files, resultType).then(content => {
            var result = {
              file: files,
              status: '',
              message: ''
            };
  
            if (content) {
              result.content = content;
            }
  
            onAfterRead(result);
          });
        }
      };
  
      var onChange = event => {
        var {
          files
        } = event.target;
  
        if (props.disabled || !files || !files.length) {
          return;
        }
  
        var file = files.length === 1 ? files[0] : [].slice.call(files);
  
        if (props.beforeRead) {
          var response = props.beforeRead(file, getDetail());
  
          if (!response) {
            resetInput();
            return;
          }
  
          if (isPromise(response)) {
            response.then(data => {
              if (data) {
                readFile(data);
              } else {
                readFile(file);
              }
            }).catch(resetInput);
            return;
          }
        }
  
        readFile(file);
      };
  
      var imagePreview;
  
      var onClosePreview = () => emit('close-preview');
  
      var previewImage = item => {
        if (props.previewFullImage) {
          var imageFiles = props.modelValue.filter(isImageFile);
          var images = imageFiles.map(item => item.content || item.url).filter(Boolean);
          imagePreview = ImagePreview(extend({
            images,
            startPosition: imageFiles.indexOf(item),
            onClose: onClosePreview
          }, props.previewOptions));
        }
      };
  
      var closeImagePreview = () => {
        if (imagePreview) {
          imagePreview.close();
        }
      };
  
      var deleteFile = (item, index) => {
        var fileList = props.modelValue.slice(0);
        fileList.splice(index, 1);
        emit('update:modelValue', fileList);
        emit('delete', item, getDetail(index));
      };
  
      var renderPreviewItem = (item, index) => {
        var needPickData = ['imageFit', 'deletable', 'previewSize', 'beforeDelete'];
        var previewData = extend(pick(props, needPickData), pick(item, needPickData, true));
        return _createVNode(UploaderPreviewItem, _mergeProps({
          "item": item,
          "index": index,
          "onClick": () => emit('click-preview', item, getDetail(index)),
          "onDelete": () => deleteFile(item, index),
          "onPreview": () => previewImage(item)
        }, pick(props, ['name', 'lazyLoad']), previewData), {
          'preview-cover': slots['preview-cover']
        });
      };
  
      var renderPreviewList = () => {
        if (props.previewImage) {
          return props.modelValue.map(renderPreviewItem);
        }
      };
  
      var renderUpload = () => {
        if (props.modelValue.length >= props.maxCount || !props.showUpload) {
          return;
        }
  
        var Input = _createVNode("input", {
          "ref": inputRef,
          "type": "file",
          "class": bem('input'),
          "accept": props.accept,
          "capture": props.capture,
          "multiple": props.multiple,
          "disabled": props.disabled,
          "onChange": onChange
        }, null);
  
        if (slots.default) {
          return _createVNode("div", {
            "class": bem('input-wrapper')
          }, [slots.default(), Input]);
        }
  
        return _createVNode("div", {
          "class": bem('upload'),
          "style": getSizeStyle(props.previewSize)
        }, [_createVNode(Icon, {
          "name": props.uploadIcon,
          "class": bem('upload-icon')
        }, null), props.uploadText && _createVNode("span", {
          "class": bem('upload-text')
        }, [props.uploadText]), Input]);
      };
  
      var chooseFile = () => {
        if (inputRef.value && !props.disabled) {
          inputRef.value.click();
        }
      };
  
      useExpose({
        chooseFile,
        closeImagePreview
      });
      useLinkField(() => props.modelValue);
      return () => _createVNode("div", {
        "class": bem()
      }, [_createVNode("div", {
        "class": bem('wrapper', {
          disabled: props.disabled
        })
      }, [renderPreviewList(), renderUpload()])]);
    }
  
  });