<template>
  <div class="el-upload-image" :class="{'el-upload-image--solid': status=='success', 'el-upload-image--error': status=='error'}">
    <template v-if="status=='ready'">
      <el-upload :show-file-list="false" 
        :action="action"
        :headers="headers"
        :data="data"
        :name="name"
        :accept="accept"
        :before-upload="beforeUpload"
        :on-progress="handleProgress" 
        :on-success="handleSuccess" 
        :on-error="handleError"
        :http-request="httpRequest"
        :disabled="disabled">
        <i class="el-icon-upload el-upload-image__icon"></i>
        <div class="el-upload-image__tip">上传图片</div>
      </el-upload>
    </template>
    <template v-if="status=='progress'">
      <el-progress class="el-upload-image__progress" :percentage="100" :text-inside="true" :stroke-width="4"></el-progress>
      <div class="el-upload-image__tip">文件上传中</div>
    </template>
    <template v-if="status=='success' || status=='view'">
      <div class="el-upload-image__imgwrap">
        <img v-if="imageUrl" :src="imageUrl" class="el-upload-image__image" />
        <div class="el-upload-image__hover">
          <div class="el-upload-image__hover__group">
            <i class="el-icon-view el-upload-image__hover__icon" @click="viewImage"></i>
            <span class="el-icon-del">
              <el-button v-if="status=='success'" @click="removeImage" type="text">删除</el-button>
            </span>
          </div>
        </div>
      </div>
    </template>
    <template v-if="status=='error'">
      <div class="el-upload-image__imgwrap">
        <i class="el-icon-warning-outline el-upload-image__icon"></i>
        <div class="el-upload-image__tip">图片错误</div>
        <div class="el-upload-image__hover">
          <i class="el-icon-delete el-upload-image__hover__icon" @click="removeImage"></i>
        </div>
      </div>
    </template>
    <el-dialog title="预览" :visible.sync="dialogVisible">
      <img width="100%" :src="imageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import ElDialog from 'element-ui-for-gov/packages/dialog';
import ElUpload from 'element-ui-for-gov/packages/upload';
import ElProgress from 'element-ui-for-gov/packages/progress';
function noop() {}
export default {
  name: 'ElUploadImage',
  components: {
    ElDialog,
    ElUpload,
    ElProgress
  },
  props: {
    action: {
      type: String,
      required: true
    },
    headers: {
      type: Object,
      default() {
        return {};
      }
    },
    data: Object,
    name: {
      type: String,
      default: 'file'
    },
    withCredentials: Boolean,
    accept: String,
    type: {
      type: String,
      default: 'select'
    },
    beforeUpload: Function,
    beforeRemove: Function,
    onRemove: {
      type: Function,
      default: noop
    },
    onChange: {
      type: Function,
      default: noop
    },
    onSuccess: {
      type: Function,
      default: noop
    },
    onProgress: {
      type: Function,
      default: noop
    },
    onPreview: {
      type: Function,
      default: noop
    },
    onError: {
      type: Function,
      default: noop
    },
    httpRequest: Function,
    disabled: Boolean
  },
  data() {
    return {
      dialogVisible: false,
      status: 'ready',
      percentage: 0,
      imageUrl: '',
      storeFile: null
    };
  },
  methods: {
    handleProgress(event, file, fileList) {
      if (this.status !== 'progress') {
        this.status = 'progress';
      }
      this.percentage = parseInt(event.percent, 10);
      this.onProgress(event, file, fileList);
    },
    handleSuccess(response, file, fileList) {
      this.status = 'success';
      this.imageUrl = URL.createObjectURL(file.raw);
      this.storeFile = file;
      this.onSuccess(response, file, fileList);
    },
    handleError(err, file, fileList) {
      this.status = 'error';
      this.onError(err, file, fileList);
    },
    removeImage() {
      let doRemove = () => {
        this.onRemove(this.storeFile);
        this.imageUrl = '';
        this.storeFile = null;
        this.percentage = 0;
        this.status = 'ready';
      };
      if (!this.beforeRemove) {
        doRemove();
      } else if (typeof this.beforeRemove === 'function') {
        const before = this.beforeRemove(this.storeFile);
        if (before && before.then) {
          before.then(() => {
            doRemove();
          }, noop);
        } else if (before !== false) {
          doRemove();
        }
      }
    },
    viewImage() {
      this.dialogVisible = true;
      this.onPreview(this.storeFile);
    },
    setImage(imgUrl, canDel) {
      this.imageUrl = imgUrl;
      this.storeFile = null;
      this.percentage = 0;
      this.status = canDel ? 'success' : 'view';
    },
    reset() {
      this.imageUrl = '';
      this.storeFile = null;
      this.percentage = 0;
      this.status = 'ready';
    }
  }
};
</script>
