<template>
    <div class="height_100" v-loading="loading">
      <el-container>
          <el-header>
              <div class="head">
                  <div class="head_left">
                    <mySearch style="width:500px" :SearchFields="searchFiled" @search="search" :searchValue="searchOption">
                    </mySearch>
                  </div>
                  <div class="head_right">
                      
                  </div>
              </div>
          </el-header>
          <el-main class="height_100" v-DivHeight="getDivHeight">
            <div v-if="showTable" class="content" :style="`height:${tableHeight - 20}px`">
                <myCard class="box-card" v-for="(item,index) in tableData" :key="item.id">
                    <div slot="head">
                        <div>
                          序号：{{ (index + 1) + ((queryParams.current - 1) * queryParams.size) }}  
                        </div>
                       
                       <div>
                        <el-button type="primary" size="mini" @click="handleCommand('createAndCopy',item)">新建并复用</el-button>
                        <el-button type="primary" size="mini" @click="handleItem(item)">详情</el-button>
                        <el-button type="primary" size="mini" @click="handleCommand('search',item)">检索</el-button>
                        <el-button type="primary" size="mini" @click="handleCommand('exportReport',item)">生成报告</el-button>
                        <el-button type="danger" size="mini" @click="handleCommand('del',item)">删除</el-button>
                       </div>
                    </div>
                    <el-form label-width="100px">
                        <el-form-item label="发明点：">
                              <div v-html="item.inventionPoint"></div>
                        </el-form-item>
                        <el-form-item label="创建人：">
                              <div v-html="item.createName"></div>
                        </el-form-item>
                        <el-form-item label="创建时间：">
                              <div v-html="item.createTime"></div>
                        </el-form-item>
                    </el-form>
                </myCard>
            </div>

          </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>
      <reportTemplateDialog ref="reportTemplate"></reportTemplateDialog>
      <createNoveltySearch ref="createNoveltySearch"></createNoveltySearch>
    </div>
</template>
  
<script>
  import { getTableHeight } from '@/views/components/mixins'
  import reportTemplateDialog from '@/views/noveltySearch/components/dialog/reportTemplate/reportTemplateDialog.vue';
import createNoveltySearch from './dialog/createNoveltySearch.vue';
  const column = [
      {
          value:'number',
          type:'string',
          name:'案号',
      },
      {
          value:'createName',
          type:'string',
          name:'创建人',
      },
      {
          value:'createTime',
          type:'string',
          name:'创建时间',
      },
  ]
  export default {
      mixins:[getTableHeight],
    components: {
        reportTemplateDialog,
      createNoveltySearch
    },
    props: {},
    data() {
      return {
        loading:false,
          pageSize: [10, 20],//分页数量
          queryParams:{
              current:1,
              size:10,
          },
          total:0,
          tableData:[],
          column:column,
          //检索字段
        searchFiled: [],

        //检索条件
        searchOption: {
        },
      };
    },
    watch: {},
    computed: {},
    created() {},
    async mounted() {
        //获取检索字段和分组字段
        await this.getColumn()
        this.getList()
    },
    methods: {
         //获取检索字段和分组字段
    async getColumn() {
      let params = ['noveltyProject']
      await this.$api.getParamsCommon(params).then(async res => {
        if (res.code == 200) {
          // 分组字段
          let conditionDTOList = JSON.parse(JSON.stringify(res.data[0].conditionDTOList))
          // 搜索字段
          this.searchFiled = this.$commonJS.getField(conditionDTOList, (u) => u.ifSearch == true, {
            label: 'name',
            value: 'value',
            type: 'type',
          })
        }
      })
    },
      //检索
      search(val){
        let params = {}
        val.forEach(item => {
            if (item.type == 3) {
            params[item.value] = item.searchValue.map(itemValue => {
                return itemValue.value
            })
            } else {
            params[item.value] = item.searchValue.label
            }
        })
        this.searchOption = this.$commonJS.ArrayToArray(val)
          this.queryParams.current = 1
          this.getList()
      },
      //获取数据
      getList(){
        if(this.tableData.length == 0 && this.queryParams.current!=1){
          this.queryParams.current -= 1
        }
        this.loading = true
        var params = {
            ...this.queryParams,
            searchQuery: this.$commonJS.objectToString(this.searchOption),//检索条件
        }
          this.$api.queryNoveltyProject(params).then(response=>{
            if(response.code == 200){
                this.tableData = response.data.data
                this.total = response.data.total
                this.loading = false
            }
          }).catch(error=>{
            this.tableData = []
            this.total = 0
            this.loading = false
          })
      },
      //切换分页
      handleCurrentChange(val){
          this.queryParams.current = val
          this.getList()
      },
      //切换也大小
      handleSizeChange(val){
          this.queryParams.current = 1
          this.queryParams.size = val
          this.getList()
      },
      //排序
      sortChange({ column, prop, order }){},
      //点击案号
      handleItem(row){
        const router = this.$router.resolve({
            path: '/noveltySearchDetails',
            query: {
                projectId:row.projectId
            }
        })
        window.open(router.href,"_self")
      },
      //操作
      handleCommand(event,row){
          switch(event){
              case 'search'://检索
                  var form = {
                    importToId:row.projectId,
                    importToType:3,
                    type:4,
                  }
                    var params = {
                        projectId:row.projectId,
                        noveltySearch:true
                    }
                    this.$commonJS.toImportParent(form,4,params)
                  break;
              case "searchRecord"://检索记录
                  this.$router.push(
                      {
                          path:'/noveltySearchRecord',
                      }
                  )   
                  break;
              case "contrastFile"://对比文件
                  this.$router.push(
                      {
                          path:'/noveltySearchFile',
                      }
                  ) 
                  break;
              case "exportReport"://导出报告
                  this.$refs.reportTemplate.open(row.projectId)
                  break;
              case 'del'://删除
                    this.delProject(row)
                  break;
              case 'e'://编辑
                  break;
              case 'createAndCopy'://新建并复用
                  this.createAndCopy(row)
                  break;
          }
      },
      //新建并复用
      createAndCopy(row){
        const route = this.$router.resolve(
          {
            path:'/reuseResults',
            query:{
              toProjectId:null,
              projectId:row.projectId
            }
          }
        )
        window.open(route.href,'_blank')
      },
      //删除查新检索项目
      delProject(row){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            var params = {
                projectId:row.projectId
            }
            this.loading = true
            this.$api.deleteNoveltyProject(params).then(response=>{
                if(response.code == 200){
                    this.$message.success('删除成功')
                    this.loading = false
                    this.getList()
                }
            }).catch(error=>{
                this.loading = false
            })
        })
        
      },
      //创建查新检索
      createNoveltySearch(){
        this.$refs.createNoveltySearch.open()
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .head{
      width: 100%;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }
  .content:empty{
    text-align: center;
    width: 100%;
  }
  .content:empty::after{
    content: '暂无数据';
    color: #958b8b8c;
    font-size: 20px;
  }
  </style>
  <style lang="scss">
    .box-card{
        .el-form-item{
            margin-bottom: 0px;
        }
    .el-form-item__content{
        font-family: var(--fm) !important;
        color: var(--color2) !important;
        text-align: left;
    }
    }
</style>