<template>
  <section class="personal-detail">
    <Header
			:is-scroll="isScroll"
			:share-title1="shareTitle1"
			:share-title2="shareTitle2"
      :prePage="prePage"
		/>
    <section class="personal-details-wrapper">
      <article class="user">
        <img class="user-img" src="../../assets/user-header.png" alt="">
        <div class="profile">
          <img :src="avatalImage" alt="">
          <div class="desc">
            <span class="score">{{allScore}}</span>
            <span class="text">我的勤奋分</span>
          </div>
        </div>
      </article>
      <DetailList :dataList="taskDataList"></DetailList>
      <!-- <DetailBtn v-show="false" needBT=true @btnClick="goBack"></DetailBtn> -->
    </section>
  </section>
</template>
<script>
import DetailList from '@/components/bussiness/detail-list';
// import DetailBtn from '@/components/bussiness/detail-btn';
import Header from '../../components/header';
import { getSelfActivity } from "@/service";
export default {
  components: {
    Header,
    DetailList,
    // DetailBtn
  },
  data() {
    return {
      prePage: true,
      token: '222',
      shareTitle1: '个人明细',
      shareTitle2: '',
      shareIconUrl: '',
      isScroll: true,    
      activityId: 0,
      avatalImage: '',
      allScore: 0,
      token: '',
      taskDataList: []
    }
  },
  created() {
    this.activityId = this.$route.query.id;
    this.avatalImage = this.$route.query.avatarImage;
    this.allScore = this.$route.query.score;
    this.token = this.$route.query.token;
    this.getSelfActivity();
  },
  methods: {
    goBack() {
      if(this.$rocNative.isWeb) {
        this.$router.go(-1);
      } else {
        this.$rocNative.goBack();
      }
    },
    // 获取个人明细列表
    getSelfActivity() {
      getSelfActivity({id: this.activityId, token: this.token}).then(res => {
        if(res.data.personalDetails && res.data.personalDetails.length > 0) {
          this.taskDataList = res.data.personalDetails;
        }
      })
    }
  }
}
</script>
<style lang="less">
  .personal-details-wrapper {
    padding: 70px 0 60px; 
    .user {
      position: relative;
      top: 0;
      left: 0;
      z-index: 1;
      &-img {
        // width: 100%;
        height: 114px;
      }
      .profile {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        display: flex;
        flex-direction: row;
        height: 90px;
        margin: 0 15px;
        align-items: center;
        img {
          width: 50px;
          height: 50px;
          border-radius: 25px;
        }
        .desc {
          // flex: 1;
          width: 80px;
          display: flex;
          flex-direction: column;
          // margin-left: 15px;
          text-align: center;
          .score {
            height: 18px;
            line-height: 18px;
            font-size: 24px;
            font-weight: 700;
            color: rgba(255,232,165, 1);
          }
          .text {
            height: 18px;
            line-height: 18px;
            margin-top: 6px;
            font-size: 12px;
            font-weight: 400;
            color: #FFE8A5;
            border: 1px solid rgba(255,232,165, 0.8);
            border-radius: 9px;
          }
        }
      }
    }
    // .user-img {
    //   width: 100%;
    //   height: 114px;
    // }
  }
</style>