<template>
  <div class="responseDialog">
    <el-dialog  :title="form.id?'编辑' +title[form.processType]:'添加' +title[form.processType]" :visible.sync="showDialog" width="500px" :close-on-click-modal="false"  :before-close="handleClose" append-to-body>
      <el-form  :model="form" :rules="rules" ref="reportForm" label-width="120px" label-position="left" v-loading="loading">
        <el-form-item v-if="form.processType!=5" :label="timeType[form.processType]">
          <el-date-picker v-model="form.occuredTime" value-format="yyyy-MM-dd" type="date"  placeholder="请选择时间" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item v-else label="文献名称：" prop="fileName">
          <el-input  v-model="form.fileName" autocomplete="off" placeholder="请输入文献名称"></el-input>
        </el-form-item>
        <template v-if="form.processType==0">
          <el-form-item  label="地点">
            <el-input  v-model="form.address" autocomplete="off" placeholder="请输入地点"></el-input>
          </el-form-item>
          <el-form-item  label="参与人">
            <el-input  v-model="form.participants" autocomplete="off" placeholder="请输入参与人"></el-input>
          </el-form-item>
        </template>
        <el-form-item v-if="form.processType!=0" label="附件：">
          <template>
            <div> 
              <p v-if="form.reportFile && form.reportFile.name">{{ form.reportFile.name }}</p>
              <el-upload  ref="upload" class="upload-file" drag action="#" :auto-upload="false" :show-file-list="true" :on-change="onChange" :limit="1"  :on-remove="handleRemove" :on-exceed="handleExceed">
                <i :class="!file ? 'el-icon-upload' : 'el-icon-refresh'"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip"></div>
              </el-upload>
            </div>
          </template>
             
        </el-form-item>
        <el-form-item v-if="form.processType==5" label="备注内容：">
          <el-input type='textarea' v-model="form.remark" autocomplete="off" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="finish" >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:['reportId'],
  data() {
    return {
      showDialog: false,
      loading: false,
      form: {},
      rules: {},
      Already: [],
      file: [],
      isFinish: false,
      timeType: {
        '1': '提出无效时间',
        '2': '陈述答复时间',
        '0': '口审时间',
        '3': '无效决定时间',
        '4': '发起诉讼时间',
      },
      title: {
        // type为5是非专利文献，后台未定义
        '1': '无效请求书',
        '2': '陈述意见书',
        '0': '口审记录',
        '3': '无效决定书',
        '4': '行政诉讼书',
        '5': '非专利文献',
      },
      rules: {
        fileName:[{required : false , message:'请输入文献名称',trigger:'blur'}]
      }
    }
  },
  watch: {
  },
  mounted() {

  },
  methods: {
    open(form) {
      this.form = JSON.parse(JSON.stringify(form))
      if (this.form.processType == 5 ) {//专利文献需要进行名称校验
        this.rules.fileName[0].required=true
      } else {
        this.rules.fileName[0].required=false
      }
      if(this.form.processType == 0 && this.form.id){
        this.$set(this.form,'address',this.form.oralExam.address)
        this.$set(this.form,'participants',this.form.oralExam.participants)
      }
      this.showDialog=true
    },
    // 弹窗确定
    finish() {
      if (['0','5'].includes(this.form.processType)  ||(this.file && this.file.length > 0)) {
        var formData = new FormData()
        this.form.reportId=this.reportId
        if (this.form.processType != 5) {
          if (this.file && this.form.processType!=0) {
            for (var i = 0; i < this.file.length; i++) {
              formData.append("file", this.file[i]);
            }
          }
          formData.append('invalidProcessStr', JSON.stringify(this.form))
        } else {
          if (!this.form.fileName) {
            this.$refs.reportForm.validateField('fileName')
            return false
          }
          if (this.file) {
            for (var i = 0; i < this.file.length; i++) {
              formData.append("files", this.file[i]);
            }
          }
          formData.append('proofAddNewDTOStr', JSON.stringify(this.form))
        }
        if (this.form.processType != 5) {
          // 上传无效请求书、口审记录等（无效流程的上传接口）
          this.addInvalidProcess(formData)
        } else {
          // 上传非专利文献
          this.ProofByFile(formData)
        }
      } else {
        this.$message.error('请上传文件')
        return false
      }
     
    },
    // 上传无效请求书
    addInvalidProcess(formData) {
      if (!this.form.id) {
        this.$api.addInvalidProcess(formData).then(response => {
          if (response.code == 200) {
            this.isFinish = !this.isFinish
            this.handleClose()
            this.$emit('isFinish', this.isFinish)
            this.$message.success('上传成功')
          }
        })
      } else {
        this.$api.updateInvalidProcess(formData).then(response => {
          if (response.code == 200) {
            this.isFinish = !this.isFinish
            this.handleClose()
            this.$emit('isFinish', this.isFinish)
            this.$message.success('编辑成功')
          }
        })
      }
    },
    // 上传非专利文件
    ProofByFile(formData) {
      if (!this.form.id) {
        this.$api.addProofByFile(formData).then(response => {
          if (response.code == 200) {
            this.isFinish = !this.isFinish
            this.handleClose()
            this.$emit('isFinish', this.isFinish)
            this.$message.success('上传成功')
          }
        }).catch(error => {

        })
      } 
      
    },
    // 关闭弹窗
    handleClose() {
      if (this.form.processType!=0) {
        this.$refs.upload.clearFiles()
      }
      if (this.form.processType == 5) {
        this.$refs.reportForm.resetFields()
      }
      this.showDialog = false
      this.file = []
      this.form = {}
    },
    onChange(file, fileList) {
      if (file && file.length>0) {
        this.$message.error("请选择文件");
        return false
      }
      if (this.form.reportFiles) {
        var index3 = this.form.reportFiles.findIndex(item => {
          return item.name + '.' + item.suffix == file.raw.name
        })
        if (index3 != -1) {

          this.Already.push(this.form.reportFiles[index3].name)
          var index2 = fileList.reverse().findIndex(item => {
            return item.raw.name == file.raw.name
          })
          fileList.splice(index2, 1)
        } else {
          this.inFile(file, fileList)
        }
      } else {
        this.inFile(file, fileList)
      }
      this.$nextTick(() => {
        var b = ''
        if (this.Already.length > 0) {
          this.Already.forEach(item => {
            b = b + item + ','
          })
          this.$alert('文件' + b + '已存在', '提示', {
            confirmButtonText: '确定',
            type: 'warning',
            callback: action => {
              this.Already = []
            }
          });

        }
      })
    },
    inFile(file, fileList) {
      var index = this.file.findIndex(item => {
        return item.name == file.raw.name
      })
      if (index != -1) {
        this.Already.push(this.file[index].name)
        var index2 = fileList.reverse().findIndex(item => {
          return item.raw.name == file.raw.name
        })
        fileList.splice(index2, 1)
      } else {
        this.form.reportFile = null
        this.file.push(file.raw)
      }
    },
    handleRemove(file, fileList) {
      var index = this.file.findIndex(item => {
        return item.uid == file.raw.uid
      })
      if (index != -1) {
        this.file.splice(index, 1)
      }
      // console.log(this.file, fileList);
    },
    handleExceed(file, fileList) {
      this.$message.error('禁止一次上传多个文件')
    },
  },
}
</script>

<style lang="scss">
.responseDialog{
  .el-dialog__body{
    padding-bottom: 0px;
  }
}
</style>