<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<view style="color: #fff;">
			<tn-nav-bar backgroundColor="#26B3A0" :bottomShadow="false">{{catName}}
			</tn-nav-bar>
			<view :style="{ height: tobheight + 'px' }"></view>
		</view>
		<!-- #endif -->

		<view class="detailBox">
			<view class="taskList">
				<view class="ul">
					<view class="li" v-for="(item,index) in tuskList" @click="goDetail(item.id)">
						<image :src="item.cover_image?item.cover_image:'../../static/posImg.png'" mode=""></image>

						<view class="right">
							<view class="title mb30">
								<!-- Chat GPT应用场景 -->
								{{item.name }}
							</view>
							<view class="des2 mb30">
								<!-- 主要完成应用场景的填写，查找，上传，学习后将收获对open ai的了解更加多元。 -->
								{{item.intro }}
							</view>
							<view class="bottom">
								<view class="money">
									<text class="yongjin"><text class="yongjin">佣金：</text></text>
									￥{{item.task_commission}}
								</view>
								<view class="btn" style="font-weight: 500;" @click="goDetail(item.id)">
									立即报名
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<empty style="margin-top: 50%;" v-if="tuskList.length==0"></empty>
		<u-loadmore v-if="tuskList.length!=0" :status="status" />
	</view>
</template>

<script>
	import empty from '@/components/empty/empty.vue'
	import {
		taskList
	} from '@/api/tusk/index.js'
	export default {
		components: {},
		data() {
			return {
				catName: '',
				tuskList: [],

				catId: '',

				page: 1,
				pagesize: 5,
				totalElements: '',
				// loadstatus: "noMore"
				status: 'nomore',
			};
		},
		computed: {

		},
		watch: {

		},
		async onLoad(o) {
			this.catName = o.catName
			this.catId = o.task_category_id
			this.fetchTuskList()
		},
		onReady() {

		},
		onShow() {

		},
		onUnload() {

		},

		async onReachBottom() {
			let allTotal = this.page * this.pagesize
			if (allTotal < this.totalElements) {
				console.log('onReachBottom()------------------');
				this.page++;
				this.status = "loading"
				this.fetchTuskList('', '', this.page, this.pagesize)


			} else {
				this.status = "nomore"
			}
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/tusk/tuskDetail/index?id=' + id
				})
			},

			async fetchTuskList(name = '', type = '', page = 1, per_page = 5) {
				// this.page = 1

				console.log('任务分类-传递的参数', {
					name,
					type,
					page,
					per_page,

					task_category_id: this.catId
				});
				let ress = await taskList({
					name,
					type,
					page,
					per_page,

					task_category_id: this.catId
				})
				if (ress.code == 0) {

					this.totalElements = ress.data.total
					// this.tuskList = []
					this.tuskList = [...this.tuskList, ...ress.data.data]
				}
				console.log('任务分类-任务列表返回值', ress);
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>