<template>
  <div id="upload-file">
    <el-upload
      ref="uploadFile"
      :action="url"
      :before-remove="handleRemove"
      :before-upload="changeFile"
      :on-success="onSuccess"
      :limit="limit"
      multiple
      :on-exceed="outLimit"
      :file-list="fileList"
      :on-preview="onPreview"
      :on-remove="remove"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <div slot="tip" class="el-upload__tip">{{ desc === undefined ? '只能上传不超过1MB的文件' : desc }}</div>
    </el-upload>
    <el-dialog title="查看" :visible.sync="dialog" center width="90%">
      <el-row>
        <el-form :model="disObject" label-position="left" label-width="auto">
          <el-form-item label="文件名" prop="name">
            <el-input v-model="disObject.name" placeholder="请输入新文件名"></el-input>
          </el-form-item>
          <el-image style="width: 100%; height: 100%" :src="disObject.url" fit="scale-down" v-if="disObject.type === 'pic'"></el-image>
        </el-form>
      </el-row>
      <template #footer>
        <el-row type="flex" align="middle" justify="center">
          <el-col :span="8"><el-button type="info" size="small" @click="dialog = false">返回 </el-button></el-col>
          <el-col :span="8" v-if="disObject.type === 'file'"><el-button size="small" @click="downLoad(disObject.url)">下载</el-button></el-col>
          <el-col :span="8"><el-button type="primary" size="small" @click="changeName()">修改文件名</el-button></el-col>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'upload-file',
  props: {
    url: { type: null },
    type: { type: String },
    limit: { type: Number },
    data: { type: null },
    desc: { type: String },
  },
  components: {},
  data: () => ({
    fileList: [],
    dialog: false,
    disObject: {},
    test: {},
  }),
  created() {
    if (this.data) {
      this.defalutProcess(this.data);
    }
  },
  computed: {},
  watch: {
    data: {
      handler(val) {
        this.defalutProcess(val);
      },
    },
  },
  methods: {
    handleRemove(file) {
      return true;
    },
    changeFile(file, fileList) {
      let size = file.size / 1024 / 1024;
      if (size > 2) {
        return false;
      }
    },
    onSuccess(response, file, fileList) {
      //将文件整理好传回父组件
      this.$emit('upload', { type: this.type, data: response });
    },
    outLimit() {
      this.$message.error(`只允许上传${this.limit}个文件`);
    },
    onPreview(file) {
      let duplicate = JSON.parse(JSON.stringify(file));
      let url = duplicate.url !== undefined ? duplicate.url : duplicate.response.uri;
      let res = this.isPic(url);
      if (res) {
        this.disObject.type = 'pic';
      } else {
        this.disObject.type = 'file';
      }
      this.disObject.url = url;
      this.dialog = true;
    },
    defalutProcess(val) {
      if (typeof val === 'object' && _.get(val, length) !== undefined && val.length > 0) {
        let newArr = [];
        val.map(item => {
          let object = {};
          object.name = item.name;
          object.url = `${item.uri}`;
          newArr.push(object);
        });
        this.$set(this, `fileList`, newArr);
      } else if (typeof val === 'object' && _.get(val, length) === undefined) {
        let object = {};
        object.name = val.name;
        object.url = `${val.uri}`;
        this.$set(this, `fileList`, [object]);
      } else if (typeof val === 'string') {
        this.$set(this, `fileList`, [{ name: '附件', url: val }]);
      }
    },
    isPic(url) {
      if (url.includes('.jpg')) {
        return true;
      }
      if (url.includes('.bmp')) {
        return true;
      }
      if (url.includes('.jpge')) {
        return true;
      }
      if (url.includes('.png')) {
        return true;
      }
      if (url.includes('.gif')) {
        return true;
      }
    },
    downLoad(url) {
      window.open(url);
    },
    changeName() {
      this.$emit('changeName', { type: this.type, data: this.disObject });
      this.dialog = false;
      this.disObject = {};
    },
    remove(file) {
      let newFileList = this.fileList.filter(file => file.url !== file.url);
      this.$set(this, `fileList`, newFileList);
      this.$emit('toRemove', { type: this.type, data: file });
    },
  },
};
</script>

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