<template>
  <div class="chart-display">
    <!-- postType == 2 时显示 ChartsGroupOne -->
    <ChartsGroupOne v-if="postType === 2" :post-type="postType" />
    
    <!-- postType == 1 时显示 ChartsGroupTwo -->
    <ChartsGroupTwo v-else-if="postType === 1" :post-type="postType" />
    
    <!-- 其他情况显示 ChartsGroupThree -->
    <ChartsGroupThree v-else :post-type="postType" />
  </div>
</template>

<script>
import ChartsGroupOne from './ChartsGroupOne.vue';
import ChartsGroupTwo from './ChartsGroupTwo.vue';
import ChartsGroupThree from './ChartsGroupThree.vue';

export default {
  name: 'ChartDisplay',
  components: {
    ChartsGroupOne,
    ChartsGroupTwo,
    ChartsGroupThree
  },
  props: {
    postType: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style scoped>
/* 图表样式 */
.chart-container {
  height: 340px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  box-sizing: border-box;
  backdrop-filter: blur(5px);
}

.chart {
  width: 100%;
  height: 100%;
}
</style>