<!--
 * @Author: yangwei
 * @Date: 2023-09-01 10:39:03
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-02-02 09:17:47
 * @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 zjzlList"
                  :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)',
            '--hover-color': 'rgba(' + item.bgColor + ',1)' 
          }">
          <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 store from '@/store/index.js'
  import { getSysInterfaceList } from "@/api/ptjk.js";
  export default {
    name: "BdcdjWebGbmhlgxsjgx",
    props: {
      formData: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data () {
      return {
        zjzlList: store.getters.dictData['A34'],
        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)
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "~@/styles/public.scss";
  .from-clues-content {
    height: calc(100% - 60px);
    display: flex;
    flex-wrap: wrap;
  }
  /deep/.el-dialog__title {
    color: #ffffff !important;
  }
  .search-type {
    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;
      &:hover {
        border-color: var(--hover-color) !important;
      }
      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>