<template>
  <div>
    <el-badge :value="value.length" class="item">
      <el-button
        icon="el-icon-plus"
        v-if="type != 'view'"
        type="primary"
        @click="handleUpload"
        :size="size"
      >
        上传</el-button
      >
      <el-button
        icon="el-icon-view"
        v-else
        type="primary"
        :disabled="viewDisabled"
        @click="handleUpload"
      >
        查看</el-button
      >
    </el-badge>

    <file-upload @success="getFiles" ref="fileUploadRef"></file-upload>
  </div>
</template>

<script>
  import fileUpload from './main.vue';

  export default {
    name: 'index',
    components: { fileUpload },
    model: {
      prop: 'value',
      event: 'updateVal'
    },
    props: {
      type: {
        type: String,
        default: ''
      },
      viewDisabled: {
        type: Boolean,
        default: false
      },
      value: {
        type: Array,
        default: () => {
          return [];
        }
      },
      size: {
        type: String,
        default: 'mini'
      }
    },
    data() {
      return {
        selectVal: ''
      };
    },
    watch: {
      value: {
        handler(newVal) {
          this.selectVal = newVal || [];
        },
        immediate: true
      }
    },
    created() {},
    methods: {
      handleUpload() {
        this.$refs.fileUploadRef.open(this.selectVal, this.type);
      },
      getFiles(val = []) {
        this.$emit('updateVal', val);
      }
    }
  };
</script>

<style scoped lang="scss"></style>
