<template>
	<view>
		<view>
			<view style="position: fixed;top: 100rpx;background-color: #FFFFFF;">
				<QSTabs :current="current_1" line2Style="tab-line1" defaultColor="#888" activeColor="#008B8B" :tabs="tabList" width="245"
				 @change="tabChange($event, '1')" />
				<view class="search">
					<view class="input-box">
						<input class="input-font" placeholder="请输入关键字" type="text" v-model="keyword" confirm-type="search"
						 placeholder-class="input-placeholder" @confirm="searchInput" @input="inputTextChange" />
						<image src="../../static/ic_search.png" style="width: 70rpx;height: 70rpx;margin-right: 20rpx;"></image>
					</view>
				</view>
			</view>
			<view style="margin-top: 160rpx;">
				<view v-if="evaluationCurList.length>0" style="display: flex;flex-direction: column;justify-content: center;width: 100%;">
					<view class="content" v-for="(evaluation,index) in evaluationCurList" :key="index" @tap="itemClick(evaluation)"
					 :data-taskid="evaluation.taskId">
						<view class="item-li">
							<view class="item-title">{{index + 1}}.{{evaluation.taskName}}</view>
							<view class="item-content">{{evaluation.evaluationName}}</view>
							<view class="item-bottom-box">
								<view class="item-tag-box">
									<view class="item-time">
										{{evaluation.taskStartTime.substring(0, 10)}}至{{evaluation.taskEndTime.substring(0, 10)}}
									</view>
									<view class="item-tag">
										<view v-if="evaluation.taskType === 1" style="display: flex;flex-direction: row;">
											<view style="color: #000000;">{{evaluation.taskTypeContent.split('|')[1]}} </view>
											<view style="color: #757575;"><text>&nbsp;</text>[被测评部门]</view>
										</view>
										<view v-if="evaluation.taskType === 2" style="display: flex;flex-direction: row;">
											<view style="color: #000000;">{{evaluation.taskTypeContent.split('|')[2]}}</view>
											<view style="color: #757575;"><text>&nbsp;</text>[被测评人员]</view>
										</view>
									</view>
								</view>
								<view class="item-count-tag">
									<view class="item-count-yet">{{evaluation.taskRecordSubmitCount.substring(0,evaluation.taskRecordSubmitCount.lastIndexOf('|'))}}
									</view>
									<text style="color: #FFFFFF;" space="emsp" decode="true">{{divider}}</text>
									<view class="item-count-not">
										{{evaluation.taskRecordSubmitCount.substring(evaluation.taskRecordSubmitCount.lastIndexOf('未'),evaluation.taskRecordSubmitCount.length)}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<emptyView></emptyView>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import common from '../../common/common.js'
	import QSTabs from '@/components/QS-tabs/QS-tabs.vue'
	import yomolUpgrade from '@/components/yomol-upgrade/yomol-upgrade.vue'
	import tuiSticky from "@/components/sticky/sticky.vue"
	var _self;
	export default {
		components: {
			QSTabs,
			yomolUpgrade,
			tuiSticky
		},
		data() {
			return {
				token: '',
				scrollTop: 0,
				current_1: 0,
				keyword: '',
				divider: '&nbsp;|&nbsp;',
				evaluations: [],
				evaluationCurList: [],
				TabCur: 0,
				tabList: [{
						"name": "当前任务",
						"value": "1"
					}, {
						"name": "历史任务",
						"value": "2"
					},
					{
						"name": "暂存任务",
						"value": "3"
					}
				],
				curTaskId: ''
			}
		},
		onShow() {
			var appToken = uni.getStorageSync('appToken');
			if (!appToken) {
				uni.reLaunch({
					url: '../login/index'
				});
			}
			_self.token = appToken
			_self.initData()
		},
		onLoad(res) {
			_self = this;
			var appToken = uni.getStorageSync('appToken');
			if (!appToken) {
				uni.reLaunch({
					url: '../login/index'
				});
			}
			_self.token = appToken
			_self.curTaskId = res.id
			_self.initData()

		},
		methods: {
			inputTextChange(e) {
				if (e.target.value == '') {
					_self.initData()
				}
			},
			searchInput(e) {
				if (e.target.value != '') {
					setTimeout(() => {
						_self.searchData()
					}, 1000);
				}
			},
			searchData() {
				uni.hideKeyboard()
				if (_self.evaluations != null && _self.evaluations.length > 0) {
					_self.evaluationCurList = []
					for (var i = 0; i < _self.evaluations.length; i++) {
						if (_self.evaluations[i].taskName.search(_self.keyword) != -1) {
							_self.evaluationCurList.push(_self.evaluations[i])
						}
					}
				}
			},
			initData() {
				uni.showLoading({
					title: '加载中...',
				})
				var self = this;
				var listUrl = common.evalutaionBaseUrl + '/app/apptask/listtaskbyevaluationidandtaskid/' + _self.curTaskId;
				var taskType = '0'
				switch (_self.TabCur) {
					case 0:
						taskType = '0'
						break;
					case 1:
						taskType = '1'
						break;
					case 2:
						taskType = '2'
						break;
				}
				uni.request({
					url: listUrl,
					data: {
						taskRecordIsSubmit: taskType
					},
					header: {
						'token': _self.token
					},
					success(res) {
						uni.hideLoading()
						_self.evaluationCurList = []
						if (res.data != undefined && res.data.length > 0) {
							if (_self.keyword != '') {
								for (var i = 0; i < res.data.length; i++) {
									if (res.data[i].taskName.search(_self.keyword) != -1) {
										_self.evaluationCurList.push(res.data[i])
									}
								}
							} else {
								_self.evaluations = res.data
								_self.evaluationCurList = res.data
							}
						} else {
							_self.evaluations = [];
							_self.evaluationCurList = []
						}
					},
					fail(error) {
						uni.hideLoading()
						uni.showToast({
							title: '加载失败,请重试',
							duration: 2000
						})
						_self.evaluations = [];
						_self.evaluationCurList = []
					}
				})
			},
			itemClick(e) {
				switch (_self.TabCur) {
					case 0: //当前任务
						uni.navigateTo({
							url: '../evaluation/doEvaluation?taskId=' + e.taskId
						})
						break;
					case 1:
						uni.navigateTo({
							url: '../evaluation/missionDetail?taskId=' + e.taskId + '&rid=' + e.taskRecordId
						})
						break;
					case 2:
						uni.navigateTo({
							url: '../temp/doTempEval?taskId=' + e.taskId + '&trid=' + e.taskRecordId
						})
						break;
				}

			},
			tabChange(index, i) {
				this['current_' + i] = index;
				this.TabCur = index;
				_self.initData()
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		display: flex;
		margin-top: 20rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.search {
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: row;
		margin-top: 10rpx;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
	}

	.input-box {
		margin-top: 10rpx;
		width: 90%;
		min-height: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background-color: #F5F5F5;
		border: #666666 solid #555555;
		border-radius: 20rpx;
	}

	.input-font {
		color: #000000;
		width: 90%;
		margin-left: 10rpx;
		padding-left: 10rpx;
		align-self: center;
		font-size: 30rpx;
		min-height: 50rpx;
		border: #666666 solid #555555;
		border-radius: 15rpx;
	}

	.item-count {
		font-size: 15rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.item-li {
		display: flex;
		flex-direction: column;
		height: auto;
		align-self: center;
		justify-content: space-between;
		align-items: flex-start;
		width: 92%;
		min-height: 180rpx;
		background: #FFFFFF;
		/* background: #008B8B; */
		padding: 15rpx;
		border-radius: 10rpx;
		box-shadow: 3rpx 3rpx 5rpx #d9d9d9;
	}

	.item-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}

	.item-content {
		font-size: 30rpx;
		color: #000000;
	}

	.item-count-tag {
		display: flex;
		font-size: 20rpx;
		color: #000000;
		background: #008B8B;
		padding: 10rpx;
		height: 35rpx;
		align-items: center;
		text-align: center;
		border-radius: 10rpx;
		box-shadow: 8rpx 8rpx 10rpx #d9d9d9;
	}

	.item-count-yet {
		color: #FFFFFF;
	}

	.item-count-not {
		color: #f9e9c3;
	}

	.item-tag-box {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.item-bottom-box {
		display: flex;
		margin-top: 15rpx;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.item-time {
		font-size: 25rpx;
		color: #000000;
	}

	.item-tag {
		color: #888888;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		text-align: left;
		font-size: 25rpx;
	}
</style>
