<template>
	<mescroll-body class="containter" ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
		<view class="news-li" v-for="news in dataList" :key="news.id" hover-class="hover" @click="goDetail(news)">
			<view  class="top-container" >
				<text class="title">{{news.name}}</text>
				<view :class="news.color=='finish' ? 'status-finish' : 'status' ">
					<text :class="news.color=='finish' ? 'status-finish-text' : 'status-text' ">{{news.taskstatus}}</text>
				</view>
			</view>
			<view><text class="des">{{news.check_point}}</text></view>
			<view><image class="icon" src="../../static/security-check/safeTime.png"><text class="detail">{{JSON.parse(news.schedule).startdate}}~{{JSON.parse(news.schedule).enddate}}</text></view>
			<view style="display: flex;flex-direction: row;align-items: center;">
				<image  class="icon" src="../../static/security-check/safeSys.png">
				<view style="display: flex;flex-direction: column;" v-for="(data,index) in JSON.parse(news.check_scope)" :key="index" >
					<text class="detail">{{data.name}}</text>
				</view>
			</view>
			<view><image  class="icon" src="../../static/security-check/safePerson.png"><text class="detail">{{news.taskexecutor}}</text></view>
			<view><text class="type">{{news.taskTypeTitle}}</text></view>
		</view>
	</mescroll-body>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				dataList: [],
				upOption: {
					use: false, // 是否启用上拉加载; 默认true
				},
			}
		},
		methods: {
			onLoad() {
			  this.loadData();
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调 */
			upCallback(page) {
			
			},
			/*获取列表*/
			loadData(){
				var body = {};
				var user = {};
				console.log(this.GLOBALUTIL.user)
				user.id = this.GLOBALUTIL.user.userid;
				user.name = encodeURI(this.GLOBALUTIL.user.username);
				uni.request({
				    url: this.GLOBALUTIL.url+'/safety/v1/check-tasks?page_size=200&page_number=1', 
					method: 'GET',
				    header: {
				        'Accept': 'application/json',
				        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
						 'user' : JSON.stringify(user)
				    },
					body:null,
				    success: (res) => {
						var data = res.data.data;
						data.map((opt)=>{
							opt.taskstatus = (this.handleStatus(opt)).text;
							opt.color = (this.handleStatus(opt)).color;
							var taskexecutor = JSON.parse(opt.excutor);
							var taskexecutortext = "";
							taskexecutor.map((opt)=>{
								taskexecutortext = opt.name +" ";
							})
							opt.taskexecutor = taskexecutortext;
							opt.taskTypeTitle = opt.auto_task?"上级下发":"自建任务"
						})
						this.dataList = data;
				    }
				})
			},
			handleStatus(data){
				var text = "";
				var color = ""
				if(data.execute_state){
					var check_scope = JSON.parse(data.check_scope);
					text = "已完成" + check_scope.length +"/" + check_scope.length;
					color = "finish"
				}else{
					var check_scope = JSON.parse(data.check_scope);
					var checked = 0;
					check_scope.map((opt)=>{
						if(opt.execute_state){
							checked++
						}
					})
					if(checked == check_scope.length){
						text = "已完成 " + check_scope.length +"/" + check_scope.length;
						color = "finish"
					}else{
						text = '未完成 '+checked+'/'+check_scope.length;
						color = "unfinish"
					}
				}
				return {text:text,color:color}
			},
			goDetail(data){
				uni.navigateTo({
					url:"./select-checkobject?taskId="+data.id
				})
			}
		}
	}
</script>

<style>
	/*说明*/
	.notice{
		font-size: 30upx;
		padding: 40upx 0;
		border-bottom: 1upx solid #eee;
		text-align: center;
	}
	/*展示上拉加载的数据列表*/
	.news-li{
		font-size: 32upx;
		padding: 32upx;
		border-bottom: 1upx solid #eee;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.news-li .new-content{
		font-size: 28upx;
		margin-top: 10upx;
		margin-left: 20upx;
		color: #666;
	}
	.icon {
		width:20rpx;
		height:20rpx;
		margin-right: 20rpx;
	}
	.top-container {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.status {
		width:170rpx;
		height:35rpx;
		background-color: rgba(242,115,115,0.10);
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 35rpx;
	}
	.status-finish {
		width:170rpx;
		height:35rpx;
		background-color: rgba(47,190,178,0.10);
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 35rpx;
	}
	.status-text{
		color: #F27373;
		font-size: 11px;
	}
	.status-finish-text{
		color: #2FBEB2;
		font-size: 11px;
	}
	.hover{
		opacity: 0.7;
	}
	.title {
		font-size: 17px;
		font-weight: 300;
	}
	.des {
		font-weight:200;
		font-size:14px;
		color:#676767
	}
	.detail {
		font-size:14px;
	}
	.type {
		font-size:14px;
	}
	.containter{
		display: flex;
		width: 100%;
	}
</style>
