<script setup lang="ts">
    import { onPullDownRefresh, onShow, onReachBottom, onNavigationBarButtonTap } from '@dcloudio/uni-app'
    import { reactive, toRefs } from 'vue'
    import Navigate from '@/utils/page/navigate'
    import * as NongzhiAPI from '@/api/model/nongzhi'

    onPullDownRefresh(() => {
        resetData()
        fetchList()
    })

    onShow(() => {
        resetData()
        fetchList()
    })

    const pageData = reactive({
        params: {
            pageNo: 1,
            pageSize: 10,
            bizCategory: 2,
            reviewStatus: 1,
        },
        hasMore: 'more',
        loading: false,
        dataList: [],
        total: 0
    })

    const { dataList, loading, hasMore } = toRefs(pageData)

    async function fetchList() {
        if (pageData.loading || pageData.hasMore === 'noMore') return
        pageData.loading = true
        
        try {
            const res = await NongzhiAPI.getEnterpriseList(pageData.params)
            const { records, total } = res
            
            if (pageData.params.pageNo === 1) {
                pageData.dataList = records
            } else {
                pageData.dataList = [...pageData.dataList, ...records]
            }
            
            pageData.total = total
            if (pageData.dataList.length >= total) {
                pageData.hasMore = 'noMore'
            } else {
                pageData.hasMore = 'more'
                pageData.params.pageNo++
            }
        } finally {
            pageData.loading = false
            uni.stopPullDownRefresh()
        }
    }

    function toDetail(item) {
        const param = encodeURIComponent(JSON.stringify({ id: item.id, name: item.enterpriseName }))
        Navigate.to(`/pages/kexinnongzi/detail?param=${param}`)
    }

    function resetData() {
        pageData.params.pageNo = 1
        pageData.hasMore = 'more'
        pageData.loading = false
        pageData.dataList = []
    }

    onReachBottom(() => {
        fetchList()
    })
</script>

<template>
    <view class="page">
        <!-- 顶部装饰图 -->
        <view class="banner-section">
            <image class="banner-bg" src="/static/images/comm/agr_sup_img.png" mode="aspectFill" />
            <view class="banner-mask"></view>
            <view class="banner-content">
                <text class="banner-title">可信农资服务</text>
                <text class="banner-desc">源头直供 · 质量保证 · 诚信经营</text>
            </view>
        </view>

        <view class="list-container">
            <view v-if="!dataList.length && !loading" class="empty-box">
                <fui-empty src="/static/images/no-data.png" title="暂无入驻农资商" />
            </view>

            <view
                class="enterprise-card"
                v-for="item in dataList"
                :key="item.id"
                @click="toDetail(item)"
            >
                <view class="card-top">
                    <image class="logo" mode="aspectFill" :src="item.enterpriseLogoUrl || '/static/images/nongjifuwu/default-corp.png'" lazy-load />
                    <view class="info">
                        <view class="name-row">
                            <text class="name">{{ item.enterpriseName }}</text>
                            <view class="auth-tag">
                                <fui-icon name="checkbox-fill" :size="24" color="#5db66f"></fui-icon>
                                <text>已认证</text>
                            </view>
                        </view>
                        <text class="scope">主营：{{ item.businessScope || '优质农资供应' }}</text>
                        <view class="tags-row">
                            <text class="tag">厂家直销</text>
                            <text class="tag blue">质检合格</text>
                        </view>
                    </view>
                </view>
                <view class="card-bottom">
                    <view class="location">
                        <fui-icon name="location" :size="24" color="#999"></fui-icon>
                        <text class="addr-text">{{ item.provinceName }}{{ item.cityName }}{{ item.districtName }}</text>
                    </view>
                    <view class="enter-btn">进入店铺</view>
                </view>
            </view>

            <fui-loadmore v-if="loading" />
            <view v-if="hasMore === 'noMore' && dataList.length > 0" class="no-more">
                - 只有这么多了 -
            </view>
        </view>

        <!-- 入驻悬浮按钮 (增加水波纹动效) -->
        <view class="fab-container" @click="Navigate.to('/pages/kexinnongzi/shenqingruzhu')">
            <view class="ripple"></view>
            <view class="ripple ripple-2"></view>
            <view class="fab-entry">
                <fui-icon name="plus" :size="48" color="#fff"></fui-icon>
                <text>商家入驻</text>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
    .page {
        min-height: 100vh;
        background-color: #f7f8fa;
    }

    .banner-section {
        width: 750rpx;
        height: 320rpx;
        position: relative;
        .banner-bg {
            width: 100%;
            height: 100%;
        }
        .banner-mask {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
        }
        .banner-content {
            position: absolute;
            left: 40rpx;
            bottom: 60rpx;
            .banner-title {
                font-size: 44rpx;
                color: #fff;
                font-weight: bold;
                display: block;
            }
            .banner-desc {
                font-size: 24rpx;
                color: rgba(255,255,255,0.8);
                margin-top: 10rpx;
                display: block;
            }
        }
    }

    .list-container {
        padding: 20rpx 30rpx;
        margin-top: -30rpx;
        position: relative;
        z-index: 10;
    }

    .enterprise-card {
        background-color: #fff;
        border-radius: 20rpx;
        padding: 30rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);

        .card-top {
            display: flex;
            .logo {
                width: 140rpx;
                height: 140rpx;
                border-radius: 12rpx;
                background-color: #f8f8f8;
                flex-shrink: 0;
            }
            .info {
                flex: 1;
                margin-left: 24rpx;
                display: flex;
                flex-direction: column;
                .name-row {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .name {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: #333;
                        max-width: 300rpx;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .auth-tag {
                        display: flex;
                        align-items: center;
                        background-color: #e6f5e8;
                        padding: 4rpx 12rpx;
                        border-radius: 20rpx;
                        text {
                            font-size: 20rpx;
                            color: #5db66f;
                            margin-left: 4rpx;
                            font-weight: bold;
                        }
                    }
                }
                .scope {
                    font-size: 24rpx;
                    color: #999;
                    margin-top: 12rpx;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                }
                .tags-row {
                    display: flex;
                    margin-top: 16rpx;
                    .tag {
                        font-size: 20rpx;
                        padding: 2rpx 12rpx;
                        background-color: #f5f5f5;
                        color: #666;
                        border-radius: 4rpx;
                        margin-right: 12rpx;
                        &.blue {
                            background-color: #e6f7ff;
                            color: #1890ff;
                        }
                    }
                }
            }
        }

        .card-bottom {
            margin-top: 24rpx;
            padding-top: 24rpx;
            border-top: 1rpx solid #f5f5f5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .location {
                display: flex;
                align-items: center;
                .addr-text {
                    font-size: 22rpx;
                    color: #999;
                    margin-left: 6rpx;
                    max-width: 350rpx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            .enter-btn {
                padding: 10rpx 30rpx;
                background-color: #5db66f;
                color: #fff;
                font-size: 24rpx;
                border-radius: 30rpx;
                font-weight: bold;
            }
        }
    }

    .fab-container {
        position: fixed;
        right: 30rpx;
        bottom: 150rpx;
        width: 110rpx;
        height: 110rpx;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;

        .ripple {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #5db66f;
            border-radius: 50%;
            opacity: 0.4;
            animation: ripple 2s infinite ease-out;
        }

        .ripple-2 {
            animation-delay: 1s;
        }

        .fab-entry {
            position: relative;
            width: 110rpx;
            height: 110rpx;
            background: linear-gradient(135deg, #a5d63f 0%, #2e8b57 100%);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8rpx 30rpx rgba(46, 139, 87, 0.5);
            animation: breathe 2.5s infinite ease-in-out;
            z-index: 2;
            
            text {
                font-size: 18rpx;
                color: #fff;
                margin-top: -4rpx;
                font-weight: bold;
            }
        }
    }

    @keyframes ripple {
        0% {
            transform: scale(1);
            opacity: 0.4;
        }
        100% {
            transform: scale(1.8);
            opacity: 0;
        }
    }

    @keyframes breathe {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 8rpx 30rpx rgba(46, 139, 87, 0.5);
        }
        50% {
            transform: scale(1.08);
            box-shadow: 0 12rpx 45rpx rgba(46, 139, 87, 0.7);
        }
    }

    .no-more {
        text-align: center;
        font-size: 24rpx;
        color: #ccc;
        padding: 40rpx 0;
    }

    .empty-box {
        padding-top: 100rpx;
    }
</style>
