<template>
  <div class="curren-upload">
    <el-upload
      action="#"
      list-type="picture-card"
      :auto-upload="false"
      :multiple="multiple"
      :limit="limit"
      :accept="picExt"
      :file-list="searchData"
      :on-exceed="handleExceed"
      :on-remove="handleRemove"
      :on-preview="handlePictureCardPreview"
      :on-change="changeUpload"
    >
        <i slot="default" class="el-icon-plus"></i>
        <!-- <div slot="file" slot-scope="{file}">
          <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt=""
          >
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div> -->
    </el-upload>
    <el-dialog 
      :visible.sync="dialogVisible"
      top="1vh"
      width="35%"
      :modal-append-to-body="false"
      :append-to-body="true"
      :show-close="true"
    >
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "currenUploadPictureCard",
  props: {
    limit: {
      type: Number,
      default: 0
    },
    multiple:{
      type: Boolean,
      default:false
    },
    searchData: {
      type: Array,
      default: () => {
        return []
      }
    },
    picExt: {
      type: String,
      default: "",
    }
  },
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false
    }
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // handleDownload(file) {
    //   console.log(file);
    // },
    changeUpload (val) {
      this.$emit('changeUpload', val)
    },
    handleRemove (file, fileList) {
      this.$emit('handleRemove', fileList)
    },
    handleExceed (val) {
      this.$warningMsg('最多上传' + this.limit + '个文件')
    }
  }
}
</script>