<template>
	<view class="wrapper">
		<uni-nav-bar background-color="#007AFF" status-bar="true" fixed>
			<view class="nav-bar-center">
				<view class="filter-middle">
					<uni-drop-down v-model="status" :menu="candidates"></uni-drop-down>
					<input class="search-input" type="text" value="" placeholder="输入文字" />
				</view>

				<view class="calender-wrap">
					<uni-icons @click="openCalendar" type="info" color="#fff"></uni-icons>
					<uni-calendar :insert="false" ref="calendar" @confirm="calendarConfirm"></uni-calendar>
				</view>
			</view>

			<view slot="left">
				<uni-icons type="info" color="#fff" @click="jumpToCharts"></uni-icons>
			</view>

			<view slot="right">
				<view class="submit-btn">
					<text style="color: #fff;font-size: 30rpx;">查询</text>
				</view>
			</view>
		</uni-nav-bar>
		<uni-wuc-tab
			:tab-list="candidates"
			:tabCur.sync="activeIndex"
			tab-class="bg-white wuc-tab"
			@change="tabChange">
		</uni-wuc-tab>
		<swiper :current="activeIndex" @change="swiperChange" class="swiper">
			<swiper-item v-for="(tab, index) in candidates" :key="index">
				<scroll-view
					:scroll-y="true"
					class="scroll-item"
					enable-back-to-top
					refresher-enabled
					:refresher-triggered="triggerList[tab.key]"
					@refresherrefresh="refresherrefresh(tab, $event)"
					@refresherpulling="refresherpulling(tab, $event)"
					@scrolltolower="scrolltolower(tab, $event)"
					@refresherrestore="refresherrestore(tab, $event)"
					@refresherabort="refresherabort(tab, $event)"
				>
					<task-item v-for="(task, i) in taskList" :task="task" :key="i">
					</task-item>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import taskItem from './components/taskItem.vue';
	import {taskStatus} from './configs.js';

	const taskList = [
		{
			title: '测试任务',
			status: '已完成',
			order: '1231232',
			createTime: '2020-08-08'
		},
		{
			title: '测试任务',
			status: '已完成',
			order: '1231232',
			createTime: '2020-08-08'
		},
		{
			title: '测试任务',
			status: '已完成',
			order: '1231232',
			createTime: '2020-08-08'
		}
	]
	export default {
		components: {
			taskItem
		},
		data() {
			return {
				status: 'all',
				activeIndex: 0,
				triggerList: {
					all: false,
					done: false,
					order: false,
					solve: false
				},
				candidates: taskStatus,
				taskList
			}
		},
		methods: {
			calendarConfirm() {
				//
			},
			openCalendar() {
				this.$refs.calendar.open();
			},
			tabChange(index) {
				this.activeIndex = index;
			},
			swiperChange(e) {
				const {current} = e.detail;
				this.activeIndex = current;
			},
			refresherrefresh(e) {
				// 下拉刷新
				console.log('refresherrefresh', e)
				this.refresherTriggered = true;
			},
			scrolltolower(e) {
				// 触底
				console.log('scrolltolower', e)
			},
			refresherpulling(e) {
				console.log('refresherpulling', e)
			},
			scrolltoupper(e) {
				console.log('scrolltoupper', e)
			},
			refresherrestore(e) {
				console.log('refresherrestore', e)
			},
			refresherabort(e) {
				console.log('refresherabort', e)
			},
			jumpToCharts() {
				uni.navigateTo({
					url: '/pages/task/charts/charts'
				})
			}
		}
	}
</script>

<style>
	.wrapper {
		display: flex;
		flex-direction: column;
	}
	.nav-bar-center {
		display: flex;
		flex-direction: row;
		width: 100%;
	}
	.top-filters {
		display: flex;
		flex-direction: row;
		width: 750rpx;
		height: 100rpx;
		overflow: hidden;
		background-color: #007AFF;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
	}
	.filter-middle {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		margin-left: 20rpx;
		border-radius: 8rpx;
		position: relative;
	}
	.filter-select {
		padding: 0 20rpx;
	}
	.calender-wrap {
		margin: 0 20rpx;
	}
	.search-input {
		flex: 1;
		background-color: #fff;
		font-size: 30rpx;
		padding: 0 10rpx;
		color: #666;
	}
	.submit-btn {
		color: #fff;
	}
	/deep/ .uni-navbar__content {
		overflow: initial;
	}
	/deep/ .uni-navbar__header-btns-left {
		width: auto;
	}
	/deep/ .uni-navbar__header-btns {
		width: auto;
	}
	.swiper {
		flex: 1;
	}
	.scroll-item {
		height: 100%;
	}
</style>
