<template>
  <el-dialog title="上传现场资料" :visible="visible" @close="handleClose">

    <div v-if="proof_url">
      <el-tooltip content="点击下载" placement="top">
        <a style="color:#409EFF" :href="proof_url">{{ proof_name}}</a>
      </el-tooltip>
      <el-link
        :underline="false"
        @click="deleteUrl"
        type="warning"
        style="margin: 0 0 0 16px"
      >删除</el-link>
    </div>

    <div class="activity-upload" style="padding-bottom:20px" v-else>
      <div class="btnupload">
         <i class="el-icon-plus avatar-uploader-icon"></i>
         <file-upload-pdf
           class="Upload"
           :accept="'.xlsx,.xls,.pdf,.zip,.rar,.jpg,.png,.mp4'"
           :multiple="false"
           :uploadcondition="beforeOtherUpload"
           @UploadErrorEvent="UploadErrorOtherproof_url"
           @UploadSuccessEvent="UploadSuccessOtherproof_url"
         />
       </div>
       <div class="txt-tips fl">
         <p>建议大小：小于5MB</p>
         <p>文件格式：.xlsx,.xls,.pdf,.zip,.rar,.jpg,.png,.mp4</p>
      </div>
    </div>

    <!-- <div class="flex-end">
      <el-button type="primary" size="mini" @click="onSave">
        保存
      </el-button>
    </div> -->
  </el-dialog>
</template>'

<script>
export default {
  props:['visible'],
  computed:{
    _visible:{
      get(){
        return this.visible
      },
      set(newVal){
        this.$emit('update:visible', newVal)
      }
    }
  },
  data(){
    return {
      proof_url:"",
      proof_name:""
    }
  },
  methods:{
      beforeOtherUpload(file) {
      let isJPG = false;

      console.log(file)
      if (
        file.type === "application/vnd.ms-excel" ||
        file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        file.type === "application/pdf" ||
        file.type === "application/x-zip-compressed" ||
        file.type === "image/png" ||
        file.type === "image/jpg" ||
        file.type === "image/jpeg" ||
        file.type === "video/mp4"
      ) {
        isJPG = true;
      }
      let name = file.name;
      let list = name.split(".");
      if (list[list.length - 1] === "rar" || list[list.length - 1] === "7z" || list[list.length - 1] === "zip") {
        isJPG = true;
      }

      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error("文件格式不正确！");
      }
      if (!isLt2M) {
        this.$message.error("文件大小不能超过 5MB!");
      }
      return isJPG && isLt2M;
    },
        //其他文件上传失败
    UploadErrorOtherproof_url(res) {
      if (res !== "break") {
        this.$message.error("文件上传失败!");
      }
    },
    async UploadSuccessOtherproof_url(data) {
      const { url, name } = data;
      // this.proof_url.push({ url, name });

      this.$emit('change',{
        url,
        name
      })

      this.handleClose()
    },
    handleClose(){
      this.proof_name = ""
      this.proof_url = ""
      this._visible = false
    },
    deleteUrl(){
      this.proof_name = ""
      this.proof_url = ""
    },
    onSave(){
      if(!this.proof_url){
        this.$message.warning('请上传现场资料')
        return
      }

      this.$emit('change',{
        url:this.proof_url,
        name:this.proof_name
      })

      this.handleClose()
    }
  }
}
</script>
