<!--
 * @Author: wlo_o
 * @Date: 2022-03-08 17:20:22
 * @LastEditors: Jone
 * @LastEditTime: 2022-06-23 15:48:45
 * @FilePath: /frontend/lib/components/MdUploadFile.vue
 * @Description: 文件上传
 * 参考 https://github.com/dream2023/vue-ele-form-upload-file
 * Copyright (c) 2022 by 青岛百洋智能科技股份有限公司, All Rights Reserved.
-->
<template>
  <ele-upload-file
    :class="desc.class"
    :style="desc.style"
    class="md-form-upload-file"
    v-bind="attrs"
    v-model="newValue"
    v-on="onEvents"
    ref="uploadFile"
  />
</template>
<script>
import EleUploadFile from 'vue-ele-upload-file'
import formMixin from 'vue-ele-form/lib/mixins/formMixin'
import uploadMixin from 'vue-ele-form/lib/mixins/uploadMixin'
import get from 'lodash/get'
import isString from 'lodash/isString'
import isFunction from 'lodash/isFunction'

export default {
  name: 'MdUploadFile',
  mixins: [formMixin, uploadMixin],
  components: {
    EleUploadFile,
  },
  computed: {
    defaultAttrs() {
      let defaultFilter = get(this, '$OecpMetaDataConfig.api.defaultFilter')
      let headers = {}
      if (defaultFilter && isFunction(defaultFilter)) {
        let rs = defaultFilter.call(this, {})
        headers = get(rs, 'headers') || {}
      }
      return {
        headers,
      }
    },
  },
  methods: {
    customInit: function (value) {
      let obj = value && isString(value) ? JSON.parse(value) : value || null
      return obj || null // 空字符串就返回null
    },
  },
}
</script>

<style>
.md-form-upload-file .el-upload__tip {
  line-height: 1.5;
}

.md-form-upload-file .el-upload-list__item:first-child {
  margin-top: 5px;
}
.el-upload-list__item .el-link--inner {
  padding-left: 26px;
}
.el-upload-list__item .el-link--inner img {
  display: none;
}
.el-upload-list__item .el-link--inner span:before {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  height: 18px;
  width: 18px;
  background: url('../common/img/file.png');
  background-size: 100% 100%;
}
.el-upload .el-button {
  background: #fff !important;
  color: #377dff !important;
  border: 1px solid #377dff !important;
  position: relative;
  padding-right: 10px;
}
.el-upload .el-button span {
  padding-left: 8px;
}
.el-upload .el-button:before {
  content: '';
  background: url('../common/img/upLoad.png') 100% 100%;
  background-size: 100% 100%;
  height: 15px;
  width: 15px;
  position: absolute;
  left: 10px;
  top: 9px;
}
.el-upload .el-button:hover {
  background: #fff !important;
  color: #2469f2d4 !important;
  border: 1px solid #2469f260 !important;
}
</style>
