<template>
	<view>
		<view class="fixedheader">
			<headers :showBack="true" themeType="white">
				<view class="headerName">
					进度管理系统
				</view>
			</headers>
			<view class="tab flex2" style="background-color: #fff;">
				<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>
		<view class="content" :style="{paddingTop: mobileTopHeight + 80 + 'px'}">
			<!-- <view class="title_list">
        <view>任务列表</view>
        <view class="title_right">任务数 <span>{{ numberTasks }}</span></view>
      </view> -->
			<view class="item" v-if="listData.length>0" v-for="(item,index) in listData" :key="index"
				@click="goToDetail(item)">
				<view class="leftTopNum">
					<image class="img" src="/static/listIcon1.png"></image>
					<view class="num">{{ index + 1 }}</view>
				</view>
				<view class="rightTopStatus" :class="item.auditType == 2
                        ? 'audit-pass':item.auditType == 3
                        ?'no-pass':'is-pending'">{{
                item.auditType == 2
                  ? "审核通过"
                  : item.auditType == 3
                  ? "已驳回"
                  : "待审核"
              }}</view>

				<view class="item_title">
					<text>任务名称:</text>
					<text class="item_text">{{ item.taskName }}</text>
				</view>
				<view class="item_content">
					<text>所属承包商:</text>
					<text class="item_text">{{ item.enterpriseName }}</text>
				</view>
				<view class="item_content">
					<text>所属厂区:</text>
					<text class="item_text">{{ item.regionName }}</text>
				</view>
				<view class="item_content">
					<text>上报时间:</text>
					<text class="item_text">{{ item.uploadDate }}</text>
				</view>
				<view class="item_content">
					<text>上报进度:</text>
					<text class="item_text">{{ item.progressRatio }}</text>
				</view>
				<view class="item_content">
					<text>上报人:</text>
					<text class="item_text">{{ item.uploadUserName }}</text>
				</view>
				<!-- <view class="item_content">负责人: <span class="item_text"
                                                 style="margin-left: 70rpx;">{{ item.dutyUserName }}</span></view>
        <view class="rightBottomStatus" @click="startTask(item)"
              v-if="item.status==0 && item.dutyUserId === dutyUserId">
          开始任务
        </view>
        <view class="rightBottomStatus" style="background: #f7f8fa;color: #9f9f9f;"
              v-if="item.status==0 && item.dutyUserId !== dutyUserId">
          开始任务
        </view> -->
				<!-- <view class="rightBottomStatus" @click="startTask(item)" v-if="item.status==1 && condition.dutyUserId === dutyUserId">
          继续任务
        </view>
        <view class="rightBottomStatus" @click="startTask(item)"v-if="item.status==2">
          查看详情
        </view> -->
				<!-- <view class="textColor rightBottomStatus">
          开始任务
        </view> -->
			</view>
		</view>
		<view class="noData" v-if="listData.length==0">
			<image class="noDataImg" src="/static/noData.png"></image>
			<view>暂无数据</view>
		</view>
		<!-- <view class="footers_box">
      <ul>
        <li @click="footersChangTab(0)">
          <view class="icon_box">
            <image v-if="tabIndex == 0" class="tabIcon" src="/static/footerIcon2.png"></image>
            <image v-else class="tabIcon" src="/static//footerIcon1.png"></image>
          </view>
          <view class="icon_box" :class="{ active: tabIndex == 0 }">全部任务</view>
        </li>
        <li @click="footersChangTab(1)">
          <view class="icon_box">
            <image v-if="tabIndex == 1" class="tabIcon" src="/static/footerIcon4.png"></image>
            <image v-else class="tabIcon" src="/static/footerIcon3.png"></image>
          </view>
          <view class="icon_box" :class="{ active: tabIndex == 1 }">我的任务</view>
        </li>
      </ul>
    </view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobileTopHeight: 0,
				tabIndex: 0,

				//------------
				type: 1,
				listData: [],
				checkedTab: 1,
				condition: {
					pageNo: 1,
					pageSize: 10,
					projectSn: "",
					status: 0, //0未开始 ,1进行中，2已完成，3已逾期 默认未开始
					projectSn: '',
				},
				finishDate: ',',
				actualFinishDate: '',
				teach: true,
				numberTasks: 0,
				dutyUserId: '',
				option: {}
			}
		},
		onLoad(option) {
			console.log(option, 666)
			if (option) {
				this.option = option
			}
			this.dutyUserId = JSON.parse(uni.getStorageSync('userInfo')).userId
			this.condition.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			// 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();
			}
		},
		mounted() {
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
					uni.setStorageSync('systemInfo', res)
					console.log(res)
				}
			})
			console.log('this.mobileTopHeight', this.mobileTopHeight)
		},
		methods: {
			//点击开始任务
			startTask(item) {
				let itemFromString = JSON.stringify(item)
				uni.navigateTo({
					url: './detail?itemFrom=' + itemFromString + '&type=' + this.checkedTab
				})
			},
			goToDetail(item) {
				// 跳转到记录详情
				uni.navigateTo({
					url: './auditDetail?obj=' + JSON.stringify(item)
				})
			},
			footersChangTab(val) {
				//底部tab切换
				this.tabIndex = val;
				this.listData = [];
				this.condition.pageNo = 1;
				this.condition.pageSize = 10;
				this.condition.dutyUserId = '';
				if (val == 1) {
					this.condition.dutyUserId = this.dutyUserId
				} else {
					this.condition.dutyUserId = ''
				}
				this.getListData();
			},
			//切换顶部状态tab
			changeTab(type) {
				console.log('点击tab切换有反应=====================', 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.numberTasks = 0
					this.condition.taskName = ''
					this.condition.startDate = ''
					this.condition.actualStartDate = ''
					this.condition.dutyUserName = ''
					this.status = 0
				} else if (this.checkedTab == 1) {
					this.numberTasks = 0
					this.condition.taskName = ''
					this.condition.startDate = ''
					this.condition.actualStartDate = ''
					this.condition.dutyUserName = ''
					this.status = 1
				} else {
					this.numberTasks = 0
					this.condition.taskName = ''
					this.condition.startDate = ''
					this.condition.actualStartDate = ''
					this.condition.dutyUserName = ''
					this.status = 2
				}
				let that = this;
				let requestData = {
					...that.condition,
					...that.option,
					isApprovalList: 1
				}
				if (this.checkedTab == 1) {
					requestData.isAudit = 0
				} else {
					requestData.isAudit = 1
				}
				this.sendRequest({
					url: 'xmgl/xzTaskProgressContent/page',
					method: 'get',
					data: requestData,
					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;
							that.numberTasks = newArr.length
							console.log('进度数据', that.listData)
						} else {
							that.teach = false;
						}
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.fixedheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;

		.headerName {
			z-index: 1;
		}
	}

	.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: 50%;
		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: 500rpx;
		width: 92%;
		margin: 30rpx 20rpx;
		padding: 20rpx 0px 0px 20rpx;
		// position: relative;

	}

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

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

	.item_title {
		margin: 50rpx 0 0 30rpx;
		font-weight: 800;
	}

	.item_content {
		margin: 30rpx;
		color: #8c8c8c;
		display: flex;

		// align-items: center;
		text:nth-child(1) {
			display: inline-block;
			white-space: nowrap;
		}
	}

	.item_text {
		margin-left: 40rpx;
	}

	.time {
		margin: 20rpx 20rpx;
	}

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

	.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; */
	}

	.footers_box {
		background-color: white;
		display: flex;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 120rpx;
		z-index: 9999;
		border-top: 1px solid rgba(151, 151, 151, 0.15);

		ul {
			display: flex;
			list-style: none;
			padding: 0;
			width: 100%;
			justify-content: space-between;
			align-items: center;


			li {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 22rpx;
				color: #9495ad;
				height: 100rpx;
				position: relative;
				list-style: none;

				.tabIcon {
					width: 50rpx;
					height: 50rpx;
					margin-top: 16rpx;
				}

				.icon_box {
					flex: 1;
				}

				.tabIcon_more {
					width: 50rpx;
					height: 50rpx;
					margin-top: 0;
				}

				.active {
					color: #107eee;
				}
			}
		}

	}

	.title_list {
		background: #f7f8fa;
		height: 80rpx;
		display: flex;
		margin: 0 20rpx;
		line-height: 80rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		border-radius: 10rpx;

		.title_right {
			margin-left: 400rpx;
			color: #a4a4a5;

			span {
				color: #5680fa;
				margin-left: 20rpx;
			}
		}
	}

	.leftTopNum {
		position: absolute;

		.img {
			width: 70rpx;
			height: 50rpx
		}

		.num {
			position: absolute;
			top: 0;
			left: 10rpx;
			color: #fff;
			font-size: 24rpx;
		}

	}

	.rightTopStatus {
		width: 100rpx;
		height: 40rpx;
		border-radius: 20rpx;
		position: absolute;
		right: 50rpx;
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.audit-pass {
		background: #10B12A;
	}

	.no-pass {
		background: #EB3B43;
	}

	.is-pending {
		background: #E79538;
	}

	.rightBottomStatus {
		position: absolute;
		right: 50rpx;
		width: 150rpx;
		height: 50rpx;
		background: #4179f6;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		line-height: 50rpx;
		border-radius: 25rpx;
		margin-top: -76rpx;
	}

	.textColor {
		background: #f5f5f5;
		color: #a4a4a5;
	}
</style>