<template>
  <div class="uploader-card sa-flex sa-flex-wrap">
    <uploader-item
      :urlList="urlList.data"
      :multiple="multiple"
      :fileType="fileType"
      :size="size"
      :isCropper="isCropper"
      @action="onUpdateValue"
    ></uploader-item>
    <uploader-action
      :urlList="urlList.data"
      :action="action"
      :savelog="savelog"
      :multiple="multiple"
      :max="max"
      :fileType="fileType"
      :size="size"
      :filesize="filesize"
      :placeholder="placeholder"
      :iconUrl="iconUrl"
      @action="onUpdateValue"
      @success="onSuccess"
    >
    </uploader-action>
  </div>
</template>

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

<script setup>
  import { computed, reactive } from 'vue';
  import { isEmpty, isArray } from 'lodash';
  import UploaderItem from './uploader-item.vue';
  import UploaderAction from './uploader-action.vue';

  const emit = defineEmits(['updateValue', 'success']);
  const props = defineProps([
    'url',
    'action',
    'savelog',
    'group',
    'fileType',
    'multiple',
    'max',
    'size',
    'isCropper',
    'filesize',
    'placeholder',
    'iconUrl',
  ]);

  const urlList = reactive({
    data: computed(() =>
      !isEmpty(props.url) ? (isArray(props.url) ? props.url : props.url.split(',')) : [],
    ),
  });

  function onUpdateValue(urlList) {
    emit('updateValue', props.multiple ? urlList : urlList.length > 0 ? urlList[0] : '');
  }

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