<template>
	<div class="taskDetailPopDivAll">
		<div>
			<div class="titleDiv">
				<img class="titleImage" src="//img10.360buyimg.com/imgzone/jfs/t1/160901/32/33324/58854/637c8a13E64da4d19/e3ba18bcaa79b4ee.png" />
			</div>
			<div class="taskDetailDivAll">
				<div class="taskTitleDivAll">
					<div class="taskListName"><span>任务名称</span></div>
					<div class="taskListName taskDate"><span>完成时间</span></div>
					<div class="taskListName"><span>游戏次数</span></div>
				</div>
				<div class="taskListDiv">
					<div class="taskItemDiv" v-for="(item,index) in taskDetailLsit" :key='index'>
						<div class="taskTypeName">{{item.remark}}</div>
						<div class="taskDate">{{item.time}}</div>
						<div class="taskNum"><span>{{item.score}}</span></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import apis from "../api/api.js";
import { dateChangeYYYY } from "../utils";

let { record } = apis;
	export default{
		data(){
			return{
				taskDetailLsit:[{},{},{}],//任务明细
			}
		},
		created(){
			this.queryData()
			
		},
		methods:{
			queryData(){
				let param = {
					activityId:this.$route.query.activityId
				}
				record(param,(data) =>{
                  
				  this.taskDetailLsit = data.data
				  this.taskDetailLsit.forEach(item =>{
                 item.time = dateChangeYYYY(item.createtime, 1);
            })
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.taskDetailPopDivAll{
		.titleDiv{
			.titleImage{
				width: 5.52rem;
				height: 2.43rem;
			}
		}
		.taskDetailDivAll{
			width: 6.38rem;
			height: 5.79rem;
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/216635/39/24111/18394/637d81c2Eedfea8e6/2b983c1fa7fe881a.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin-left: calc(50% - 6.38rem / 2);
			padding: 0 0.38rem;
			.taskTitleDivAll{
				display: flex;
				flex-direction: row;
				margin-bottom: 0.5rem;
				.taskListName{
					margin-top: 1.38rem;
					flex: 1;
					font-size: 0.28rem;
					color: #000000;
					span{
						border-bottom: 0.02rem solid #000000;	
					}
				}
				.taskDate{
					flex: 3;
				}
			}
			.taskListDiv{
				height: 2.5rem;
				overflow-y: scroll;
				.taskItemDiv{
					display: flex;
					font-size: 0.22rem;
					color: #000000;
					margin-bottom: 0.42rem;
					.taskTypeName{
						flex: 1;
						
					}
					.taskDate{
						flex:3
					}
					.taskNum{
						flex: 1;
						span{
							background: #f8234b;
							color: #FFFFFF;
							padding: 0.05rem 0.07rem;
							margin-top: -.3rem;
							margin-left: 0.13rem;
							height: 0.4rem;
							border-radius: 0.06rem;
							position: relative;
							vertical-align: top;
							&::before{
								content: '';
								position: absolute;
								bottom:-.27rem;
								left: -.16rem;
								width: 0;
								height: 0;
								border-width: .2rem .1rem;
								transform: rotate(45deg);
								border-style: solid;
								border-color: #f8234b transparent transparent transparent;
							
							}
						}
					}
				}
			}
		}
	}
</style>
