<template>
  <label class="file-select">
    <!-- <input type="file" @change="handleFileChange" @click="handleFileSelect" accept=".phd, .PHD" /> -->
    <input @click="handleFileSelect" />
    <!-- <div @click="handleFileSelect"></div> -->
    <div class="file-name">
      <slot />
    </div>
  </label>
</template>

<script>
export default {
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0]
      if (file) {
        this.$emit('change', file)
      }
      e.target.value = ''
    },
    handleFileSelect() {
      console.log("dsfasdf");
      this.$emit("select")
    }
  }
}
</script>

<style lang="less" scoped>
.file-select {
  display: block;
  height: 42px;
  line-height: 42px;

  input {
    display: none;
  }
  .file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
