<template>
	<view>
		<headers :showBack="true">
			<view class="headerName">
				进度管理
			</view>
		</headers>
		<view class="tab flex2">
			<view class="tabType" @click="changeTab(0)" :class="checkedTab==0?'checkedTab':'noCheckTab'">未开始</view>
			<view class="tabType" @click="changeTab(1)" :class="checkedTab==1?'checkedTab':'noCheckTab'">进行中</view>
			<view class="tabType" @click="changeTab(2)" :class="checkedTab==2?'checkedTab':'noCheckTab'">已完成</view>
		</view>
		<view class="content">
			<view class="item" v-if="listData.length>0" v-for="(item,index) in listData" :key="index">
				<view class="item_title">{{item.taskName}}</view>
				<view class="item_content">计划时间:{{item.startDate}}-{{item.finishDate}}</view>
				<view class="item_content" v-if="checkedTab==2">实际时间:{{item.actualStartDate}}-{{item.actualFinishDate}}
				</view>
				<view class="item_content" v-if="checkedTab==1">实际开始时间:{{item.actualStartDate}}</view>
				<view class="name">任务工期:{{item.duration}}</view>
				<view class="time">进度比例:{{item.progressRatio}}%</view>

				<view class="state" :class="item.differDay==0?'stateTextColor3':'stateTextColor1'">
					{{item.status==0?'':item.status==1?'':item.differDay==0?'正常':`提前${item.differDay}天`}}
				</view>
				<!-- <view class="state"
					:class="item.differDay==0?'stateTextColor3':'stateTextColor1'" v-if="checkedTab==2">
					{{item.differDay==0?'正常':`提前${item.differDay}天`}}
				</view> -->

				<view class="state2" :class="{'state2':item.status==0,'state2':item.status==1,'state3':item.status==2}"
					@click="editStatus(item)">
					{{item.status==0?'开始任务':item.status==1?'结束任务':''}}
				</view>
			</view>
		</view>
		<view class="noData" v-if="listData.length==0">
			<image class="noDataImg" src="/static/noData.png"></image>
			<view>暂无数据</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				listData: [],
				checkedTab: 1,
				condition: {
					pageNo: 1,
					pageSize: 10,
					projectSn: "",
					status: 1, //0.未完成。1.进行中，2.已完成
					projectSn: '',

				},
				finishDate: ',',
				actualFinishDate: '',
				teach: true,



			}
		},
		onLoad() {
			this.condition.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			// this.checkedTab = sessionStorage.getItem('currentIndex')
			this.getListData();
			
		},
		onShow() {
			this.listData = [];
			this.condition.pageNo = 1;
			this.condition.pageSize = 10;
			// this.getListData();
		},
		//上拉触底时间
		onReachBottom() {
			if (this.teach) {
				this.condition.pageNo = this.condition.pageNo + 1;
				this.getListData();
			}
		},
		methods: {
			//切换tab
			changeTab(type) {
				console.log('点击tab切换有反应=====================');
				// sessionStorage.setItem('currentIndex', type)
				this.checkedTab = type;
				this.condition.status = type;
				this.condition.pageNo = 1;
				this.condition.pageSize = 10;
				this.listData = [];
				this.getListData();
			},

			//获取进度数据
			getListData() {
				if (this.checkedTab == 0) {
					this.condition.taskName = ''
					this.condition.startDate = ''
					this.condition.duration = ''
					this.condition.progressRatio = ''
					this.status = 0
					

				} else if (this.checkedTab == 1) {
					this.condition.taskName = ''
					this.condition.startDate = ''
					this.condition.duration = ''
					this.condition.progressRatio = ''
					this.status = 1
				} else {
					this.condition.taskName = ''
					this.condition.startDate = ''
					this.condition.duration = ''
					this.condition.progressRatio = ''
					this.status = 2
				}

				let that = this;
				this.sendRequest({
					url: 'xmgl/progressTask/selectPage',
					method: 'get',
					data: that.condition,
					success: res => {
						let arr = JSON.parse(JSON.stringify(this.listData));
						if (res.result.records.length > 0) {
							let newArr = arr.concat(res.result.records);
							if (res.result.records.length < 10) {
								that.teach = false;
							} else {
								that.teach = true;
							}
							that.listData = newArr;
							console.log(that.listData)
						} else {
							that.teach = false;
						}
					}
				})
			},
			//修改进度数状态
			editStatus(item) {
				console.log('修改的数据内容', item);
				let _this = this
				//年
				let year = new Date().getFullYear();
				//月份是从0月开始获取的，所以要+1;
				let month = new Date().getMonth() + 1;
				//日
				let day = new Date().getDate();
				let time = year + '-' + month + '-' + day


				let arr = JSON.parse(JSON.stringify(item));
				console.log('arr================', arr);
				if (item.status == 0) {
					arr.startDate = time

					arr.actualStartDate = time
					arr.status = 1

				}
				if (item.status == 1) {
					arr.status = 2
					arr.actualFinishDate = time

				}
				uni.showModal({
					title: '提示',
					content: '确定提交该操作吗？',
					showCancel: true, // 不显示取消按钮
					success(res) {
						if (res.confirm) {
							_this.sendRequest({
								url: 'xmgl/progressTask/updateProgressTask',
								method: 'post',
								data: arr,
								success: res => {
									uni.showToast({
										title: '状态编辑成功',
										duration: 2000,
									})
									setTimeout(() => {
										_this.$router.go(0)
									}, 500)

								}

							})

						}

					}
				});

			}
		}
	}
</script>

<style>
	.flex2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tab {
		width: 100%;
		height: 90rpx;
		text-align: center;
		box-shadow: 0 0 20rpx rgba(194, 194, 194, 0.5);
		/* position: fixed; */
	}

	.tabType {
		width: 33%;
		line-height: 43px;
		border-bottom: 1px solid rgba(194, 194, 194, 0.2);

	}

	.checkedTab {
		color: #4181FE;
		border-bottom: 4rpx solid #4181FE;

	}


	.item {
		box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
		border-radius: 16rpx;
		height: 175px;
		width: 92%;
		margin: 30rpx 20rpx;
		padding: 20rpx 0px 0px 20rpx;

	}

	.noData {
		text-align: center;
		font-size: 32rpx;
		margin-top: 240rpx;
		color: #bed0fb;
	}

	.noDataImg {
		width: 250rpx;
		height: 196rpx;
	}

	.item_title {
		margin: 20rpx 20rpx;
		font-weight: 800;
	}

	.item_content {
		margin: 20rpx 20rpx;
	}

	.name {
		margin: 20rpx 20rpx;
	}

	.time {
		margin: 20rpx 20rpx;
	}

	.content {
		/* padding: 40rpx 30rpx 0; */
		box-sizing: border-box;
		width: 100%;
		margin-top: 5%;
	}

	.state {

		font-size: 28rpx;
		margin-top: -40%;
		margin-left: 85%;
	}

	.state2 {
		background: #3579ff;
		width: 89px;
		height: 60rpx;
		border-radius: 28px;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		margin-left: 230px;
		margin-top: 100px;
	}


	.state3 {
		display: none;
	}

	.stateTextColor1 {
		color: #ff9900;
		margin-left: 78%;
		
	}

	.stateTextColor2 {
		color: #0085ff;
	}

	.stateTextColor3 {
		color: #28d061;
	}

	.headerName {
		/* 	width: calc(113% - 100rpx);
		background: #4181fe;
		color: #fff;
		padding-left: 0 !important; */
		/* position: fixed; */
	}
</style>
