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

    <Modal
      v-model:show="uploadFileModal"
      large="true"
      :show-ok-button="false"
      :show-canel-button="false"
      @cancel="selectedTabIndex = 1"
    >
      <template #header>
        {{ $t("lang.UploadButton.uploadFiles") }}
      </template>
               
      <ul class="nav nav-tabs">
        <li
          role="presentation"
          :class="{'active': selectedTabIndex == 1}"
        >
          <a href="javascript:void(-1);" @click="selectedTabIndex = 1">{{ $t("lang.UploadButton.selectFile") }}</a>
        </li>
        <!-- <li
          role="presentation"
          :class="{'active': selectedTabIndex == 2}"
        >
          <a href="javascript:void(-1);" @click="selectedTabIndex = 2">扫描仪</a>
        </li> -->
      </ul>
      <br />
      <div class="row">
        <div class="col-md-12">
          <span v-if="selectedTabIndex == 1">
            <div>
              <a
                href="javascript:;"
                class="btn btn-info file"
              >{{ $t("lang.UploadButton.selectFile") }}
                <input
                  autocomplete="off"
                  type="file"
                  @change="change"
                />
              </a>
            </div>
          </span>
          <!-- <span v-if="selectedTabIndex == 2">
            <div>
              <Scanner @upload="change" />
            </div>
          </span> -->
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>




export default {

  components: {
    
  },

  props: {
    /**
     * 类名(String)
     */
    className: {
      type: String,
      default: null,
    },
    /**
     * 是否只读(Boolean)
     */
    readonly: {
      type: Boolean,
      default: null,
    },
    field: {
      type: Object,
      default: function(){
        return null;
      },
    },
    fieldValue: {
      type: Object,
      default: function(){
        return null;
      },
    },
  },
  emits: ['change'],



  data: function () {
    return {
      selectedTabIndex: 1,    // 选择的页签序号
      newFieldValue: {
        displayValue: [],
        displayType: 'String',
      },
      uploadFileModal: false,
    };
  },

  methods: {
    change: function (e) {
      this.$emit('change', e);
      e.stopPropagation();
      this.uploadFileModal = false;
    },
  },
};
</script>


<style scoped>
.file {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.file input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    width: 100%;
}
</style>

