<template>
  <div class="position-re">
    <div>
      <el-breadcrumb separator="/" class="my-breadcrumb">
        <el-breadcrumb-item>市信用信息平台查询</el-breadcrumb-item>
        <el-breadcrumb-item>法人信息详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="back" @click="$emit('changeOperation','',{})"><span class="fa fa-reply cur-po " >返回</span></div>

    <div class="detail-main">
      <div class="block">
        <div class="my-b-title-wxy">基本信息</div>
        <div class="form">
          <diy-el-form ref="formRef"  v-model:model-form="forms" :forms="formConfig"/>
          <template v-if="detailData.CFList !=undefined && detailData.CFList.length >0" >
            <div class="my-b-title-wxy">行政处罚信息</div>
            <my-table border :table-data="detailData.CFList" :header-style="headerStyle"   :headers="relativePersonSearchDetailHeaderCF">
            </my-table>
          </template>
          <template v-if="detailData.XKList !=undefined && detailData.XKList.length >0" >
            <div class="my-b-title-wxy">行政许可信息</div>
            <my-table border :table-data="detailData.XKList" :header-style="headerStyle"   :headers="relativePersonSearchDetailHeaderXK">
            </my-table>
          </template>
          <template v-if="detailData.YQList !=undefined && detailData.YQList.length >0" >
            <div class="my-b-title-wxy">公积金逾期信息</div>
            <my-table border :table-data="detailData.YQList" :header-style="headerStyle"   :headers="relativePersonSearchDetailHeaderYQ">
            </my-table>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {relativePersonSearchDetail} from "@/data/all-form";
import {relativePersonSearchDetailHeaderXK,relativePersonSearchDetailHeaderCF,relativePersonSearchDetailHeaderYQ} from "@/data/all-table-header";
import {onBeforeMount, ref} from "vue";
import DiyElForm from "@/components/common/DiyElForm.vue";
import MyTable from "@/components/common/MyTable.vue";
import {
  queryCreditInfoBaseSXDetails
} from "@/service/credit-information/commission-credit-information-database-search/relative-person-search/relative-person-search";
export default {
  name: "RelativePersonSearchEdit",
  components:{
    DiyElForm,MyTable
  },
  props:{
    currentOpObj:{

    },
    operationType:{

    }
  },
  setup(props,{emit}) {
    const forms = ref({});
    const formRef = ref(null);
    const formConfig = ref({...relativePersonSearchDetail});
    const headerStyle = ref({
      'background-color': '#ddd'
    });
    const detailData = ref({});
    function getDetailData(){
      debugger
      queryCreditInfoBaseSXDetails({
        "xdr":props.currentOpObj.XDR,
        "xdrmc":props.currentOpObj.XDRMC,
        "XDRDM":props.currentOpObj.XDRDM,
      }).then(res =>{
        detailData.value = res.msg[0].Rows[0];
      })
    }
    onBeforeMount(()=>{
      forms.value = {
        ...props.currentOpObj
      }
      getDetailData()
    })
    return{
      forms,
      formRef,
      formConfig,
      detailData,
      headerStyle,
      relativePersonSearchDetailHeaderXK,
      relativePersonSearchDetailHeaderCF,
      relativePersonSearchDetailHeaderYQ
    }
  }
}
</script>

<style scoped lang="scss">
.my-b-title-wxy{
  padding: 20px 10px;
  text-align: center;
  color: #6e7375;
  font-size: 20px;
  font-weight: 700;
}
</style>