<template>
  <div>
    <a-button-group>
      <a-button :type="btnType" @click="openUploadModal" pre-icon="carbon:cloud-upload">
        {{ btnText || t('component.upload.upload') }}
      </a-button>
      <Tooltip placement="bottom" v-if="showPreview">
        <template #title>
          {{ t('component.upload.uploaded') }}
          <template v-if="fileListRef.length">
            {{ fileListRef.length }}
          </template>
        </template>
        <!-- <a-button @click="openPreviewModal">
          <Icon icon="bi:eye" />
          <template v-if="fileListRef.length && showPreviewNumber">
            {{ fileListRef.length }}
          </template>
        </a-button> -->
      </Tooltip>
    </a-button-group>

    <UploadModal v-bind="bindValue" @register="registerUploadModal" @change="handleChange" />

    <!-- <UploadPreviewModal
      :value="fileListRef"
      @register="registerPreviewModal"
      @list-change="handlePreviewChange"
    /> -->
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, watch, unref, computed } from 'vue'

  import UploadModal from './UploadModal.vue'
  import UploadPreviewModal from './UploadPreviewModal.vue'
  import Icon from '/@/components/Icon'
  import { Tooltip } from 'ant-design-vue'

  import { useModal } from '/@/components/Modal'

  import { uploadContainerProps } from './props'
  import { omit } from 'lodash-es'
  import { useI18n } from '/@/hooks/web/useI18n'

  export default defineComponent({
    name: 'BasicUpload',
    components: { UploadModal, UploadPreviewModal, Icon, Tooltip },
    props: uploadContainerProps,
    emits: ['change'],

    setup(props, { emit, attrs }) {
      const { t } = useI18n()
      // 上传modal
      const [registerUploadModal, { openModal: openUploadModal }] = useModal()

      //   预览modal
      // const [registerPreviewModal, { openModal: openPreviewModal }] = useModal()

      const fileListRef = ref<string[]>([])

      const showPreview = computed(() => {
        const { emptyHidePreview } = props
        if (!emptyHidePreview) return true
        return emptyHidePreview ? fileListRef.value.length > 0 : true
      })

      const bindValue = computed(() => {
        const { btnText, btnType, ...resetProps } = props
        const value = { ...attrs, ...resetProps }
        return omit(value, 'onChange')
      })

      watch(
        () => props.value,
        (value = []) => {
          fileListRef.value = value
        },
        { immediate: true }
      )

      // 上传modal保存操作
      function handleChange(urls: string[]) {
        fileListRef.value = [...unref(fileListRef), ...(urls || [])]
        emit('change', fileListRef.value)
      }

      // 预览modal保存操作
      function handlePreviewChange(urls: string[]) {
        fileListRef.value = [...(urls || [])]
        emit('change', fileListRef.value)
      }

      return {
        registerUploadModal,
        openUploadModal,
        handleChange,
        handlePreviewChange,
        // registerPreviewModal,
        // openPreviewModal,
        fileListRef,
        showPreview,
        bindValue,
        btnText: props.btnText,
        btnType: props.btnType,
        t
      }
    }
  })
</script>
