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

    onPullDownRefresh(() => {
        resetData()
        getList(pageData.params)
    })

    onShow(() => {
        resetData()
        getList(pageData.params)
    })

    onNavigationBarButtonTap(() => {
        Navigate.to('/pages/kexinnongzi/shenqingruzhu')
    })
    const pageData = reactive({
        params: {
            pageNo: 1,
            pageSize: 10,
            bizCategory: 2,
            reviewStatus: 1,
        }, // 分页参数
        hasMore: true, // 是否还有更多数据
        loading: false, // 是否正在加载
        dataList: [],
    })

    async function getList(params) {
        if (pageData.loading) 
return
        pageData.loading = true
        await NongzhiAPI.getEnterpriseList(params).then((res) => {
            if (res.records.length > 0) {
                const { records } = res
                if (pageData.params.pageNo === 1) {
                    pageData.dataList = records
                } else {
                    pageData.dataList = [...pageData.dataList, ...records]
                }
                pageData.hasMore = records.length === pageData.params.pageSize
                pageData.params.pageNo++
            } else {
                pageData.hasMore = false
            }
        })
        pageData.loading = false
    }

    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 = true
        pageData.loading = false
    }
</script>

<template>
    <view class="w-full h-95vh bg-#E6F5E8 yr_page_view">
        <!-- 列表 -->
        <scroll-view
            class="w-full h-full"
            style="font-family: '思源黑体'; font-weight: 400"
            scroll-y
            @scrolltolower="getList(pageData.params)"
            :show-scrollbar="false"
        >
            <view class="top_img">
                <image class="agr_sup_img" src="/static/images/comm/agr_sup_img.png" />
            </view>

            <view class="page_content">
                <view class="item_list" v-for="item in pageData.dataList" :key="item.id">
                    <view class="item_left">
                        <image class="enterprise_logo" mode="aspectFit" :src="item.enterpriseLogoUrl" />
                    </view>
                    <view class="item_right">
                        <view class="item_name ellipsis">{{ item.enterpriseName }}</view>
                        <view class="item_description ellipsis">{{ item.businessScope }}</view>
                        <view class="item_details">
                            <view class="detail_btn" @click="toDetail(item)">查看详情</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 加载状态 -->
            <view class="loading-status">
                <text v-if="pageData.loading">加载中...</text>
                <text v-else-if="!pageData.hasMore">没有更多数据了</text>
                <text v-else>上拉加载更多</text>
            </view>
        </scroll-view>
    </view>
</template>

<style lang="less" scoped>
    .yr_page_view {
        padding: 28rpx;
        .top_img,
        .agr_sup_img {
            height: 280rpx;
            width: 690rpx;
        }
        .top_img {
            margin-bottom: 24rpx;
        }
        .page_content {
            border-radius: 16rpx;
            background: #ffffff;
        }
        .ellipsis {
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .item_list {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            padding-left: 24rpx;
            padding-right: 30rpx;
            padding-bottom: 24rpx;
            padding-top: 24rpx;
            border-bottom: 2rpx solid #eeeeee;
            .item_left,
            .enterprise_logo {
                width: 192rpx;
                max-height: 160rpx;
            }
            .item_right {
                width: 436rpx;
                .item_name {
                    font-size: 32rpx;
                    font-weight: 500;
                    color: #333333;
                }
                .item_description {
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #999999;
                    margin-top: 16rpx;
                    margin-bottom: 12rpx;
                }
                .item_details {
                    display: flex;
                    justify-content: flex-end;
                }
                .detail_btn {
                    border-radius: 100rpx;
                    background: #5db66f;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 20rpx;
                    width: 136rpx;
                    height: 48rpx;
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #ffffff;
                }
            }
        }
        .item_list:last-child {
            border-bottom: none;
        }
    }

    .loading-status {
        text-align: center;
        padding: 20rpx;
        color: #999;
        font-size: 28rpx;
    }
    .ellipsis-multiline {
        display: -webkit-box; /* 必须 */
        -webkit-box-orient: vertical; /* 垂直排列 */
        -webkit-line-clamp: 2; /* 限制显示3行 */
        overflow: hidden; /* 隐藏超出内容 */
        text-overflow: ellipsis; /* 可选，部分浏览器不生效 */
    }
</style>
