<template>
  <div id="c-upload">
    <el-upload
      v-if="url"
      ref="upload"
      :action="url"
      :limit="limit"
      :accept="accept"
      :list-type="listType"
      :file-list="list"
      :on-exceed="outLimit"
      :on-preview="filePreview"
      :on-success="onSuccess"
      :before-remove="onRemove"
    >
      <el-button type="primary" size="mini">选择文件</el-button>
      <template #tip v-if="tip">
        <p style="color: #ff0000">{{ tip }}</p>
      </template>
    </el-upload>
    <el-dialog :visible.sync="dialog.show" append-to-body>
      <img width="100%" :src="dialog.url" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'c-upload',
  props: {
    // 图片上传地址
    url: { type: String },
    // 可上传文件数目
    limit: { type: Number },
    // 接收上传的文件类型
    accept: { type: String, default: 'image/png, image/jpeg' },
    // 文件列表的类型--picture-card---picture
    listType: { type: String, default: 'picture-card' },
    // 文件提醒
    tip: { type: String, default: undefined },
    // 已有数据，赋值，预览
    list: { type: Array },
  },
  model: {
    prop: 'list',
    event: 'change',
  },
  data: function () {
    return {
      // 图片预览
      dialog: { show: false, url: '' },
      // 图片列表
      fileList: [],
    };
  },
  methods: {
    // 图片预览
    filePreview(file) {
      // this.dialog = { show: true, url: file.url };
      window.open(file.url);
    },
    // 只允许上传多少个文件
    outLimit() {
      this.$message.error(`只允许上传${this.limit}个文件`);
    },
    // 上传成功,response：成功信息，file：图片信息，fileList：图片列表
    onSuccess(response, file, fileList) {
      if (response.errcode !== 0) {
        this.$message({ message: `上传失败`, type: 'error' });
        return;
      }
      response = _.omit(response, ['errcode', 'errmsg']);
      let list = _.cloneDeep(this.list);
      if (_.isArray(list)) {
        list.push({ ...response, name: file.name, url: `${process.env.VUE_APP_HOST}${response.uri}` });
      } else {
        list = [{ ...response, name: file.name, url: `${process.env.VUE_APP_HOST}${response.uri}` }];
      }
      this.$emit('change', list);
    },
    // 删除图片
    onRemove(file, fileList) {
      console.log(file);
      let list = _.cloneDeep(this.list);
      console.log(list);
      list = list.filter((f) => f.uri !== _.get(file, 'uri'));
      this.$emit('change', list);
      return true;
    },
  },
};
</script>

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