<template>
	<view class="popup-page" v-show="showModalStatus">
		<view class="popup-box" v-show="showModalStatus">
			<view class="item-box" v-for="(item,index) in planList">
				<view class="radio-item" @click="toggleSelect(item,index)">
					<image class="icon" :src="`/static/${item.isChecked ? 'check-radio' : 'check-no'}.png`"></image>
				</view>
				<text :class="item.nameClass">{{item.name}}（{{item.startDate}} ~ {{item.endDate}}）</text>
				<view class="compeleted-box" v-if="item.isCompeleted">
					<text class="compeleted-text" >已完成</text>
				</view>
				<view class="continued-box" v-if="item.isContinued">
					<text class="continued-text" >进行中</text>
				</view>
				<image class="checked-pic" v-if="item.isContinued" src="../../../static/checkStatus.png"></image>
			</view>
		</view>
		<view class="btn-confirm" @click="saveChange">
			<text class="btn-text">确定</text>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			situationID:String,
		},
		data() {
			return {
				currentType:this.type,//当前类型
				selectedPlanID:'',//选择的计划id
				showModalStatus:false,//查核计划选择弹框
				flag:-3,//是否为进行中计划，判断下一个未开始的查核计划
				planList:[],//查核计划列表
				arrUnstarted:[],//未开始计划数组
				// isCompeleted:false,//计划进行状态，是否已完成，状态的显示
				// isContinued:true,//是否进行中
				// planList:[
				// 	{
				// 		id:'1',
				// 		name:'第1次查核',
				// 		startDate:'2021-02-05',
				// 		endDate:'2021-02-10',
				// 		status:3,
				//   },
				// 	{
				// 		id:'2',
				// 		name:'第2次查核',
				// 		startDate:'2021-02-05',
				// 		endDate:'2021-02-10',
				// 		status:2
				// 	},
				// 	{
				// 		id:'3',
				// 		name:'第3次查核',
				// 		startDate:'2021-02-05',
				// 		endDate:'2021-02-10',
				// 		status:1
				// 	},
				// 	{
				// 		id:'4',
				// 		name:'第4次查核',
				// 		startDate:'2021-02-05',
				// 		endDate:'2021-02-10',
				// 		status:1
				// 	},
				// ],//查核计划列表
			}
		},
		created: function() {
			this.$store.dispatch({
				type: 'situationDetail/commActions',
				payload: {
					key: 'planlList',
					data:{
						situationId:this.situationID
					}
				}
			}).then((data) => {
				if (data) {
					this.planList=data.map((item,index)=>{				
						if(item.status==1){
							this.arrUnstarted.push(item);
							this.flag=this.arrUnstarted[0].id;
						}
						return {
							id:item.id,
							name:item.name,
							startDate:item.startDate,
							endDate:item.endDate,
							status:item.status,
							isCompeleted:item.status==3?true:false,
							isContinued:item.status==2?true:false,
							isChecked:false,
							nameClass:item.id==this.flag?'item-text':'disable-text',
						}
					});
				}
			});
			// this.planList=this.planList.map((item,index)=>{
			// 	if(item.status==2){
			// 		this.flag=index;
			// 	}
			// 	return {
			// 		id:item.id,
			// 		name:item.name,
			// 		startDate:item.startDate,
			// 		endDate:item.endDate,
			// 		status:item.status,
			// 		isCompeleted:item.status==3?true:false,
			// 		isContinued:item.status==2?true:false,
			// 		isChecked:false,
			// 		nameClass:index==this.flag+1?'item-text':'disable-text',
			// 	}
			// });
		},
		methods: {
			show(){
				this.showModalStatus=true;
			},	
			hide(){
				this.showModalStatus=false;
			},
			hidePopupBox(){
				this.hide();
			},
			toggleSelect(item,index) {
				this.planList.map((item,index)=>{
					item.isChecked=false;
				});
				if(item.id==this.flag){
					this.planList[index].isChecked=true;
					this.selectedPlanID=item.id;
				}
				else{
					return;
				}
				
			},
			saveChange(){
				this.$store.dispatch({
					type: 'situationDetail/commActions',
					payload: {
						key: 'planlAdvance',
						data:{
							checkId:this.selectedPlanID
						}
					}
				}).then((data)=>{
					console.log(data);
					this.hide();
				});
			},
		},
	}
</script>

<style lang="less">
	.popup-page{
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		// background: rgba(0,0,0,0.5);
		background-color: #FFFFFF;
		.popup-box{
			width: 100%;
			position: fixed;
			top: 0rpx;
			left: 0rpx;
			z-index: 2000;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			.item-box{
				width: 100%;
				height: 87.5rpx;
				border: 0.62rpx solid #DADEE6;
				.radio-item {
					float: left;
					margin-left: 25rpx;
					margin-top: 30rpx;
				
					.icon {
						width: 25rpx;
						height: 25rpx;
					}
				}
				.item-text{
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #292C33;
					line-height: 87.5rpx;
					margin-left: 25rpx;
					float: left;
				}
				.disable-text{
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #666E80;
					line-height: 87.5rpx;
					margin-left: 25rpx;
					float: left;
				}
				.compeleted-box{
					width: 75rpx;
					height: 31.25rpx;
					border-radius: 8px;
					background: rgba(41, 204, 150, 0.1);
					text-align: center;
					float: left;
					margin-top: 28.12rpx;
					.compeleted-text{
						font-size: 17.5rpx;
						font-family: SourceHanSansCN-Medium, SourceHanSansCN;
						font-weight: 500;
						color: #29CC96;
						line-height: 31.25rpx;
					}
				}
				.continued-box{
					width: 75rpx;
					height: 31.25rpx;
					border-radius: 8px;
					background: rgba(255, 204, 102, 0.1);
					text-align: center;
					float: left;
					margin-top: 28.12rpx;
					.continued-text{
						width: 75rpx;
						height: 31.25rpx;
						font-size: 17.5rpx;
						font-family: SourceHanSansCN-Medium, SourceHanSansCN;
						font-weight: 500;
						color: #FFAA00;
						line-height: 31.25rpx;
					}
				}
				.checked-pic{
					width: 19.37rpx;
					height: 14.37rpx;
					float: right;
					margin-top: 36.87rpx;
					margin-right: 25rpx;
				}
			}
		}
		.btn-confirm {
			width: 750rpx;
			height: 75rpx;
			background: #3377FF;
			position: fixed;
			bottom: 0rpx;

			.btn-text {
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 75rpx;
				margin-left: 352.5rpx;
			}
		}
	}
</style>
