<template>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <Card1></Card1>
        </div>
        <div class="swiper-slide">
          <Card2></Card2>
        </div>
        <div class="swiper-slide">
          <Card3></Card3>
        </div>
        <div class="swiper-slide">
          <Card4></Card4>
        </div>
        <div class="swiper-slide">
          <Card5></Card5>
        </div>
        <div class="swiper-slide">
          <Card6></Card6>
        </div>
      </div>
      <Loading v-show="showLoading" />
    </div>
</template>
<script>
import Loading from "@/components/common/common-loading";
import { Progress, Toast } from "vant";

import Card1 from "@/components/annual-summary/card-1";
import Card1No from "@/components/annual-summary/card-1-no";
import Card2 from "@/components/annual-summary/card-2";
import Card3 from "@/components/annual-summary/card-3";
import Card4 from "@/components/annual-summary/card-4";
import Card5 from "@/components/annual-summary/card-5";
import Card6 from "@/components/annual-summary/card-6";
import { mapGetters, mapActions } from "vuex";
import Swiper from "swiper";
import { getElement } from '../../../../better-scroll/packages/shared-utils/src';

let _this = null;

export default {
  components: {
    Loading,
    Card1,
    Card1No,
    Card2,
    Card3,
    Card4,
    Card5,
    Card6
  },
  data() {
    return {
      isWeb: window.__isWeb,
      isInfresh: false,
      showLoading: false
    };
  },

  computed: {
    ...mapGetters(["userInfo"])
  },

  created() {
    _this = this;

    window.__getUserInfoAS = function(param) {
      console.log("__getUserInfoAS", param);
      _this.token = param.userToken;
      _this.userMobile = param.userMobile;
      _this.setUserInfo(param);
      _this.checkToken();
      _this.initData();
    };
    if (_this.isWeb) {
      _this.initData();
    }
    window.__refresh = function() {
      _this.isInfresh = true;
      _this.getUserInfo();
    };

    _this.getUserInfo();
  },

  mounted() {
    new Swiper(".swiper-container", {
      direction: "vertical",
      speed: 300,
      slidesPerView: 1,
      // observer: true, //修改swiper自己或子元素时，自动初始化swiper
      // observeParents: true //修改swiper的父元素时，自动初始化swiper
      // // slidesPerGroup : 5,
      on: {
        init: function() {
          // swiperAnimateCache(this);
          console.log('---111');
          swiperAnimate(this);
        },
        slideChangeTransitionEnd: function(se) {
          let activeIndex = se.activeIndex;
          swiperAnimate(this);
          console.log('---2323', se);
          if (activeIndex == 1) {

          }
        }
      }
    });
  },

  methods: {
    ...mapActions(["setUserInfo"]),

    // 获取数据
    initData() {
      let param = {
        token: this.token,
        setEntry: true
      };
      // this.showLoading = true;
      // this.GET(`portal/titleTest/user/getBrushTitleInfo/${this.secondSubjectId}`, param).then(res => {
      //   if (res.code == "000000") {
      // this.showLoading = false;
      //   } else {
      //     this.$toast(res.message);
      //   }
      // });
    },

    //获取用户信息
    getUserInfo() {
      rocNative.getUserInfo({
        __funcName: "__getUserInfoAS"
      });
    },

    // token是否失效校验
    checkToken() {
      let param = {
        token: this.userInfo.userToken || this.token,
        setEntry: true
      };
      this.GET("campaign/admin/task/checkToken", param).then(res => {
        if (res.code !== "000000") {
          console.log("跳登录", this.isInfresh);
          if (this.isInfresh) {
            rocNative.goBack();
          } else {
            rocNative.gotoLogin();
          }
          this.isInfresh = false;
        } else {
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
// .as-swipper-wrapper {
//   transform: translate3d(0, 0, 0);
//   // background: red;
//   .swiper-container {
//     transform: translate3d(0, 0, 0);
//     overflow: hidden;
//   }
//   .swiper-slide {
//     transform: translate3d(0, 0, 0);
//   }
// }

.swiper-container {
  height: 100vh;
  width: 100vm;
  /* height: 300px;
  margin: 20px auto; */
}
.card {
  height: 100vh;
}
</style>