<template>
    <div>
      <div style="display:flex;justify-content: flex-end;margin-bottom:20px">
                <!-- <el-button >上传文档</el-button> -->
                <el-button @click="addInvalid">添加</el-button>
      </div>
      <el-table :data="reviewData" border style="width: 100%;">
        <el-table-column label="专利号" prop="patentNo" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.vVisible">{{scope.row.patentNo}}</span>
                        <el-input v-else v-model="scope.row.patentNo"></el-input>
                    </template>
         </el-table-column>
         <el-table-column label="时间" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.vVisible">{{scope.row.time}}</span>
                        <el-date-picker v-else v-model="scope.row.time" value-format="yyyy-MM-dd" type="date" placeholder="选择日期时间"> </el-date-picker>
                        <!-- <el-input  v-model="scope.row.time"></el-input> -->
                    </template>
        </el-table-column>
                <el-table-column label="说明" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.vVisible">{{scope.row.explain}}</span>
                        <el-input v-else v-model="scope.row.explain"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="附件" prop="reportFiles" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.vVisible">
                          <span v-if="scope.row.reportFiles">
                              <div v-for="item in scope.row.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></div>
                            </span>
                             <span v-else><i class="el-icon-minus"></i></span>
                        </span>
                        <span v-else>
                          <span v-if="scope.row.reportFiles || scope.row.fileList">
                              <div v-if="scope.row.reportFiles" v-for="item in scope.row.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(scope.row,item.id)"><i class="el-icon-close"></i></p></div>
                              <div v-if="scope.row.fileList" v-for="item in scope.row.fileList" 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(scope.row,item.uid,1)"><i class="el-icon-close"></i></p></div>
                            </span>
                             <span v-else><i class="el-icon-minus"></i></span>
                             <span style="float:right;">
                              <el-upload  ref="upload" class="upload-file" action="#" :auto-upload="false" :show-file-list="false" :on-change="onChange" multiple >
                                <i class="el-icon-circle-plus-outline" style="font-size:20px;color:#409eff" @click="getRow(scope.row)"></i>
                              </el-upload>
                            </span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="scope">
                        <div class="special">
                            <span v-if="scope.row.vVisible" class="items" @click="edit(scope.row)">编辑</span>
                            <span v-else class="items" @click="edit(scope.row)">保存</span>
                            <span>&nbsp;|&nbsp;</span>
                            <span class="items" @click="deleteit(scope.row)">删除</span>
                        </div>
                    </template>
                </el-table-column>
      </el-table>         
    </div>
</template>

<script>
export default {
  props:["patent"],
  data() {
    return {
      drawer: false,
      activeName: 'first',
      reviewData: [],
      litigationData: [],
      invalidData: [],
      row:'',
      Already:[]
    }
  },
  methods: {
    getRow(row){
      this.$set(row,'fileList',row.fileList)
      this.row = row
      this.row.fileList = row.fileList?row.fileList:[]
    },
    // onChange(file){
    //   this.row.fileList.push(file.raw)
    // },

    onChange(file, fileList) {
      if(this.row.reportFiles){
        var index3 = this.row.reportFiles.findIndex(item=>{
          return item.name+'.'+item.suffix == file.raw.name
        })
        if(index3!=-1){
        
          this.Already.push(this.row.reportFiles[index3].name)

        }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.row.fileList.findIndex(item=>{
        return item.name == file.raw.name
      })
      if(index!=-1){
        this.Already.push(this.row.fileList[index].name)
      }else{
        this.row.fileList.push(file.raw) 
      }
    },

    handleClick(tab, event) {
      // console.log(tab, event);
    },

    delFile(row,id,key){
      if(!key){
        var index = row.reportFiles.findIndex(item=>{
          return item.id == id
        })
        if(index!=-1){
          row.reportFiles.splice(index,1)
        }
      }else{
        var index = row.fileList.findIndex(item=>{
          return item.uid == id
        })
        if(index!=-1){
          row.fileList.splice(index,1)
        }
      }
      
    },
    edit(row) {
      if (row.vVisible == false) {
        // let data = {
          
        //   patentNo: this.patent.patentNo,
        //   id: row.id,
        //   newPatentNo:row.newPatentNo,
        //   person: row.person,
        //   invalidTime: row.invalidTime,
        //   judgmentTime: row.judgmentTime,
        //   result: row.result,
        //   fileId: row.fileId,
        // }
        let formData = new FormData()
          if(row.fileList){
            for (var i = 0; i < row.fileList.length; i++) {
              formData.append("files", row.fileList[i]);
            }
          }
          row.patentNo = this.patent.patentNo
          formData.append("jsons", JSON.stringify(row));
        if (row.id) {
          this.$api.editInvalidRecord(formData).then(res => { 
            if (res.code==200) {
              this.$message.success('修改成功')
              this.getList()
            }
          })
        } else {
          this.$api.addInvalidRecord(formData).then(res => { 
            if (res.code == 200) {
              this.$message.success('保存成功')
              this.getList()
            }
          })
        }

      }
      row.vVisible = !row.vVisible
    },
    formatDateTime(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? ('0' + m) : m;
      var d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      return y + '-' + m + '-' + d
    },

    // 点击删除按钮
    deleteit(row) {

    },
    enclosureList(row) {
      this.drawer = true
    },
    addReview() {
      this.reviewData.push({
        vVisible: false
      })
    },
    addLitigation() {
      this.litigationData.push({
        vVisible: false
      })
    },
    addInvalid() {
      this.invalidData.push({
        vVisible: false
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.items{
   cursor: pointer;
}
</style>