<!-- 报告详情中对比文件页面 -->
<template>
  <div style="">
      <el-container>
        <el-main style="position: relative;">
          <div style="float: right;">
            <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;right: 10px; margin-left: 10px;margin-top: 5px;color: #2f2f2f; cursor: pointer" @click="showRight = !showRight" ></i>
            </el-tooltip>
          </div>
          <el-button @click="taskFeil" type="primary" size="small" style="float: right; margin-left: 10px;" >任务分配</el-button>
          <!-- <el-button @click="taskWork" type="primary" size="small" style="float: right; margin-left: 10px;" >协同办公</el-button> -->
          <div style=" margin-bottom: 10px; float: right;" >
              <div class="btnSelected" @click="sift" style="width:80px;height:32px;right: 100px;display:flex;justify-content:space-around;border-radius:5px; cursor: pointer; ">
                <img src="@/assets/img/filtrationSearch.png" alt="" style="width:16px;height:16px;margin-top:9px;margin-left:8px"><p style="margin:0 8px 0 0;line-height:32px;color:white;font-size:14px">筛选 </p> 
              </div>
            </div>
         
            
          <!-- <el-tabs v-model="activeName" class="">
              <el-tab-pane name="first" label="未读"> </el-tab-pane>
              <el-tab-pane label="已读" name="second"> </el-tab-pane>
          </el-tabs> -->
          <customTable  @taskFeilParams="taskFeilParams" :taskFeilSure="taskFeilSure"  :signPatentNo="patentNo" :reportId="queryParams.reportId"  :activeName="activeName" :onChangesIn="onChangesIn" :queryParams="queryParams" :taskStatus="taskStatus" :formS="formS"></customTable>
        </el-main>
        <el-collapse-transition>
          <div v-show="show">
          <div :style="{width:showRight?'280px':'0px'}" style="height: 100vh; border-left:1px solid #e6e6e6;overflow: hidden;">
            <customFields @on-change="treeFilterChange" :reportId="queryParams.reportId" :patentNo="patentNo" @onChange="onChanges"  @onTaskStatus="onTaskStatus"></customFields>
          </div>
          </div>
        </el-collapse-transition>
      </el-container>

      <el-dialog title="筛选" :visible.sync="visible" width="1100px" max-height="800" :before-close="close">
          <div >
            <el-form ref="form" :model="form" label-width="100px" label-position="left">
              <el-form-item label="标题">
                <el-input type="" v-model="form.patentName" placeholder="请输入查询内容"></el-input>
              </el-form-item>
              <el-form-item label="摘要">
                <el-input type="textarea" v-model="form.abstractStr" placeholder="请输入查询内容"></el-input>
              </el-form-item>
              <el-form-item label="申请人" >
                <el-input type="" v-model="form.applicationName" placeholder="请输入查询内容" ></el-input>
              </el-form-item>
              <el-form-item label="权利人">
                <el-input type="" v-model="form.obligeeName" placeholder="请输入查询内容"></el-input>
              </el-form-item>
              <el-form-item label="专利号">
                <el-input type="" v-model="form.patentNo" placeholder="请输入查询内容"></el-input>
              </el-form-item>
              <el-form-item label="申请号">
                <el-input type="" v-model="form.applicationNo" placeholder="请输入查询内容"></el-input>
              </el-form-item>
              <el-form-item label="IPC分类号">
                <el-input type="" v-model="form.numberIpc" placeholder="请输入查询内容"></el-input>
              </el-form-item>
              <el-form-item label="CPC分类号">
                <el-input type="" v-model="form.numberCpc" placeholder="请输入查询内容"></el-input>
              </el-form-item>
              <el-form-item label="UPC分类号">
                <el-input type="" v-model="form.numberUpc" placeholder="请输入查询内容"></el-input>
              </el-form-item> 
            
             
            </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="close">取 消</el-button>
              <el-button type="primary" @click="sure" >确 定</el-button>
            </div>
      </el-dialog>
      <!-- <el-dialog title="请求协同" :visible.sync="visibleWork" width="800px" max-height="800" :before-close="close"> -->
        <sendCollaboration :visibleCollaborations="visibleWork" @collaboration="collaboration" :reportId="queryParams.reportId" :formS="formS" :onChangesIn="onChangesIn"></sendCollaboration>
      <!-- </el-dialog> -->
  </div>
</template>

<script>
// taskStatus size  current
import customTable from "./common/customTable.vue"
import customFields from "./common/customFields.vue"
import sendCollaboration from "@/views/report/components/sendCollaboration.vue"

export default {
  props:["reportId","patentNo",'row'],
  components: {
    customTable,
    customFields,
    sendCollaboration,
  },
  data() {
    return {
      form: {},
      formS:{},
      visible:false,
      visibleWork:false,
      activeName: 'first',
      // reportId:"",
      signPatentNo:'',
      // tableData: [],
      // loading: false,
      reportMessage:{},
      queryParams: {
        taskId: "",
        size: "10",
        current: "1",
        total: 0,
        tree:"",
        // type: '',
        signPatentNo:this.patentNo,
        reportId:this.reportId?this.reportId:this.$route.query.reportId,
        taskStatus:"",
        field:[],//数组，用来存放自定义字段勾选项进行筛选
      },
      onChangesIn: [],
      returnData: [],
      taskStatus: "",
      personId: "",
      // tableDataA: [],//子页面的tableData数据
      taskFeilSure: false,
      showRight: true,
      show: true,
    }
  },
  created() {
    // this.queryParams.taskId = this.$route.query.taskId
    // this.queryParams.type = this.$route.query.type
    //接收从任务分配跳转数据
    // this.signPatentNo = this.$route.query.signPatentNo
    console.log(this.$route.query.personId);
    this.personId = this.$route.query.personId?this.$route.query.personId:this.$s.getSession('row').personId
    this.reportMessage = this.$s.getSession('row')?this.$s.getSession('row'):this.$s.getSession('reportMessage')
  },
  mounted() {
    
  },
  methods: {
    getList() { },
    //子页面的taskFeilParams条件
    taskFeilParams(val) {
      this.$router.push({
        name: "/AssignTasks",
        query: {
          reportId: this.queryParams.reportId,
          patentNo: this.patentNo,
          personId: this.personId,
          reportName: this.reportMessage.name,
          params:JSON.stringify(val),
        }
      })

    },
    // 子组件传勾选中的字段，表格进行筛选
    onChanges(val) {
      this.onChangesIn = val
      console.log(this.onChangesIn);
    },
    onTaskStatus(val) {
      this.taskStatus=val
    },
    handleNodeClick(treeData) {
        console.log(treeData);
    },
    close() {
      this.visible = false
      this.form = this.formS
    },
    sift() {
      console.log(111111);
      this.visible = true
    },
    sure() {
      this.formS = JSON.parse(JSON.stringify(this.form))
      this.visible = false
      // this.form={}
    },
    treeFilterChange(data) {
      console.log(data);
      this.queryParams.tree = data
      this.handleSearch()
    },
    handleSearch(key) {
      this.queryParams.current = 1
      this.getList(key)
    },
    // 任务分配
    taskFeil() {
      // console.log("分配");
      this.taskFeilSure=true
    },
    // 工作协同
    taskWork() { 
      this.visibleWork = true;
    },
    collaboration(val) { 
      this.visibleWork=val
    },
  
  }
}
</script>

<style lang="scss" scoped>
.transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    // background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }

.el-header{
  justify-content: end;
}
.el-header .el-form .el-form-item {
  margin-bottom: 10px !important;
}
// .el-form-item__content {
//   margin: 10px;
// }
// .el-form--label-left .el-form-item__label {
//   line-height: 70px;
// }
.btnSelected {
  background: #909399;
}

.btnSelected:hover {
  background-color: #a4a7ab;
}
.patent-tree-filter .patent-tree-filter-main{
  padding: 0;
}

</style>