<template>
    <div class="funnel-chart-container">
        <svg
            viewBox="0 0 800 320"
            preserveAspectRatio="xMidYMid meet"
            class="funnel-svg"
        >
            <defs>
                <filter
                    id="shadow"
                    x="-10%"
                    y="-10%"
                    width="120%"
                    height="120%"
                >
                    <feDropShadow
                        dx="0"
                        dy="1"
                        stdDeviation="2"
                        flood-color="#000000"
                        flood-opacity="0.1"
                    />
                </filter>
            </defs>

            <!-- Conversion Line (Moved to background) -->
            <polyline
                points="630,105 700,105 650,210 500,210"
                fill="none"
                stroke="#999"
                stroke-width="2"
            />
            <text x="710" y="150" fill="#666" font-size="20">转化率</text>
            <text x="710" y="180" fill="#333" font-size="24" font-weight="bold">
                {{ conversionRate }}
            </text>

            <!-- Group 1: Visitors (Top) -->
            <g transform="translate(0, 0)">
                <!-- Left: Light Blue -->
                <!-- Shape: Rect left, slanted right edge -->
                <path
                    d="M50,10 L350,10 L380,150 L50,150 Z"
                    fill="#9ac1d9"
                    stroke="none"
                />

                <!-- Right: Dark Blue -->
                <!-- Shape: Slanted left edge (parallel gap), slanted right edge -->
                <path
                    d="M385,10 L700,10 L650,150 L415,150 Z"
                    fill="#4a8aff"
                    stroke="none"
                />

                <!-- Text: Left -->
                <text x="150" y="60" fill="#fff" font-size="20">领取人数</text>
                <text
                    x="150"
                    y="100"
                    fill="#fff"
                    font-size="24"
                    font-weight="bold"
                >
                    {{ visitorCount }}
                </text>

                <!-- Text: Right -->
                <text
                    x="540"
                    y="90"
                    text-anchor="middle"
                    fill="#fff"
                    font-size="32"
                    font-weight="bold"
                >
                    {{ visitorLabel }}
                </text>
            </g>

            <!-- Group 2: Payment (Bottom) -->
            <g transform="translate(0, 155)">
                <!-- Left: Light Teal -->
                <path
                    d="M50,0 L380,0 L530,150 L50,150 Z"
                    fill="#a5d1d3"
                    stroke="none"
                />

                <!-- Right: Dark Teal (Triangle) -->
                <path
                    d="M415,0 L650,0 L532.5,150 Z"
                    fill="#63c2cc"
                    stroke="none"
                />

                <!-- Text: Left -->
                <!-- 营销支付人数 -->
                <text x="100" y="60" fill="#fff" font-size="18">
                    营销支付人数
                </text>
                <text
                    x="150"
                    y="100"
                    fill="#fff"
                    font-size="22"
                    font-weight="bold"
                >
                    {{ paymentCount }}
                </text>

                <!-- 客单价 -->
                <text x="280" y="60" fill="#fff" font-size="18">客单价</text>
                <text
                    x="310"
                    y="100"
                    fill="#fff"
                    font-size="22"
                    font-weight="bold"
                >
                    {{ unitPrice }}
                </text>

                <!-- Text: Right -->
                <text
                    x="532"
                    y="60"
                    text-anchor="middle"
                    fill="#fff"
                    font-size="32"
                    font-weight="bold"
                >
                    {{ paymentLabel }}
                </text>
            </g>
        </svg>
    </div>
</template>

<script setup>
    defineProps({
        visitorLabel: { type: String, default: '访客' },
        paymentLabel: { type: String, default: '支付' },
        visitorCount: { type: [Number, String], default: 0 },
        paymentCount: { type: [Number, String], default: 0 },
        unitPrice: { type: [Number, String], default: 0 },
        conversionRate: { type: String, default: '0%' }
    });
</script>

<style scoped>
    .funnel-chart-container {
        width: 100%;
        height: 100%;
        min-height: 250px;
    }
    .funnel-svg {
        width: 100%;
        height: 100%;
    }
</style>
