<template>
	<view style="padding: 20rpx 30rpx">
		<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
			<view style="display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%">
				<view v-for="(item, index) in dataList" :key="index" style="width: 336rpx; background-color: #fff; border-radius: 8rpx 8rpx;margin-bottom: 30rpx;">
					<image :src="item.coverImageUrl" style="width: 336rpx; height: 368rpx; border-radius: 8rpx 8rpx 0 0" mode="aspectFill"></image>
					<view style="padding: 15rpx 15rpx 0; font-size: 24rpx">{{ item.title }}</view>
					<view style="display: flex; align-items: center; padding: 15rpx; border-radius: 0 0 8rpx 8rpx; font-size: 24rpx">
						<image :src="item.authorUrl" style="width: 48rpx; height: 48rpx; border-radius: 50%; margin-right: 20rpx"></image>
						<view>{{ item.authorName }}</view>
					</view>
				</view>
			</view>

			<!-- 			<custom-waterfalls-flow
				ref="waterfallsFlowRef"
				:value="dataList"
				:column="column"
				:columnSpace="1.5"
				:seat="2"
				@wapperClick="wapperClick"
				@imageClick="imageClick"
				@loaded="loaded"
			>
				<view class="item" v-for="(item, index) in dataList" :key="index" :slot="`slot${index}`">
					<view class="title">{{ item.title }}</view>
					<view class="desc">{{ item.content }}</view>
				</view>
			</custom-waterfalls-flow> -->
		</z-paging>
		<view
			style="
				width: 108rpx;
				height: 108rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: fixed;
				bottom: 300rpx;
				right: 30rpx;
				background: #ffffff;
				border-radius: 50%;
				font-size: 24rpx;
			"
			@click="navTo('/pages/find/add')"
		>
			<image src="/static/image/fawen.png" style="width: 48rpx; height: 48rpx"></image>
			<view>发文</view>
		</view>
	</view>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';
import { getMerchantSelect } from '@/api/api.js';
import { onLoad } from '@dcloudio/uni-app';

import { useNav } from '@/hooks/useNav.js';

const { navTo } = useNav();

onLoad(() => {});
const paging = ref(null);
const dataList = ref([]);

const queryList = async (pageNo, pageSize) => {
	getMerchantSelect({
		current: pageNo,
		pageSize: pageSize,
		category: 'DISCOVERY'
	})
		.then((res) => {
			paging.value.complete(res.records);
			uni.hideLoading();
		})
		.catch((res) => {
			paging.value.complete(false);
			uni.hideLoading();
		});
};

const column = ref(2);

function loaded() {
	console.log('加载完成');
}

function wapperClick(item) {
	console.log('单项点击事件', item);
}

function imageClick(item) {
	console.log('图片点击事件', item);
}
const waterfallsFlowRef = ref(null);
</script>
<style>
page {
	background-color: #f2f5f9;
}
</style>
<style lang="scss" scoped>
.handle {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 20rpx;
	padding: 10rpx;

	.btn {
		margin: 20rpx 10rpx;
		padding: 0 20rpx;
		background: #2878ff;
		font-size: 28rpx;
		color: #fff;

		&::after {
			border: 0;
		}
	}
}

.item {
	padding: 10rpx 10rpx 20rpx;
	background: #fff;

	.title {
		line-height: 48rpx;
		font-size: 28rpx;
		color: #222;
	}

	.desc {
		font-size: 24rpx;
		color: #666;
	}
}
</style>
