<template>
  <div>
    <label class="el-button el-button--primary el-button--medium" :class="{ 'is-disabled': disabled || noUse }">
      <i v-if="iconClass" :class="iconClass" class="mr5"></i>
      {{ disabled ? '上传中...' : label }}
      <input type="file" style="display:none;" :disabled="disabled || noUse" :accept="acceptType" ref="uploader" v-upload="this" />
    </label>
    <span class="fz12 gray" :style="tipsStyle"> {{ tips }}</span>
  </div>
</template>

<script>
export default {
  name: 'dm-upload',
  props: {
    model: {
      type: Object,
      default() {
        return {
          code: '',
          imgUrl: '',
          wxImg: ''
        };
      }
    },
    width: {
      type: String,
      default: 'auto'
    },
    tips: {
      type: String,
      default: '图片建议尺寸：100*100'
    },
    className: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: '上传'
    },
    fileType: {
      // 这个不要动
      type: String,
      default: 'file'
    },
    acceptType: {
      type: String,
      default: 'image/gif, image/jpeg,image/png'
    },
    showImg: {
      type: Boolean,
      default: true
    },
    tipsStyle: Object,
    url: {
      type: String,
      default: ''
    },
    needExtraParams: {
      // 上传是否需要额外参数
      type: Boolean,
      default: false
    },
    paramsObj: {
      // 额外参数以对象的形式展示  .keys一下
      type: Object
    },
    noUse: {
      // 禁用
      type: Boolean,
      default: false
    },
    iconClass: {
      type: String,
      default: ''
    }
  },
  watch: {
    model: {
      handler(val) {
        this.$emit('update:model', this.model);
        this.$emit('backImg', this.model);
      },
      deep: true
    }
  },
  data() {
    return {
      disabled: false,
      loading: false
    };
  }
};
</script>

<style lang="scss" scoped>
.upload-show-img {
  height: 85px;
  display: block;
  margin-top: 10px;
  cursor: pointer;
}
</style>
