<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':dataTypye==='isMy'}" @click="changeList('isMy')">我的</view>
					<view :class="{'text-title':true, 'active':dataTypye==='all'}" @click="changeList('all')" v-if="!remployee">全部</view>
				</view>
			</view> 
		<!-- <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="search" placeholder="请输入" />
					<image class="right-img" src="../../../static/my/my_apply/zuofei.png" mode="" @click="resetSearch">
					</image>
					<view class="right-btn" @click="searchHandle">搜索</view>
				</view>
			</view>
		</view> -->
		<view class="empty-view"></view>
		<view class="content">
			<view class="item-wrap" v-for="(val,index) in lists" :key="val.id">
				<view class="duty-item">
					<view class="top-info">
						<view class="info-title">{{val.name}}</view>
					</view>
					<view class="center-info">
						<view class="info-details">相关方：{{val.rparty_name}}</view>
						<view class="info-details">合同编号：{{val.contract_number}} </view>
						<view class="info-details">状态：{{stateOptions[val.state]}}</view>
						<view class="info-details">作业类型：{{typeOptions[val.type]}} </view>
						<view class="info-details">所属部门：{{val.belong_dept_name}} </view>
						<view class="info-details">入厂时间：{{val.come_time}}-{{val.leave_time}} </view>
					</view>
					<view class="bottom-btns">
						<view class="shenhezhong shenhe-status" @click="rpjHandle(val,'edit')" v-if="val.state===10&&dataTypye==='isMy'">
							<image src="../../../static/my/my_apply/blue-time.png" mode=""></image>
							编辑
						</view>
						<view class="shenhezhong shenhe-status" @click="rpjHandle(val,'delete')" v-if="val.state===10&&dataTypye==='isMy'" style="color: #ff0000;">
							<image src="../../../static/my/my_apply/return.png" mode=""></image>
							删除
						</view>
						<view class="shenhezhong shenhe-status" @click="rpjDetail(val)"
							style="color: #15a306;">
							<image src="../../../static/my/my_apply/tongguo.png" mode=""></image>
							查看
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ticket',
		data() {
			return {
				params: {
					search: '',
					pageSize: 10,
					pageNum: 1,
					create_by: ''
				},
				totalNum: 0,
				lists: [],
				stateOptions: {
					10: "创建中",
					20: "审批中",
					30: "待入厂",
					40: "进行中",
					50: "已完成",
					60: "已关闭",
				},
				typeOptions: {
					10: "建筑施工",
					20: "设备设施检维修",
					30: "保安保洁服务",
					40: "其他",
				},
				dataTypye:'isMy',
				remployee:false,
			}
		},
		//上拉加载
		onReachBottom() {
			const totalPage = Math.ceil(this.totalNum / this.params.pageSize);
			if (this.params.pageNum < totalPage) {
				this.params.pageNum += 1;

			} else {
				uni.showToast({
					title: "已全部加载",
					icon: 'none'
				})
			}
		},
		onShow() {
			debugger;
			console.log(this.vuex_user);
			debugger;
			if(this.vuex_user.type==='remployee'){
				this.remployee = true;
			}
			this.lists = [];
			this.dataTypye='isMy';
			this.params.create_by = this.vuex_user.id;
			this.getLists();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.params.pageNum = 1;
			this.lists = [];
			this.getLists();
		},
		methods: {
			getLists() {
				let that = this;
				that.$u.api.rpjList(that.params).then(res => {
					that.lists = that.lists.concat(res.results);
					this.totalNum = res.count;
				})
			},
			rpjHandle(val, type) {
				if(type=='delete'){
					this.$u.api.rpjDelete(val.id).then(res => {
						this.resetSearch()
					})
				}else{
					const params = `?rpj=${val.id}&type=${type}`;
					uni.navigateTo({
						url: '/pages/workSpace/rpj/rpjCreate' + params,
					})
					
				}
				
			},
			rpjDetail(val){
				const params = `?rpjId=${val.id}`;
				uni.navigateTo({
					url: '/pages/workSpace/rpj/rpjDetail' + params,
				})
			},
			changeList(index){
				let that = this;
				that.dataTypye = index;
				if(index==='isMy'){
					that.params.create_by = that.vuex_user.id;
				}else{
					that.params.create_by = '';
				}	
				that.resetSearch();
				
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			searchHandle() {
				this.params.pageNum = 1;
				this.lists = [];
				this.getLists()
			},
			resetSearch() {
				this.params.pageNum = 1;
				this.params.search = "";
				this.lists = [];
				this.getLists();
			},
		}
	}
</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: 125upx;
	}

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

	.duty-item {
		width: 720rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin: 0 auto;
		padding: 24rpx 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;
	}

	.shenhezhong {
		flex: 1;
		color: #2c6fd9;
	}

	.shenhe-status image {
		width: 26rpx;
		height: 26rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}

	/* .my-top-search-nav {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.search-wrap {
		background-blend-mode: normal, normal;
		padding-bottom: 44rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
		background: #f3fbff;
	}

	.search-body {
		width: 715rpx;
		height: 78rpx;
		background-color: #ffffff;
		border-radius: 39rpx;
		margin: 0 auto;
		padding: 13rpx;
		padding-left: 25rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.search-body .search-input {
		height: 100%;
		flex: 1;
		padding-left: 12rpx;
		box-sizing: border-box;
	}

	.left-img {
		width: 26rpx;
		height: 26rpx;

	}

	.right-img {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.right-btn {
		width: 110rpx;
		height: 58rpx;
		line-height: 58rpx;
		background-image: linear-gradient(0deg,
				#2da0f3 0%,
				#54bcff 100%);
		border-radius: 29rpx;
		font-size: 28rpx;
		color: #ffffff;
		text-align: center;
	} */
</style>
