<template>
  <div class="uploader-input">
    <uploader-item :urlList="urlList.data" :multiple="multiple" :fileType="fileType" :size="size" :isCropper="isCropper"
      @action="onUpdateValue"></uploader-item>
    <div class="input-item sa-flex">
      <el-input class="url-input" v-model="inputUrl" @change="emit('updateValue', inputUrl)"></el-input>
      <div class="svg" @click.stop="onSelect">{{ t('common.selectIcon') }}</div>
      <uploader-action :urlList="urlList.data" :action="action" :savelog="savelog" :multiple="multiple" :max="max"
        :fileType="fileType" :size="size" :filesize="filesize" @action="onUpdateValue" @success="onSuccess">
        <template #action>
          <div class="image">{{ t('common.uploadImage') }}</div>
        </template>
      </uploader-action>
    </div>
  </div>
</template>
<script>
export default {
  name: 'UploaderInput',
};
</script>
<script setup>
import { computed, reactive, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useModal } from '@/sheep/hooks';
import { isEmpty, isArray } from 'lodash';
import UploaderAction from './uploader-action.vue';
import UploaderItem from './uploader-item.vue';
import IconPicker from '../sa-icon/sa-icon-picker.vue';

const { t } = useI18n();

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

const inputUrl = ref(props.url);
watch(
  () => props.url,
  () => {
    inputUrl.value = props.url;
  },
);

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);
}

function onSelect() {
  useModal(
    IconPicker,
    {
      title: t('common.selectIcon'),
    },
    {
      confirm: (res) => {
        emit('updateValue', res.data);
      },
    },
  );
}
</script>
<style lang="scss" scoped>
.input-item {
  width: 100%;
  max-width: 360px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--sa-border);
  border-radius: 4px;
  overflow: hidden;

  :deep() {
    .el-input {
      --el-input-border: none;
      --el-input-border-color: none;
      line-height: 30px;

      .el-input__inner {
        height: 30px;
        line-height: 30px;
        border-radius: 4px 0 0 4px;
      }
    }
  }

  .url-input {
    flex: 1;

    .el-tooltip__trigger {
      flex: 1;
    }
  }

  .svg {
    border-left: 1px solid var(--sa-border);
  }

  .image {
    border-left: 1px solid var(--sa-border);
  }

  .svg,
  .image {
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    font-size: 12px;
    cursor: pointer;
  }
}
</style>
