<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="invalidData" border style="width: 100%">
                <el-table-column label="无效案号" prop="newPatentNo" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.vVisible">{{scope.row.newPatentNo}}</span>
                        <el-input v-else v-model="scope.row.newPatentNo"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="无效申请人" prop="person" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.vVisible">{{scope.row.person}}</span>
                        <el-input v-else v-model="scope.row.person"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="无效时间" prop="invalidTime" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.vVisible">{{scope.row.invalidTime}}</span>
                        <el-date-picker style="width:100%" v-else v-model="scope.row.invalidTime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期时间"> </el-date-picker>
                    </template>
                </el-table-column>
                <el-table-column label="判决时间" prop="judgmentTime" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.vVisible">{{scope.row.judgmentTime}}</span>
                        <el-date-picker style="width:100%" v-else v-model="scope.row.judgmentTime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期时间"> </el-date-picker>
                    </template>
                </el-table-column>
                <el-table-column label="结果" prop="result" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.vVisible">{{scope.row.result}}</span>
                        <el-input v-else v-model="scope.row.result"></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;align-items:center;">
                              <p style="margin:0;width:calc(100% - 40px);overflow: hidden;white-space: nowrap;text-overflow:ellipsis;cursor: pointer">{{item.name?item.name+'.'+item.suffix:item.fileName}}</p> 
                              <Menu :data="item" @delFile="delFile1(scope.row,item.id,scope.$index)"></Menu>
                            </div>
                              <!-- <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.reportFiles.length>0)">
                              <!-- <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> -->
                              <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>
                            </span>
                             <span v-else><i class="el-icon-minus"></i></span>
                             <span style="float:right;">
                              <el-upload  :ref="'upload' + scope.$index" 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,scope.$index)">编辑</span>
                        <span v-else class="items" @click="edit(scope.row,scope.$index)">保存</span>
                        <span>&nbsp;|&nbsp;</span>
                        <span v-if="scope.row.vVisible" class="items" @click="deleteit(scope.row)">删除</span>
                        <span v-else class="items" @click="cancel(scope.row,scope.$index)">取消</span>
                    </div>
                </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
            </div>
        </div>
</template>

<script>
import Menu from '@/views/workspace/components/menu/index2.vue'
export default {
  components:{
      Menu
    },
  props:["patent"],
  data() {
    return {
      isEdit:false,
      drawer: false,
      activeName: 'first',
      reviewData: [],
      litigationData: [],
      invalidData: [],
      queryParams: {
        patentNo: this.patent.patentNo,
        familyId: 0,
        current: 1,
        size: 10,
      },
      total: 0,
      row:'',
      Already:[]
    }
  },
  watch:{
    patent(val){
            this.queryParams.patentNo = val.patentNo
            this.getList()
        }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getRow(row){
      this.$set(row,'fileList',row.fileList)
      this.row = row
      this.row.fileList = row.fileList?row.fileList:[]
      var a = row.reportFiles?row.reportFiles:[]
      this.$set(this.row,'reportFiles',a)
    },
    // 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.reportFiles.push({
          id:file.raw.uid,
          name:file.raw.name,
          key:1
        })
        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)
        }
      }
      if(row.key){
        var index = row.fileList.findIndex(item=>{
          return item.uid == id
        })
        if(index!=-1){
          row.fileList.splice(index,1)
        }
      }
      
    },
    delFile1(row,id,index){
        var index1 = row.reportFiles.findIndex(item=>{
          return item.id == id
        })
        if(index1!=-1){
          row.reportFiles.splice(index1,1)
        }
      this.update(row,index)
    },
    update(row,index){
      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.getList2(row,index)
            }
          })
        }
    },
   async edit(row,index) {
      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) {
         await this.$api.editInvalidRecord(formData).then(res => { 
            if (res.code==200) {
              this.$message.success('修改成功')
              row.fileList=[]
              this.$refs['upload'+ index].clearFiles()
              
              this.getList2(row,index)
            }
          })
        } else {
          await this.$api.addInvalidRecord(formData).then(res => { 
            if (res.code == 200) {
              this.$message.success('保存成功')
              row.fileList=[]
              this.$refs['upload'+ index].clearFiles()
              
              this.getList2(row,index)
            }
          })
        }
        // this.isEdit = false
        // row.vVisible = !row.vVisible
      }else{
        row.RowData = JSON.parse(JSON.stringify(row))
      }
      row.vVisible = !row.vVisible
    },
    getList2(row,index){
      this.$api.queryInvalidRecord(this.queryParams).then(res => {
        if (res.code==200) {
          if(!row.id){
            this.$set(this.invalidData[index],'id',res.data.records[index].id)
          }
          this.$set(this.invalidData[index], 'reportFiles', res.data.records[index].reportFiles)
          this.total=res.data.total
        }
      })
    },
    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) {
      this.$api.deleInvalidRecord({id:row.id}).then(res => {
        if (res.code == 200) {
          this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
          
        }
        
      })
    },
    cancel(row,index) {
      if(row.id){
        var index1 = this.invalidData.findIndex(item=>{
          return item.id == row.id
        })
        if(index1!=-1){
          this.$set(this.invalidData,index1,row.RowData)
        }
      }else{
        this.invalidData.splice(index,1)
      }
      // this.getList()
    },
    getList() {
      this.$api.queryInvalidRecord(this.queryParams).then(res => {
        if (res.code==200) {
          for (let i = 0; i < res.data.records.length; i++){
            res.data.records[i].vVisible=true
          }
          this.total=res.data.total
          this.invalidData=res.data.records
        }
      })
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    fileIdList(row) {
      this.drawer = true
    },
    addReview() {
      this.reviewData.push({
        vVisible: false
      })
    },
    addLitigation() {
      this.litigationData.push({
        vVisible: false
      })
    },
    addInvalid() {
      this.invalidData.push({
          vVisible: false
        })
      // if(this.isEdit == false){
        
      //   this.isEdit = true
      // }else{
      //   this.$alert('您有修改未保存，请先保存修改', '提示', {
      //     confirmButtonText: '确定',
      //     callback: action => {
      //     }
      //   });
      // }
     
    },
  },
}
</script>

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