<!--
 * @Author: yangwei
 * @Date: 2023-09-01 10:39:03
 * @LastEditors: yangwei
 * @LastEditTime: 2023-09-12 13:55:36
 * @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: 'rgba(' + item.bgColor + ',0.12)',
            border: '1px solid ' + 'rgba(' + item.bgColor + ',0.3)',
          }"
        >
          <img :src="item.svg" alt="" />
        </div>
        <p>{{ item.interfaceDescription }}</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";
import { getSysInterfaceList } from "@/api/ptjk.js";
export default {
  name: "BdcdjWebGbmhlgxsjgx",
  data() {
    return {
      queryForm: {},
      searchType: [
        {
          name: "身份核查",
          bgColor: "92, 149, 229",
          comp: "sfhc",
          svg: require("./images/sfhc.svg"),
        },
        {
          name: "婚姻登记信息核验",
          bgColor: "221, 138, 92",
          comp: "hydjxxhy",
          svg: require("./images/hydjxxhy.svg"),
        },
        {
          name: "金融许可查询",
          bgColor: "61, 164, 131",
          comp: "jrxkcx",
          svg: require("./images/jrxkcx.svg"),
        },
        {
          name: "企业基本信息查询",
          bgColor: "221, 138, 92",
          comp: "qyjbxxcx",
          svg: require("./images/qyjbxxcx.svg"),
        },
        {
          name: "企业基本信息验证",
          bgColor: "92, 181, 204",
          comp: "qyjbxxyz",
          svg: require("./images/qyjbxxyz.svg"),
        },
        {
          name: "地域信息查询",
          bgColor: "92, 149, 229",
          comp: "dyxxcx",
          svg: require("./images/dyxxcx.svg"),
        },
        {
          name: "个体工商户基本信息查询",
          bgColor: "61, 164, 131",
          comp: "gtgshjbxxcx",
          svg: require("./images/gtgshjbxxcx.svg"),
        },
        {
          name: "个体工商户基本信息验证",
          bgColor: "141, 100, 197",
          comp: "gtgshjbxxyz",
          svg: require("./images/gtgshjbxxyz.svg"),
        },
        {
          name: "中编办机构信息查询",
          bgColor: "141, 100, 197",
          comp: "zbbjgxxcx",
          svg: require("./images/zbbjgxxcx.svg"),
        },
        {
          name: "机构信息查询",
          bgColor: "92, 149, 229",
          comp: "jgxxcx",
          svg: require("./images/jgxxcx.svg"),
        },
        {
          name: "不动产登记信息查询",
          bgColor: "231, 128, 118",
          comp: "bdcdjxxcx",
          svg: require("./images/bdcdjxxcx.svg"),
        },
        {
          name: "电子营业执照查询",
          bgColor: "92, 149, 229",
          comp: "dzyyzzcx",
          svg: require("./images/dzyyzzcx.svg"),
        },
        {
          name: "公证书信息查询",
          bgColor: "221, 138, 92",
          comp: "gzsxxcx",
          svg: require("./images/gzsxxcx.svg"),
        },
        {
          name: "最高法部门",
          bgColor: "92, 181, 204",
          comp: "zgfbm",
          svg: require("./images/zgfbm.svg"),
        },
        {
          name: "未知",
          bgColor: "109, 114, 120",
          comp: "",
          svg: require("./images/unknow.svg"),
        },
      ],
      dialogVisible: false,
      dialogTitle: "",
      dialogComp: null,
    };
  },

  mounted() {
    getSysInterfaceList({ interfaceType: "4",pageSize:100 }).then((res) => {
      if (res.code == 200) {
        res.result.records.forEach(i=>{
          let a = this.searchType.filter(item => i.interfaceService == item.name)
          if (a.length) {
            i.bgColor = a[0].bgColor
            i.svg = a[0].svg
            i.comp = a[0].comp
          }else{
            i.bgColor = '109, 114, 120'
            i.svg = require("./images/unknow.svg")
            i.comp = ''
          }
        })
        this.searchType = res.result.records
      }
    });
  },

  methods: {
    /**
     * @description: openDialog 打开弹框窗口
     * @param {*} item
     * @author: renchao
     */
    openDialog(item) {
      this.dialogTitle = item.interfaceDescription;
      this.dialogComp = (r) =>
        require.ensure([], () => r(require(`./components/${item.comp}.vue`)));
      item.comp && (this.dialogVisible = true);
    },
  },
  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: 70px;
    height: 70px;
    border-radius: 4px;
    margin: 0 auto;
    cursor: pointer;
    i {
      text-align: center;
      line-height: 60px;
      font-size: 26px;
      color: #fff;
    }
    img {
      display: inline-block;
      width: 34px;
      height: 34px;
      margin: 17px 0;
    }
  }
  p {
    margin-top: 20px;
    cursor: pointer;
    font-size: 16px;
    color: #31333c;
  }
}
/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>