<template>
	<view class="container">
		<view class="header_sticky">
				<uni-segmented-control :current="current" :values="items" styleType="button" @clickItem="onClickItem" style="flex:1;">
				</uni-segmented-control>
				<view @click="openDg" style="text-align: center; width: 100rpx;">
					筛选
				</view>
		</view>
		<view style="height:8rpx"></view>
		<view>
		<uni-list :border="true">
			<uni-list-item v-for="(item ,index) in tlist" :index="index" :key="index" direction="column" @click="itemClick(item)" :clickable="true">
				<template v-slot:header>{{item.title}}</template>
				<template v-slot:body>
					<view style="color: gray; font-size: 26rpx;">工作流: {{item.workflow_.name}}</view>
					<view style="color: gray; font-size: 26rpx;">工单状态: 
						 <uni-tag :text="actStateEnum[item.act_state]?.text" :circle="true" size="small" :type="actStateEnum[item.act_state]?.type" :inverted="true"
						 style="font-weight: 460;"></uni-tag>
						 {{item.state_.name}}
					</view>
					<view style="color: gray; font-size: 26rpx;">提交时间: {{item.create_time}}</view>
					<view style="color: gray; font-size: 26rpx;">最近更新: {{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>
	</view>
</template>

<script>
import {actStateEnum} from "@/utils/enum.js"
	export default {
		data() {
			return {
				actStateEnum,
				searchValue: '',
				current: 0,
				items_e: ['duty', 'owner', 'worked', 'all'],
				page: 1,
				pageSize: 20,
				items: ['待办', '我的', '已办', '抄送我'],
				tlist: [],
				status: 'more',
			}
		},
		onLoad(query) {
			this.current = this.items_e.indexOf(query.category)
		},
		onShow() {
			this.getTicket()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getTicket()
		},
		onReachBottom() {
			this.onReachBottom();
		},
		methods: {
			onReachBottom() {
				if (this.status === 'more') {
					this.page++;
					this.getTicket()
				}
			},
			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;
						uni.pageScrollTo({
							scrollTop: 0, // 滚动到顶部
							duration: 300 // 滚动过渡时间（单位：毫秒）
						});
					}
					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);
			},
			itemClick(row) {
				const viewPath = row.workflow_.view_path2?row.workflow_.view_path2:row.workflow_.view_path;
				const t_id = row.ticket_data.t_id;
				uni.navigateTo({
					url: `/pages${viewPath}?t_id=${t_id}`
				})
			},
		}
	}
</script>

<style>

</style>
