<template>
    <!-- 接收报文查询 -->
    <div class="reportLog from-clues">
      <!-- 头部搜索 -->
      <div class="from-clues-header">
        <el-form ref="ruleForm" :model="form" label-width="100px">
          <el-form-item v-if="BASE_API.THEME == 'jg'">
            <Breadcrumb />
          </el-form-item>
          <el-row class="mb-5">
            <el-col :span="6">
              <el-form-item label="查询人员" prop="qxdm">
                <el-input v-model.trim="form.name" clearable class="width100" placeholder="查询人员"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="查询日期" prop="startTime">
                <el-date-picker type="date" class="width100" placeholder="开始日期" :picker-options="pickerOptionsStart"
                  clearable v-model="form.startTime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="至" prop="endTime" label-width="35px">
                <el-date-picker type="date" class="width100" placeholder="结束日期" :picker-options="pickerOptionsEnd" clearable
                  v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss" @change="endTimeChange"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="证件号" prop="zjh">
                <el-input v-model.trim="form.zjh" clearable class="width100" placeholder="不动产单元号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="mt-10">
            <el-col :span="6">
              <el-form-item label="查询证件名称" prop="zjmc">
                <el-input v-model.trim="form.zjmc" clearable class="width100" placeholder="业务流水号"></el-input>
              </el-form-item>
            </el-col>
            <!-- 按钮操作 -->
            <el-col :span="6" class="btnColRight">
              <el-form-item>
                <btn nativeType="cz" @click="save">新增</btn>
                <btn nativeType="cx" @click="handleSearch">查询</btn>
                <!-- <btn nativeType="resetForm">重置</btn> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 列表区域 -->
      <div class="from-clues-content">
        <lb-table ref="table" :page-size="pageData.size" :current-page.sync="pageData.current" :total="tableData.total"
          @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
          :data="tableData.data">
        </lb-table>
      </div>
      <!-- 编辑 -->
      <el-dialog :close-on-click-modal="false" top="0"
                 custom-class="dialogBox dataReporting editDialogBox sbdialog commonDialog mainCenter" :visible.sync="dialogVisible"
                 width="92%">
        <search-result></search-result>
      </el-dialog>
    </div>
  </template>

  <script>
    import Vue from 'vue'
    // 接收报文查询
    // 引入表格头部数据
    import data from "./data";
    // 引入table混入方法
    import tableMixin from "@/mixins/tableMixin.js";
    import { getSearchRecordList } from "@/api/searchRecord.js";
    // 引入详情弹框
    import SearchResult from "./components/result";
    //引入日期处理方法
    import { timeFormat } from "@/utils/operation";
    export default {
      name: "jsbwcx",
      mixins: [tableMixin],
      // 注册组件
      components: {
         SearchResult
      },
      data () {
        return {
          dialogVisible: false,
          pickerOptionsStart: {
            disabledDate: (time) => {
              let endDateVal = this.form.receiveEndTime;
              if (endDateVal) {
                return (
                  time.getTime() >=
                  new Date(endDateVal).getTime()
                );
              }
            },
          },
          pickerOptionsEnd: {
            disabledDate: (time) => {
              let beginDateVal = this.form.receiveStartTime;
              if (beginDateVal) {
                return (
                  time.getTime() <
                  new Date(beginDateVal).getTime()
                );
              }
            },
          },
          // 表格数据
          form: {
            qxdm: "", // 行政区
            receiveStartTime: "", // 开始日期
            receiveEndTime: "", // 结束日期
            bdcdyh: "", // 不动产单元号
            ywh: "", // 业务号
            qllx: "", // 权利类型
            djlx: "", // 登记类型
            jcjg: "", // 检查结果
            rkjg: "", //入库结果
            currentPage: 1
          },
          // 校验规则
          rules: {
            pcode: [{ required: true, message: "请选择行政区", trigger: "change" }],
            startTime: [
              { required: true, message: "请选择开始日期", trigger: "change" },
            ],
            endTime: [
              { required: true, message: "请选择结束日期", trigger: "change" },
            ],
            bdcdyh: [
              { required: true, message: "不动产单元号", trigger: "change" },
            ],
            ywmc: [{ required: true, message: "业务名称", trigger: "change" }],
            jcjg: [{ required: true, message: "检查结果", trigger: "change" }],
            rkjg: [{ required: true, message: "入库结果", trigger: "change" }],
          },
          // 表格数据
          tableData: {
            // 表格头部
            columns: [
              {
                label: "序号",
                type: "index",
                width: "50",
                index: this.indexMethod,
              }
            ]
              .concat(data.columns())
              .concat([
                {
                  label: "操作",
                  width: "90",
                  render: (h, scope) => {
                    return (
                      <div>
                        <el-button
                              type="text"
                              class='btnColor'
                              onClick={() => {
                                this.handleDetails(scope.row);
                              }}
                            >
                              详情
                            </el-button>
                      </div>
                    )
                  }
                }
              ]),
            // 表格列表数据
            total: 0,
            data: [],
          },
          // 分页
          pageData: {
            total: 0,
            pageSize: 10,
            current: 1
          },
          title: "",
        };
      },
      methods: {
        //截止日期变化
        endTimeChange (val) {
          this.form.receiveEndTime = timeFormat(new Date(val), true)
        },
        // 初始化数据
        queryClick () {
          getSearchRecordList({ ...this.form, ...this.formData }).then(
            (res) => {
              if (res.code === 200) {
                let { total, records, current } = res.result;
                this.tableData.total = total;
                this.tableData.data = records ? records : [];
                this.pageData.current = current
              }
            }
          )
        },
        // 重置
        resetForm () {
          this.$refs.ruleForm.resetFields();
          this.form.currentPage = 1
          this.queryClick();
        },
        featchData () {
          this.queryClick();
        },
        // 结果
        handleResult (row) {
          this.$popupDialog('响应结果', 'views/jsbwcx/components/result', row)
        },
        // 详情
        handleDetails (row) {},
        save() {
          this.dialogVisible = true;
        },
      }
    }
  </script>
  <style scoped lang="scss">
    .lastdom:nth-child(3) {
      margin-bottom: 0px;
    }
  </style>