<template>
  <div>
    <el-upload
      :action="actionurl"
      :headers="headers"
      :disabled="isDisable"
      list-type="picture-card"
      :before-upload="fileUpload"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="sucess"
      :limit="15"
      :on-exceed="handleExceed"
      :file-list="imgArr"
      :accept="accept"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img
        width="100%"
        :src="dialogImageUrl"
        alt=""
      >
    </el-dialog>
  </div>
</template>

<script>
  import { getBaseUrl } from '@/utils/index';
  export default {
    props: {
      isDisable: {
        type: Boolean,
        default: false
      },
      imgList: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        imgArr: [
        ],
        headers: {
          token: localStorage.getItem('token'),
        },
        actionurl: '#',
        accept: '.png,.jpeg'
      };
    },
    watch:{
      imgList(newv, oldv) {
        this.imgArr = newv;
      }
    },
    created() {
      this.actionurl = getBaseUrl('/diagnose/illness/file');
    },
    methods: {
      handleRemove(file, fileList) {
        this.imgArr = fileList;
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
            files.length + fileList.length
          } 个文件`
        );
      },
      fileUpload(file) {
   
      },
      sucess(response, file, fileList) {
        this.imgArr = fileList;
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 15 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
            files.length + fileList.length
          } 个文件`
        );
      },
      setNewArr() {
        const newArr = [];
        if (this.imgArr && this.imgArr.length) {
          this.imgArr.forEach(item => {
            if (item.response) {
              newArr.push(item.response.data);
            } else if(item.url && item.from) {
              newArr.push(item.url);
            }
          });
        }
        return newArr;
      }
    },
  };
</script>

<style>
</style>