<template>
	<view class="my_duty">
		<uni-nav-bar @clickLeft="goBack()" height="110rpx" leftWidth="200rpx" leftText="我的代办" leftIcon="left" border
			backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
		<view class="my-top-search-nav">
			<view class="search-wrap">
				<view class="search-body">
					<image class="left-img" src="../../../static/home/searchIcon.png" mode=""></image>
					<input class="search-input" type="text" v-model="params.search"
						placeholder="请输入关键字" />
					<view class="right-btn" @click="searchHandle">
						搜索
					</view>
				</view>
			</view>
			<!-- 主体 导航栏 -->
			<view class="tabbar-title">
				<view :class="{'text-title':true, 'active':ticketTypye==='duty'}" @click="changeList('duty')">代办</view>
				<view :class="{'text-title':true, 'active':ticketTypye==='owner'}" @click="changeList('owner')">我的</view>
				<view :class="{'text-title':true, 'active':ticketTypye==='worked'}" @click="changeList('worked')">已处理</view>
				<view :class="{'text-title':true, 'active':ticketTypye==='cc'}" @click="changeList('cc')">抄送</view>
			</view>
		</view> 
		<view class="content" v-if="ticketList.length>0">
			<view class="item-wrap" v-for="(val,index) in ticketList" :key="val.id">
				<view class="duty-item">
					<view class="top-info">
						<view class="info-title">{{val.title}}</view>
					</view>
					<view class="center-info">
						<view class="info-details">所属工作流：{{val.workflow_.name}}</view>
						<view class="info-details">工单状态：{{val.state_.name}}</view>
						<view class="info-details">提交时间：{{val.create_time}} </view>
						<view class="info-details">更新时间：{{val.update_time}} </view>
					</view>
					<view class="bottom-btns">
						<block  v-if="ticketTypye === 'duty'">
							<view class="shenhezhong bottom-btn" @click="ticketHandle(val,'handle')"
								v-if="(val.act_state===1||val.act_state===3)&&val.state_.type===0">
								<image src="../../../static/my/my_apply/blue-time.png" mode=""></image>
								处理
							</view>
						</block>
						<block  v-if="ticketTypye === 'owner'">
							<view class="shenhezhong bottom-btn" @click="ticketHandle(val,'handle')"
								v-if="vuex_user.id===val.create_by&&val.state_.type===1">
								<image src="../../../static/my/my_apply/blue-time.png" mode=""></image>
								关闭
							</view>
							<view class="shenhezhong bottom-btn" @click="ticketHandle(val,'handle')"
								v-if="vuex_user.id===scope.row.create_by&&val.state_.type!==1&&val.state_.enable_retreat">
								<image src="../../../static/my/my_apply/blue-time.png" mode=""></image>
								撤回
							</view>
						</block>
						<view class="shenhejieshu bottom-btn" @click="ticketHandle(val,'show')">
							<image src="../../../static/my/my_apply/tongguo.png" mode=""></image>
							查看
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-else>
			<view style="text-align: center;"> 暂无数据</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ticket',
		data() {
			return {
				params: {
					search: '',
					pageSize: 10,
					pageNum: 1,
					category: 'duty'
				},
				userId:'',
				ticketTypye:'duty',
				totalNum: 0,
				ticketList: [],
			}
		},
		//上拉加载
		onReachBottom() {
			const totalPage = Math.ceil(this.totalNum / this.params.pageSize);
			if (this.params.pageNum < totalPage) {
				this.params.pageNum += 1;
				this.getTicketLists();
			} else {
				uni.showToast({
					title: "已全部加载",
					icon: 'none'
				})
			}
		},
		onShow() {
			this.ticketList = [];
			this.getTicketLists();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.params.pageNum = 1;
			this.ticketList = [];
			this.getTicketLists();
		},
		methods: {
			getTicketLists() {
				let that = this;
				that.$u.api.getTickets(that.params).then(res => {
					that.ticketList = that.ticketList.concat(res.results);
					this.totalNum = res.count;
				})
			},
			ticketHandle(val, type) {
				debugger;
				let projectId = val.ticket_data.visit ? val.ticket_data.visit : val.ticket_data.rpj ? val.ticket_data.rpj :
					val.ticket_data.opl; //项目、许可证Id  visit
				let catetype = val.workflow_.key;
				const params = `?ticketId=${val.id}&projectId=${projectId}&cateType=${catetype}&type=${type}`;
				debugger;
				uni.navigateTo({
					url: '../detail/ticketHandle' + params,
				})
			},

			//接单
			ticketAccept(val) {
				let that = this;
				that.$u.api.ticketAccept(val.id).then(res => {
					that.getTicketLists();
				})
			},

			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			searchHandle() {
				this.params.pageNum = 1;
				this.ticketList = [];
				this.getTicketLists()
			},
			resetSearch() {
				this.params.pageNum = 1;
				this.params.search = "";
				this.ticketList = [];
				this.getTicketLists();
			},
			changeList(index) {
				// debugger;
				this.ticketTypye = index;
				this.ticketList = [];
				this.params.pageNum = 1;
				if (index === 'duty') {
					this.params.category = 'duty';
				} else if (index === 'owner') {
					this.params.category = 'owner';
				} else if (index === 'worked') {
					this.params.category = 'worked';
				} else if (index === 'cc') {
					this.params.category = 'cc';
				} 
				this.getTicketLists();

			},
		}
	}
</script>

<style scoped>
	.empty-view {
		height: 120rpx;
	}

>>>.uni-navbar__header,
	>>>.uni-status-bar,
	.search-wrap {
		background-image: linear-gradient(270deg,
				#0ca7ee 0%,
				#005aff 100%,
				#2a8cff 100%,
				#54bdff 100%),
			linear-gradient(#e60012,
				#e60012);
	}
	
	.my_duty {
		background-color: #f3fbff;
	}

	.my_duty>>>.uni-navbar-btn-text text {
		font-size: 32rpx !important;
	}

	.content {
		padding: 14rpx;
		padding-top: 230upx;
	}

	.item-wrap {
		margin-bottom: 14rpx;
	}

	.duty-item {
		width: 720rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin: 0 auto;
		padding: 24rpx 21rpx 0 21rpx;
		box-sizing: border-box;
	}

	.info-title {
		font-family: PingFang-SC-Medium;
		font-size: 30rpx;
		line-height: 72rpx;
		color: #3d3d3d;
		flex: 1;
	}

	.right-time {
		font-size: 24rpx;
		line-height: 72rpx;
		color: #ababab;
	}

	.center-info {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #eeeeee;
	}

	.info-details {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #5b5b5b;
	}

	.bottom-btns {
		text-align: center;
		font-family: PingFang-SC-Medium;
		font-size: 28rpx;
		line-height: 83rpx;
		display: flex;
	}

	.bottom-btn {
		flex: 1;
		border-right: 1upx solid #eeeeee;
	}
	.bottom-btns>.bottom-btn:last-child{
		border-right: none;
	}
	.shenhezhong {
		color: #2c6fd9;
	}

	.shenhejieshu {
		color: #15a306;
	}

	.bottom-btn image {
		width: 26rpx;
		height: 26rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}
</style>
