<!-- 上传按钮 -->
<template>
  <div>
    <a-button type="primary" @click="uploadFileModal = true">
      {{ $t("lang.UploadButton.upload") }}
    </a-button>

    <a-modal
      v-model:visible="uploadFileModal" :width="600" :title="$t('lang.UploadButton.uploadFiles')" :footer="null"
      @cancel="handleCancel"
    >
      <a-tabs v-model:activeKey="selectedTabIndex">
        <a-tab-pane :key="1" :tab="$t('lang.UploadButton.selectFile')">
          <a-space direction="vertical" style="width: 100%; padding: 16px">
            <a-upload :before-upload="beforeUpload">
              <a-button type="primary">
                {{ $t("lang.UploadButton.selectFile") }}
              </a-button>
            </a-upload>
          </a-space>
        </a-tab-pane>
        <!-- <a-tab-pane :key="2" tab="扫描仪">
          <Scanner @upload="handleChange" />
        </a-tab-pane> -->
      </a-tabs>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { Button, Modal, Tabs, Upload, Space } from 'ant-design-vue';

export default defineComponent({
  name: 'UploadButton',

  components: {
    AButton: Button,
    AModal: Modal,
    ATabs: Tabs,
    ATabPane: Tabs.TabPane,
    AUpload: Upload,
    ASpace: Space,
  },

  props: {
    className: {
      type: String,
      default: null,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    field: {
      type: Object,
      default: () => null,
    },
    fieldValue: {
      type: Object,
      default: () => null,
    },
  },

  emits: ['change'],

  data() {
    return {
      selectedTabIndex: 1,
      newFieldValue: {
        displayValue: [],
        displayType: 'String',
      },
      uploadFileModal: false,
    };
  },

  methods: {
    handleCancel() {
      this.selectedTabIndex = 1;
      this.uploadFileModal = false;
    },

    beforeUpload(file) {
      this.$emit('change', {
        target: {
          files: [file],
        },
      });
      this.uploadFileModal = false;
      return false; // 阻止自动上传
    },

  },
});
</script>