<!-- src/pages/zhunongjinrong/zhunongjinrong.vue -->
<script setup lang="ts">
    import { reactive, ref } from 'vue'

    // 定义银行类型
    type BankKey = 'nongye' | 'youzheng' | 'nongshang'

    // 定义银行信息接口
    interface BankFeature {
        amount: string
        rate: string
        term: string
    }

    interface ProcessStep {
        number: string
        title: string
        desc?: string
    }

    interface BankCase {
        applicants: string
        duration: string
        satisfaction: string
    }

    interface Review {
        avatar: string
        name: string
        content: string
        date: string
    }

    interface BankInfo {
        title: string
        description: string
        features: BankFeature
        conditions: string[]
        processType: 'simple' | 'detailed'
        processSteps?: ProcessStep[]
        cases: BankCase
        review: Review
    }

    // 当前选中的银行
    const currentBank = ref<BankKey>('nongye')

    // 银行信息数据
    const bankInfo = reactive<Record<BankKey, BankInfo>>({
        nongye: {
            title: '惠农e贷',
            description: '面向新型农业经营主体，提供便捷资金支持',
            features: {
                amount: '5-50万',
                rate: '3.85%起',
                term: '最长3年',
            },
            conditions: [
                '年龄18-60周岁，具有完全民事行为能力',
                '本地户籍或连续居住2年以上',
                '从事农业生产经营满1年',
                '征信记录良好，无重大不良记录',
                '在其他金融机构无严重逾期',
                '种植面积：粮食作物50亩以上，经济作物10亩以上',
            ],
            processType: 'simple', // 简单流程
            cases: {
                applicants: '576人',
                duration: '3天',
                satisfaction: '98%',
            },
            review: {
                avatar: '/static/images/codefun/a3188845d5d70f8bff3e95dcca8e2ff3.png',
                name: '李**',
                content: '种植大户，申请20万元贷款用于扩大生产模，3天放款，节省利息8000元/年',
                date: '2025.09.10',
            },
        },
        youzheng: {
            title: '乡村振兴贷',
            description: '面向多村振兴重点项目、农村创业青年',
            features: {
                amount: '10-100万',
                rate: '3.65%起',
                term: '1-5年',
            },
            conditions: [
                '年龄18-65周岁，具有完全民事行为能力',
                '本地户籍或连续居住2年以上',
                '从事农业生产经营满1年',
                '征信记录良好，无重大不良记录',
                '在其他金融机构无严重逾期',
                '养殖规模:生猪年出栏100头以上，禽类存栏2000头以上',
            ],
            processType: 'detailed', // 详细流程
            processSteps: [
                { number: '1', title: '提交申请', desc: '线下' },
                { number: '2', title: '资料审核', desc: '1个工作日' },
                { number: '3', title: '现场调查', desc: '如果需要，2个工作日' },
                { number: '4', title: '授信审批', desc: '1个工作日' },
                { number: '5', title: '合同签订', desc: '线上电子签约' },
                { number: '5', title: '贷款发放', desc: '实时到账' },
            ],
            cases: {
                applicants: '230人',
                duration: '2天',
                satisfaction: '97%',
            },
            review: {
                avatar: '/static/images/codefun/c463efe6788131c40e126c349b4b9ead.png',
                name: '周**',
                content: '青年回乡创业，申请40万元贷款用于农场初步建设，3天放款，节省利息7000元/年',
                date: '2025.11.10',
            },
        },
        nongshang: {
            title: '农保贷',
            description: '牲畜养殖企业、合作社及个人',
            features: {
                amount: '3-30万',
                rate: '4.2%起',
                term: '6-12月',
            },
            conditions: [
                '年龄18-65周岁，具有完全民事行为能力',
                '本地户籍或连续居住2年以上',
                '从事农业生产经营满2年',
                '征信记录良好，无重大不良记录',
                '在其他金融机构无严重逾期',
                '种植面积：粮食作物30亩以上，经济作物20亩以上',
                '养殖规模:生猪年出栏100头以上，禽类存栏2000头以上',
            ],
            processType: 'detailed', // 详细流程
            processSteps: [
                { number: '1', title: '提交申请', desc: '线下' },
                { number: '2', title: '资料审核', desc: '1个工作日' },
                { number: '3', title: '现场调查', desc: '如果需要，2个工作日' },
                { number: '4', title: '授信审批', desc: '1个工作日' },
                { number: '5', title: '合同签订', desc: '线上电子签约' },
                { number: '5', title: '贷款发放', desc: '实时到账' },
            ],
            cases: {
                applicants: '68人',
                duration: '2天',
                satisfaction: '97%',
            },
            review: {
                avatar: '/static/images/codefun/a3188845d5d70f8bff3e95dcca8e2ff3.png',
                name: '张**',
                content: '畜牧产业扩张，申请20万，2天返款，节省利息2000元/年',
                date: '2025.11.12',
            },
        },
    })

    // 切换银行的方法
    function switchBank(bank: BankKey) {
        currentBank.value = bank
    }

    // 立即申请
    function onApplyClick() {
        Message.alert('申请功能暂不可用，敬请期待~', '温馨提示')
    }
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-flex-col group_2">
            <view class="codefun-flex-col group_3">
                <!-- 银行切换选项卡 -->
                <view class="codefun-flex-row">
                    <view
                        class="codefun-flex-row codefun-justify-center codefun-items-center equal-division-item"
                        :class="[currentBank === 'nongye' ? 'section_2' : 'equal-division-item_2']"
                        @click="switchBank('nongye')"
                    >
                        <image
                            class="image_6"
                            :src="`/static/images/codefun/${currentBank === 'nongye' ? 'cdb60fe94eefabfc90b4ecc7b3beb55e' : '889f212ad7834cf60a5db23a349f4784'}.png`"
                        />
                        <text :class="[currentBank === 'nongye' ? 'font_2 text_2 ml-5' : 'font_3 ml-5']">农业银行</text>
                    </view>
                    <view
                        class="codefun-flex-row codefun-justify-center codefun-items-center equal-division-item ml-9"
                        :class="[currentBank === 'youzheng' ? 'section_2' : 'equal-division-item_2']"
                        @click="switchBank('youzheng')"
                    >
                        <image
                            class="image_6"
                            :src="`/static/images/codefun/${currentBank === 'youzheng' ? '68af9c6957d58cd29e32098e0faf14ef' : 'cc9a4466c443c3e0212cdfb9e8b5025c'}.png`"
                        />
                        <text :class="[currentBank === 'youzheng' ? 'font_2 text_2 ml-5' : 'font_3 ml-5']"
                            >邮政银行</text
                        >
                    </view>
                    <view
                        class="codefun-flex-row codefun-justify-center codefun-items-center equal-division-item ml-9"
                        :class="[currentBank === 'nongshang' ? 'section_2' : 'equal-division-item_2']"
                        @click="switchBank('nongshang')"
                    >
                        <image
                            class="image_6"
                            :src="`/static/images/codefun/${currentBank === 'nongshang' ? '4292fcce91a07c9902cf44843022951e' : '1b5cb211666de5a9ecb586aa841a51e5'}.png`"
                        />
                        <text :class="[currentBank === 'nongshang' ? 'font_2 text_2 ml-5' : 'font_3 ml-5']"
                            >农商银行</text
                        >
                    </view>
                </view>

                <!-- 内容区域 -->
                <view class="codefun-mt-14 codefun-flex-col section_3">
                    <!-- 标题和描述 -->
                    <text class="codefun-self-start font">{{ bankInfo[currentBank].title }}</text>
                    <text class="codefun-self-start font_4 text_4">{{ bankInfo[currentBank].description }}</text>

                    <!-- 特点展示 -->
                    <view class="codefun-flex-row equal-division">
                        <view class="codefun-flex-col codefun-items-center section_4 equal-division-item_3">
                            <image class="image_7" src="/static/images/codefun/98dd61b283a4158dac14bd3bc1f8fc41.png" />
                            <text class="font_5 text_5 mt-11">{{ bankInfo[currentBank].features.amount }}</text>
                            <text class="font_6 text_6 mt-11">额度高</text>
                        </view>
                        <view class="codefun-flex-col codefun-items-center section_4 equal-division-item_3 ml-11">
                            <image class="image_7" src="/static/images/codefun/3971dc28a5d847e08378fe0687e87cf4.png" />
                            <text class="codefun-mt-10 font_5 text_5">{{ bankInfo[currentBank].features.rate }}</text>
                            <text class="codefun-mt-10 font_6 text_6">利率低</text>
                        </view>
                        <view class="codefun-flex-col codefun-items-center section_4 equal-division-item_3 ml-11">
                            <image class="image_7" src="/static/images/codefun/68af204c01b1b8cc428452480ee02f51.png" />
                            <text class="codefun-mt-10 font_5 text_5">{{ bankInfo[currentBank].features.term }}</text>
                            <text class="codefun-mt-10 font_7 text_6">期限长</text>
                        </view>
                    </view>

                    <!-- 申请条件 -->
                    <text class="codefun-self-start font text_7">申请条件</text>
                    <view class="codefun-flex-col codefun-self-stretch section_5">
                        <view
                            v-for="(condition, index) in bankInfo[currentBank].conditions"
                            :key="index"
                            class="codefun-flex-row codefun-items-center"
                            :class="[index !== 0 ? 'codefun-mt-14' : '']"
                        >
                            <view class="section_6" />
                            <text class="font_4">{{ condition }}</text>
                        </view>
                    </view>

                    <!-- 办理流程 -->
                    <text class="codefun-self-start font text_12">办理流程</text>
                    <view
                        v-if="bankInfo[currentBank].processType === 'simple'"
                        class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch text-wrapper"
                    >
                        <text class="font_6 text_13">线下咨询，已实际办理流程为准。</text>
                    </view>
                    <view v-else class="codefun-flex-col codefun-self-stretch section_8">
                        <view
                            v-for="(step, index) in bankInfo[currentBank].processSteps"
                            :key="index"
                            class="codefun-flex-col"
                            :class="[index !== 0 ? 'codefun-mt-4' : '']"
                        >
                            <view class="codefun-flex-row codefun-items-center">
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5"
                                >
                                    <text class="font_8">{{ step.number }}</text>
                                </view>
                                <text class="font_9 text_15 ml-11">{{ step.title }}</text>
                            </view>
                            <view v-if="step.desc" class="codefun-flex-row group_5">
                                <view class="codefun-self-center section_9" />
                                <text class="codefun-ml-26 codefun-self-start font_10">{{ step.desc }}</text>
                            </view>
                        </view>
                    </view>

                    <!-- 申请案例 -->
                    <text class="codefun-self-start font text_14">申请案例</text>
                    <view class="codefun-flex-row equal-division_2">
                        <view class="codefun-flex-col codefun-items-center section_7 equal-division-item_4">
                            <text class="font_5 text_15">{{ bankInfo[currentBank].cases.applicants }}</text>
                            <text class="font_6 mt-11">本县已申请</text>
                        </view>
                        <view class="codefun-flex-col codefun-items-center section_7 equal-division-item_4 ml-11">
                            <text class="font_5 text_15">{{ bankInfo[currentBank].cases.duration }}</text>
                            <text class="font_6 mt-11">平均放款</text>
                        </view>
                        <view class="codefun-flex-col codefun-items-center section_7 equal-division-item_4 ml-11">
                            <text class="font_5 text_15">{{ bankInfo[currentBank].cases.satisfaction }}</text>
                            <text class="font_7 mt-11">满意度</text>
                        </view>
                    </view>

                    <!-- 用户评价 -->
                    <view class="codefun-flex-col codefun-self-stretch section_10">
                        <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_8" :src="bankInfo[currentBank].review.avatar" />
                                <text class="font_4 text_16 ml-9">{{ bankInfo[currentBank].review.name }}</text>
                            </view>
                            <view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2">
                                <text class="font_6 text_17">农户认证</text>
                            </view>
                        </view>
                        <text class="codefun-mt-10 codefun-self-stretch font_8 text_18">
                            {{ bankInfo[currentBank].review.content }}
                        </text>
                        <text class="codefun-mt-10 codefun-self-start font_6 text_19">{{
                            bankInfo[currentBank].review.date
                        }}</text>
                    </view>
                </view>
            </view>

            <!-- 立即申请按钮 -->
            <view
                class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3"
                @click="onApplyClick"
            >
                <text class="font_2 text_20">立即申请</text>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
    .mt-23 {
        margin-top: 46rpx;
    }
    .ml-5 {
        margin-left: 10rpx;
    }
    .mt-11 {
        margin-top: 22rpx;
    }
    .ml-11 {
        margin-left: 22rpx;
    }
    .ml-9 {
        margin-left: 18rpx;
    }
    .page {
        padding-bottom: 38rpx;
        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: 0 28rpx 32rpx;
            .group_3 {
                padding: 28rpx 0 40rpx;
                .equal-division-item {
                    flex: 1 1 220rpx;
                    .image_6 {
                        width: 40rpx;
                        height: 40rpx;
                    }
                    .text_2 {
                        line-height: 25.88rpx;
                    }
                    .font_3 {
                        font-size: 28rpx;
                        font-family: SourceHanSansCN;
                        line-height: 25.96rpx;
                        color: #1f2937;
                    }
                    .text_3 {
                        line-height: 25.88rpx;
                    }
                }
                .section_2 {
                    padding: 16rpx 24rpx 16rpx 32rpx;
                    background-color: #5db66f;
                    border-radius: 19998rpx;
                    mix-blend-mode: NOTTHROUGH;
                    height: 72rpx;
                }
                .equal-division-item_2 {
                    padding: 16rpx 24rpx 16rpx 32rpx;
                    background-color: #ffffff;
                    border-radius: 19998rpx;
                    mix-blend-mode: NOTTHROUGH;
                    height: 72rpx;
                }
                .section_3 {
                    padding: 32rpx 24rpx 24rpx;
                    background-color: #ffffff;
                    border-radius: 16.2rpx;
                    mix-blend-mode: NOTTHROUGH;
                    .font_4 {
                        font-size: 28rpx;
                        font-family: SourceHanSansCN;
                        line-height: 25.96rpx;
                        color: #666666;
                    }
                    .text_4 {
                        margin-top: 32rpx;
                        line-height: 26.54rpx;
                    }
                    .equal-division {
                        align-self: stretch;
                        margin-top: 20rpx;
                        .section_4 {
                            flex: 1 1 200.54rpx;
                            .image_7 {
                                width: 48rpx;
                                height: 48rpx;
                            }
                            .text_5 {
                                line-height: 27.42rpx;
                            }
                            .text_6 {
                                line-height: 21.96rpx;
                            }
                        }
                        .equal-division-item_3 {
                            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_7 {
                        margin-top: 40rpx;
                        line-height: 29.76rpx;
                    }
                    .section_5 {
                        overflow: auto;
                        margin-top: 24rpx;
                        padding: 28rpx 16rpx 20rpx;
                        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_6 {
                            background-color: #5db66f;
                            border-radius: 19998rpx;
                            width: 16rpx;
                            height: 16rpx;
                            margin-right: 16rpx;
                        }
                        .text_8 {
                            line-height: 26.62rpx;
                        }
                        .text_9 {
                            line-height: 26.54rpx;
                        }
                        .text_10 {
                            line-height: 26.04rpx;
                        }
                        .text_11 {
                            line-height: 26.04rpx;
                        }
                    }
                    .text_12 {
                        margin-top: 40rpx;
                        line-height: 29.88rpx;
                    }
                    .text-wrapper {
                        margin-top: 24rpx;
                        padding: 28rpx 0;
                        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;
                        .text_13 {
                            margin-left: 24rpx;
                            color: #333333;
                            line-height: 22.9rpx;
                        }
                    }
                    .section_8 {
                        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;
                        .text-wrapper_5 {
                            padding: 20rpx 0;
                            background-color: #5db66f;
                            border-radius: 19998rpx;
                            width: 60rpx;
                            height: 60rpx;
                            .font_8 {
                                font-size: 28rpx;
                                font-family: SourceHanSansCN;
                                line-height: 21.96rpx;
                                color: #ffffff;
                            }
                        }
                        .text_15 {
                            line-height: 22.56rpx;
                        }
                        .group_5 {
                            padding: 0 28rpx;
                            .section_9 {
                                background-color: #5db66f;
                                width: 1.74rpx;
                                height: 32rpx;
                            }
                        }
                        .font_9 {
                            font-size: 24rpx;
                            font-family: SourceHanSansCN;
                            line-height: 21.96rpx;
                            color: #333333;
                        }
                        .font_10 {
                            font-size: 24rpx;
                            font-family: SourceHanSansCN;
                            line-height: 21.96rpx;
                            color: #666666;
                        }
                    }
                    .font_6 {
                        font-size: 24rpx;
                        font-family: SourceHanSansCN;
                        line-height: 22.08rpx;
                        color: #999999;
                    }
                    .text_14 {
                        margin-top: 40rpx;
                    }
                    .equal-division_2 {
                        align-self: stretch;
                        margin-top: 32rpx;
                        .section_7 {
                            flex: 1 1 200.36rpx;
                            .text_15 {
                                line-height: 24.44rpx;
                            }
                        }
                        .equal-division-item_4 {
                            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: 32rpx;
                        font-family: SourceHanSansCN;
                        line-height: 25.96rpx;
                        color: #5db66f;
                    }
                    .font_7 {
                        font-size: 24rpx;
                        font-family: HarmonyOSSansSC;
                        line-height: 22.08rpx;
                        color: #999999;
                    }
                    .section_10 {
                        margin-top: 16rpx;
                        padding: 24rpx 24rpx 28rpx;
                        background-color: #f9fafb;
                        border-radius: 16rpx;
                        .image_8 {
                            width: 64rpx;
                            height: 64rpx;
                        }
                        .text_16 {
                            color: #5db66f;
                            line-height: 25.68rpx;
                        }
                        .text-wrapper_2 {
                            padding: 8rpx 0;
                            background-color: #5db66f33;
                            border-radius: 19998rpx;
                            width: 128rpx;
                            height: 40rpx;
                            .text_17 {
                                color: #5db66f;
                                line-height: 22.34rpx;
                            }
                        }
                        .text_18 {
                            text-align: justify;
                        }
                        .text_19 {
                            line-height: 18.22rpx;
                        }
                    }
                    .font_8 {
                        font-size: 28rpx;
                        font-family: SourceHanSansCN;
                        line-height: 40rpx;
                        color: #666666;
                    }
                }
            }
            .text-wrapper_3 {
                margin: 0 24rpx;
                padding: 24rpx 0;
                background-color: #ff9800;
                border-radius: 198rpx;
                .text_20 {
                    line-height: 25.92rpx;
                }
            }
            .font_2 {
                font-size: 28rpx;
                font-family: SourceHanSansCN;
                line-height: 25.96rpx;
                color: #ffffff;
            }
        }
        .font {
            font-size: 32rpx;
            font-family: SourceHanSansCN;
            line-height: 29.92rpx;
            color: #333333;
        }
    }
</style>
