<template>
  <!-- 侵权分析或FTO对比结果 -->
  <div class="height_100" style="width: 100%;">
    <el-container style="width: 100%;">

      <!-- <el-aside style="background:white" :style="{ width: 'calc(100% - ' + width + ')' }"> -->
      <el-aside class="height_100" style="background:white" :style="{ width: 'calc(100% - ' + width + ')' }">
        <div style="display:flex; justify-content:flex-end;align-items:center;margin-bottom: 10px;">
          <el-button @click="taskWork" type="primary" size="small">协同办公</el-button>
          <el-dropdown size="medium" style="margin:10px 20px 10px 20px">
            <el-button type="primary" size="small">
              创建报告<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" style="margin-top:0px"
              v-if="dictMessage.REPORT_TYPE && dictMessage.REPORT_TYPE.length > 0">
              <!-- 遍历按钮 -->
              <el-dropdown-item
                v-for="item in dictMessage.REPORT_TYPE.filter(item => !['3', '5', '6'].includes(item.value))"
                :key="item.label" @click.native="handleAnalyse(item.value)">{{ item.label }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- <div style="display:flex; justify-content:flex-end;align-items:center" v-if="reportType != 4">
            <el-button class="changePatent" type="" size="small" :disabled="index == 0" @click="handleLink1()">
              <span class="p"><i class="el-icon-arrow-up"></i>
                <span>上一篇</span>
              </span>
              <span class="n" v-if="patentList[index - 1]">
                <span>{{ patentList[index - 1].patentNo }}</span>
              </span>
              <span class="n" v-else>无数据</span>
            </el-button>
            <div
              style="width:100px;height:50px;border-radius:5px ;border:1px solid #DCDCDC;display:flex; justify-content:flex-start;margin:0 10px">
              <div class="t" style="width:50px;text-align:center;line-height:50px;border-right:1px solid #DCDCDC;">{{
                patentList[index - 1] ? index : '0' }}</div>
              <div class="t" style="width:50px;text-align:center;line-height:50px">{{
                patentList[index + 1] ? total - index - 1 : '0' }}</div>
            </div>
            <el-button class="changePatent" style="margin-right:10px" type="" size="small"
              :disabled="index == patentList.length - 1 || patentList.length == 0" @click="handleLink()">
              <span class="p">
                <i class="el-icon-arrow-down"></i>
                <span>下一篇</span>
              </span>
              <span class="n" v-if="patentList[index + 1]">
                <span>{{ patentList[index + 1].patentNo }}</span>
              </span>
              <span class="n" v-else>无数据</span>
            </el-button>
          </div> -->
          <!-- 收缩图标 -->
          <el-tooltip class="item" effect="dark" :content="(showRight ? '隐藏' : '显示') + '右侧菜单'" placement="top">
            <i :class="showRight ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
              style="font-size: 25px; margin-top: 5px;color: #2f2f2f; cursor: pointer"
              @click="showRight = !showRight"></i>
          </el-tooltip>
        </div>
        <div class="height_100">
          <table class="PatentMessage">
            <tr>
              <td>公告号</td>
              <td> <span v-if="patent">{{ patent.grantNo }}</span></td>
              <td>公告日</td>
              <td><span v-if="patent">{{ patent.grantDate }}</span></td>
              <td>专利权人</td>
              <td><span v-if="patent && patent.rightHolder">
                <span v-for="item in patent.rightHolder.filter(a => a.type == 1)" :key="item.name">{{ item.name }}</span></span></td>
            </tr>
            <tr>
              <td>优先权</td>
              <td><span v-if="patent">{{ patent.priorityNo }}</span></td>
              <td>案件状态</td>
              <td> <span v-if="patent && patent.simpleStatusStr">{{ patent.simpleStatusStr }}</span></td>
              <td>同族专利</td>
              <td><span v-if="patent" v-html="getPatentFamily(patent)"></span></td>
            </tr>
          </table>


          <split-Page :tableData="tableData" :columnList="columnList" :patentNo="patentNo" isResult="noShow" :isEdit="false"></split-Page>


        </div>
      </el-aside>
      <el-main v-show="showRight == true" :width="width" style="padding:5px">

        <el-select v-model="queryParams.compareResult" clearable @change="change" placeholder="请选择对比结果">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <div class="infinite-list-wrapper" style="overflow:auto">
          <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
            <li v-for="(i, index) in patentList" :key="index" class="list-item" @click="patentChange(i, index)"> {{
              i.patentNo }}</li>
          </ul>

        </div>
      </el-main>
    </el-container>

    <!-- 创建报告组件 -->
    <CreateReport ref="ReportForm"></CreateReport>

    <!-- 协同任务 -->
    <teamwork ref="teamwork" :projectId="projectId" :reportType="reportType"></teamwork>

    <!-- 选择专利弹窗 -->
    <checkPatent ref="checkPatent" @checkPatentList="checkPatentList" sign="teamwork"
      :oldSearchOption="{ compareResult: queryParams.compareResult }" :tableData2="tableData2">
      <div slot="head">
        <el-select v-model="compareResult" clearable @change="changePatent" placeholder="请选择对比结果">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </checkPatent>

  </div>
</template>

<script>
import CreateReport from '@/views/report/components/dialog/addAndEditReport.vue'
import checkPatent from '../checkPatent/checkPatent.vue'
import teamwork from "@/views/report/components/dialog/teamwork.vue"
import splitPage from '../splitPage/splitPage.vue'
export default {
  components: {
    CreateReport,
    checkPatent,
    teamwork,
    splitPage
  },
  // props: ['projectId', 'patentNo', "reportType"],
  props: {
    projectId: {
      default: ''
    },
    patentNo: {
      default: ''
    },
    reportType: {
      default: ''
    },
    // 是否可读
    isEdit: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      // 栏位
      columnList: [
        {
          name: "标的说明",
          type: "String",
          value: ['originalRecordVO', 'targetDescription'],
        },
        {
          name: "比对结果",
          type: "Array",
          value: ['originalRecordVO', 'compareResult'],
          options: [
            {
              value: 0,
              label: '字面相同'
            }, {
              value: 1,
              label: '等同'
            }, {
              value: 2,
              label: '不相同'
            }, {
              value: 3,
              label: '待确定'
            }
          ],
        },
        {
          name: "比对说明",
          type: "String",
          value: ['originalRecordVO', 'compareDescription'],
        },
      ],
      // 控制宽度
      width: '0px',
      // 获取数据信息的loading
      loading: false,
      // 控制右侧的显示与隐藏
      showRight: false,
      // 控制专利弹窗显示
      dialogVisible: false,
      patentList: [],
      // 返回的数据
      tableData: [],
      // 返回的数据(专利清单弹窗使用)
      tableData2: [],
      // 公告号公告日等信息
      patent: {},
      // 表格合并信息
      mergeObj: {},
      mergeArr: ['pSort', 'pRightName'],
      // 分页信息
      queryParams: {
        size: 10,
        current: 1,
      },
      total: 0,
      // 对比结果选择
      options: [
        {
          value: '0',
          label: '字面相同'
        }, {
          value: '1',
          label: '等同'
        }, {
          value: '2',
          label: '不相同'
        }, {
          value: '3',
          label: '待确定'
        }
      ],
      index: 0,
      // 勾选中的特征数据
      checkList: [],
      compareResult:'',
    }
  },
  computed: {
    dictMessage() {
      var a = this.$store.state.dictMessage.dictMessage
      if (a.REPORT_TYPE) {
        a.REPORT_TYPE.forEach(item => {
          if (['0', '1', '2'].includes(item.value)) {
            item.permission = 'invalid'
          } else if (item.value == 3) {
            item.permission = 'FTO'
          } else if (item.value == 4) {
            item.permission = 'tort'
          } else if (item.value == 5) {
            item.permission = 'avoidDesign'
          } else if (item.value == 7) {
            item.permission = 'reInvalid'
          }
        })
      }

      return a
    },
  },
  watch: {
    showRight(val) {
      if (val) {
        this.width = '200px'
      } else {
        this.width = '0px'
      }
    },
  },
  async mounted() {
    await this.getPatentList()
    if (this.patentList && this.patentList.length>0) {
      this.patent = this.patentList[0]
      this.getList(this.patent.patentNo)
    }
  },
  methods: {
    // 处理同族专利
    getPatentFamily(list) {
      if (list.InpadocFamilyNos) {
        return list.InpadocFamilyNos.join(',')
      } else {
        return ''
      }
    },
    // 创建报告
    handleAnalyse(val) {
      var form = {
        reportType: val,
        signPatentNo: this.patentNo,
        matterId: [],
        scenarioId: [],
      }
      this.$refs.ReportForm.open(form)
    },
    // 工作协同
    async taskWork() {
      this.$refs.checkPatent.open(this.projectId)
    },
    // 从专利清单子组件传值（专利号的数据）
    checkPatentList(val) {
      this.$refs.teamwork.open(val)
    },
    // 选择专利框的对比结果
    changePatent(val) {
      this.compareResult = val
    },
    // 显示勾选的信息
    async load() {
      this.queryParams.current += 1
      await this.getPatentList()
    },
    // 获取信息
    async getPatentList() {
      let params = {
        current: 1,
        size: 9999,
        projectId: this.projectId,
        compareResult: this.queryParams.compareResult
      }
      await this.$api.getComparedPatent(params).then(response => {
        if (response.code == 200) {
          this.total = response.data.total

          this.patentList = this.patentList.concat(response.data.data)

        }
      })
    },
    // 获取数据
    getList(patentNo) {
      let params = {
        projectId: this.projectId,
        patentNo: patentNo,
      }
      this.$api.getLastRecord(params).then(res => {
        if (res.code == 200) {
          // this.tableData = res.data
          this.getInterface(res)
        }
      })
    },
    // 处理获取的数据
    getInterface(res) {
      if (res.data.tortRightVOS.length > 0) {
        var data = []
        res.data.tortRightVOS.forEach(RightVosItem => {
          if (RightVosItem.tortVOS.length > 0) {
            RightVosItem.tortVOS.forEach(FeaturesItem => {
              FeaturesItem.pRightName = RightVosItem.rightName
              FeaturesItem.pSignPatentNo = RightVosItem.signPatentNo
              FeaturesItem.pPatentNo = RightVosItem.patentNo
              FeaturesItem.pContentOut = RightVosItem.contentOut
              FeaturesItem.pContent = RightVosItem.content
              FeaturesItem.pProjectId = RightVosItem.projectId
              FeaturesItem.pType = RightVosItem.type
              FeaturesItem.pSort = RightVosItem.sort
              this.hasOwn(FeaturesItem)
              data.push(FeaturesItem)
            })
          }
        })
        this.getSpanArr(this.tableData)
        this.tableData = data
      }
    },
    hasOwn(item) {
      if (!item.hasOwnProperty("explainText")) {
        item.explainText = ''
      }
    },
    //获取每个元素所需合并的行数
    getSpanArr(data) {
      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 }) {
      // column.property=“id”  
      if (this.mergeArr.indexOf(column.property) !== -1) {
        if (this.mergeObj[column.property][rowIndex]) {
          return [this.mergeObj[column.property][rowIndex], 1]
        } else {
          return [0, 0];
        }
      }
    },
    //上一篇
    handleLink1() {
      this.index -= 1
      this.patent = this.patentList[this.index]
      this.getList(this.patent.patentNo)
    },
    //下一篇
    async handleLink() {
      this.index += 1
      this.patent = this.patentList[this.index]
      this.getList(this.patent.patentNo)
      if (index == this.queryParams.size * this.queryParams.current - 1) {
        await this.getPatentList()
      }
    },
    //切换专利
    patentChange(patent, index) {
      this.patent = patent
      this.index = index
      this.getList(this.patent.patentNo)
    },

    async change() {
      this.index = 0
      this.patentList = []
      await this.getPatentList()
      if (this.patentList.length > 0) {
        this.patent = this.patentList[0]
        this.getList(this.patent.patentNo)
      }
    },



  },
}
</script>

<style lang="scss" scoped>
.changePatent {
  height: 50px;
  width: 200px;
  margin-left: 0 !important;
  //   margin-bottom: 15px;
  // margin-top: 10px;
  text-align: left;
  font-size: 12px;

  .p {
    display: block;
    margin-bottom: 5px;
    color: black;

    .t {
      height: 50px;
      width: 100px;
      border: 1px solid #797979;
      padding-left: 10px;
      color: #1e9fff;
      font-size: 14px;
      font-weight: bold;
    }
  }

  .n {
    margin-left: 18px;
    font-size: 12px;
    color: #797979;
  }
}

.infinite-list-wrapper {
  // height: 300px;
  text-align: center;
}

.infinite-list-wrapper .list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list-wrapper .list-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px 0;
  // border:1px solid #ebeef5 ;
  background: #e8f3fe;
  // color: #ff8484;
}

.avatar {
  position: relative;
  width: 148px;
  height: 148px;
  display: inline-block;
}

.avatar image {
  width: 148px;
  height: 148px;
}

.PatentMessage {
  width: 100%;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  border-spacing: 0;
}

.PatentMessage td {
  padding: 10px 30px;
  border-bottom: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
}
</style>
