<template>
    <div class="chart-model-box">
        <div class="chart-title">{{ chartTitle }}</div>
        <div class="chart-content">
            <!-- <PieChart /> -->
            <component
                :is="ChartTypeName"
                :chartData="chartData"
                :pie_1Data="pie_1Data"
                :pie_2Data="pie_2Data"
                :barAndLineX="barAndLineX"
                :barY1="barY1"
                :barY2="barY2"
                :lineY1="lineY1"
                :lineY2="lineY2"
            />
        </div>
    </div>
</template>

<script>
import PieChart1 from './PieChart_1.vue' // 饼图 1
import PieChart2 from './PieChart_2.vue' // 饼图 2
import BarChart from './BarChart.vue' // 柱状图
import LineChart from './LineChart.vue' // 折线图
export default {
    components: {
        BarChart,
        LineChart,
        PieChart1,
        PieChart2
    },
    props: {
        chartTitle: {
            type: String,
            default: '标题'
        },
        ChartTypeName: {
            type: String,
            default: 'PieChart'
        },
        // 饼图 1 数据源
        pie_1Data: {
            type: Array,
            default: () => {
                return []
            }
        },
        // 饼图 2 数据源
        pie_2Data: {
            type: Array,
            default: () => {
                return []
            }
        },
        // 饼图和折线图 X 轴数据源
        barAndLineX: {
            type: Array,
            default: () => {
                return []
            }
        },
        // 柱图 Y 轴数据源1
        barY1: {
            type: Array,
            default: () => {
                return []
            }
        },
        // 柱图 Y 轴数据源2
        barY2: {
            type: Array,
            default: () => {
                return []
            }
        },
        // 折线图 Y 轴数据源1
        lineY1: {
            type: Array,
            default: () => {
                return []
            }
        },
        // 折线图 Y 轴数据源2
        lineY2: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            chartData: {}
        }
    }
}
</script>

<style lang="scss" scoped>
.chart-model-box {
    width: 100%;
    height: 50vh;
    display: flex;
    flex-direction: column;
    border: 1px solid #c0bfbf;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

    .chart-title {
        padding: 12px 0 12px 12px;
        font-weight: bold;
        color: #333;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        background-color: #f9f9f9;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

    .chart-content {
        flex: 1;
    }
}
</style>
