<template>
    <div class="background-container"
        :style="{ backgroundImage: `linear-gradient(to bottom, var(--bg-white-80), var(--bg-white-100)), url(${enterpriseInfo.picture})` }">
    </div>
    <el-scrollbar>
        <div class="common-page">
            <el-space wrap :size="16" fill class="full-width">
                <title-pane :enterprise-info="enterpriseInfo"></title-pane>
                <el-tabs stretch class="tabs-header-as-card tabs-nav-no-wrap tabs-bar-as-btn tab-pane-overflow-visible">
                    <el-tab-pane label="企业详情">
                        <div class="flex-display">
                            <news-pane :enterprise-info="enterpriseInfo" />
                            <base-info class="base-info" :enterprise-info="enterpriseInfo" />
                        </div>
                    </el-tab-pane>
                    <el-tab-pane lazy label="经营情况">
                        <operating-pages :enterprise-info="enterpriseInfo" />
                    </el-tab-pane>
                    <el-tab-pane lazy label="供应链 / 股权">
                        <supply-chain :enterprise-info="enterpriseInfo" />
                    </el-tab-pane>
                </el-tabs>
            </el-space>
        </div>
    </el-scrollbar>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { getEnterprisePageInfo } from '@/api/companyPages';
import TitlePane from './component/TitlePane.vue';
import NewsPane from './component/DetailsPages/NewsPane.vue';
import BaseInfo from './component/DetailsPages/BaseInfo.vue';
import OperatingPages from './component/OperatingPages/index.vue';
import SupplyChain from './component/SupplyChain/index.vue';
import '@/styles/tabs.scss'
import '@/styles/container.scss'
import { ElScrollbar, ElSpace, ElTabs, ElTabPane } from 'element-plus';

const route = useRoute();
const companyId = route.params.id;

const enterpriseInfo = ref({})
console.log(companyId)

onMounted(() => {
    init();
});

const init = async () => {
    const res = await getEnterprisePageInfo(companyId);
    if (res?.code === 200) {
        enterpriseInfo.value = res.data
    }
}

</script>

<style lang="scss" scoped>
.background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 383px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

.base-info {
    max-width: 520px;
    width: 520px;
    margin-left: 16px;
}
</style>