<!--
 * @Description  : 上传文件
 * @Author       : luqing
 * @Date         : 2020-11-09 18:36:48
 * @LastEditors: gezuxia
 * @LastEditTime: 2021-04-14 15:10:00
-->
<template>
  <div class="dao-file-input">
    <div class="input-wrap selection" v-if="!file" @click='onClick'>
      <span class="flex-content">{{placeholder}}</span>
      <el-button type="primary" size="mini" class="dao-btn btn-sm">{{btnText}}</el-button>
    </div>
    <div class="input-wrap selected" v-if="file">
       <span class="flex-content file-icon-wrap">
        <slot name="fileIcon"></slot>
      </span>
      <span class="flex-content file-name-wrap">
        <div>{{file.name}}</div>
      </span>
      <span class="flex-content" v-if="!disabled">
        <i class="icon el-icon-error" @click="clear"></i>
      </span>
    </div>
    <input type="file" ref="input" :accept="accept" @change="onChange">
  </div>
</template>
<script>
  import _ from 'lodash';
  export default {
    name: 'DaoInputFile',
    props: {
      disabled: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: ''
      },
      btnText: {
        type: String,
        default: '浏览'
      },
      accept: {
        type: String,
        default: '*'
      },
      value: File
    },
    data() {
      return {
        file: null
      };
    },
    methods: {
      onClick() {
        this.$refs.input.click();
      },
      onChange(event) {
        this.file = _.get(event, 'target.files[0]', null);
        this.updateModel();
      },
      clear() {
        this.$refs.input.value = '';
        this.file = null;
        this.updateModel();
        this.$emit('clear', this.file);
      },
      updateModel() {
        this.$emit('input', this.file);
        this.$emit('change', this.file);
      }
    }
  };
</script>
