<template>
    <!-- 企业标题面板组件 -->
    <div class="box background-as-card">
        <!-- 企业Logo -->
        <img v-if="enterpriseInfo.logoUrl" :src="enterpriseInfo.logoUrl" alt="logo" class="company-logo" />

        <!-- 企业信息区域 -->
        <el-space fill :size="4">
            <!-- 企业名称 -->
            <div class="company-name">{{ enterpriseInfo.orgName }}</div>
            <!-- 企业英文名称 -->
            <div class="company-name2">{{ enterpriseInfo.orgNameEn }}</div>
            <!-- 企业简介 -->
            <div class="company-name2">{{ enterpriseInfo.orgIntroduction }}</div>
            <!-- 供应区域标签 -->
            <el-space>
                <area-tag v-for="(t, i) in areas" :key="i" :tagName="t.name"></area-tag>
            </el-space>
        </el-space>
        <capital-scale :enterpriseInfo="enterpriseInfo"></capital-scale>
    </div>
</template>

<script setup>
// 导入组件
import AreaTag from '@/components/base/AreaTag/index.vue';
// 导入API
import { getSupplyAreaList } from '@/api/companyPages';
// 导入Vue组合式API
import { ref, watch } from 'vue';
import { ElSpace } from 'element-plus';
// 导入自定义组件
import CapitalScale from './capitalScale.vue'

// 响应式数据
const areas = ref([]) // 供应区域列表

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

// 监听企业信息变化，当企业信息更新时重新获取供应区域
watch(() => props.enterpriseInfo, async (newVal, oldVal) => {
    if (newVal) {
        await initAreas(newVal.id)
    }
})

/**
 * 初始化供应区域列表
 * @param {string} id - 企业ID
 */
const initAreas = async (id) => {
    // 获取供应区域数据
    const res = await getSupplyAreaList(id);
    if (res?.code === 200) {
        // 更新供应区域列表
        areas.value = res.data;
    }
}

</script>

<style lang="scss" scoped>
// 导入通用样式
@use '@/styles/common.scss';

/* 容器样式 */
.box {
    width: 100%;
    height: 160px;
    top: 80px;
    left: 160px;
    padding: 16px 19px;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

/* 企业Logo样式 */
.company-logo {
    width: 128px;
    height: 128px;
    margin-right: 21px;
    object-fit: contain;
}

/* 企业名称样式 */
.company-name {
    @extend .text-title-1-bold;
    color: var(--text-primary-80-color);
}

/* 企业英文名称和简介样式 */
.company-name2 {
    @extend .text-tip-1;
    color: var(--text-primary-80-color);
    @include common.text-ellipsis(2); // 最多显示2行，超出部分省略
}
</style>