<template>
	<view class="pageBox">
		<view class="topBox flex5" :class="toTop ? 'on' : ''">
			<view class="back flex3" @click="toBack()"><up-icon name="arrow-left" size="23" color="#000" /></view>
			<view class="tit">检测专区</view>
		</view>
			
		<view class="banner">
			<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/10/29/DtpdilgC7sooWpN2m8NziSWQdJRHAANQRPICmiak.png" mode="widthFix"></image>
		</view>
		
		<view class="tabsBox">
			<up-tabs
				:list="topList"
				:lineColor="Color"
				:activeStyle="{ color: Color }"
				@click="changeTabs">
			</up-tabs>
		</view>
		
		<view class="checkBox">
			<view class="item" v-for="(item, index) in checkList" :key="item.id">
				<view class="row" @click="toPage('/pages/groups/index?id=' + item.id)">
					<view class="face_img">
						<image :src="item.face_img" mode="aspectFill" class="img"></image>
						<view class="out flex3" v-if="item.sold_status === 2">
							<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/01/16/Cr6cRRhhqYNhScigxIyumyV9hXXMI3vKvsE1jgt0.png" class="out_img" mode="widthFix"></image>
						</view>
						<view class="out flex3" v-else-if="item.sold_status === 0">
							<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/08/21/QBhUheeYWSJ3OGM27fkAufJAlFSA8GBhWjpY5oNy.png" class="out_img" mode="widthFix"></image>
						</view>
						<view class="mxjc">
							<image v-if="check_logo" :src="check_logo" mode="heightFix"></image>
							<view class="wb ellipsis" v-if="item.reports">{{item.reports[0].title}}</view>
						</view>
					</view>
					<view class="padd">
						<view class="tit ellipsis2">{{item.title}}</view>
						<view class="desc ellipsis2" v-if="item.reports">
							<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/10/13/ZZ5EksjIdUpSVFkSdDK7vF8z6vlOyBV1goZC0Nkm.png" mode="aspectFill"></image>
							<text>&nbsp;{{item.reports[0].title}}</text>
						</view>
						<view class="morez flex5" v-if="item.show_distribution_profit">
							<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/10/23/WtUi4PxqUH4JDApUm78fM2I5XCDRo2BsNVoxPaA5.png" mode="aspectFill"></image>
							<view class="text">¥{{item.distribution_profit}}</view>
						</view>
						<view class="price">
							<text v-if="parseFloat(item.min_price) == parseFloat(item.max_price)">￥{{item.min_price}}</text>
							<text v-else>￥{{item.min_price * 1}}~{{item.max_price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="!checkList.length && !loading">
			<up-empty icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/data.png" text="暂无数据" />
		</view>
		<view class="bottom" v-if="page >= last_page && checkList.length && !loading">— 没有更多了 —</view>
	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	import { Style } from '@/utils/list.js'
	
	export default {
		setup() {
			const data = reactive({
				actionId: 0,
				customVal: {
					height: 32,
					top: 24
				},
				topList: [],
				bgColor: uni.getStorageSync('bgColor'),
				Color: uni.getStorageSync('theme_color'),
				priceColor: '',
				checkList: [],
				page: 1,
				last_page: 0,
				pageSize: 20,
				loading: false,
				toTop: false,
				check_logo: uni.getStorageSync('check_logo'),
			})
			
			async function getShopInfo() {
				await get(`/api/v1/shop`).then((res) => {
					data.check_logo = res.data.extendInfo ? res.data.extendInfo.check_report_logo : ''
				})
			}
			
			const getClassifyList = async() => {
				await get('/api/v1/checkReportGroup').then(async(res) => {
					data.topList = res.data
					data.topList.unshift({
						id: 0, name: '好物推荐'
					})
					data.actionId = 0
				})
			}
			
			function getCheckReports(val) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				data.loading = true
				let params = {
					page: data.page,
					pageSize: 20
				}
				if(data.actionId) {
					params.shop_group_id = data.actionId
				}
				get('/api/v1/home/checkReports', params).then((res) => {
					data.last_page = res.meta.last_page
					data.checkList = val == 1 ? data.checkList.concat(res.data) : res.data
					uni.hideLoading()
					data.loading = false
				}).catch(() => {
					data.loading = false
				})
			}
			
			const toBack = () => {
				let length = getCurrentPages().length
				if(length > 1) {
					uni.navigateBack({ delta: 1 })
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			}
			
			const toPage = (url) => {
				uni.navigateTo({ url: url })
			}
			
			const changeTabs = (event) => {
				if (event.id == data.actionId) {
					return
				}
				data.actionId = event.id
				data.page = 1
				getCheckReports(0)
			}
			
			return {
				...toRefs(data),
				getClassifyList,
				getShopInfo,
				getCheckReports,
				toBack,
				toPage,
				changeTabs
			}
		},
		async onLoad(options) {
			this.getShopInfo()
			await this.getClassifyList()
			this.getCheckReports(0)
			this.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
			this.Color = uni.getStorageSync('theme_color')
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page ++
				this.getCheckReports(1)
			}
		},
		onPageScroll(e) {
			if (e.scrollTop < 100) {
				this.toTop = false
			} else {
				this.toTop = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pageBox{
		width: 100%;
		min-height: 100vh;
		position: relative;
		.tabsBox{
			position: sticky;
			width: 100%;
			background: #fff;
			top: 80rpx;
			z-index: 10;
		}
		.topBox{
			position: fixed;
			width: 100%;
			padding: 0 24rpx;
			height: 80rpx;
			top: 0;
			z-index: 11;
			box-sizing: border-box;
			font-size: 28rpx;
			&.on{
				background-color: #fff;
				.back{
					background-color: #fff;
				}
				.tit{
					opacity: 1;
				}
			}
			.back{
				width: 30px;
				height: 30px;
				border-radius: 50%;
			}
			.tit{
				flex: 1;
				text-align: center;
				padding-right: 30px;
				opacity: 0;
			}
		}
		.banner{
			image{
				width: 100%;
				display: block;
			}
		}
		.checkBox{
			display: flex;
			padding: 24rpx 12rpx;
			flex-wrap: wrap;
			.item{
				width: 50%;
				margin-bottom: 24rpx;
				padding: 0 12rpx;
				box-sizing: border-box;
			}
			.row{
				background-color: #fff;
				border-radius: 10rpx;
				width: 100%;
				font-size: 28rpx;
				.face_img{
					position: relative;
					.img{
						width: 100%;
						height: 320rpx;
						vertical-align: bottom;
						border-radius: 10rpx 10rpx 0 0;
					}
					.out{
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						.out_img{
							width: 100rpx;
							height: 100rpx;
						}
					}
				}
				.padd{
					padding: 14rpx 20rpx 24rpx;
					box-sizing: border-box;
				}
				.desc{
					color: #C89C5A;
					margin-bottom: 10rpx;
					font-size: 24rpx;
					line-height: 32rpx;
					height: 64rpx;
					image{
						width: 13px;
						height: 13px;
					}
				}
				.tit{
					margin-bottom: 10rpx;
					line-height: 42rpx;
					height: 84rpx;
				}
				.price{
					font-size: 30rpx;
					color: v-bind('priceColor');
				}
			}
		}
	}
	.bottom{
		text-align: center;
		font-size: 24rpx;
		color: #888;
		margin: auto;
		padding: 10rpx 0 50rpx;
		width: 100%;
	}
	uni-page-body{
		overflow: initial;
	}
</style>
