<template>
  <div class="page_container">
    <bg-breadcrumb></bg-breadcrumb>
    <div class="page_content">
      <bg-form-gap title="注册信息"></bg-form-gap>
      <bg-detail-table2 class="register_info" :list="instanceData.applyBasicInfo">
        <template v-slot:approvalStatus="{ data }">
          <p class="detail-module">
            <span>{{ data.label }}</span>
            <span>{{ data.value }}</span>
          </p>
        </template>
      </bg-detail-table2>
      <bg-form-gap title="审批信息"></bg-form-gap>
      <bg-detail-table2 class="approve_info" :list="instanceData.approveInfo">
        <template v-slot:applyOrganization="{ data }">
          <p class="detail-module">
            <span>{{ data.label }}</span>
            <span>{{ data.value }}</span>
          </p>
        </template>
      </bg-detail-table2>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, computed, onBeforeMount } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";

const instanceData = reactive({
  applyBasicInfo: [
    {
      key: "approval_status",
      label: "所属机构",
      value: "1",
      slot: "approvalStatus",
    },
    {
      key: "apply_time",
      label: "业务系统名称",
      value: "",
    },
    {
      key: "apply_organization",
      label: "账号",
      value: "",
    },
    {
      key: "business_name",
      label: "手机号",
      value: "",
    },
    {
      key: "contact_person",
      label: "开发厂商名称",
      value: "",
    },
    {
      key: "contact_phone",
      label: "提交时间",
      value: "",
    },
    {
      key: "contact_person",
      label: "联系人",
      value: "",
    },
    {
      key: "contact_phone",
      label: "联系人手机号",
      value: "",
    },
    {
      key: "apply_application",
      label: "业务系统描述",
      value: "",
    },
  ],
  approveInfo: [
    {
      key: "apply_organization",
      label: "审核状态",
      value: "",
      slot: "applyOrganization",
    },
    {
      key: "business_name",
      label: "审核人",
      value: "",
    },
    {
      key: "apply_organization",
      label: "审批时间",
      value: "",
    },
    {
      key: "business_name",
      label: "审批意见",
      value: "",
    },
  ],
});
</script>

<style lang="scss" scoped>
.page_content {
  position: relative;
  padding: 24px 0 68px 24px;
  .register_info,
  .approve_info {
    margin-bottom: 24px;
    width: 960px;
  }
}
</style>
