<template>
  <div class="container">
    <Header
      v-if="userMobile"
			:token="token"
			:is-scroll="isScroll"
			:share-title1="shareTitle1"
			:share-title2="shareTitle2"
			:share-icon-url="shareIconUrl"
		/>
    <!-- 勤奋分进度 -->
    <div class="progress-container">
      <div class="score-info">
        <div v-if="!userMobile" class="text">
          <img src="../static/images/task-four.png" />
          <span class="tc">我的勤奋分<span>{{12345}}</span></span>
          <span class="bt" @click="selfInfo">个人明细 ></span>
        </div>
        <div v-if="userMobile" class="text">
          <span class="tc">登录可参加活动</span>
          <span class="bt" @click="goToLogin">去登录 ></span>
        </div>
      </div>
      <status-bar 
      class="progress-bar"
      :isLogin="isLogin"/>
    </div>
    <!-- 活动阶段 -->
    <img class="title-text" src="../static/images/step-title.png"/>
    <div class="activity-step">
      <div class="step bt">
        <step 
        :stepFlag="stepFlag"
        :imgSrc="imgSrc1"
        :numText="numText1"
        :stepText="stepText1"
        :stepTime="stepTime1"/>
        <task-activity
        :acToken="token"
        :userMobile="userMobile"
        :acTempId="activityId"
        @activityTaskJump="activityTaskJump" />
      </div>
      <div class="step bt">
        <step 
        :imgSrc="imgSrc2"
        :numText="numText2"
        :stepText="stepText2"
        :stepTime="stepTime2"/>
      </div>
      <div class="step">
        <step 
        :imgSrc="imgSrc3"
        :numText="numText3"
        :stepText="stepText3"
        :stepTime="stepTime3"/>
      </div>
    </div>
    <img class="title-text" src="../static/images/award.png"/>
  </div>
</template>

<script>
import TaskActivity from '../components/task-activity';
import Header from '../components/header/index';
import Step from '../components/step';
import StatusBar from '../components/bussiness/status-bar';
import { getNcovRealReports } from "@/service";

export default {
  components: {
    TaskActivity,
    Header,
    Step,
    StatusBar
  },
  data() {
    return {
      isLogin: false,
      userMobile: '',
      stepFlag: true,
      isWeb: true,
      activityId: 9,
      token: '',
      shareTitle1: '',
      shareTitle2: '',
      shareIconUrl: '',
      isScroll: false,
      imgSrc1: require('@/static/images/score.png'),
      numText1: 1,
      stepText1: '做任务拿勤奋分',
      stepTime1:'3月24日10:00-4月2日16:00',
      imgSrc2: require('@/static/images/beans.png'),
      numText2: 2,
      stepText2: '瓜分云鹊豆',
      stepTime2:'4月3日10:00-4月7日16:00',
      imgSrc3: require('@/static/images/get-award.png'),
      numText3: 3,
      stepText3: '公布排名获奖名单',
      stepTime3:'4月3日10:00-4月7日16:00'
    }
  },
  async asyncData({ $axios }) {

  },
  created() {

  },
  mounted() {},
  methods: {
    async getNcovRealReports() {
      await getNcovRealReports(100).then(res => {
        if (res.code === "000000") {
          this.infoData = res.data || this.infoData;
        }
      });
    },
    // 去登录
    goToLogin() {

    },
    // 查看个人明细
    selfInfo() {
      // this.$router.push({path: "/perdetails",query: {}});
      this.$router.push({path: "/login-point",query: {}});
    },
    // 活动任务
		activityTaskJump(data) {
			//this.jumpPage(data.href, data.id);
    },
    

  } 
}
</script>

<style lang="less">
.container {
  margin: 0 auto;
  min-height: 100vh;
  background: #B72541;
  .title-text {
    width: 100%;
  }
  .progress-container {
    margin: 0 10px 15px;
    .score-info {
      padding: 0 17px;
      height: 48px;
      background:linear-gradient(180deg,rgba(214,86,53,1) 0%,rgba(189,38,65,1) 100%);
      border-radius:10px 10px 0px 0px;
      .text {
        line-height: 48px;
        img {
          float: left;
          width: 30px;
          height: 30px;
          padding: 10px 10px 0px 0px;
        }
        span.tc {
          font-size: 14px;
          font-weight: 700;
          color: #fff;
          span {
            padding-left: 10px;
            font-size: 18px;
            color: #FFE8A5;
          }
        }
        span.bt {
          font-size: 12px;
          float: right;
          color:#FFE8A5;
        }
      }
    }
    .progress-bar {
      padding: 5px 17px;
      height: 87px;
      border-radius: 0px 0px 10px 10px;
    }
  }
  .activity-step {
    margin: 0 10px 15px;
    border-radius: 5px;
    background: #9A1F36;
    .step {
      margin: 0 10px;
    }
    .step.bt {
      border-bottom: 1PX solid #FFE0D9;
    }
  }
  
}
</style>
