/**
 * ldesign v0.2.3
 * (c) 2022年9月24日 swimly
 * @license MIT
 */

import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from '@ldesign/icons-vue';
import { a as abridgeName } from '../../chunks/utils.js';
import { Loading } from '../loading/index.js';
import props from './props.js';
import mixins from '../../utils/mixins.js';
import getConfigReceiverMixins, { getGlobalIconMixins } from '../config-provider/config-receiver.js';
import '../../chunks/defineProperty-56324511.js';
import '../../chunks/log.js';
import '../loading/loading.js';
import '../loading/icon/gradient.js';
import 'vue';
import '../../chunks/set-style.js';
import '../../chunks/helper2.js';
import '../../config.js';
import '../../utils/dom.js';
import 'raf';
import 'lodash/isString';
import '../../utils/easing.js';
import '../../utils/render-node.js';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../../utils/transfer-dom.js';
import '../loading/props.js';
import 'lodash/mergeWith';
import 'lodash';
import '../config-provider/context.js';
import '../../chunks/zh_CN.js';
import '../config-provider/type.js';
import '../../utils/with-install.js';
import '../loading/style';
import '../loading/type.js';
import '../loading/plugin.js';

var LSingleFile = mixins(getConfigReceiverMixins("upload"), getGlobalIconMixins()).extend({
  name: "LUploadSingleFile",
  components: {
    Loading
  },

  data() {
    return {};
  },

  props: {
    showUploadProgress: props.showUploadProgress,
    file: Object,
    loadingFile: Object,
    remove: Function,
    placeholder: String,
    display: {
      type: String,

      validator(val) {
        return ["file", "file-input"].includes(val);
      }

    },
    fileListDisplay: {
      type: Function
    },
    locale: props.locale
  },
  computed: {
    percent() {
      return this.loadingFile && this.loadingFile.percent;
    },

    showPreview() {
      return Boolean(this.file && this.file.name);
    },

    showTextPreview() {
      return this.display === "file";
    },

    showInput() {
      return this.display === "file-input";
    },

    showProgress() {
      return !!(this.loadingFile && this.loadingFile.status === "progress");
    },

    showDelete() {
      return this.file && this.file.name && !this.loadingFile;
    },

    inputName() {
      const fileName = this.file && this.file.name;
      const loadingName = this.loadingFile && this.loadingFile.name;
      return this.showProgress ? loadingName : fileName;
    },

    inputText() {
      return this.inputName || this.placeholder;
    },

    inputTextClass() {
      return [`${this.classPrefix}-input__inner`, {
        [`${this.componentName}__placeholder`]: !this.inputName
      }];
    },

    classes() {
      return [`${this.componentName}__single`, `${this.componentName}__single-${this.display}`];
    }

  },
  methods: {
    renderProgress() {
      const h = this.$createElement;

      if (this.loadingFile.status === "fail") {
        const {
          ErrorCircleFilledIcon: ErrorCircleFilledIcon$1
        } = this.useGlobalIcon({
          ErrorCircleFilledIcon: ErrorCircleFilledIcon
        });
        return h(ErrorCircleFilledIcon$1);
      }

      if (this.showUploadProgress) {
        return h("div", {
          "class": `${this.componentName}__single-progress`
        }, [h(Loading), h("span", {
          "class": `${this.componentName}__single-percent`
        }, [Math.min(this.loadingFile.percent, 99), "%"])]);
      }
    },

    renderResult() {
      const h = this.$createElement;

      if (!!this.loadingFile && this.loadingFile.status === "fail") {
        const {
          ErrorCircleFilledIcon: ErrorCircleFilledIcon$1
        } = this.useGlobalIcon({
          ErrorCircleFilledIcon: ErrorCircleFilledIcon
        });
        return h(ErrorCircleFilledIcon$1);
      }

      if (this.file && this.file.name && !this.loadingFile) {
        const {
          CheckCircleFilledIcon: CheckCircleFilledIcon$1
        } = this.useGlobalIcon({
          CheckCircleFilledIcon: CheckCircleFilledIcon
        });
        return h(CheckCircleFilledIcon$1);
      }

      return "";
    },

    renderFilePreviewAsText() {
      const h = this.$createElement;
      if (!this.inputName) return;
      const {
        CloseCircleFilledIcon: CloseCircleFilledIcon$1
      } = this.useGlobalIcon({
        CloseCircleFilledIcon: CloseCircleFilledIcon
      });
      return h("div", {
        "class": [`${this.componentName}__single-display-text`, `${this.componentName}__display-text--margin`]
      }, [this.fileListDisplay() || h("span", {
        "class": `${this.componentName}__single-name`
      }, [this.inputName]), this.showProgress ? this.renderProgress() : h(CloseCircleFilledIcon$1, {
        "class": `${this.componentName}__icon-delete`,
        "nativeOn": {
          "click": e => this.remove({
            e,
            file: this.file
          })
        }
      })]);
    },

    renderFilePreviewAsInput() {
      const h = this.$createElement;
      return h("div", {
        "class": `${this.componentName}__single-input-preview ${this.classPrefix}-input`
      }, [h("div", {
        "class": this.inputTextClass
      }, [h("span", {
        "class": `${this.componentName}__single-input-text`
      }, [abridgeName(this.inputText, 4, 6)]), this.showProgress && this.renderProgress(), this.renderResult()])]);
    }

  },

  render() {
    var _this$locale, _this$locale$triggerU;

    const h = arguments[0];
    return h("div", {
      "class": this.classes
    }, [this.showInput && this.renderFilePreviewAsInput(), this.$scopedSlots.default && this.$scopedSlots.default(null), this.showTextPreview && this.renderFilePreviewAsText(), this.showInput && this.showDelete && h("span", {
      "class": `${this.componentName}__single-input-delete`,
      "on": {
        "click": e => this.remove({
          e,
          file: this.file
        })
      }
    }, [((_this$locale = this.locale) === null || _this$locale === void 0 ? void 0 : (_this$locale$triggerU = _this$locale.triggerUploadText) === null || _this$locale$triggerU === void 0 ? void 0 : _this$locale$triggerU.delete) || this.t(this.global.triggerUploadText.delete)])]);
  }

});

export { LSingleFile as default };
//# sourceMappingURL=single-file.js.map
