<template>
  <div>
    <div class="floatBox" ref="floatBox">
      <div class="head">
        <img class="bg" :src="rankBg" alt>
        <div class="content">
          <div class="avatar">
            <img class="header-icon" :src="userDetail.avatar">
            <span class="name">{{userDetail.nickname}}</span>
          </div>
          <div class="text">
            <div class="count">{{starNum}}</div>
            <div>星星总数</div>
          </div>
        </div>
      </div>
      <div class="secTitle anActivity" v-if="starNum==0">
        <span class="line"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 还没有星星记录哦~ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="line"></span>
      </div>
      <div class="secTitle" v-if="starNum!=0&&starInfo.code!=500">
        <div :class="{item:true}" @click="tabChange(1)">
          <span v-if="tabIndex==1" class="activity">
            <img :src="starPage.star_img_title" alt> 星星活动
          </span>
          <span v-if="tabIndex==2">星星活动</span>
        </div>
        <div :class="{item:true}" @click="tabChange(2)">
          <span v-if="tabIndex==2" class="activity">
            <img :src="starPage.star_img_title" alt>星星记录
          </span>
          <span v-if="tabIndex==1">星星记录</span>
        </div>
      </div>
      <div class="secTitle anActivity" v-if="starNum!=0&&starInfo.code==500">
        <span class="line"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 星星记录 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="line"></span>
      </div>
    </div>
    <swiper class="scroll" :options="swiperOption" ref="mySwiper">
      <swiperSlide v-if="starNum!=0&&starInfo.code!=500">
        <scroll
          ref="scrollItem"
          class="scrollItem"
          :data="starList"
          :bounce="false"
        >
          <div class="container">
            <div class="stageBox" v-if="starInfo.code!=2001">
              <div
                class="result"
                v-if="starInfo.code!=2003&&starInfo.code!=2004&&starInfo.activity_result&&starInfo.activity_result.result!=15&&starInfo.activity_result.result!=16"
              >
                <div class="float">结果公示</div>
                <div v-if="starInfo.activity_result.result==11">
                  <h2>恭喜两个阶段全勤挑战成功</h2>
                  <p>赠送 猜猜我是谁系列双语洞洞书（4册）</p>
                  <p>培生预备级英语启蒙绘本（35册）</p>
                  <div class="imgbox">
                    <img :src="starPage.star_prize1" alt>
                    <img :src="starPage.star_prize2" alt>
                  </div>
                </div>
                <div
                  v-if="starInfo.activity_result.result==12||starInfo.activity_result.result==13"
                >
                  <h2>恭喜第一阶段全勤挑战成功</h2>
                  <p>赠送 猜猜我是谁系列双语洞洞书（4册）</p>
                  <div class="imgbox">
                    <img :src="starPage.star_prize1" alt>
                  </div>
                </div>
                <div v-if="starInfo.activity_result.result==14">
                  <h2>恭喜第二阶段全勤挑战成功</h2>
                  <p>赠送 培生预备级英语启蒙绘本（35册）</p>
                  <div class="imgbox">
                    <img :src="starPage.star_prize2" alt>
                  </div>
                </div>
                <div class="addr" @click="goAddr()" v-if="!addressObj">
                  点击这里，快去填写收货地址吧
                  <i class="iconfont icon-youjiantou"></i>
                </div>
                <div class="addr" @click="goAddr" v-if="addressObj">
                  <span>
                    {{addressObj.receive_name}}&nbsp;{{addressObj.receive_mobile}}&nbsp;
                    {{addressObj.province_name}}{{addressObj.city}}{{addressObj.area}}{{addressObj.address}}
                  </span>
                  <i class="iconfont icon-youjiantou"></i>
                </div>
                <div
                  class="tip" >注意：请于{{starInfo.start_twenty_five}}之前填写完您的收货地址，否则无法寄送礼品，过期不填视为放弃领取机会</div>
              </div>
              <div
                v-if="starInfo.code!=2003&&starInfo.activity_result&&(starInfo.activity_result.result==15||starInfo.activity_result.result==16)"
                class="result fal"
              >
                <div class="float">结果公示</div>
                <div v-if="starInfo.activity_result.result==15">
                  <div class="fal_title">很抱歉第一阶段全勤挑战失败</div>
                  <div class="fal_tip">还有机会，第二阶段加油哦！</div>
                </div>
                <div v-if="starInfo.activity_result.result==16">
                  <div class="fal_title">很抱歉两个阶段全勤挑战失败</div>
                  <div class="fal_tip">学习没有终点，任何时候都是一个起点</div>
                </div>
              </div>
              <div class="stageitem">
                <img class="left" :src="starPage.star_img_xingxing" alt>
                <div class="right">
                  <div class="title">第一阶段全勤星星</div>
                  <div class="date">{{starInfo.start_at}}~{{starInfo.first_over_at}}</div>
                  <div class="count">
                    <span class="add">{{starInfo.user_category_integral_last_ten}}/20</span>
                    <img :src="starPage.star_inner" alt>
                  </div>
                  <div class="tip" v-on:click="goDetail(1,$event)">
                    查看明细
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                </div>
              </div>
              <div class="stageitem">
                <img class="left" :src="starPage.star_img_xingxing" alt>
                <div class="right">
                  <div class="title">第二阶段全勤星星</div>
                  <div class="date">{{starInfo.start_at}}~{{starInfo.second_over_at}}</div>
                  <div class="count">
                    <span class="add">{{starInfo.user_category_integral_last_twenty}}/40</span>
                    <img :src="starPage.star_inner" alt>
                  </div>
                  <div class="tip" @click="goDetail(2,$event)">
                    查看明细
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                </div>
              </div>
              <div class="rule">
                <p>活动说明：</p>
                <p>1.活动期限为您开课的第1天至第20天；</p>
                <p>2.阶段全勤星星达到目标即可活动小礼品一份；</p>
                <p>3.活动仅统计“学习奖励”星星，由分享学习成绩获得“分享奖励”星星不记做统计；</p>
                <p>4.开课日起第11天至25天为奖励公示期，此页面将开放阶段任务是否达成，已达成任务的可填写奖品邮寄地址，逾期未填写地址视为自愿放弃活动奖励；</p>
                <p>5.开课日起第26天至第30天开始奖励邮寄，已经寄出的奖励可在收货地址页面找到快递单号信息。</p>
              </div>
              <div class="showRs" v-if="starInfo.code==2003" @click="goResult">
                查看活动结果
                <i class="iconfont icon-youjiantou"></i>
              </div>
            </div>
            <div class="unStart" ref="unStart" v-if="starInfo.code==2001">
              <img :src="starPage.star_img_0" alt>
              <p>活动时间{{starInfo.start_at}}~{{starInfo.over_at}}</p>
            </div>
          </div>
        </scroll>
      </swiperSlide>
      <swiperSlide>
        <scroll
          v-if="starNum!=0"
          ref="scrollItem"
          class="scrollItem"
          :data="starList"
          :pullup="pullup"
          :bounce="false"
          @pullup="onReachBottom"
        >
          <div class="itemBox">
            <div class="item" v-for="(item,index) in starList" :key="index">
              <div class="left">
                <p>{{item.desc}}</p>
                <p class="date">{{item.created_at}}</p>
              </div>
              <div class="right">
                <span v-if="item.is_add==1" class="add">+{{item.value}}</span>
                <span v-if="item.is_add==0" class="reduce">-{{item.value}}</span>
                <img :src="starPage.star_inner" alt>
              </div>
            </div>
            <div v-if="finished" class="none">没有更多了~</div>
          </div>
        </scroll>
      </swiperSlide>
    </swiper>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import rankBg from "../../assets/rankBg.png";
import { starPage } from "../../util/imgUrl";
import {
  getUserIntegralApi,
  getUserIntegralListApi,
  getStarInfoApi,
  getActivityAddressApi
} from "../../service/api";
import { Toast } from "vant";
export default {
  name: "starRank",
  data() {
    let that = this;
    return {
      height: 0,
      pullup: true,
      rankBg: rankBg,
      starNum: "",
      userDetail: {},
      loading: true,
      finished: false,
      starPage: starPage,
      starList: [],
      page: 1,
      offset: 30,
      tabIndex: 2,
      addressObj: false,
      starInfo: {
        code: ""
      },
      swiperOption: {
        on: {
          slideChangeTransitionEnd: function() {
            console.log(this.activeIndex);
            that.tabIndex = this.activeIndex + 1;
          }
        }
      }
    };
  },
  components: { swiper, swiperSlide },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    goResult() {
      this.starInfo.addressObj = this.addressObj
      this.$router.push({
        name: "starResult",
        query: { starInfo: encodeURIComponent(JSON.stringify(this.starInfo))  }
      });
    },
    goAddr(e) {
      if (this.addressObj) {
        this.$router.push({
          name: "activityAddr"
        });
      } else {
        this.$router.push({
          name: "addressEdit"
        });
      }
    },
    goDetail(index) {
      let obj = {};
      obj.index = index;
      if (index == 1) {
        obj.periods_id = this.starInfo.periods_id;
        obj.start_at = this.starInfo.start_at;
        obj.first_over_at = this.starInfo.first_over_at;
        obj.user_category_integral_last_ten = this.starInfo.user_category_integral_last_ten;
      } else {
        obj.periods_id = this.starInfo.periods_id;
        obj.start_at = this.starInfo.start_at;
        obj.second_over_at = this.starInfo.second_over_at;
        obj.user_category_integral_last_twenty = this.starInfo.user_category_integral_last_twenty;
      }
      this.$router.push({
        name: "starDetail",
        query: { starInfo: encodeURIComponent(JSON.stringify(obj))  }
      });
    },
    onReachBottom() {
      if (!this.finished && this.loading) {
        this.loading = false;
        Toast.loading({
          mask: true,
          message: ""
        });
        this.page++;
        let json = {
          page: this.page,
          limit: "20"
        };
        getUserIntegralListApi(json).then(res => {
          this.loading = true;
          if (res.list.length > 0) {
            res.list.forEach(element => {
              this.starList.push(element);
            });
            if (res.total == this.starList.length) {
              this.finished = true;
            }
            // this.loading = false;
          }
          Toast.clear();
        });
      }
    },
    initPage() {
      Toast.loading({
        mask: true,
        message: ""
      });
      this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
      getUserIntegralApi().then(res => {
        this.starNum = res.last_value;
      });
      let json = {
        page: this.page,
        limit: "20"
      };
      getUserIntegralListApi(json).then(res => {
        this.starList = res.list;
        this.finished = res.total > 20 ? false : true;
      });
      getStarInfoApi().then(res => {
        this.starInfo = res;
        if (this.starInfo.code !== 500) {
          this.tabIndex = 1;
        }
        Toast.clear();
        setTimeout(() => {
          console.log(
            Number(
              getComputedStyle(this.$refs.floatBox).height.replace("px", "")
            )
          );
          let top =
            (document.documentElement.clientHeight - Number(  getComputedStyle(this.$refs.floatBox).height.replace("px", ""))) /
            2;
          if (this.$refs.unStar) {
            this.$refs.unStart.style.top =
              Number(
                getComputedStyle(this.$refs.floatBox).height.replace("px", "")
              ) +
              top +
              "px";
          }
        }, 200);
        // if(this.$refs.unStart){
        //   floatBox
        //   console.log(getComputedStyle('.floatBox').height)
        // }
      });
      getActivityAddressApi().then(res => {
        if (res.receive_name) {
          this.addressObj = res;
        }
      });
    },
    tabChange(index) {
      this.tabIndex = index;
      if (index == 1) {
        this.swiper.slidePrev();
      } else if (index == 2) {
        this.swiper.slideNext();
      }
      console.log(document.querySelector(".scrollItem"));
      // if(index==1){
      //   console.log(11)
      //   setTimeout(() => {
      //     this.$refs.scrollItem._initScroll()
      //   }, 100);
      // }else{
      //    this.$refs.scrollItem.scrollTo(0,0,200)
      // }
      // this.$refs.scroll.refresh()
    }
  },
  mounted() {
    this.height =
      screen.height -
      Number(getComputedStyle(this.$refs.floatBox).height.replace("px", ""));
    this.initPage();
  }
};
</script>

<style scoped lang="less">
@import "../../util/public";
.star-activity-page {
  border-top: 1px solid transparent;
}
.floatBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  z-index: 100;
  // padding-bottom: 10 * @toVw;
}
.scrollItem {
  height: 100vh;
}
.head {
  height: 147 * @toVw;
  .bg {
    width: 100%;
    position: absolute;
  }
  .content {
    position: relative;
    z-index: 1;
    .text {
      text-align: center;
      color: #f27321;
      padding-top: 52 * @toVw;
      .count {
        font-size: 41 * @toVw;
        line-height: 42 * @toVw;
        margin-bottom: 10 * @toVw;
      }
    }
    .avatar {
      position: absolute;
      top: 20 * @toVw;
      left: 22 * @toVw;
      display: flex;
      height: 42 * @toVw;
      // vertical-align: top;
      img {
        width: 40 * @toVw;
        border-radius: 40 * @toVw;
        border: 2px solid white;
      }
      span {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 98 * @toVw;
        display: inline-block;
        margin-left: 8 * @toVw;
        font-size: 14 * @toVw;
        color: #999999;
      }
    }
  }
}
.secTitle {
  text-align: center;
  color: #999999;
  font-size: 13 * @toVw;
  display: flex;
  .line {
    display: inline-block;
    width: 120 * @toVw;
    border-bottom: 1px solid #e2e2e2;
    position: relative;
    top: -3 * @toVw;
  }
  .item {
    flex: 1;
    height: 64 * @toVw;
    line-height: 74 * @toVw;
    .activity {
      display: inline-block;
      width: 86 * @toVw;
      height: 35 * @toVw;
      line-height: 35 * @toVw;
      position: relative;
      text-shadow: 0px 1px 1px rgba(187, 82, 0, 1);
      color: white;
      font-size: 15 * @toVw;
      animation: slideOut 1s linear;
      img {
        width: 86 * @toVw;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
    }
  }
}
@keyframes slideOut {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slideIn {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.anActivity {
  margin-top: 24 * @toVw;
}
// .scrollP{position: relative;height: 100vh;width: 100%;transform:none;}
.scroll {
  padding: 0;
  // margin-top: 180* @toVw;
  height: 100%;
  overflow: hidden;
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  background: white;
  .itemBox {
    padding-top: 210 * @toVw;
    width: 86%;
    margin: 0 auto;
    .none {
      height: 53 * @toVw;
      line-height: 40 * @toVw;
      text-align: center;
      color: #999999;
      font-size: 12px;
    }
  }
  .container {
    padding-top: 210 * @toVw;
    .unStart {
      text-align: center;
      color: #f27321;
      font-size: 13 * @toVw;
      top: 50%;
      transform: translateY(-10%);
      position: absolute;
      width: 96%;
      text-align: center;
      p {
        margin-top: 10 * @toVw;
      }
      img {
        width: 110 * @toVw;
      }
    }
    .stageBox {
      width: 92%;
      margin: 0 auto;
      margin-top: 6 * @toVw;
      padding-bottom: 20 * @toVw;
      .stageitem {
        display: flex;
        box-shadow: 0px 1px 8px 0px rgba(175, 175, 175, 0.53);
        height: 114 * @toVw;
        margin-bottom: 10 * @toVw;
        border-radius: 8 * @toVw;
        .left {
          width: 103 * @toVw;
          margin-bottom: 0;
          margin-right: 20 * @toVw;
        }
        .right {
          flex: 1;
          position: relative;
          margin-top: 0;
          .title {
            font-size: 15 * @toVw;
            font-weight: bold;
            margin: 15 * @toVw 0 10 * @toVw;
          }
          .date {
            color: #999999;
            font-size: 13 * @toVw;
          }
          .count {
            color: #f27321;
            font-size: 18 * @toVw;
            font-weight: 800;
            margin-top: 20 * @toVw;
            img {
              width: 20 * @toVw;
              position: relative;
              top: 2 * @toVw;
            }
          }
          .tip {
            position: absolute;
            top: 0;
            right: 0;
            width: 80 * @toVw;
            height: 27 * @toVw;
            line-height: 27 * @toVw;
            text-align: center;
            background: linear-gradient(
              270deg,
              rgba(255, 227, 126, 1) 0%,
              rgba(255, 165, 114, 1) 100%
            );
            border-radius: 0px 8 * @toVw 0px 8 * @toVw;
            color: white;
            font-size: 13 * @toVw;
          }
        }
      }
      .rule {
        color: #999999;
        font-size: 13 * @toVw;
        line-height: 20 * @toVw;
      }
      .result {
        position: relative;
        text-align: center;
        background: url("https://cdn.singsingenglish.com/new-sing/number_img_bg_win@2x.png");
        background-size: 100% 100%;
        padding: 39 * @toVw 13 * @toVw 12 * @toVw;
        box-shadow: 0px 1 * @toVw 8 * @toVw 0 * @toVw rgba(175, 175, 175, 0.53);
        border-radius: 8 * @toVw;
        margin-bottom: 10 * @toVw;
        background-color: #fff9f2;
        .float {
          width: 74 * @toVw;
          height: 27 * @toVw;
          background: linear-gradient(
            270deg,
            rgba(255, 227, 126, 1) 0%,
            rgba(255, 167, 114, 1) 100%
          );
          border-radius: 0 8 * @toVw 0 8 * @toVw;
          color: white;
          line-height: 27 * @toVw;
          position: absolute;
          top: 0;
          right: 0;
          font-size: 13 * @toVw;
        }
        .imgbox {
          margin-top: 8 * @toVw;
          img {
            width: 111 * @toVw;
            margin: 0 12 * @toVw;
          }
        }
        .addr {
          background: linear-gradient(
            270deg,
            rgba(252, 171, 69, 1) 0%,
            rgba(247, 115, 33, 1) 100%
          );
          border-radius: 12 * @toVw;
          height: 24 * @toVw;
          line-height: 24 * @toVw;
          text-indent: 10 * @toVw;
          color: white;
          font-size: 13 * @toVw;
          margin: 15 * @toVw 0;
          text-align: left;
          display: flex;
          span {
            max-width: 296 * @toVw;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          i {
            margin-left: -6 * @toVw;
            width: 20 * @toVw;
            font-size: 12 * @toVw;
          }
        }
        .tip {
          color: #937148;
          font-size: 12 * @toVw;
          text-align: left;
        }
        h2 {
          color: #d33500;
          margin: 0 0 8 * @toVw;
        }
        p {
          color: #f65c28;
          font-size: 13 * @toVw;
        }
      }
      .fal {
        padding: 39 * @toVw 0 12 * @toVw;
        height: 189 * @toVw;
        background: url("https://cdn.singsingenglish.com/new-sing/number_img_bg_lose@2x.png");
        background-size: 100% 100%;
        box-sizing: border-box;
        .fal_title {
          color: #2a455a;
          font-size: 24 * @toVw;
          font-weight: bold;
        }
        .fal_tip {
          color: #f65c28;
          font-size: 13 * @toVw;
          margin-top: 10 * @toVw;
        }
      }
      .showRs {
        width: 134 * @toVw;
        height: 36 * @toVw;
        background: linear-gradient(
          270deg,
          rgba(255, 228, 127, 1) 0%,
          rgba(255, 166, 115, 1) 100%
        );
        box-shadow: 0px 1px 8px 0px rgba(255, 203, 157, 0.58);
        border-radius: 18 * @toVw;
        color: white;
        text-align: center;
        line-height: 36 * @toVw;
        margin-top: 20 * @toVw;
      }
    }
  }
  .item {
    display: -webkit-flex;
    justify-content: space-between;
    border-bottom: 1px solid #e2e2e2;
    padding: 9 * @toVw 2 * @toVw;
    div {
      flex: 1;
    }
    .left {
      font-size: 15 * @toVw;
      // font-family: Regular;
      .date {
        color: #999999;
        font-size: 13 * @toVw;
        margin-top: 4 * @toVw;
      }
    }
    .right {
      text-align: right;
      font-size: 18 * @toVw;
      color: #f27321;
      font-weight: 800;
      // font-family: Arial-Black;
      img {
        width: 20 * @toVw;
        position: relative;
        top: 3 * @toVw;
        margin-left: 3 * @toVw;
      }
      span {
      }
      .add {
      }
      .reduce {
        color: #9bc912;
      }
    }
  }
}
@media screen and (orientation: landscape) {
  //  .child-view{height: 300vh;}
  .floatBox {
    //  height: 300vh;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 100;
    padding-bottom: 10 * @toVw;
  }
  // .child-view{height: 200vh;}
  .scroll {
    position: relative;
    height: 50vh;
    .itemBox {
      padding-top: 0 * @toVw;
      padding-bottom: 10vh;
    }
  }
}
</style>
<style>
</style>