<template>
    <div class="chart-list">
        <div class="chart-item">
            <chart-box name="2025年广东省作物种植面积占比">
                <div class="box-content">
                    <div class="chart-dom">
                        <pie-chart></pie-chart>
                    </div>
                    <div class="box-bg">
                        <div class="legend-list">
                            <div class="legend-item" v-for="(item, index) in legendData" :key="index">
                                <span class="dot" :style="{ background: item.color }"></span>
                                <span class="text">
                                    {{ item.name }}
                                    <span class="percent">{{ item.percent }}%</span>
                                    <span class="line">|</span>
                                    <span class="value">{{ item.value }}亩</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </chart-box>
        </div>
        <div class="chart-item">
            <chart-box name="2025年广东省作物区域占比">
                <div class="box-content">
                    <div class="chart-dom">
                        <bar-chart :key="0"></bar-chart>
                    </div>
                    <div class="box-bg">从化区的作物种植面积最大，占比***</div>
                </div>
            </chart-box>
        </div>
        <div class="chart-item" v-if="activeBaseTab === '作物分布'">
            <chart-box name="近三年主要作物种植面积变化趋势">
                <div class="box-content">
                    <div class="chart-dom">
                        <line-chart></line-chart>
                    </div>
                    <div class="box-bg">这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。</div>
                </div>
            </chart-box>
        </div>
        <div class="chart-item">
            <chart-box name="2025年广东省作物预估产量对比">
                <div class="box-content">
                    <div class="chart-dom">
                        <bar-chart :key="1"></bar-chart>
                    </div>
                    <div class="box-bg">从化区的作物种植面积最大，占比***</div>
                </div>
            </chart-box>
        </div>
    </div>
</template>

<script setup>
import chartBox from "@/components/chartBox.vue";
import pieChart from "./pieChart.vue";
import lineChart from "./lineChart.vue";
import { computed } from "vue";
import { pieOption } from "./chartOption.js";
import barChart from "./barChart.vue";

const props = defineProps({
    activeBaseTab: {
        type: String,
        default: "作物分布",
    },
});
// 计算图例数据
const legendData = computed(() => {
    const total = 3774; // 总种植面积
    return pieOption.series[0].data.map((item, index) => {
        const percent = ((item.value / total) * 100).toFixed(0);
        return {
            name: item.name,
            value: item.value,
            percent: percent,
            color: pieOption.color[index],
        };
    });
});
</script>

<style lang="scss" scoped>
.chart-list {
    width: 100%;
    height: 100%;
    .chart-item {
        width: 100%;
        height: 285px;
        box-sizing: border-box;
        margin-bottom: 10px;
        background: rgba(35, 35, 35, 1);
        border: 1px solid #444444;
        border-radius: 4px;
        .box-content {
            width: 100%;
            height: 100%;
        }
        .chart-dom {
            height: calc(100% - 61px);
            width: 100%;
        }
        .box-bg {
            border-radius: 2px 2px 0 0;
            font-size: 12px;
            padding: 6px 8px;
            box-sizing: border-box;
            height: 61px;
            overflow-y: auto;
            background: linear-gradient(180deg, rgb(85, 85, 85, 0.4) 0%, rgb(35, 35, 35, 1) 100%);

            .legend-list {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px 12px;
                height: 100%;
                font-size: 12px;

                .legend-item {
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    line-height: 12px;

                    .dot {
                        width: 5px;
                        height: 5px;
                        border-radius: 50%;
                        flex-shrink: 0;
                    }

                    .text {
                        color: rgba(255, 255, 255, 1);
                        font-size: 12px;
                        white-space: nowrap;
                        .percent {
                            padding: 0 10px;
                        }
                        .line {
                            color: rgba(255, 255, 255, 0.2);
                            padding-right: 10px;
                        }
                    }
                }
            }
        }
    }
}
</style>
