<script setup>
defineProps({
  totalValue: [Number, String],
  gapValue: Number,
  isCompare: Boolean,
  columnIndex: Number,
})

</script>

<template>
  <div>
    <!-- 显示合计，这个无条件显示 -->
    <div v-if="columnIndex === 0">
      <span>合计</span>
    </div>
    <!-- 显示总值，当 totalValue 为 null 或 0 时显示 '0', 如果是 undefined 则不显示 -->
    <div>{{ totalValue === 0 || totalValue === null ? '0' : totalValue }}</div>
    <!-- 当 isCompare 为 true 时，根据条件显示 gapValue 或 '0'，如果是 undefined 则不显示 -->
    <div v-if="isCompare" :style="{ color: gapValue > 0 ? '#59b939' : gapValue < 0 ? '#ee7973' : 'black' }">
      <el-icon v-if="gapValue > 0"><Top style="position: absolute; top: 2px" /></el-icon>
      <el-icon v-else-if="gapValue < 0"><Bottom style="position: absolute; top: 2px" /></el-icon>
      {{ gapValue === 0 || gapValue === null ? '0%' : gapValue !== undefined ? gapValue + '%' : '' }}
    </div>
  </div>
</template>
