<template>
	<view class="content">

		<view v-for="(item,index) in shopData" :key="index">
			<view class="box">

				<!-- name -->
				<view class="nameView">
					<view class="name" v-if="item.State == 1">您有一份待提交的作业</view>
					<view class="type" v-if="item.State == 1" @click="goAppraise(item)">去提交</view>

					<view class="name" v-if="item.State == 2">您有一份待作业的作业</view>
					<view class="type" v-if="item.State == 2" @click="goAppraise(item)">去作业</view>

					<view class="name" v-if="item.State == 3">您有一份待点评的作业</view>
					<view class="type" v-if="item.State == 3" @click="goAppraise(item)">去点评</view>

					<view class="name" v-if="item.State == 4">您有一份待回复的作业</view>
					<view class="type" v-if="item.State == 4" @click="goAppraise(item)">去回复</view>

					<image src="../../static/img/icon_arrow_go.png"
						style="width: 12rpx; height: 22rpx; margin-left: 5rpx;"></image>
				</view>

				<!-- 修理厂名称 -->
				<view class="secondView">
					<view class="shopName">{{item.ShopName}}</view>
					<view class="time" v-if="item.State == 1">{{item.TempTime}}</view>
					<view class="time" v-if="item.State == 3">{{item.SubmitTime}}</view>
				</view>

			</view>
		</view>

		<!-- 上拉 加载更多 -->
		<view class="noMore" v-if="noMoreShow">没有更多数据</view>
		<!-- 无数据空白页 -->
		<view class="nodataBox" v-if="shopData.length == 0">
			<image src="../../static/img/pic_empty_def.png" mode="widthFix" class="nodataImg"></image>
			<view class="noTxt">暂无数据</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopData: [],
				page: 1,
				noMoreShow: false,
			}
		},
		onShow() {
			this.page = 1
			this.getData()
		},
		methods: {
			goAppraise(v) {
				uni.navigateTo({
					url:'../reportManage/reportDetail?id='+v.ID
				})
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				})
				let url = 'accompany/SuperAccounts/listMyTodoPage',
					params = {
						page: this.page,
						limit: 20,
						
					}
				this.$http(url, params, 'GET').then(res => {

					var list = res.data.Items

					// 处理 undefined和null转为空白字符串
					list.forEach((item, index) => {
						for (const key in item) {
							item[key] = this.$praseStrEmpty(item[key])
						}
					})

					
					if (this.page == 1) {
						this.shopData = list
					} else {
						this.shopData = this.shopData.concat(list)
					}
					
					if(list.length < 10){
						this.noMoreShow = false
					}
					else {
						this.noMoreShow = true
					}
					
				})
			}
		},
		// 下拉刷新 上拉加载更多

		onPullDownRefresh() {
			this.getData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.page++
			this.getData()
		}
	}
</script>

<style>
	.content {
		background-color: #F4F5F7;
		min-height: 100vh;
		padding: 20rpx 24rpx;
	}

	.box {
		margin: 20rpx 0rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.nameView {
		padding: 32rpx 20rpx 15rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}


	.name {
		font-size: 28rpx;
		font-weight: bold;
		color: #3C3C3C;
		flex-grow: 1;
	}

	.type {
		font-size: 28rpx;
		color: #FF4F00;
	}

	.secondView {
		padding: 15rpx 20rpx 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.shopName,
	.time {
		font-size: 24rpx;
		color: #666666;
	}

	/* 空白页css */
	.nodataBox {
		text-align: center;
	}

	.nodataImg {
		width: 400rpx;
		padding-top: 300rpx;
	}

	.noTxt {
		font-size: 30rpx;
		color: #999999;
		padding-top: 50rpx;
	}

	.noMore {
		text-align: center;
		line-height: 50rpx;
		color: #999999;
		font-size: 28rpx;
	}
</style>
