<template>
    <div class="height_100">
      <el-container>
          <el-header>
              <div class="head">
                  <div class="head_left">
                      <el-form :inline="true" class="project-file-header-form">
                          <el-form-item label="专利号">
                              <el-input v-model="queryParams.number" size="small" placeholder="请输入专利号"></el-input>
                          </el-form-item>
                          <el-form-item>
                              <el-button type="" size="small" @click="search">查询</el-button>
                          </el-form-item>
                      </el-form>
                  </div>
                  <div class="head_right">
                    <el-button type="primary" size="small" @click="createReport">生成报告</el-button>
                  </div>
              </div>
          </el-header>
          <el-main class="height_100" v-DivHeight="getDivHeight">
              <el-table :data="tableData" v-if="showTable" border style="width: 100%" header-row-class-name="custom-table-header" @sort-change="sortChange" :height="tableHeight - 20" >
                  <el-table-column label="#" width="60" type="index" align="center">
                      <template slot-scope="scope">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox :label="scope.row.id">
                                <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
                            </el-checkbox>
                        </el-checkbox-group>
                          
                      </template>
                  </el-table-column>
                  <el-table-column v-for="item in column.filter(item=>!item.ifHidden)" :key="item.value" :prop="item.value" :render-header=" $commonJS.renderHeaderMethods" :label="item.name" :sortable="item.ifSort?'custom':false" align="center">
                      <template slot-scope="scope">
                          <div v-if="['patentNo'].includes(item.value)">
                              <el-link type="primary" @click="handleItem(scope.row,item.value)">
                                  <span  v-html="$commonJS.getColumnData(scope.row,item)"></span>
                              </el-link>
                          </div>
                          <div v-else v-html="$commonJS.getColumnData(scope.row,item)"></div>
                      </template>
                  </el-table-column>
  
                  <el-table-column  label="操作" align="center" width="150px">
                      <template slot-scope="scope">
                          <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
                      </template>
                  </el-table-column>
              </el-table>
          </el-main>
          <el-footer class="pagination">
              <el-pagination background layout="total,sizes, prev, pager, next, jumper" :current-page.sync="queryParams.current"
              :page-sizes="pageSize" :page-size.sync="queryParams.size" @current-change="handleCurrentChange" @size-change="handleSizeChange" :total="total">
              </el-pagination>
          </el-footer>
      </el-container>
    </div>
</template>
  
<script>
  import { getTableHeight } from '@/views/components/mixins'
  const column = [
      {
          value:'patentNo',
          type:'string',
          name:'专利号',
      },
      {
          value:'searchCondition',
          type:'string',
          name:'所属检索式',
      },
      {
          value:'remark',
          type:'string',
          name:'标注',
      },
      {
          value:'createName',
          type:'string',
          name:'创建人',
      },
      {
          value:'createTime',
          type:'string',
          name:'创建时间',
      },
  ]
  export default {
      mixins:[getTableHeight],
    components: {
      
    },
    props: {},
    data() {
      return {
          pageSize: [10, 20],//分页数量
          queryParams:{
              current:1,
              size:10,
              number:''
          },
          total:0,
          tableData:[],
          column:column,
          checkList:[],
      };
    },
    watch: {},
    computed: {},
    created() {},
    mounted() {
      this.getList()
    },
    methods: {
      //检索
      search(){
          this.queryParams.current = 1
          this.getList()
      },
      //获取数据
      getList(){
          this.tableData = [
              {
                  id:1,
                  patentNo:'CN202410574469.X',
                  searchCondition:'PA = (深圳市江波龙电子股份有限公司)',
                  remark:'影响创造性',
                  createName:'管理员',
                  createTime:'2024-09-06 17:04'
              },
              {
                  id:2,
                  patentNo:'CN202410448579.1',
                  searchCondition:'PA = (深圳市江波龙电子股份有限公司)',
                  remark:'影响创造性',
                  createName:'管理员',
                  createTime:'2024-09-06 17:04'
              }
          ]
          this.total = 2
      },
      //切换分页
      handleCurrentChange(val){
          this.queryParams.current = val
          this.getList()
      },
      //切换也大小
      handleSizeChange(val){
          this.queryParams.current = 1
          this.queryParams.size = 10
          this.getList()
      },
      //排序
      sortChange({ column, prop, order }){},
      //点击案号
      handleItem(row){
          this.$router.push({
              path:'/noveltySearchDetails',
              query:{
                  projectId:row.id
              }
          })
      },
      
      //删除
      del(){},
    },
  };
  </script>
  <style lang="scss" scoped>
  .head{
      width: 100%;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }
  </style>