<template>
	<view>
		<!-- tab -->
		<up-sticky offset-top="0">
			<view class="tabsinfo flex alignCenter justifyCenter">
				<up-tabs :list="list4" lineWidth="20" lineHeight="2" @click="tabsClick" :current="typeIndex"
					lineColor="#3477FC" :activeStyle="{
					color: '#000000',
					fontSize: '28rpx',
					transform: 'scale(1.05)'
				}" :inactiveStyle="{
					color: '#999999',
					fontSize: '28rpx',
					transform: 'scale(1.05)'
				}" itemStyle="  width: 180rpx; padding-bottom:18rpx;">
				</up-tabs>
			</view>
			<up-line></up-line>
		</up-sticky>



		<!-- 列表 -->
		<view class="bc-color" v-if="typeIndex == 0 || typeIndex == 1" v-for="(postItem, postIndex) in postList" :key="postIndex">
			<PostView :postValue="postItem" :postViewIndex="2" :postViewType="0"></PostView>
			<u-line></u-line>
		</view>
		<view class="bc-color" v-if="typeIndex == 2 || typeIndex == 3" v-for="(postItem, postIndex) in postList" :key="postIndex">
			<PostView :postValue="postItem" :postViewIndex="2" :postViewType="1"></PostView>
			<u-line></u-line>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		reactive,
		toRefs
	} from 'vue';
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import PostView from "@/pages/common/postview/index.vue";
	import {
		listPost,
		listAllMyPost,
		listPostFollow,
		getPost,
		delPost,
		addPost,
		updatePost,
		getLoginUserinfo
	} from "@/api/talk/post";
	const loginUser = reactive(uni.getStorageSync('loginUserPost'));
	const typeIndex = ref(9)
	const list4 = reactive([{
			name: '全部活动',
			state: 9
		},
		{
			name: '已发布',
			state: 0
		},
		{
			name: '未通过',
			state: 3
		},
		{
			name: '审核中',
			state: 2
		}
	]);

	const postList = ref([]);

	const loading = ref(true);
	const total = ref(0);

	const data = reactive({
		form: {},
		queryParams: {
			pageNum: 1,
			pageSize: 10,
			uid: null,
			topicId: null,
			discussId: null,
			voteId: null,
			title: null,
			content: null,
			media: null,
			tab: null,
			readCount: null,
			transmitCount: null,
			likeCount: null,
			commentCount: null,
			favoriteCount: null,
			postTop: null,
			type: null,
			anonymity: null,
			postPrivate: null,
			address: null,
			longitude: null,
			latitude: null,
			auditor: null,
			status: null,
			auditTime: null,
			auditAdvice: null,
			cut: null,
			sortField: null,
			sortDirection: null,
		},
		rules: {
			status: [{
				required: true,
				message: "状态不能为空",
				trigger: "change"
			}],
			cut: [{
				required: true,
				message: "分类不能为空",
				trigger: "change"
			}],
		}
	});

	const {
		queryParams,
		form,
		rules
	} = toRefs(data);

	onLoad((options) => {
		const type = Number(options.type)
		console.log('你好', type)
		if (options.type == 0) {
			typeIndex.value = 0
			queryParams.value.status = null
		} else if (options.type == 1) {
			typeIndex.value = 1
			queryParams.value.status = 0
		} else if (options.type == 3) {
			typeIndex.value = 2
			queryParams.value.status = 3
		} else if (options.type == 2) {
			typeIndex.value = 3
			queryParams.value.status = 2
		}
		queryParams.value.uid = loginUser.userId
		getList();
		onReachBottom(() => {
			console.log('触底了')
			if (total.value > postList.value.length) {
				queryParams.value.pageNum += 1;
				getList();
			}
		})
	})

	//按照条件查询
	const tabsClick = (index) => {
		removePage()
		if (index.state == 9) {
			queryParams.value.status = null;
		} else {
			queryParams.value.status = index.state
		}

		getList()

	}

	const removePage = () => {
		queryParams.value.pageNum = 1;
	}

	/** 查询话题投稿new列表 */
	const getList = () => {
		listAllMyPost(queryParams.value).then(response => {
			console.log('看一下查了啥啊', response.rows)
			if (queryParams.value.pageNum > 1) {
				postList.value.push(...response.rows);
				uni.setStorageSync('myPostList', postList.value)
			} else {
				uni.setStorageSync('myPostList', response.rows)
			}
			postList.value = uni.getStorageSync('myPostList');
			// postList.value = response.rows;
			total.value = response.total;
		});
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F5F6;
	}

	.tabsinfo {
		width: 100%;
		height: 2.125rem;
		background-color: #FFFFFF;
		display: flex;
		align-items: flex-end;
	}

	.bc-color {
		background-color: #ffffff;
	}
</style>