<template>
  <div style="padding:20px">
    <div>
      <p>标的专利号：{{ patentNo }}</p>
    </div>
    <div style="display: flex; justify-content: space-between;margin:20px 0px 20px 0 ;">
      <el-button-group>
        <el-button @click="merge" :disabled="checkList.length>1?false:true">合并</el-button>
        <el-button @click="split" :disabled="checkList.length>0?false:true">拆分</el-button>
      </el-button-group>
      <div>
        <el-select placeholder="请选择拆分类型" v-model="splitType1" style="margin-left: 50px;" @change="splitTypeSelect($event)" >
              <el-option label="仅拆主权要" value="0"></el-option>
              <el-option label="全部拆分" value="1"></el-option>
        </el-select>
        <el-select placeholder="请选择拆分符号" v-model="splitBy1" style="margin-left: 10px;" @change="splitBySelect($event)">
            <el-option label="逗号拆分" value="0"></el-option>
            <el-option label="分号拆分" value="1"></el-option>
            <el-option label="逗号和分号拆分" value="2"></el-option>
        </el-select>
        <el-select placeholder="请选择显示类型" v-model="Type" style="margin-left: 10px;" @change="TypeSelect($event)" >
            <el-option label="仅显示主权要" value="1"></el-option>
            <el-option label="全部显示" value="0"></el-option>
        </el-select>
      </div>
        <el-button @click="keep" type="primary" style="float: right;">保存</el-button>
    </div>
    <template>
      <el-table
        :data="tableData"
        border
        :span-method="objectSpanMethod"
        v-loading="loading"
        style="width: 100%"
        max-height="1000px">
          <el-table-column
            prop="pRightName"
            label="权要"
            width="180"
            align="center">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.pContent" placement="top">
                <span>{{ scope.row.pRightName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="content"
            label="特征"
            width="300"
            align="center">
            <template slot-scope="scope">
              <el-checkbox-group v-model="checkList">
                <el-checkbox :label="scope.row.id" @change="getRow(scope)" style="display: flex;align-items: center;">
                  <el-input type="textarea" style="width:250px" autosize v-model="scope.row.content"> {{scope.row.content}}</el-input>
                </el-checkbox>
              </el-checkbox-group>
            </template>
          </el-table-column>
          <el-table-column
            prop="explainText"
            label="解释(可粘贴图片)"
            align="center">
            <template slot-scope="scope">
              <el-input type="textarea" style="width:250px" autosize v-model="scope.row.explainText"> {{scope.row.explainText}}</el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="direction"
            label="回避设计方向(可粘贴图片)"
            align="center">
            <template slot-scope="scope">
              <el-input type="textarea" style="width:250px" autosize v-model="scope.row.direction"> {{scope.row.direction}}</el-input>
            </template>
          </el-table-column>
        </el-table>
    </template>
    <div style="margin-top: 20px;">
      <p >回避设计总体方向：</p>
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4}"
        placeholder="请输入内容(可粘贴图片)"
        v-model="textarea1">
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  props:['patentNo','reportId','splitBy','splitType'],
  data() {
    return {
      tableData:[],
      tableData1: [],
      checkList: [],
      splitType1:"0",
      splitBy1: "2",//拆分符号0 ','，1';',2','和';'
      Type: "1",
      textarea1: '',
      mergeArr: ['id', 'pRightName'],
      mergeObj: {},
      typeArr:[1],//显示权要还是全部显示
      loading: false,
      row: [],
      Index_row: [],
      arrIndex: 0,
    };
  },
  mounted() {
    this.splitPatentRight()
  },
  methods: {
    //初始拆分
    splitPatentRight() {
      this.loading = true
      this.tableData1=[]
      let PatentRight = {
        patentNo: this.patentNo,
        splitType: this.splitType1,
        splitBy: this.splitBy1,
        ReportId: this.reportId,
      }
      this.$api.splitPatentRight(PatentRight).then(res => {
        if (res.code==200) {
          if (res.data.patentRightVos.length>0) {
            res.data.patentRightVos.forEach(RightVosItem => {
              if (RightVosItem.features.length>0) {
                RightVosItem.features.forEach(FeaturesItem => {
                  FeaturesItem.pRightName=RightVosItem.RightName
                  FeaturesItem.pSignPatentNo=RightVosItem.signPatentNo
                  FeaturesItem.pContentOut=RightVosItem.contentOut
                  FeaturesItem.pContent=RightVosItem.content
                  FeaturesItem.pReportId=RightVosItem.reportId
                  FeaturesItem.pPatentId=RightVosItem.patentId
                  FeaturesItem.pType=RightVosItem.type
                  FeaturesItem.pSort=RightVosItem.sort
                  if (!FeaturesItem.hasOwnProperty("explainText")) {
                    FeaturesItem.explainText=FeaturesItem.contentOut
                  } else {
                    if (FeaturesItem.explainText=="") {
                      FeaturesItem.explainText=FeaturesItem.contentOut
                    }
                  }
                  if (!FeaturesItem.hasOwnProperty("direction")) {
                    FeaturesItem.direction=FeaturesItem.contentOut
                  } else {
                    if (FeaturesItem.direction=="") {
                      FeaturesItem.direction=FeaturesItem.contentOut
                    }
                  }
                   this.tableData1.push(FeaturesItem)
                })
               
              }
              
            })
          }
          console.log(this.tableData1);
          this.TypeSelect(this.Type)
          this.loading=false
        }
      })
    },
    // 选择下拉框
    splitTypeSelect(even) {
      this.splitType1 = even
      this.splitPatentRight()
    },
    splitBySelect(even) {
      this.splitBy1 = even
      this.splitPatentRight()
    },
    TypeSelect(even) { 
      this.typeArr = []
      if (even==1) {
        this.typeArr.push(1)
      } else {
        this.typeArr.push(1,0)
      }
      this.tableData = this.tableData1.filter(item => {
         return this.typeArr.includes(item.pType)
      })
      this.getSpanArr(this.tableData)
    },
    //获取每个元素所需合并的行数
    getSpanArr(data) {
      this.row = []
      this.mergeArr.forEach((key, index1) => {
        let count = 0;
        this.mergeObj[key] = [];
        data.forEach((item, index) => {
          if (index === 0) {
            this.mergeObj[key].push(1);
          } else {
            if (item[key] === data[index - 1][key] && item[key] !== 'explainText') {
              this.mergeObj[key][count] += 1;
              this.mergeObj[key].push(0);
            } else {
              count = index;
              this.mergeObj[key].push(1);
            }
          }
        })
      })
    },
    // 合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.mergeArr.indexOf(column.property) !== -1) {
        if (this.mergeObj[column.property][rowIndex]) {
          // console.log("@@",this.mergeObj[column.property][rowIndex]);
          return [this.mergeObj[column.property][rowIndex], 1]
        } else {
          return [0, 0];
        }
      }
        // if (columnIndex === 0) {
        //   if (rowIndex % 2 === 0) {
        //     return {
        //       rowspan: 2,
        //       colspan: 1
        //     };
        //   } else {
        //     return {
        //       rowspan: 0,
        //       colspan: 0
        //     };
        //   }
        // }
    },
      //保存
    keep() { 
      console.log(this.tableData);
      let keepArr = [
        {
          RightName: this.tableData1[0].pRightName,
          signPatentNo: this.tableData1[0].pSignPatentNo,
          patentId: this.tableData1[0].pPatentId,
          content: this.tableData1[0].pContent,
          type: this.tableData1[0].pType,
          sort: this.tableData1[0].pSort,
          reportId: this.tableData1[0].pReportId,
          contentOut: this.tableData1[0].pContentOut,
          features:[],
        }
      ]
      var j=0
      for (let i = 0; i < this.tableData1.length; i++) {
        // console.log(this.tableData1);
        if (keepArr.findIndex(item => { return item.contentOut == this.tableData1[i].pContentOut }) < 0) {
          j += 1
          keepArr.push(
            {
              RightName: this.tableData1[i].pRightName,
              signPatentNo: this.tableData1[i].pSignPatentNo,
              patentId: this.tableData1[i].pPatentId,
              content: this.tableData1[i].pContent,
              type: this.tableData1[i].pType,
              sort: this.tableData1[i].pSort,
              reportId: this.tableData1[i].pReportId,
              contentOut: this.tableData1[i].pContentOut,
              features: [],
            }
          )
        }
        let featuresArr = ["signPatentNo", "patentId", "content","type","direction","explainText","contentOut","splitBy","splitType","featuresOrder","id","rightName","isFinal"]
        featuresArr.forEach(item1 => {
          var keepArrIndex = keepArr[j].features.findIndex(item2 => {
          // console.log(item2,item1);
            return item2==item1
          })
          if (keepArrIndex < 0) {
            // console.log(keepArr[j].features);
            keepArr[j].features.push({
              // keepArr[j].features:this.tableData1[i].item1
            })
           
          }
        })
        // keepArr[j].features.push({
        //       signPatentNo: this.tableData1[i].signPatentNo,
        //       patentId: this.tableData1[i].patentId,
        //       content: this.tableData1[i].content,
        //       type: this.tableData1[i].type,
        //       direction: this.tableData1[i].direction?this.tableData1[i].direction:'',
        //       explainText: this.tableData1[i].explainText?this.tableData1[i].explainText:'',
        //       contentOut: this.tableData1[i].contentOut,
        //       splitBy: this.tableData1[i].splitBy,
        //       splitType: this.tableData1[i].splitType,
        //       featuresOrder: this.tableData1[i].featuresOrder,
        //       id: this.tableData1[i].id,
        //       rightName: this.tableData1[i].rightName,
        //       isFinal: this.tableData1[i].isFinal,
        // })
      }
      console.log(this.tableData,keepArr);
      // this.$api.KeepPatentRight(keepArr).then(res => {
      //   console.log(res);
      //   if (res.code == 200) {
      //     this.keepSure = true;
      //     this.$message.success("保存成功")
      //   }
      // })
    },
    // 获取选中特征信息
    getRow(scope) {
      console.log(scope);
      
      let Index=this.row.findIndex(item=>{ return item.id==scope.row.id })
      if (Index < 0) {
        this.Index_row.push(scope.$index)
        this.row.push(scope.row)
      } else {
        this.row.splice(Index, 1)
        this.Index_row.splice(Index, 1)
      }
    },
    // 特征等合并
    merge() { 
      console.log(this.checkList,this.row);
      if (this.row.length > 1) {
        var str=''
        var str1=''
        var str2=''
        var str3 = ''
        for (let i = 0; i < this.row.length - 1; i++){
          if (this.row[i].pSort!=this.row[i+1].pSort) {
              this.$alert("不能跨权要合并特征","提示", {
                confirmButtonText: '确定',
              })
              return false
          } else {
            let Index_rowArr=this.Index_row.sort((a, b) => {
              return a-b
            })
            if (Index_rowArr[i+1]-Index_rowArr[i]!=1) {
              this.$alert("非相邻不能合并特征","提示", {
                confirmButtonText: '确定',
              })
              return false
            }
          }
        }
        this.row.forEach((rowItem, rowIndex) => {
          // console.log(rowItem,rowIndex);
          if (rowIndex<this.row.length-1) {
            str = str + rowItem.content + ","
            str1 = str1 + rowItem.contentOut + ","
            str2 = str2 + rowItem.direction + ","
            str3 = str3 + rowItem.explainText + ","
            let Index1 = this.tableData1.findIndex(item => { return rowItem.id==item.id  })
            if (Index1!=-1) {
              this.tableData1.splice(Index1,1)
            }
            // console.log(Index1, this.tableData1);
          }else if(rowIndex==this.row.length-1){
            str=str+rowItem.content
            str1=str1+rowItem.contentOut
            str2=str2+rowItem.direction
            str3=str3+rowItem.explainText
          }
          let Index2 = this.tableData1.findIndex(item => { return item.id == rowItem.id })
          if (Index2!=-1) {
            this.tableData1[Index2].content=str
            this.tableData1[Index2].contentOut=str1
            this.tableData1[Index2].direction=str2
            this.tableData1[Index2].explainText = str3
            console.log(this.tableData1);
          }
          // console.log(this.tableData1[Index2]);
          
        })
        this.TypeSelect(this.Type)
        this.row=[]
        this.checkList=[]
      }
    },
    // 拆分
    split() {
      //不能同时拆分
      if (this.row.length>0) {
        if (this.row.length>1) {
          this.$alert("不能同时拆分多个特征","提示", {
            confirmButtonText: '确定',
          })
          return false
        }
        this.row.forEach((rowItem, rowIndex) => {
          var splitAdd = {
              id: rowItem.id+'a',
              content: '',
              contentOut:'',
              direction:'',
              explainText: '',
              rightName:rowItem.rightName,
              featuresOrder:rowItem.featuresOrder,
              splitBy:rowItem.splitBy,
              splitType:rowItem.splitType,
              signPatentNo:rowItem.signPatentNo,
            reportId: rowItem.reportId,

            pRightName:rowItem.pRightName,
                  pSignPatentNo:rowItem.pSignPatentNo,
                  pContentOut:rowItem.pContentOut,
                  pContent:rowItem.pContent,
                  pReportId:rowItem.pReportId,
                  pPatentId:rowItem.pPatentId,
                  pType:rowItem.pType,
                  pSort:rowItem.pSort,
            
          }
          let Index2 = this.tableData1.findIndex(item => { return rowItem.id == item.id })
           this.tableData1.splice(Index2+1,0,splitAdd)
        })
        this.TypeSelect(this.Type)
        this.row=[]
        this.checkList=[]
      }
    },
  }
}
</script>

<style lang="scss" scoped>

</style>