<template>
	<view>
		<yui-tabs :tabs="pageInfo.tabs" :offsetTop="22" v-model="pageInfo.activeIndex" @change="tabChange" color="rgba(190, 163, 117, 1)"
			titleActiveColor="rgba(190, 163, 117, 1)" sticky swipeable line-width="60rpx" line-height="2px" animated>
			<template #pane0>
				<ZkTaskListView></ZkTaskListView>
			</template>
			<template #pane1>
				<ZkTaskListView state="wait"></ZkTaskListView>
			</template>
			
			<template #pane2>
				<ZkTaskListView state="intask"></ZkTaskListView>
			</template>
			
			<template #pane3>
				<ZkTaskListView state="complete"></ZkTaskListView>
			</template>
		</yui-tabs>
	</view>
</template>

<script setup>
	import http from '@/utils/request';
	import {
		reactive
	} from "vue";
	import {
		onLoad,
		onShow,
		onUnload,
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import ZkTaskListView from "./zkTaskListView.vue"

	const pageInfo = reactive({
		// 判断列表是否为空
		isEmpty: true,
		total: 0,
		value: 0,
		orderList: [],
		tabs: ["所有", "待质控", "质控中", "完成"],
		activeIndex: 0,
		orderId: '',
		detailStatus: ''
	});

	const showIcon = reactive({
		nowIcon: '',
		showIcon: '/static/blackDisplay.png',
		hideIcon: '/static/blackHide.png'
	})

	const statusIcon = reactive({
		daiIcon: '/static/dai_icon.png',
		wanIcon: '/static/wan_icon.png',
		zhiIcon: '/static/zhi_icon.png'
	})

	// 切换显示与隐藏
	const changeState = (type) => {
		if (type == 'header') {
			console.log("头部切换")
			if (eyeIcon.nowIcon == eyeIcon.hideIcon) {
				eyeIcon.nowIcon = eyeIcon.showIcon
			} else {
				eyeIcon.nowIcon = eyeIcon.hideIcon
			}
		} else if (type == 'list') {
			console.log("列表切换")
			if (showIcon.nowIcon == showIcon.hideIcon) {
				showIcon.nowIcon = showIcon.showIcon
			} else {
				showIcon.nowIcon = showIcon.hideIcon
			}
		}
	}

	// 跳转到任务详情
	const toDetail = () => {
	}
	
	// 上拉加载
	onReachBottom(() => {
	})
	
	// //下拉刷新
	// onPullDownRefresh(() => {
	// 	console.log('onPullDownRefresh')
	// })

</script>


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