<template>
	<view class="taskList">
		<!-- -->
		<u-navbar
			title="工序列表"
			@leftClick="leftClick"
			:safeAreaInsetTop="false"
		>
			<view class="u-nav-slot" slot="right" @click="show = true">
				...
			</view>
		</u-navbar>
		<u-popup :show="show" mode="center" @close="close">
			<view>
				<u-button type="primary" size="small" text="切换账号" @click="changeUser"></u-button>
			</view>
		</u-popup>
		<view v-if="progressList.length!=0" style="margin-top:44px;">
			<view class="taskItem" v-for="(item,index) in progressList" :key="index">
				<!-- <view class="title">工序号：{{index+1}}</view> -->
				
				<view class="item">
					<view class=" rowItem">
					<!-- 	<view>
							工序号：{{index+1}}
						</view> -->
						<view>
							名称：{{item.name}}
						</view>
						
					</view>
					<view class="code rowItem">
						<view>
							编码：{{info.code?info.code:'-'}}
						</view>
						<view class="right">
							数量：{{item.num}}
						</view>
					</view>
					<view class="rowItem">
						<view :class="item.status == 1?'status right':'status right finish'">
							状态：<text>{{ item.status == 1 ? '未完成' : (item.status == 2 ? '进行中' : '已完成')}}</text>
						</view>
						<view class="lookdetails right" @click="goProgress(item)" v-if="item.is_info == 1&&item.is_start == 1">
							开始
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="empty-list">
			<view class="empty-list-content">
				<image src="/static/list-empty.png"></image>
				<p class="empty-list-text">暂无数据</p>
			</view>
		</view>
	</view>
</template>


<script>
	import {getList,logout} from "@/api/user.js"
	export default {
		data() {
			return {
				pageNum:1,
				pageSize:5,
				progressList:[],//展示的数据
				allList:[],
				show:false,
				info:{},
				total:0
			};
		},
		methods:{
			leftClick(){
				uni.reLaunch({
					url:'/pages/taskList/taskList'
				})
			},
			close() {
			  this.show = false
			},
			getData(){
				getList({task_id:this.info.id}).then(res=>{
					
					this.allList = res.data.list
					this.total = res.data.total;
					this.progressList = this.allList.slice(this.pageNum-1,this.pageSize)
					
				})
			},
			changeUser(){
				logout().then(res=>{
					console.log(res)
					uni.redirectTo({
						url: '/pages/login/login'
					})
					uni.removeStorage({
					    key: 'userToken'
					})
					this.$store.commit('logout')
				})
			},
			goProgress(item){
				uni.navigateTo({
					url:'/pages/taskDetail/taskDetail?id='+item.id + '&status='+item.status + '&is_start='+ item.is_start +'&heat_num=' +this.info.heat_num +'&taskId='+this.info.id
				})
				
			}
		},
		onLoad(option) {
			if(uni.getStorageSync('userToken')){
				console.log("已登录",option);
				this.info = option
				this.getData()
			}else{
				uni.redirectTo({
					url:'/pages/login/login'
				})
			}
			
		},
		// 触底的事件
		onReachBottom() {
			if(this.progressList.length<this.total){
				this.pageNum ++
				if(this.progressList.length<this.total){
					let progressList = this.allList.slice((this.pageNum-1)*this.pageSize,this.pageNum*this.pageSize)
					this.progressList.push(...progressList)
				
				}
			}
		  
		}
	}
</script>

<style lang="scss">
	/deep/.u-popup__content{
		border-radius:20upx;
		padding:50upx 70upx;
	}
.taskList{
	min-height: calc(100vh);
	background-color: #F7F8FA;
	.taskItem{
		background: #FFFFFF;
		box-shadow: 0upx 4upx 13upx 0upx rgba(17,21,38,0.06);
		padding:30upx 25upx;
		margin-bottom:20upx;
		.title{
			font-size: 36upx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #333333;
		}
		.item{
			background: #F6F6F6;
			border-radius: 4upx;
			padding:25upx 20upx;
			margin-top:30upx;
			.rowItem{
				margin-bottom:25upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.code{
				font-size: 28upx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #333333;
			}
			.right{
				width:171upx;
			}
			.num{
				font-size: 28upx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #0DC0F4;
			}
			.status{
				font-size: 28upx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #333333;
				text{
					color:#FFAD0F;
				}
			}
			.finish{
				color:#0DC0F4 !important;
			}
			.planTime{
				
				font-size: 24upx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #999999;
			}
			.lookdetails{
				font-size: 24upx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #0076F6;
			}
		}
	}
	.empty-list{
		padding-top:20%;
		text-align: center;
	}
}
</style>
