<template>
  <div>
    <div class="user_index_scroller_com" :class="isIos ? 'isIos' : ''">
      <div class="height100p" :class="{ hidden_right: active_index != 0 }"><statistics ref="management" @active2="active2" /></div>
      <div class="height100p" v-show="active_index == 1" :class="{ hidden_right: active_index != 1 }"><work></work></div>
      <div class="height100p" v-if="active_index == 2" :class="{ hidden_right: active_index != 2 }"><userCenter></userCenter></div>
      <!-- 导航 -->
      <van-tabbar v-model="active_index" :class="isIos ? 'padding-m' : ''" :fixed="false">
        <van-tabbar-item>
          <icon name="statistics" v-if="tabs != 0" class="footer_nav_review"></icon>
          <icon name="statistics_checked" v-if="tabs == 0" class="footer_nav_review active"></icon>
          <span>首页</span>
        </van-tabbar-item>
        <van-tabbar-item>
          <icon name="footer_nav_work" v-if="tabs != 1" class="footer_nav_work"></icon>
          <icon name="footer_nav_work_press" v-if="tabs == 1" class="footer_nav_work_press active"></icon>
          <span>工作台</span>
        </van-tabbar-item>
        <van-tabbar-item>
          <icon name="footer_nav_me" v-if="tabs != 2" class="footer_nav_me"></icon>
          <icon name="footer_nav_me_press" v-if="tabs == 2" class="footer_nav_me_press active"></icon>
          <span>我的</span>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import statistics from '@/components/body/statistics';
import work from '@/components/body/work';
import userCenter from '@/components/body/user_center'

import Vue from 'vue';
import { Overlay, Image as VanImage } from 'vant';
Vue.use(Overlay).use(VanImage);

export default {
  components: {userCenter,statistics, work },
  data() {
    return {
      active_index: 0,
      tabs: 0,
      isIos: false
    };
  },
  watch: {
    active_index: function(val, old) {
      this.docuTitle(val);
      this.tabs = val;
    }
  },
  methods: {
    active2(data) {
      this.active_index = data;
    },
    docuTitle(val) {
      window.document.title = val == 0 ? '首页' : val == 1 ? '工作台' : val == 2 ? '我的' : '功道云';
    },
  },
  created() {
    document.documentElement.style.backgroundColor = '#26A2FF';
    if (window.plus) {
      // 下边横杠兼容
      plus.navigator.setStatusBarStyle('light');
      var str = window.plus.device.model;
      if (str.indexOf('iPhone') >= 0) {
        if (
          str === 'iPhone4' ||
          str === 'iPhone4s' ||
          str === 'iPhone5' ||
          str === 'iPhone5c' ||
          str === 'iPhone5s' ||
          str === 'iPhone6' ||
          str === 'iPhone6 Plus' ||
          str === 'iPhone6s' ||
          str === 'iPhone6s Plus' ||
          str === 'iPhone SE' ||
          str === 'iPhone7' ||
          str === 'iPhone7 Plus' ||
          str === 'iPhone8' ||
          str === 'iPhone8 Plus'
        ) {
          plus.storage.setItem('iPhone', 'false');
          this.isIos = false;
        } else {
          plus.storage.setItem('iPhone', 'true');
          this.isIos = true;
        }
      }
    }
  },
  mounted() {
    let index = localStorage.getItem('home_active_index');
    if (index) {
      localStorage.removeItem('home_active_index');
      this.active_index = index;
    }
  },
};
</script>

<style scoped lang="less">
.cunt {
  background-color: rgb(245, 108, 108);
  text-align: center;
  line-height: 0.35rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 1rem;
  position: absolute;
  top: 5px;
  left: 1.1rem;
  color: #fff;
  font-size: 0.24rem;
  font-style: normal;
}
.cunt2 {
  background-color: rgb(245, 108, 108);
  text-align: center;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 1rem;
  position: absolute;
  top: 5px;
  left: 1.1rem;
}
.cunt i {
  font-style: normal;
}
.cunts {
  padding: 0 0.04rem !important;
  width: auto !important;
  max-width: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.common_menu_popup {
  padding-bottom: 1.5rem;
  padding-top: 0.1rem;
  border-radius: 0.2rem 0.2rem 0 0;
  background: #fff;
}
/deep/ .common_menu_popup .van-popup__close-icon--bottom-right {
  right: unset;
  left: 50%;
  margin-left: -0.16rem;
  bottom: 0.4rem;
}
/deep/ .common_menu_popup .van-grid-item__content--center {
  border-radius: none;
  box-shadow: none;
}
.user_index_scroller_com {
  height: calc(100% - 1rem);
  position: relative;
}
.isIos {
  height: calc(100% - 1.4rem);
}
.padding-m {
  padding-bottom: 0.4rem;
}
.user_index_header_com {
  height: 2.5rem;
  position: relative;
  z-index: 2;
}

.header_avatar_com {
  padding: 0.16rem;
}

.user_nickname_com {
  text-align: left;
  line-height: 1.5;
  font-size: 0.3rem;
  font-weight: normal;
}

.user_index_header_com .header_avatar {
  width: 1.5rem;
  display: block;
  margin: 0 auto;
  height: 1.5rem;
  -webkit-border-radius: 2.5rem;
  -moz-border-radius: 2.5rem;
  border-radius: 2.5rem;
}

.user_index_header_bg {
  position: absolute;
  width: 20rem;
  height: 20rem;
  -webkit-border-radius: 5rem;
  top: -17rem;
  left: 50%;
  margin-left: -10rem;
  background-color: #b8cc70;
  -moz-border-radius: 10rem;
  border-radius: 10rem;
  z-index: 1;
}

.large_btn {
  padding: 0.16rem;
  line-height: 1;
}

.large_btn .van-button {
  padding: 0.2rem 0;
}

.large_btn .van-icon {
  font-size: 1rem;
}

.large_btn .van-button--large {
  height: auto;
  line-height: 1.5;
}

.aff_code_btn {
  width: 1rem;
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.2rem;
}

.user_setting_btn {
  position: absolute;
  top: 0.32rem;
  color: #333;
  font-size: 0.32rem;
  right: 0.32rem;
}

.user_setting_btn * {
  vertical-align: middle;
}

.user_setting_btn .van-icon {
  font-size: 0.32rem;
}

.hidden_right {
  position: absolute;
  top: -1000000px;
  left: -100000px;
}

.height100p {
  height: 100%;
}
/deep/ .shortcut-option-btn .van-icon {
  font-size: 0.6rem;
}
.van-grid-item__text {
  font-size: 0.36rem;
  color: #303133;
}

.van-grid-item__icon {
  font-size: 1rem !important;
}
.van-icon__image {
  width: 1.28rem;
  height: 1.28rem;
  border-radius: 50%;
}
.user_index_scroller_com /deep/ .van-tabbar-item {
  text-align: center;
  position: relative;
}
.user_index_scroller_com /deep/ .van-tabbar-item .svg-icon {
  color: #606266;
  height: 0.36rem;
  margin-bottom: 0.08rem;
}
.user_index_scroller_com .footer_nav_add_press {
  height: 0.8rem !important;
}
.user_index_scroller_com /deep/ .van-tabbar-item .active {
  color: #238dfa;
}
.user_index_scroller_com /deep/ .van-tabbar-item span {
  display: block;
  font-size: 0.2rem;
  margin-bottom: 0.08rem;
}
.guild_notice {
  top: calc(100vh - 1.5rem);
  left: 3.4rem;
  width: 6rem;
  background: transparent;
  border-radius: 0.12rem;
  overflow-y: inherit;
}
.guild_notice .list {
  position: relative;
  padding: 0.2rem;
  background: #238dfa;
  border-radius: 0.12rem;
}
.guild_notice .title {
  font-size: 0.32rem;
  line-height: 0.48rem;
  color: #ffffff;
}
.guild_notice .title:after {
  position: absolute;
  top: 0.825rem;
  content: ' ';
  width: 90%;
  border-bottom: 0.02rem #3798fb solid;
}
.guild_notice .num {
  display: block;
  font-size: 0.32rem;
  line-height: 0.48rem;
  color: #ffffff;
}
.guild_notice .list .des {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.36rem;
  font-weight: bold;
  color: #fff;
}
.guild_notice .list .next {
  margin-top: 0.3rem;
  color: #238dfa;
  background: #fff;
  border-radius: 0.12rem;
}
.guild_notice .list:after {
  border: none;
}
.guild_notice .guild_down_icon {
  position: relative;
  top: 0vh;
  left: 23vw;
  content: ' ';
  width: 0;
  height: 0;
  border-left: 0.2rem solid transparent;
  border-right: 0.2rem solid transparent;
  border-top: 0.2rem solid #238dfa;
}
.guild_notice .guild_notice_pic {
  position: relative;
  top: 0.1rem;
  left: 1.2rem;
}
.guild_notice .guild_notice_pic /deep/ img.van-image__img {
  border-radius: 0.12rem;
}
.guild_start {
  width: 6rem;
  background: transparent;
  border-radius: 0.12rem;
  overflow-y: inherit;
}
.guild_start .list {
  position: relative;
  padding: 0.32rem;
  background: #238dfa;
  border-radius: 0.12rem;
}
.guild_start .title {
  font-size: 0.36rem;
  font-weight: bold;
  line-height: 0.6rem;
  color: #ffffff;
}
.guild_start .title span {
  font-size: 0.36rem;
  font-weight: bold;
  line-height: 0.48rem;
  color: #ffffff;
}
.guild_start .title:after {
  position: absolute;
  top: 1.05rem;
  content: ' ';
  width: 90%;
  border-bottom: 0.02rem #3798fb solid;
}
.guild_start .num {
  display: block;
  font-size: 0.32rem;
  line-height: 0.48rem;
  color: #ffffff;
}
.guild_start .list .des {
  display: block;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
  font-size: 0.32rem;
  font-weight: normal;
  line-height: 0.6rem;
  color: #fff;
}
.guild_start .list .next {
  width: 100%;
  color: #238dfa;
  background: #fff;
  border-radius: 0.12rem;
  line-height: 0.8rem;
  height: 100%;
}
.guild_start .list .next span {
  color: #3798fb;
  font-size: 0.32rem;
  line-height: 0.6rem;
}
.buyPopupBody {
  width: 85vw;
  .buyPopupContent {
    position: relative;
    background: white;
    padding: 0 5vw 5vw 5vw;
    border-radius: 0.15rem;
    .buyPopupTitle {
      background: #1a89fa;
      position: absolute;
      left: 0.6rem;
      right: 0.6rem;
      top: -0.3rem;
      text-align: center;
      border-radius: 0.1rem;
      line-height: 2;
      font-weight: normal;
      font-size: 0.36rem;
      color: #fff;
    }
    .buyPopupTxt {
      font-size: 0.32rem;
      line-height: 1.8;
      padding-top: 0.8rem;
    }
    .buyPopupTel {
      color: #1a89fa;
      font-weight: bold;
    }
  }
}
// .suspendButton {
//   height: 1rem;
//   width: 1rem;
//   /*1.3 如果碰到滑动问题，请检查 z-index。z-index需比web大一级*/
//   z-index: 999;
//   position: fixed;
//   bottom: 2rem;
//   right: 0.2rem;
//   border-radius: 0.8rem;
//   background-color: rgba(0, 0, 0, 0.55);
// }
// .yuanqiu {
//   height: .5rem;
//   width: .5rem;
//   border: 0.1rem solid rgba(140, 136, 136, 0.5);
//   margin: 0.15rem auto;
//   color: #000000;
//   font-size: .3rem;
//   line-height: .5rem;
//   text-align: center;
//   border-radius: 100%;
//   background-color: #ffffff;
// }
</style>
