<!--
 * @Author: yangwei
 * @Date: 2023-09-01 10:39:03
 * @LastEditors: yangwei
 * @LastEditTime: 2023-09-07 09:00:17
 * @FilePath: \bdcdj-web\src\views\sjgx\gbmhlgxsjgx\gbmhlgxsjgx.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by yangwei, All Rights Reserved. 
-->

<template>
  <div class="from-clues">
    <div class="from-clues-header">
      <el-form
        :model="queryForm"
        ref="queryForm"
        @submit.native.prevent
        label-width="100px"
      >
        <el-row>
          <el-col :span="5">
            <el-form-item label="身份证号">
              <el-input
                placeholder="身份证号"
                v-model="queryForm.gmsfhm"
                clearable
                class="width100"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="姓名">
              <el-input
                placeholder="姓名"
                v-model="queryForm.xm"
                clearable
                class="width100"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="证件种类">
              <el-select
                v-model="queryForm.qllx"
                class="width100"
                filterable
                clearable
                placeholder="证件种类"
              >
                <el-option
                  v-for="item in dictData['A30']"
                  :key="item.dcode"
                  :label="item.dname"
                  :value="item.dcode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="不动产单元号">
              <el-input
                placeholder="不动产单元号"
                v-model="queryForm.bdcdyh"
                clearable
                class="width100"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="from-clues-content">
      <div
        v-for="item in searchType"
        :key="item.name"
        @click="openDialog(item)"
        class="search-type"
      >
        <div
          :style="{
            backgroundColor: item.bgColor,
            'box-shadow': '0px 5px 9px -1px ' + item.bgColor,
          }"
        >
          <i class="el-icon-s-claim"></i>
        </div>
        <p>{{ item.name }}</p>
      </div>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      custom-class="insetDialog"
      append-to-body
      width="50%"
    >
      <component :is="dialogComp" v-if="dialogVisible" :condition="queryForm" />
      <div class="text-center pt-10 pb-20">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "BdcdjWebGbmhlgxsjgx",
  data() {
    return {
      queryForm: {},
      searchType: [
        { name: "身份核查", bgColor: "#486DCA", comp: "sfhc" },
        { name: "婚姻登记信息核验", bgColor: "#AA47AF", comp: "hydjxxhy" },
        { name: "金融许可查询", bgColor: "#E1943F", comp: "jrxkcx" },
        { name: "企业基本信息查询", bgColor: "#D35450", comp: "qyjbxxcx" },
        { name: "企业基本信息验证", bgColor: "#486DCA", comp: "qyjbxxyz" },
        { name: "地域信息查询", bgColor: "#AA47AF", comp: "dyxxcx" },
        {
          name: "个体工商户基本信息查询",
          bgColor: "#E1943F",
          comp: "gtgshjbxxcx",
        },
        {
          name: "个体工商户基本信息验证",
          bgColor: "#486DCA",
          comp: "gtgshjbxxyz",
        },
        { name: "中编办机构信息查询", bgColor: "#D35450", comp: "zbbjbxxcx" },
        { name: "机构信息查询", bgColor: "#E1943F", comp: "jgxxcx" },
        { name: "不动产登记信息查询", bgColor: "#486DCA", comp: "bdcdjxxcx" },
        { name: "电子营业执照查询", bgColor: "#AA47AF", comp: "dzyyzzcx" },
        { name: "公证书信息查询", bgColor: "#E1943F", comp: "gzsxxcx" },
        { name: "最高法部门", bgColor: "#D35450", comp: "zgfbm" },
      ],
      dialogVisible: false,
      dialogTitle: "",
      dialogComp: null,
    };
  },

  mounted() {},

  methods: {
    /**
     * @description: openDialog 打开弹框窗口
     * @param {*} item
     * @author: renchao
     */
    openDialog(item) {
      this.dialogTitle = item.name;
      this.dialogVisible = true;
      this.dialogComp = (r) =>
        require.ensure([], () => r(require(`./components/${item.comp}.vue`)));
    },
  },
  computed: {
    ...mapGetters(["dictData"]),
  },
};
</script>
<style scoped lang="scss">
@import "~@/styles/public.scss";
.from-clues-content {
  height: calc(100% - 70px);
}
.search-type {
  float: left;
  width: 12.5%;
  text-align: center;
  height: 160px;
  box-sizing: border-box;
  padding: 32px 0;
  > div {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto;
    cursor: pointer;
    i {
      text-align: center;
      line-height: 60px;
      font-size: 26px;
      color: #fff;
    }
  }
  p {
    margin-top: 20px;
    cursor: pointer;
    font-size: 16px;
  }
}
/deep/.el-dialog__header {
  text-align: center;
}
/deep/ .check-result {
  min-height: 200px;
  box-sizing: border-box;
  padding: 20px 0 0;
}
.pb-20 {
  padding-bottom: 20px;
  /deep/ .el-button {
    cursor: pointer;
  }
}
</style>