<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-07-28 16:28:43
-->
<template>
  <div class="from-clues">
    <!-- 发证信息 -->
    <div class="from-clues-header">
      <el-form :model="ruleForm">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="印刷序列号">
              <el-input v-model="ruleForm.ysxlh" clearable placeholder="请输入印刷序列号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证书号">
              <el-input v-model="ruleForm.zsh" clearable placeholder="请输入证书号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="权利人">
              <el-input v-model="ruleForm.qlr" clearable placeholder="请输入权利人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="btnColRight" v-if="ableOperation">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
              <el-button type="primary" icon="el-icon-search" @click="zslqClick">证书领取</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="from-clues-content">
      <lb-table border :column="tableData.columns" :heightNum="210" :data="tableData.data" :pagination="false">
      </lb-table>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import store from '@/store/index.js'
  import table from "@/utils/mixin/table";
  import { datas } from "../javascript/fzxxdata";
  import { getCertificateList } from "@/api/bdcqz.js";
  export default {
    mixins: [table],
    data () {
      return {
        //表单是否可操作
        ableOperation: true,
        ruleForm: {
          ysxlh: '',
          zsh: '',
          qlr: '',
          bsmSldy: ''
        },
        tableData: {
          total: 0,
          columns: datas.columns().fzgrid,
          data: []
        },
        dialogVisible: false
      }
    },
    created () {
      this.ableOperation = this.$parent.currentSelectTab.ableOperation
    },
    computed: {
      ...mapGetters(['workFresh'])
    },
    watch: {
      workFresh: {
        handler (newVal, oldVal) {
          if (newVal) this.queryClick()
        }
      }
    },
    methods: {
      /**
       * @description: queryClick
       * @author: renchao
       */
      queryClick () {
        this.ruleForm.bsmSlsq = this.$route.query.bsmSlsq;
        getCertificateList(this.ruleForm).then(res => {
          if (res.code === 200) {
            this.tableData.data = res.result ? res.result : []
          }
        })
      },
      /**
       * @description: 
       * @author: renchao
       */
      zslqClick () {
        store.dispatch('user/reWorkFresh', false)
        this.$popupDialog("不动产权证领取", "workflow/components/dialog/zslq", {}, '80%', true)
      }
    }
  }
</script>
<style scoped lang='scss'>
  @import "~@/styles/public.scss";
</style>