<template>
  <div>
    <div class="user_index_scroller_com" :class="isIos? 'isIos':''">
      <!-- 内容 -->
	   <!-- <div class="height100p" v-if="active_index == 1" :class="{ hidden_right: active_index != 1 }"><work @url_jump="app_open"></work></div> -->
	   <!-- <div class="height100p" v-if="active_index == 2" :class="{ hidden_right: active_index != 2 }"><statistics_personal /></div> -->

      <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 }"><message_list @shwoCunt="shwoCunt"></message_list></div> -->
      <div class="height100p" v-if="active_index == 2" :class="{ hidden_right: active_index != 2 }"><user_center></user_center></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_message" v-if="tabs != 2" class="footer_nav_message"></icon>
          <icon name="footer_nav_message_press" v-if="tabs == 2" class="footer_nav_message_press active"></icon>
          <span>通知</span>
          <em v-if="cuntNum.deal>0" class="cunt" :class="{ cunts: cuntNum.deal > 99 }">
              <i v-if="cuntNum.deal <100">{{cuntNum.deal}}</i>
              <i v-else>99+</i>
          </em>
          <template v-else>
              <em class="cunt2" v-if="cuntNum.notice==1"></em>
          </template>
        </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>

      <!-- 中间弹出 -->
      <!-- <van-tabbar-item><icon name="footer_nav_add_press" class="footer_nav_add_press active"></icon></van-tabbar-item> -->

      <!-- 体验版相关 -->
      <!-- <div class="suspendButton" v-if="showBuyPopup" id="moveDiv" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove.prevent="move" @mouseup="end" @touchend="end">
        <div class="yuanqiu" @click.stop="applyBuyButton">
          <van-icon name="shopping-cart" size="0.5rem" />
          <div>申请购买</div>
        </div>
      </div>
      <van-popup v-model="buyPopupPage" :close-on-click-overlay="false" style="border-radius: 0.15rem; background: #fff0;" @closed="getItemBuyPopupPage">
        <div class="buyPopupBody">
          <div class="buyPopupContent">
            <div class="buyPopupTitle">请购买正式版</div>
            <p class="buyPopupTxt">亲爱的用户，欢迎使用功道云。我们已预置部分体验数据，如需购买完整版请点击【申请购买】，或拨打电话：</p>
            <p class="buyPopupTel">400-6877-880</p>
            <van-row gutter="20">
              <van-col span="12"><van-button block type="info" @click="applyButton">申请购买</van-button></van-col>
              <van-col span="12"><van-button block type="default" @click="getItemBuyPopupPage">我知道了</van-button></van-col>
            </van-row>
          </div>
        </div>
      </van-popup> -->

    </div>
<!--    <van-popup class="common_menu_popup" v-model="shortcut_show" position="bottom" close-icon-position="bottom-right" closeable>
      <common_menu @confirm="shortcut_show = false"></common_menu>
    </van-popup> -->
  </div>
</template>

<script>
import request from '@/utils/request'
// import management from '@/components/body/management'
import user_center from '@/components/body/user_center'
// import message_list from '@/components/body/message_list'
import statistics from '@/components/body/statistics'
import work from '@/components/body/work'
// import department from '@/components/body/department'
// import common_menu from '@/components/user/common_menu'
// import statistics_personal from '@/components/integral/statistics_personal'

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

export default {
  components: { user_center, statistics, work},
  sockets: {
    new_msg (data) {
      let self = this
      let json = JSON.parse(data)
      self.msg_count = json.count
    }
  },
  keep_alive_update: {},
  data () {
    return {
      cuntNum: {deal: 0, notice: ''},
      icon_click: 0,
      shortcut_show: false,
      msg_count: 0,
      active_index: 0,
      tabs: 0,
      userinfo: null,
      // showBuyPopup: false,
      // buyPopupPage: false,
      flags: false,
      position: { x: 0, y: 0 },
      nx: '',
      ny: '',
      dx: '',
      dy: '',
      xPum: '',
      yPum: '',
      employeeMap: {},
      isIos: false
    }
  },
  watch: {
    active_index: function (val, old) {
      // if (val == 0) {
        // this.$store.dispatch('getMenu').then(res => {
          // this.$refs.management.getMenu(res)
          // this.$refs.management.getKqList()
        // })
        // if (!this.$refs.management.isShowImg) {
        //   this.$refs.management.get_notice_list()
        // }
      // }
      this.docuTitle(val)
      this.tabs = val
    }
  },
  methods: {
    active2(data){
      this.active_index = data
    },
    docuTitle(val){
      window.document.title =
      val == 0 ? '首页':
      val == 1 ? '工作台':
      val == 2 ? '我的':
      '功道云'
    },
    shwoCunt (data) {
      request('get', '/api/notice/number').then(res => {
        this.cuntNum = res.data.data
      })
    },
    // 实现移动端拖拽
    // down () {
    //   this.flags = true
    //   var touch
    //   if (event.touches) {
    //     touch = event.touches[0]
    //   } else {
    //     touch = event
    //   }
    //   this.position.x = touch.clientX
    //   this.position.y = touch.clientY
    //   this.dx = moveDiv.offsetLeft
    //   this.dy = moveDiv.offsetTop
    // },
    // move () {
    //   if (this.flags) {
    //     var touch
    //     if (event.touches) {
    //       touch = event.touches[0]
    //     } else {
    //       touch = event
    //     }
    //     this.nx = touch.clientX - this.position.x
    //     this.ny = touch.clientY - this.position.y
    //     this.xPum = this.dx + this.nx
    //     this.yPum = this.dy + this.ny
    //     moveDiv.style.left = this.xPum + 'px'
    //     moveDiv.style.top = this.yPum + 'px'
    //     // 阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
    //     document.addEventListener(
    //       'touchmove',
    //       function () {
    //         event.preventDefault()
    //       },
    //       false
    //     )
    //   }
    // },
    // 鼠标释放时候的函数
    // end () {
    //   this.flags = false
    // },
    // applyBuyButton () {
    //   this.buyPopupPage = true
    // },
    // applyButton () {
    //   let self = this
    //   let data = {
    //     account_id: this.$store.getters.user_info.account_id,
    //     source_type: 1,
    //     apply_type: 1
    //   }
    //   request_user('post', '/api/intentions/addbuy', data).then(res => {
    //     if (res.data.code == 1) {
    //       self.$toast('申请成功')
    //     } else {
    //       self.$toast(res.data.msg)
    //     }
    //   }).catch(e => {
    //     self.$toast.clear()
    //   })
    // },
    // end元素拖拽

    // getItemBuyPopupPage () {
    //   localStorage.setItem('buyPopupPage', true)
    //   this.buyPopupPage = false
    // },

    app_open (url) {
      localStorage.setItem('home_active_index', this.active_index)
    }
  },
  activated (){
    this.docuTitle(this.active_index)
  },
  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
        }
      }
    }
    // this.shwoCunt()
  },
  mounted () {
    let index = localStorage.getItem('home_active_index')
    if (index) {
      localStorage.removeItem('home_active_index')
      this.active_index = index
    }
    // 判断规则树和人员缓存 控制弹窗
    this.$nextTick(() => {
      // this.employeeMap = {}
      if (JSON.parse(localStorage.getItem('buyPopup')) == null) {
        if (this.$store.getters.user_info.try_user == 1) {
          JSON.parse(localStorage.getItem('buyPopupPage')) ? (this.buyPopupPage = false) : (this.buyPopupPage = true)
          this.showBuyPopup = true
        } else {
          this.showBuyPopup = false
        }
      } else {
        if (this.$store.getters.user_info.try_user == 1) {
          this.showBuyPopup = true
        } else {
          this.showBuyPopup = false
        }
      }
    })
  },
  beforeRouteLeave (to, form, next) {
    if (this.showBuyPopup) {
      localStorage.setItem('buyPopup', true)
      this.showBuyPopup = false
    }
    next()
  }
}
</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>
