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

    const model = reactive({
        params: {
            pageNo: 1,
            pageSize: 10,
			enterprise:{
				bizCategory:2,
				province:'湖南省'
			}
        }, // 分页参数
        hasMore: true, // 是否还有更多数据
        loading: false, // 是否正在加载
		dataList:[]
    })

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

                model.hasMore = records.length === model.params.pageSize
                model.params.pageNo++
            } else {
                model.hasMore = false
            }
        })
        model.loading = false
    }


    function toDetail(item) {
        uni.navigateTo({
            url: `/pages/kexinnongzi/detail?id=${item.id}`,
        })
    }

    function resetData() {
        model.params.pageNo = 1
        model.hasMore = true
        model.loading = false
    }

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

    onShow(() => {
        resetData()
        getList(model.params)
    })
</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(model.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 model.dataList" :key="item.id" @click="toDetail(item)">
					<view class="item_left">
						<image class="enterprise_logo" mode="aspectFit" :src="item.businessLicenseUrl" />
					</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">查看详情</view>
						</view>
					</view>
				</view>
				
			</view>
			
            <!-- <view
                v-for="news in newsList"
                :key="news.id"
                class="w-full h-auto flex flex-row justify-around p-2 bg-#fff border-rd-lg mb-2"
                style="min-height: 120rpx"
                @click="toNewsDetail(news)"
            >
                <view class="flex flex-col justify-between" :style="news.posterUrl ? 'width: 68%' : 'width: 100%'">
                    <view class="ellipsis-multiline fontsize_28 color-#333333">{{ news.title }}</view>
                    <view class="flex flex-row justify-between text-25 color-#686868">
                        <text>{{ dayjs(news.publishDate).format('YYYY年MM月DD日') }}</text>
                        <view class="mr-1 flex-center">
                            <image class="mt-0.5 mr-1 w-30 h-26" src="/static/images/news/views.png" />
                            <view class="flex-center text-24 lh-24rpx">{{ news.viewCount }}</view>
                        </view>
                        <view v-show="!news.posterUrl" class="w-4%"></view>
                    </view>
                </view>
                <view v-show="news.posterUrl" class="w-30% h-130">
                    <image class="w-full h-full border-rd" :src="news.posterUrl" />
                </view>
            </view> -->
            <!-- 加载状态 -->
            <view class="loading-status">
                <text v-if="model.loading">加载中...</text>
                <text v-else-if="!model.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>
