<template>
  <div style="position: relative;">
    <!-- <el-tooltip class="item" effect="dark" :content="(showLeft ? '隐藏' : '显示') + '左侧菜单'" placement="top" style="position: absolute;left: 300px;top: 10px;">
                    <i :class="showLeft ? 'el-icon-s-unfold' : 'el-icon-s-fold'" style="font-size: 25px;  margin-top: 5px;color: #2f2f2f; cursor: pointer" @click="showLeft=!showLeft "></i>
                  </el-tooltip> -->
    
   
    <!-- <el-container > -->
      <!-- <el-header style="float: right;">
        <div style="">
          <div class="btn1" @click="sift" style="width:80px;height:32px;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-header> -->
     
      <el-container>
        <!-- 'calc(100% - 321px)' : 'calc(100% - 21px)' -->
        <div v-if="this.taskWorkRemakShow">
          <el-aside class=""  :style="{ width: showLeft ? '280px' : '0px' }" v-if="!this.coordination && this.queryParams.type!=1"> 
            <!-- <Tree @on-change="treeFilterChange" :reportId="reportId" :taskId="queryParams.taskId" @onChange="onChanges"></Tree> -->
            <customFields @onTaskStatus="onTaskStatus" :reportId="reportId" :taskId="queryParams.taskId" @onChange="onChanges" :isHidden="isHidden"></customFields>
          </el-aside>
        </div>
        <el-main >
          <div style=" margin-bottom: 10px; float: left;" v-if="!this.coordination && this.queryParams.type!=1">
            <!-- <el-button size="small"> -->
              <el-tooltip class="item" effect="dark" :content="(showLeft ? '隐藏' : '显示') + '左侧自动定义栏位'" placement="top" style="" v-if="this.taskWorkRemakShow">
                <i :class="showLeft ? 'el-icon-s-fold' : 'el-icon-s-unfold'" style="font-size: 25px;  margin-top: 5px;color: #2f2f2f; cursor: pointer" @click="showLeft=!showLeft "></i>
              </el-tooltip>
            <!-- </el-button> -->
          </div>
            <div style=" margin-bottom: 10px; float: right;">
              <div class="btn1" @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> -->

          <IncompletePage :taskId="queryParams.taskId" :reportType="reportType" :signPatentNo="signPatentNo" :reportId="reportId" :type="queryParams.type" :activeName="activeName" :onChangesIn="onChangesIn" :formS="formS" :taskStatus="taskStatus" :coordination="coordination" :taskWorkRemak="taskWorkRemak"></IncompletePage>
        </el-main>
      </el-container>
    <!-- </el-container> -->
    <!-- 筛选 -->
    <!-- 公司 
        申请人
        权利人
        分类（IPC，CPC，UPC）
        自定义字段
        公开号
        专利号
        申请时间 -->

    <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>
  </div>
</template>

<script>
//taskId taskStatus size  current
// import Tree from "./Tree.vue"
import customFields from "@/views/report/reportDetails/components/common/customFields.vue"
import IncompletePage from "./IncompletePage.vue"

export default {
  components: {
    IncompletePage,
    customFields,
  },
  data() {
    return {
      form: {},
      formS:{},
      visible:false,
      activeName: 'first',
      reportId:'',
      signPatentNo:'',
      // tableData: [],
      // loading: false,
      queryParams: {
        taskId: "",
        size: "10",
        current: "1",
        total: 0,
        tree:"",
        type:'',
        reportType:'',
      },
      onChangesIn: null,
      taskStatus: "",
      showLeft: true,
      isHidden:true,
      reportType:'',
      // show:showRight?"300px":"0px",
      coordination: null,
      taskWorkRemak: null,
      taskWorkRemakShow:true,
    }
  },
  created() {
    this.queryParams.taskId = this.$route.query.taskId
    this.reportType = this.$route.query.reportType
    this.queryParams.type = this.$route.query.type
    this.reportId = this.$route.query.reportId
    this.signPatentNo = this.$route.query.signPatentNo
    this.coordination = this.$route.query.coordination
    this.taskWorkRemak = this.$route.query.taskWorkRemak
    if (this.taskWorkRemak==0) {
      this.taskWorkRemakShow = false
      console.log(this.taskWorkRemakShow);
    }
    console.log(this.queryParams,this.reportId,this.coordination,this.reportType,);
  },
  mounted() {
    console.log(this.coordination);
  },
  methods: {
    getList() { },
    // customFields子页面
    onChanges(val) {
      console.log(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() {
      this.visible = true
    },
    treeFilterChange(data) {
      this.queryParams.tree = data
      this.handleSearch()
    },
    handleSearch(key) {
      this.queryParams.current = 1
      this.getList(key)
    },
    sure() {
      this.formS=JSON.parse(JSON.stringify(this.form))
      this.visible = false
    },
  }
}
</script>

<style lang="scss" scoped>
.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;
// }
.btn1 {
  background: #909399;
}

.btn1:hover {
  background-color: #a4a7ab;
}

</style>