<template>
    <div>
        <div style="display:flex;justify-content: flex-end;margin-bottom:20px">
                <!-- <el-upload ref="upload" class="upload-file" action="#" :auto-upload="false" :show-file-list="false" :on-change="onChange" multiple style="width: 120px !important">
                  <el-button>上传文档</el-button>
                </el-upload> -->
                
                <el-button @click="addReview">添加</el-button>
            </div>
            <el-table :data="reviewData" border style="width: 100%;">
                <el-table-column label="时间" prop="time" 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="事件" prop="event" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.vVisible">{{scope.row.event}}</span>
                        <el-input v-else v-model="scope.row.event"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="说明" prop="reviewExplain" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.vVisible">{{scope.row.reviewExplain}}</span>
                        <el-input v-else v-model="scope.row.reviewExplain"></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 v-if="scope.row.vVisible" class="items" @click="deleteit(scope.row)">删除</span>
                            <span v-else class="items" @click="close(scope.row)">取消</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>
export default {
  props:["patent"],
  data() {
    return {
      drawer: false,
      activeName: 'first',
      reviewData: [],
      litigationData: [],
      invalidData: [],
      queryParams: {
        patentNo: this.patent.publicNo,
        familyId: 0,
        current: 1,
        size: 10,
      },
      total: 0,
      row:'',
      Already:[]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getRow(row){
      console.log(row)
      this.$set(row,'fileList',row.fileList)
      this.row = row
      this.row.fileList = row.fileList?row.fileList:[]
    },
    onChange(file, fileList) {
      console.log(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 = {
        //   id: row.id,
        //   patentNo: this.patent.publicNo,
        //   time: row.time,
        //   event: row.event,
        //   reviewExplain: row.reviewExplain,
        //   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.publicNo
          formData.append("jsons", JSON.stringify(row));
        if (row.id) {
          this.$api.updateReviewHistory(formData).then(res => { 
            if (res.code==200) {
              this.$message.success('修改成功')
              this.getList()
            }
          })
        } else {
          this.$api.addReviewHistory(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) {
      this.$api.deleReviewHistory({ 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: '已取消删除'
          });          
        });
          
        }
      })
    },
    close() {
      this.getList()
    },
    getList() {
      this.$api.queryReviewHistory(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.records.length
          this.reviewData=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
      })
    },
  },
}
</script>

<style lang="scss" scoped>