<template>
    <!-- 企业基本信息组件 -->
    <analysis-box title="基本信息" :showAllBtn="false">
        <div class="box-wrap">
            <!-- 企业图片 -->
            <el-image :src="enterpriseInfo.picture" class="company-picture" />

            <!-- 企业基本信息描述 -->
            <el-descriptions title='' :column="1" class="common-descriptions">
                <el-descriptions-item label="成立时间：">{{ enterpriseInfo.establishmentDate }}</el-descriptions-item>
                <el-descriptions-item label="总部地址：">{{ enterpriseInfo.address }}</el-descriptions-item>
                <el-descriptions-item label="联系方式：">{{ enterpriseInfo.telephone }}</el-descriptions-item>
                <el-descriptions-item label="企业类型：">{{ enterpriseInfo.companyType }}</el-descriptions-item>
                <el-descriptions-item label="业务范围：">{{ enterpriseInfo.businessScope }}</el-descriptions-item>
                <el-descriptions-item label="分支机构：">
                    <div style="margin-left: 86px;">
                        <li v-for="(t, i) in branchs" :key="i">{{ t.orgName }}</li>
                    </div>
                </el-descriptions-item>
            </el-descriptions>

            <!-- 分隔线 -->
            <el-divider></el-divider>

            <!-- 关键人物标题 -->
            <div class="text-tip-1-bold" style="margin-bottom: 19px;">关键人物：</div>

            <!-- 关键人物列表 -->
            <el-space wrap>
                <person-avatar style="width: 200px;" v-for="(t, i) in persons" :key="i" :person="t"></person-avatar>
            </el-space>
        </div>
    </analysis-box>
</template>

<script setup>
// 导入组件
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue';
import { ref, watch } from 'vue';
import { getEnterpriseBranch, getEnterpriseKeyPerson } from '@/api/companyPages';
import PersonAvatar from '@/components/base/people/personAvatar.vue';
import { ElDescriptions, ElDescriptionsItem, ElDivider, ElImage, ElSpace } from 'element-plus';
import '@/styles/descriptions.scss'

// 定义组件属性
const props = defineProps({
    enterpriseInfo: {
        type: Object,
        default: {}
    }
});

// 响应式数据
const branchs = ref([]) // 分支机构列表
const persons = ref([]) // 关键人物列表

/**
 * 获取企业相关数据
 * @param {string} id - 企业ID
 */
const featchData = async (id) => {
    // 获取分支机构数据
    var res = await getEnterpriseBranch(id);
    if (res?.code === 200) {
        branchs.value = res.data;
    }

    // 获取关键人物数据
    res = await getEnterpriseKeyPerson(id);
    if (res?.code === 200) {
        persons.value = res.data;
    }
}

// 监听企业信息变化，当企业信息更新时重新获取数据
watch(() => props.enterpriseInfo, async (newVal, oldVal) => {
    if (newVal) {
        await featchData(newVal.id)
    }
}, { immediate: true }) // immediate: true 表示组件挂载时立即执行

</script>

<style lang="css" scoped>
/* 容器样式 */
.box-wrap {
    margin: 25px;
}

/* 企业图片样式 */
.company-picture {
    border-radius: 4px;
    margin-bottom: 16px;
}
</style>