<!-- 企业主体库表单 -->
<template>
    <div class="app-container">
        <div class="content-header">
            <el-button class="reset-btn" @click="handleClose()">返回</el-button>
            <!-- <el-button class="search-btn" @click="handleSave()">编辑</el-button> -->
        </div>
        <div class="content-body">
            <el-row :gutter="24" class="content-row">
                <!-- 基本信息 -->
                <el-col :span="6" class="pane-left">
                    <BasicInfoDetail ref="basicInfoDetail" :detailData="detailData"/>
                </el-col>
                <!-- 法人信息 -->
                <el-col :span="6" class="pane-center">
                    <LegalPersonDetail ref="legalPersonDetail" :detailData="detailData"/>
                </el-col>
                <!-- 开户证明 -->
                <el-col :span="6" class="pane-right">
                    <AccountOpeningCertificateDetail ref="accountOpeningCertificateDetail" :detailData="detailData"/>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import { decryptWithSM4 } from '@/utils/sm'
import BasicInfoDetail from './child/BasicInfoDetail.vue'
import LegalPersonDetail from './child/LegalPersonDetail.vue'
import AccountOpeningCertificateDetail from './child/AccountOpeningCertificateDetail.vue'
import { getDetailDataAPI } from '@/api/enterpriseLibrary/enterprise/enterprise'

export default {
    name: 'EnterpriseDetail',
    components: {
        BasicInfoDetail,
        LegalPersonDetail,
        AccountOpeningCertificateDetail
    },
    data() {
        return {
            enterpriseId: decryptWithSM4(this.$route.query.enterpriseId),
            type: decryptWithSM4(this.$route.query.type),
            detailData: {} // 详情数据
        }
    },
    created() {
        this.getDetail()
    },
    methods: {
        // 返回
        handleClose() {
            const obj = { path: "/enterpriseLibrary/enterprise" }
            this.$tab.closeOpenPage(obj)
        },
        // 获取详情
        async getDetail() {
            const res = await getDetailDataAPI({ enterpriseId: this.enterpriseId })
            this.detailData = res.data;
        },
    }

}
</script>

<style scoped lang="scss">
.app-container {
    padding: 24px;
    background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
    min-height: 100vh;
    overflow-y: auto;
}

.content-body {
    margin-top: 20px;
}

.content-row {
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
}

.pane-left,
.pane-center,
.pane-right {
    background: #fff;
    border-radius: 16px 16px 16px 16px;
    min-height: 600px;
    box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
    // border: 1px solid #e8f4ff;
    padding: 0;
    margin-bottom: 20px;
    flex: 1;
    min-width: 0;
}


.content-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
}

.search-btn {
    background: #409EFF;
    border-color: #409EFF;
    color: #fff;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 6px;
    box-shadow: 0px 4px 12px 0px rgba(64, 158, 255, 0.4);
    letter-spacing: 0.5px;
    font-size: 14px;
    transition: all 0.3s ease;

    &:hover {
        background: #66b1ff;
        border-color: #66b1ff;
        box-shadow: 0px 6px 16px 0px rgba(64, 158, 255, 0.5);
        transform: translateY(-1px);
    }
}

.reset-btn {
    width: 98px;
    height: 36px;
    background: #FFFFFF;
    box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
    border-radius: 4px;
    border: none;
    color: #606266;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;

    &:hover {
        background: #f5f7fa;
        color: #409EFF;
        box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
    }
}
</style>