<template>
  <div class="sa-uploader" :style="{ width: mode == 'input' ? '100%' : '' }">
    <template v-if="fileType == 'cert'">
      <uploader-cert
        :url="modelValue"
        :placeholder="placeholder"
        @updateValue="onUpdateValue"
      ></uploader-cert>
    </template>
    <template v-else>
      <template v-if="mode == 'card'">
        <uploader-card
          :url="modelValue"
          :action="action"
          :savelog="savelog"
          :group="group"
          :fileType="fileType"
          :multiple="multiple"
          :max="max"
          :size="size"
          :placeholder="placeholder"
          :isCropper="isCropper"
          :filesize="filesize"
          :iconUrl="iconUrl"
          @updateValue="onUpdateValue"
          @success="onSuccess"
        ></uploader-card>
      </template>
      <template v-if="mode == 'input'">
        <uploader-input
          :url="modelValue"
          :action="action"
          :savelog="savelog"
          :group="group"
          :fileType="fileType"
          :multiple="multiple"
          :max="max"
          :isCropper="isCropper"
          :filesize="filesize"
          @updateValue="onUpdateValue"
          @success="onSuccess"
        ></uploader-input>
      </template>
    </template>
  </div>
</template>

<script>
  export default {
    name: 'SaUploader',
  };
</script>

<script setup>
  /**
   * SaUploader  通用文件上传组件
   * @description 本组件用于文件上传场景，内嵌表单
   *
   * @property {String | Array}   modelValue      文件地址
   * @property {String | Array}   fileType        文件类型 默认 emptyString=全部
   * @property {String}           mode           风格 （ 'input'=输入框(默认) | 'card'=图片预览 ）
   * @property {String}           action          操作（ 'select'=选择文件 (默认) | 'upload'=直接上传 | 'directly'=原生上传 ）
   * @property {String | Number}  savelog         是否保存到文件管理可供选择 默认1，
   * @property {String}           group           上传的文件管理分组
   * @property {Boolean}          multiple         是否支持多文件上传 默认false
   * @property {String | Number}  max             最大文件数量 默认0不限制
   * @property {Boolean}          icon            是否显示选择图标 默认false（只有在input）
   * @property {String}           text            显示选择文案 默认 "选择"（只有在input）
   * @property {String}           size            item尺寸
   * @property {String}           placeholder     提示文本
   * @event    {Function}        update:modelValue 更新表单
   * @event    {Function}        success 返回所有数据
   * @example  <sa-uploader></sa-uploader>
   */

  import UploaderCard from './uploader-card.vue';
  import UploaderCert from './uploader-cert.vue';
  import UploaderInput from './uploader-input.vue';

  const emit = defineEmits(['update:modelValue', 'success']);
  const props = defineProps({
    modelValue: {
      type: [String, Array],
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    fileType: {
      type: [String, Array],
      default: '',
    },
    mode: {
      type: String,
      default: 'card',
    },
    action: {
      type: String,
      default: 'select',
    },
    savelog: {
      type: [Number, String],
      default: 1,
    },
    group: {
      type: String,
      default: 'default',
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    max: {
      type: [Number, String],
      default: 0,
    },
    icon: {
      type: Boolean,
      default: true,
    },
    text: {
      type: String,
      default: '选择',
    },
    size: {
      type: [Number, String],
      default: 56,
    },
    isCropper: {
      type: Boolean,
      default: false,
    },
    filesize: {
      type: Number,
    },
    iconUrl: {
      type: String,
      default: '',
    },
  });

  function onUpdateValue(value) {
    emit('update:modelValue', value);
  }

  function onSuccess(data) {
    emit('success', data);
  }
</script>
