<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 v-for="(item,index) in visibleData" :key="index">
        <template v-if="item.xydaBasicData.length >0">
          <div class="block-sxy">
            <div class="my-b-title-sxy">{{ item.xxlbmc }}</div>
            <div class="form form-content" v-for="(detailItem,detailIndex) in item.xydaBasicData" :key="detailIndex">
              <div class="my-c-title">{{ detailItem.resourcename }}</div>
              <diy-el-form  :model-form="detailItem" :forms="formConfig"/>
              <my-table border :table-data="detailItem.tabulardata" :header-style="headerStyle"  :headers="setVisibleHeader(detailItem.headername)">
                <template #PHOTO="{data}">
                  <img class="sxy-photo" :src="'data:image/png;base64,' +data.PHOTO">
                </template>

              </my-table>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>


import {cityCreditInformationPlatformSearchDetail} from "@/data/all-form";
import DiyElForm from "@/components/common/DiyElForm.vue";
import myTable from "@/components/common/MyTable.vue";
import {onBeforeMount, ref} from "vue";
import {Close, Select} from "@element-plus/icons-vue";
export default {
  name: "CityCreditInformationPlatformSearchEdit",
  computed: {
    Close() {
      return Close
    },
    Select() {
      return Select
    },
  },
  components: {DiyElForm,myTable},
  props:{
    currentOpObj:{

    },
    operationType:{

    }
  },
  setup(props,{emit}) {
    const forms = ref({  //form 表单的值
    })
    const formConfig = ref({...cityCreditInformationPlatformSearchDetail});   //form 配置项
    const visibleData = ref([]);
    const headerStyle = ref({
      'background-color': '#ddd'
    });
    //form的配置项
    //form的值
    //table的表头
    //table的值
    function setVisibleData(obj){
      visibleData.value = obj;
    }
    function setVisibleHeader(obj){
      let headerArr = [];
      for( let i in obj){
        let temp = {
          label:obj[i],
          prop:i
        }
        headerArr.push(temp)
      }
      return headerArr
    }
    onBeforeMount(() => {
      debugger
      setVisibleData(props.currentOpObj)
    })
    return {
      formConfig,
      forms,
      visibleData,
      setVisibleHeader,
      headerStyle
    }
  }
}
</script>

<style scoped lang="scss">
.detail-main{
  .sxy-photo{
    width: 100px;
    height: 100px;
  }
  .block-sxy{
    border: 1px #ddd solid;
    border-radius: 4px;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .my-b-title-sxy{
    background-color: #f5f5f5;
    padding: 10px 15px;
    margin-bottom: 20px;
    font-weight: 600;
    line-height: 40px;
    color: #2199d6;
    font-size: 15px;
    border-bottom: 1px solid var(--el-border-color-light);
  }
  .my-c-title{
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 40px;
    color: #676a6c;
  }
  .form-content{
    padding: 10px 20px;
  }
  .search-div{
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    width: 300px;
  }
  .form{
    max-width: 100%;
  }
  padding: 0 20px;
}
</style>
