<script setup lang="ts">
    import { reactive } from 'vue'

    // 定义按钮类型
    interface Button {
        id: number
        name: string
        active: boolean
    }

    onLoad((options) => {
        console.log('onLoad', options)
        if (options.id) {
            // 获取按钮信息
            const button = pageData.buttons.find((btn) => btn.id === Number(options.id))
            if (button) {
                // 将按钮设为激活状态
                handleButtonClick(button)
            }
        }
    })

    // 页面数据
    const pageData = reactive({
        // 顶部按钮列表
        buttons: [
            { id: 1, name: '惠农贷款', active: true },
            { id: 2, name: '振兴贷款', active: false },
            { id: 3, name: '灾害保险', active: false },
            { id: 4, name: '价格保险', active: false },
            { id: 5, name: '更多服务', active: false },
        ],

        // 惠农贷款政策信息
        policyInfo: {
            title: '惠农贷款政策',
            description: '面向新型农业经营主体，提供便捷资金支持',
        },

        // 政策特点
        policyFeatures: [
            {
                id: 1,
                icon: '/static/images/codefun/65805aa8bc30e1adb6350da711c623c5.png',
                value: '5-50万',
                description: '额度高',
            },
            {
                id: 2,
                icon: '/static/images/codefun/80992404de789827f849f53777c64863.png',
                value: '3.85%起',
                description: '利率低',
            },
            {
                id: 3,
                icon: '/static/images/codefun/c67aaf6f01b1cbde47843318ac8be555.png',
                value: '最长3年',
                description: '期限长',
            },
        ],

        // 申请条件
        applicationConditions: [
            { id: 1, text: '年龄18-65周岁，具有完全民事行为能力' },
            { id: 2, text: '具有本地户籍或有效居住证明' },
            { id: 3, text: '从事农业生产经营或农产品加工活动' },
            { id: 4, text: '信用记录良好，无不良征信记录' },
        ],

        // 办理流程
        procedures: [
            { id: 1, step: '1', title: '提交申请' },
            { id: 2, step: '2', title: '资料审核' },
            { id: 3, step: '3', title: '签约授信' },
            { id: 4, step: '4', title: '放款到账' },
        ],

        // 申请案例统计
        caseStatistics: [
            { id: 1, value: '576人', description: '本县已申请' },
            { id: 2, value: '3天', description: '平均放款' },
            { id: 3, value: '98%', description: '满意度' },
        ],

        // 申请案例
        caseExample: {
            name: '李**',
            certification: '农户认证',
            description: '种植大户，申请20万元贷款用于扩大生产模，3天放款，节省利息8000元/年',
            date: '2025.09.10',
        },
    })

    // 按钮点击事件处理
    function handleButtonClick(button: Button) {
        // 将所有按钮设为非激活状态
        pageData.buttons.forEach((btn) => {
            btn.active = false
        })

        // 将当前点击的按钮设为激活状态
        button.active = true
    }

    const policyInfoTitle = computed(() => {
        return `${pageData.buttons.filter((btn) => btn.active)?.[0]?.name || '惠农贷款'}政策`
    })
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-mt-14 codefun-flex-col group_2">
            <view class="codefun-flex-row group_3 gap-2 mr-3">
                <view
                    v-for="button in pageData.buttons"
                    :key="button.id"
                    class="codefun-flex-col codefun-justify-start codefun-items-center"
                    :class="button.active ? 'text-wrapper' : 'text-wrapper_2'"
                    @click="handleButtonClick(button)"
                >
                    <text :class="button.active ? 'font_2 text_2' : 'font_3'">{{ button.name }}</text>
                </view>
            </view>
            <view class="mt-28rpx codefun-flex-col section_2">
                <text class="codefun-self-start font text_6">{{ policyInfoTitle }}</text>
                <text class="codefun-self-start font_2 text_7">{{ pageData.policyInfo.description }}</text>
                <view class="codefun-flex-row equal-division">
                    <view
                        v-for="feature in pageData.policyFeatures"
                        :key="feature.id"
                        class="codefun-flex-col codefun-items-center section_3 equal-division-item"
                    >
                        <image class="image_6" :src="feature.icon" />
                        <text class="font_4 mt-11">{{ feature.value }}</text>
                        <text class="font_5 mt-11">{{ feature.description }}</text>
                    </view>
                </view>
                <text class="codefun-self-start font text_8">申请条件</text>
                <view class="codefun-flex-col codefun-self-stretch section_4 gap-2">
                    <view
                        v-for="condition in pageData.applicationConditions"
                        :key="condition.id"
                        class="codefun-flex-row codefun-items-center"
                    >
                        <view class="section_5" />
                        <text class="font_2 ml-9">{{ condition.text }}</text>
                    </view>
                </view>
                <text class="codefun-self-start font text_13">办理流程</text>
                <view class="codefun-flex-col codefun-self-stretch section_6">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center group_4">
                        <view
                            v-for="procedure in pageData.procedures"
                            :key="procedure.id"
                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3"
                        >
                            <text class="font_7">{{ procedure.step }}</text>
                        </view>
                    </view>
                    <view class="codefun-flex-row codefun-justify-between mt-9">
                        <text v-for="procedure in pageData.procedures" :key="procedure.id" class="font_8">
                            {{ procedure.title }}
                        </text>
                    </view>
                </view>
                <text class="codefun-self-start font text_22">申请案例</text>
                <view class="codefun-flex-row equal-division_2">
                    <view
                        v-for="statistic in pageData.caseStatistics"
                        :key="statistic.id"
                        class="codefun-flex-col codefun-items-center section_8 equal-division-item_2"
                    >
                        <text class="font_9">{{ statistic.value }}</text>
                        <text class="font_5 text_23 mt-11">{{ statistic.description }}</text>
                    </view>
                </view>
                <view class="codefun-flex-col codefun-self-stretch section_9">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch">
                        <view class="codefun-flex-row codefun-items-center">
                            <image
                                class="codefun-shrink-0 image_7"
                                src="/static/images/codefun/a3188845d5d70f8bff3e95dcca8e2ff3.png"
                            />
                            <text class="font_2 text_24 ml-9">{{ pageData.caseExample.name }}</text>
                        </view>
                        <view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4">
                            <text class="font_5 text_25">{{ pageData.caseExample.certification }}</text>
                        </view>
                    </view>
                    <text class="codefun-mt-10 codefun-self-stretch font_2 text_26">
                        {{ pageData.caseExample.description }}
                    </text>
                    <text class="codefun-mt-10 codefun-self-start font_5 text_27">{{ pageData.caseExample.date }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
    .ml-5 {
        margin-left: 10rpx;
    }
    .mt-23 {
        margin-top: 46rpx;
    }
    .mt-15 {
        margin-top: 30rpx;
    }
    .mt-9 {
        margin-top: 18rpx;
    }
    .ml-11 {
        margin-left: 22rpx;
    }
    .mt-11 {
        margin-top: 22rpx;
    }
    .ml-9 {
        margin-left: 18rpx;
    }
    .page {
        padding-bottom: 28rpx;
        background-color: #e6f5e8;
        mix-blend-mode: NOTTHROUGH;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
        .section {
            padding: 26rpx 28rpx 32rpx 36rpx;
            background-color: #5db66f;
            mix-blend-mode: NOTTHROUGH;
            .image {
                border-radius: 64rpx;
                width: 108rpx;
                height: 42rpx;
            }
            .image_2 {
                mix-blend-mode: NOTTHROUGH;
                width: 34rpx;
                height: 22rpx;
            }
            .image_3 {
                mix-blend-mode: NOTTHROUGH;
                width: 30rpx;
                height: 22rpx;
            }
            .image_4 {
                width: 48rpx;
                height: 22rpx;
            }
            .group {
                padding: 0 6rpx;
                .image_5 {
                    mix-blend-mode: NOTTHROUGH;
                    width: 14rpx;
                    height: 26rpx;
                }
                .pos {
                    position: absolute;
                    left: 6rpx;
                    top: 50%;
                    transform: translateY(-50%);
                }
                .text {
                    color: #ffffffe6;
                    line-height: 29.8rpx;
                }
            }
        }
        .group_2 {
            padding-left: 28rpx;
            .group_3 {
                overflow-x: auto;

                .text-wrapper {
                    padding: 24rpx;
                    background-color: #5db66f;
                    border-radius: 19998rpx;
                    mix-blend-mode: NOTTHROUGH;
                    height: 72rpx;
                    .text_2 {
                        color: #ffffff;
                        line-height: 25.92rpx;
                    }
                }
                .text-wrapper_2 {
                    padding: 24rpx;
                    background-color: #ffffff;
                    border-radius: 19998rpx;
                    mix-blend-mode: NOTTHROUGH;
                    height: 72rpx;
                    .font_3 {
                        font-size: 28rpx;
                        font-family: DingTalk Sans;
                        line-height: 27.42rpx;
                        color: #1f2937;
                    }
                    .text_3 {
                        line-height: 25.92rpx;
                    }
                    .text_4 {
                        line-height: 26.02rpx;
                    }
                    .text_5 {
                        line-height: 26.18rpx;
                    }
                }
                .view {
                    margin-right: 20rpx;
                }
            }
            .section_2 {
                margin-right: 28rpx;
                padding: 24rpx 24rpx;
                background-color: #ffffff;
                border-radius: 17.54rpx;
                mix-blend-mode: NOTTHROUGH;
                .text_6 {
                    line-height: 29.96rpx;
                }
                .text_7 {
                    margin-top: 32rpx;
                    line-height: 26.54rpx;
                }
                .equal-division {
                    align-self: stretch;
                    margin-top: 20rpx;
                    .section_3 {
                        flex: 1 1 200.54rpx;
                        .image_6 {
                            width: 48rpx;
                            height: 48rpx;
                        }
                        .font_4 {
                            font-size: 32rpx;
                            font-family: DingTalk Sans;
                            line-height: 27.42rpx;
                            color: #5db66f;
                        }
                    }
                    .equal-division-item {
                        padding: 16rpx 0;
                        background-color: #f9fafb;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        backdrop-filter: blur(4rpx);
                        height: 178rpx;
                        border-left: solid 2rpx #ffffff;
                        border-right: solid 2rpx #ffffff;
                        border-top: solid 2rpx #ffffff;
                        border-bottom: solid 2rpx #ffffff;
                    }
                }
                .text_8 {
                    margin-top: 40rpx;
                    line-height: 29.76rpx;
                }
                .section_4 {
                    margin-top: 24rpx;
                    padding: 24rpx 16rpx;
                    background-color: #f9fafb;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                    backdrop-filter: blur(4rpx);
                    border-left: solid 2rpx #ffffff;
                    border-right: solid 2rpx #ffffff;
                    border-top: solid 2rpx #ffffff;
                    border-bottom: solid 2rpx #ffffff;
                    .section_5 {
                        background-color: #5db66f;
                        border-radius: 19998rpx;
                        width: 16rpx;
                        height: 16rpx;
                    }
                    .text_9 {
                        line-height: 26.62rpx;
                    }
                    .text_10 {
                        line-height: 25.98rpx;
                    }
                    .text_11 {
                        line-height: 25.9rpx;
                    }
                    .text_12 {
                        line-height: 26.54rpx;
                    }
                }
                .text_13 {
                    margin-top: 40rpx;
                }
                .section_6 {
                    margin-top: 24rpx;
                    padding: 24rpx 32rpx 24rpx 40rpx;
                    background-color: #f9fafb;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                    backdrop-filter: blur(4rpx);
                    border-left: solid 2rpx #ffffff;
                    border-right: solid 2rpx #ffffff;
                    border-top: solid 2rpx #ffffff;
                    border-bottom: solid 2rpx #ffffff;
                    .group_4 {
                        padding: 0 16rpx;
                        .text-wrapper_3 {
                            padding: 20rpx 0;
                            background-color: #5db66f;
                            border-radius: 19998rpx;
                            width: 60rpx;
                            height: 60rpx;
                            .font_7 {
                                font-size: 28rpx;
                                font-family: DingTalk Sans;
                                line-height: 21.96rpx;
                                color: #ffffff;
                            }
                            .text_14 {
                                line-height: 20.64rpx;
                            }
                            .text_15 {
                                line-height: 21rpx;
                            }
                            .text_16 {
                                line-height: 21.4rpx;
                            }
                            .text_17 {
                                line-height: 20.64rpx;
                            }
                        }
                        .section_7 {
                            background-color: #5db66f;
                            width: 40rpx;
                            height: 1.74rpx;
                        }
                        .view_2 {
                            margin-right: 8rpx;
                        }
                    }
                    .font_8 {
                        font-size: 24rpx;
                        font-family: DingTalk Sans;
                        line-height: 21.96rpx;
                        color: #666666;
                    }
                    .text_18 {
                        line-height: 22.28rpx;
                    }
                    .text_19 {
                        line-height: 22.2rpx;
                    }
                    .text_20 {
                        line-height: 22.18rpx;
                    }
                    .text_21 {
                        line-height: 22.18rpx;
                    }
                }
                .text_22 {
                    margin-top: 40rpx;
                    line-height: 29.92rpx;
                }
                .equal-division_2 {
                    align-self: stretch;
                    margin-top: 32rpx;
                    .section_8 {
                        flex: 1 1 200.36rpx;
                        .font_9 {
                            font-size: 32rpx;
                            font-family: DingTalk Sans;
                            line-height: 24.44rpx;
                            color: #5db66f;
                        }
                        .text_23 {
                            line-height: 22.08rpx;
                        }
                    }
                    .equal-division-item_2 {
                        padding: 28rpx 0 16rpx;
                        background-color: #f9fafb;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        backdrop-filter: blur(4rpx);
                        height: 120rpx;
                        border-left: solid 2rpx #ffffff;
                        border-right: solid 2rpx #ffffff;
                        border-top: solid 2rpx #ffffff;
                        border-bottom: solid 2rpx #ffffff;
                    }
                }
                .font_5 {
                    font-size: 24rpx;
                    font-family: DingTalk Sans;
                    line-height: 21.96rpx;
                    color: #999999;
                }
                .font_6 {
                    font-size: 24rpx;
                    font-family: HarmonyOSSansSC;
                    line-height: 21.96rpx;
                    color: #999999;
                }
                .section_9 {
                    margin-top: 16rpx;
                    padding: 24rpx 24rpx 28rpx;
                    background-color: #f9fafb;
                    border-radius: 16rpx;
                    .image_7 {
                        width: 64rpx;
                        height: 64rpx;
                    }
                    .text_24 {
                        color: #5db66f;
                        line-height: 25.68rpx;
                    }
                    .text-wrapper_4 {
                        padding: 8rpx 0;
                        background-color: #5db66f33;
                        border-radius: 19998rpx;
                        width: 128rpx;
                        height: 40rpx;
                        .text_25 {
                            color: #5db66f;
                            line-height: 22.34rpx;
                        }
                    }
                    .text_26 {
                        line-height: 40rpx;
                        text-align: justify;
                    }
                    .text_27 {
                        line-height: 18.22rpx;
                    }
                }
            }
            .font_2 {
                font-size: 28rpx;
                font-family: DingTalk Sans;
                line-height: 27.42rpx;
                color: #666666;
            }
        }
        .font {
            font-size: 32rpx;
            font-family: DingTalk Sans;
            line-height: 29.88rpx;
            color: #333333;
        }
    }
</style>
