<script setup lang="ts">
	import { onLoad, onPullDownRefresh, onShow } from '@dcloudio/uni-app'
	import Navigate from '@/utils/page/navigate'
    import { reactive, ref } from 'vue'
	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
        }, // 分页参数
        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) {
		let 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>
