<template>
    <!-- 资本规模组件 -->
    <el-space :size="24">
        <!-- 遍历资本规模数据 -->
        <div v-for="(t, i) in scales" :key="i" class="item-box">
            <!-- 标题 -->
            <div class="item-title">{{ t.title }}</div>
            <!-- 数值区域 -->
            <el-space :size="6">
                <!-- 数值图标 -->
                <div class="item-value-img"></div>
                <!-- 数值 -->
                <div class="item-value">
                    {{ t.value }}
                </div>
            </el-space>
        </div>
    </el-space>
</template>

<script setup>
// 导入Vue组合式API
import { ref, watch } from 'vue'
// 导入Element Plus组件
import { ElSpace } from 'element-plus'

// 响应式数据
const scales = ref([]) // 资本规模数据列表

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

// 监听企业信息变化，更新资本规模数据
watch(() => props.enterpriseInfo, (newVal, oldVal) => {
    // 如果没有年份信息，直接返回
    if (!newVal?.year)
        return

    const scales1 = []

    // 添加营业额数据
    if (newVal.turnover) {
        scales1.push({
            title: newVal.year + '年营业额',
            // 文字转数字，保留整数，添加单位
            value: Number(newVal.turnover).toFixed(0) + '亿'
        })
    }

    // 添加总资产数据
    if (newVal.totalAssets) {
        scales1.push({
            title: newVal.year + '年总资产',
            // 文字转数字，保留整数，添加单位
            value: Number(newVal.totalAssets).toFixed(0) + '亿'
        })
    }

    // 添加净资产数据
    if (newVal.netAssets) {
        scales1.push({
            title: newVal.year + '年净资产',
            // 文字转数字，保留整数，添加单位
            value: Number(newVal.netAssets).toFixed(0) + '亿'
        })
    }

    // 更新资本规模数据
    scales.value = scales1
}, { immediate: true }) // immediate: true 表示组件挂载时立即执行
</script>

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

/* 项目盒子样式 */
.item-box {
    white-space: nowrap; // 禁止换行 
    text-align: right; // 右对齐
}

/* 项目标题样式 */
.item-title {
    @extend .text-tip-1;
    color: var(--text-primary-80-color);
}

/* 项目数值样式 */
.item-value {
    @extend .text-title-0-bold;
    color: var(--color-primary-100);
}

/* 项目数值图标样式 */
.item-value-img {
    width: 8px;
    height: 6px;
    background-image: url(../assets/images/Regular_polygon_11097_225086.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    flex-shrink: 0; // 防止收缩
}
</style>