<template>
    <!-- 气泡框容器 -->
    <view class="mt-30 relative overflow-visible rounded-xl border border-solid border-warning-disabled bg-white p-24
                bg-gradient-to-b from-warning-light to-white">
        <!-- 三角 + 缺口（以气泡框 top 边为基准定位） -->
        <view class="absolute top-0 left-80 z-10 overflow-visible">
            <!-- 缺口：盖住气泡框的上边框（加高一点避免 1px 缝） -->
            <view class="absolute top-0 -left-30">
                <view class="w-60 h-8 bg-warning-light"></view>
            </view>

            <!-- 外层三角：边框色 -->
            <view
                class="absolute w-0 h-0 border-solid border-t-0
             -top-24 -left-24
             border-l-24 border-r-24 border-b-24
             border-l-transparent border-r-transparent border-b-warning-disabled"
            ></view>

            <!-- 内层三角：背景色（白），下移 1rpx 压住拼接处细缝 -->
            <view
                class="absolute w-0 h-0 border-solid border-t-0
             -top-21 -left-22
             border-l-22 border-r-22 border-b-22
             border-l-transparent border-r-transparent border-b-warning-light"
            ></view>
        </view>

        <!-- 内容 -->
        <view class="flex items-center">
            <uv-icon name="info-circle" color="warning"/>
            <text class="ml-12 text-28 text-fore-title font-bold">计分规则说明</text>
        </view>
        <view class="mt-18 text-23 text-fore-title leading-38">
            <view>考试由{{rules.map(r=>r.category).join('+')}}{{rules.length}}部分组成。其中：</view>
            <view v-for="(c,i) in rules" :key="i">{{c.category}}={{c.content}}</view>
        </view>
    </view>

</template>

<script setup lang="ts">
import {VOLUNTARY_RULES} from "@/types/injectionSymbols";
import {EnrollRule} from "@/types/voluntary";

const rules = inject(VOLUNTARY_RULES) || ref<EnrollRule[]>([])
</script>

<style scoped>

</style>