<template>
	<view class="container">
		<view class="header">
			<uni-row :gutter="12">
				<uni-col :span="20">
					<uni-segmented-control :current="current" :values="items" styleType="button" @clickItem="onClickItem">
					</uni-segmented-control>
				</uni-col>
				<uni-col :span="4">
					<view @click="openDg" style="text-align: center;">
						筛选
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view style="height: 8rpx;"></view>
		<uni-list :border="true">
			<uni-list-item v-for="(item ,index) in tlist" :index="index" :key="index" direction="column">
				<template v-slot:header>{{item.title}}</template>
				<template v-slot:body>
					<view style="color: gray; font-size: 28rpx;">所属工作流: {{item.workflow_.name}}</view>
					<view style="color: gray; font-size: 28rpx;">工单状态: {{item.state_.name}}</view>
					<view style="color: gray; font-size: 28rpx;">提交时间: {{item.create_time}}</view>
					<view style="color: gray; font-size: 28rpx;">最近更新: {{item.update_time}}</view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-load-more :status="status" />
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view style="height: 188rpx;"></view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				current: 0,
				items_e: ['duty', 'owner', 'worked', 'all'],
				page: 1,
				pageSize: 20,
				items: ['待办', '我的', '已办', '抄送我'],
				tlist: [],
				status: 'noMore'
			}
		},
		onLoad(query) {
			this.current = this.items_e.indexOf(query.category)
			this.getTicket()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getTicket()
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
					this.page = 1
					this.getTicket()
				}
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			getTicket() {
				var that = this;
				that.status = 'loading';
				that.$api.getTicket({category: that.items_e[that.current], page: that.page, page_size: that.pageSize}).then(data=>{
					if(data.results.length <= that.pageSize){
						that.status = 'noMore';
					}else{
						that.status = 'more';
					}
					if(that.page == 1){
						that.tlist = data.results;
					}
					else{
						that.tlist = that.tlist.concat(data.results)
					}
					uni.stopPullDownRefresh()
				}).catch(e=>{uni.stopPullDownRefresh()})
			},
			openDg() {
				this.$refs.popup.open('top')
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
		}
	}
</script>

<style>
	.header {
		position: sticky;
		top: 0;
		z-index: 1;
		background-color: white;
		padding: 8rpx;
	}
</style>
