<template>
  <!-- 导出陈述意见方案 -->
  <div>
    <div style="display:flex;justify-content:flex-end">
      <el-button type="primary" size="small" style="width:100px">导出</el-button>
    </div>
    <el-table :data="tableData" ref="table" border :height="tableHeight"  :span-method="objectSpanMethod"
      v-loading="loading" style="min-width: 100%; margin-top: 20px;overflow:auto">
      <el-table-column prop="proofName" label="证据" align="center" width="200px">
        <template slot-scope="scope">
          <!-- <div v-for="item in scope.row.argumentsVOList"> -->
            <!-- <el-tooltip class="item" effect="dark" :content="scope.row.rightContent" placement="top"> -->
              <span>{{ scope.row.proofName }}</span>
            <!-- </el-tooltip> -->
          <!-- </div> -->
        </template>
      </el-table-column>
      <el-table-column prop="argumentsVOList.rightName" label="权要" align="center" width="200px">
        <template slot-scope="scope">
          <div v-for="item in scope.row.argumentsVOList">
            <el-tooltip class="item" effect="dark" :content="scope.row.rightContent" placement="top">
              <span>{{ item.rightName }}</span>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="argumentsVOList.featureName" label="特征" align="center" width="200px">
        <template slot-scope="scope">
          <div v-for="item in scope.row.argumentsVOList">
            <el-tooltip class="item" effect="dark" :content="item.featureContent" placement="top">
             <span>{{ item.featureName }}</span> 
            </el-tooltip>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="argumentsVOList.proofStr" align="center" label="证据（无效请求人）"  width="300px">
        <template slot-scope="scope">
          <div v-for="item in scope.row.argumentsVOList">
            <div v-html="item.proofStr"> </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="argumentsVOList.arguments" align="center" label="证据（权利人）"  min-width="100px">
        <template slot-scope="scope">
          <div v-for="item in scope.row.argumentsVOList">
            <div class="innerTable" style="width:calc(100% + 20px);margin-left:-10px;word-wrap:break-word;">
              <div class="item" v-for="(item1, index) in item.arguments">
                <div v-html="item1.argumentStr"> </div>
              </div>
            </div>
          </div>

        </template>
      </el-table-column>
      <el-table-column prop="modifyReason" align="center" label="修改方案/理由">
        <template slot-scope="scope">
          <div v-html="scope.row.modifyReason"> </div>
        </template>
      </el-table-column>
      <el-table-column  label="操作" align="center" width="180px">
        <template slot-scope="scope">
          <div>
            <!-- <el-button @click.native.prevent="editRow(scope.row)" type="text" size="small" style="color: red;"> 编辑 </el-button> -->
            <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small" style="color: red;"> 删除 </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props:['reportId'],
  data() {
    return {
      tableData: [],
      loading: false,
      checkList: [],
      tableHeight: null,
      mergeObj: {},
      row: [],//选中特征push到row中
      mergeArr: ['proofId', 'proofName','rightSort','rightName'],//解释
    }
  },
  watch: {
    tableData() {
      this.$nextTick(() => {
        this.setHeight()
      })
    },
  },
  mounted() {
    this.getList()
  },
  methods: {
    setHeight() {
      const offsetTop = window.innerHeight - this.$refs.table.$el.offsetTop - 140
      const body = document.querySelector('.el-table__body')
      if (!body) {
        return false
      }
      const offsetBodyHeight = body.offsetHeight
      //console.log( window.innerHeight,body,offsetBodyHeight,offsetTop)
      if (this.tableData.length && offsetBodyHeight < offsetTop) {
        this.tableHeight = offsetBodyHeight + 75
      } else if (!this.tableData.length) {
        this.tableHeight = null
      } else {
        this.tableHeight = offsetTop
      }
      this.tableHeight = this.tableHeight > 300 ? this.tableHeight : 300
    },
    getFunInfo() {

    },
    getList() {
      let params = {
        reportId:this.reportId,
      }
      this.$api.queryArgumentsScenario(params).then((res) => {
        if (res.code == 200) { 
          var sort = [...new Set(res.data.map(item => { return item.sortStr }))]
          sort=sort.sort((a, b) => {
              return Number(a.splice(1,a.length)) - Number(b.splice(1,b.length))
            })
          var a = []
          sort.forEach((item1, index) => {
            console.log()
            a[index]=res.data.filter(item => {
              return item.sortStr == item1
            })
            
            // var right = [...new Set(a[index].map(i => { return i.rightSort }))]
            // right=right.sort((a, b) => {
            //   return Number(a) - Number(b)
            // })
            // var rightList = []
            // right.forEach((y, index2) => {

            //   feature[index2] = a[index].argumentsVOList.filter(y1 => { return y1.rightSort == y })
            //   feature[index2] = feature[index2].sort((a, b) => {
            //     return Number(a.featureName.splice(2,a.featureName.length)) - Number(b.featureName.splice(2,b.featureName.length))
            //   })
            // })
            // feature = [].concat(...feature)
            // console.log(feature)
          })
          this.tableData = [].concat(...a)
          // console.log(a)
          // this.tableData = res.data
          
          
          this.getSpanArr(this.tableData)
        }
      })
    },
    // // 更新
    // editRow(val) {
    //   let params = {

    //   }
    //   this.$api.updataArgumentsScenario(params).then((res) => {
    //     if (res.code == 200) { 
    //       this.getList()
    //     }
    //   })
    // },
    // 删除
    deleteRow(val) {
      let params = [
        val.id
      ]
      this.$api.deleteArgumentsScenario(params).then((res) => {
        if (res.code == 200) { 
          this.getList()
        }
      })
    },
    //获取每个元素所需合并的行数
    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] !== 'evidence') {
              this.mergeObj[key][count] += 1;
              this.mergeObj[key].push(0);
            } else {
              count = index;
              this.mergeObj[key].push(1);
            }
          }
        })
      })
      //   this.mergeObj.result = JSON.parse(JSON.stringify(this.mergeObj.pRightName))
    },
    //合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.mergeArr.indexOf(column.property) !== -1) {
        if (this.mergeObj[column.property][rowIndex]) {
          return [this.mergeObj[column.property][rowIndex], 1]
        } else {
          return [0, 0];
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.innerTable .item {
  /* min-width:200px; */
  padding: 20px 10px;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  // height: 130px;
  line-break: normal;
  overflow: auto;
  border-bottom: 1px solid #EBEEF5;
}

.innerTable .item:last-child:first-child {
  //item 即是最后一个元素 又是第一个元素
  height: 100%;
}

.innerTable .item:nth-child(1) {
  border-bottom: 1px solid #EBEEF5;
}

.innerTable .item:last-child {
  border-bottom: none;
}
</style>