<template>
    <div> 
        <el-button type="primary" @click="submit" style="float:right">提交</el-button>
        <div style="width:500px;margin:0 auto">
            <el-form :model="form" ref="reportForm" label-width="120px">
                
                <el-form-item :label="form.type==3?'标的产品：':'标的专利号：'" prop="signPatentNo">
                    <el-link type="primary" v-if="form.type!=3" @click="toPatentDetails(form.signPatentNo)">{{form.signPatentNo}}</el-link>
                    <span v-else>{{form.signPatentNo}}</span>
                <!-- <el-input v-model="form.signPatentNo" autocomplete="off" placeholder="请输入标的专利号" @change="getPatentNo"></el-input>
                <p v-if="show==1" class="tips">查不到该专利请<span @click="imports">导入</span></p>
                <p v-if="show==2" class="tips" style="color:black"><span @click="toPatentDetails(form.signPatentNo)">查看详情</span></p> -->
                </el-form-item>
                <el-form-item label="报告名称：" prop="name">
                    <span>{{form.name}}</span>
                </el-form-item>
                <el-form-item label="承担部门：" prop="departmentId">
                    <span>{{form.departmentName}}</span>
                </el-form-item>
                <el-form-item label="负责人：" prop="personId">
                    <span>{{form.personName}}</span>
                </el-form-item>
                <el-form-item label="委托方：" prop="clientId" >
                    <span>{{form.clientName}}</span>
                </el-form-item>
                <el-form-item label="产品/技术：" v-if="form.proTec">
                    <span>{{form.proTec}}</span>
                </el-form-item>
                <el-form-item label="应用场景：" prop="easFlag" v-if="form.scenarioNames">
                  <div style="word-wrap:keep-all;">
                    <span v-for="item in form.scenarioNames">{{item  }}&nbsp;&nbsp;&nbsp;</span>
                  </div>
                </el-form-item>
                <el-form-item label="关联报告：" v-if="form.associateReportName">
                    <span>{{form.associateReportName}}</span>
                </el-form-item>
                <el-form-item label="卷号：" prop="volumeNumber" v-if="form.volumeNumber">
                    <span>{{form.volumeNumber}}</span>
                </el-form-item>
                <el-form-item label="上传附件：">
                <div v-if="form.reportFiles" class="upload-file">
                    <div v-for="item in form.reportFiles" style="margin:0;display:flex;justify-content:space-around;"><p style="margin:0;width:calc(100% - 40px);overflow: hidden;white-space: nowrap;text-overflow:ellipsis">{{item.name?item.name:item.fileName}}</p> <p style="margin:0;" @click="delFile(item.id)"><i class="el-icon-close"></i></p></div>
                </div>
                <el-upload  ref="upload" class="upload-file" drag action="#" :auto-upload="false" :show-file-list="true" :on-change="onChange" multiple   :on-preview="handlePreview" :on-remove="handleRemove">
                    <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>
                </el-form-item>
                <el-form-item label="备注：" prop="remark" v-if="form.remark">
                    <span>{{form.remark}}</span>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { PatentDetails } from "@/views/components/common/mixins";
export default {
    mixins:[PatentDetails],
    props:['reportId'],
    data() {
        return {
            file:[],
            form:{
              id:this.reportId
            },
            dictMessage:{},
            Already:[]
        }
    },
    watch:{
        reportId(val){
           this.form = {
            id:val
           }
           this.getList()
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        delFile(id){
            var index = this.form.reportFiles.findIndex(item=>{
                return item.id == id
            })
            if(index!=-1){
                this.form.reportFiles.splice(index,1)
            }
        },
        onChange(file, fileList) {
      console.log(file,fileList)
      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.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)
            }
        },
        handlePreview(file) {
            console.log(file);
            // this.imageUrl ='https://view.xdocin.com/view?src=' + URL.createObjectURL(file.raw)
            // this.showFile = true
        },
        submit(){
            let formData = new FormData()
            if(this.file){
              for (var i = 0; i < this.file.length; i++) {
                formData.append("files", this.file[i]);
              }
            }
            formData.append('report',JSON.stringify(this.form))
            this.$api.UpdateReport(formData).then(response=>{
              if(response.code == 200){
                this.file = []
                this.$message.success('附件修改成功')
                this.$refs.upload.clearFiles()
                this.getList()
              }
            })
        },
        getList() {
            this.loading = true
            let a = {
                reportId:this.form.id
            }
            this.$api.QueryReport(a).then(response=>{
                if(response.code == 200){
                    this.$set(this,'form',response.data[0])
                    // this.form = response.data[0]
                }
            })
        },
    },
}
</script>