<template>
  <div class="home">
    <div class="infomation">
      <div class="top">
        <div>
          <img class="head" :src="headImgUrl ? headImgUrl : defaultHead" alt="" />
          <div class="right">
            <!-- <p class="name">{{nicknameUser}}</p>-->
            <div class="name">
              <span>{{ nicknameUser }}</span>
              <div class="school" v-show="schoolNamesChoose" @click="changeSchool">
                {{ schoolNamesChoose.schoolName }}<img src="@/assets/yxCode/change.png" />
              </div>
            </div>
            <p class="phone">{{ userInfo ? userInfo.phone : '-' }}</p>
          </div>
        </div>
        <HomeScan></HomeScan>
      </div>
    </div>
    <HomeOrder></HomeOrder>
    <div class="function">
      <div class="item" @click="handleGroup">
        <div class="left">
          <van-icon class="icon" name="orders-o" />
          <span>集团权限</span>
        </div>
        <div class="pic" v-if="auth">
          <img src="@/assets/Travel/check.png" />
          <span>已认证</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="item" @click="handleMyCollect">
        <div class="left">
          <van-icon class="icon" name="star-o" />
          <span>我的收藏</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <div class="item" @click="handleFeedbook">
        <div class="left">
          <van-icon class="icon" name="smile-comment-o" />
          <span>意见反馈</span>
        </div>
        <van-icon name="arrow" />
      </div>
    </div>
    <HomeChildList v-if="showChildList"></HomeChildList>
    <Tabbar active="home"></Tabbar>

    <van-popup style="background: transparent" get-container="body" v-model="showSchool">
      <group-penson @closeJT="closeJT"></group-penson>
    </van-popup>
  </div>
</template>

<script>
import HomeChildList from '@/views/Home/component/HomeChildList'
import HomeOrder from '@/views/Home/component/HomeOrder'
import Tabbar from '@/components/c_Tabbar.vue'
import HomeScan from '@/views/Home/component/HomeScan'
import groupPenson from '@/views/Travel/component/groupPenson'
export default {
  data() {
    return {
      navActive: 5,
      userInfo: '',
      nicknameUser: '',
      headImgUrl: '',
      defaultHead: require('@/assets/home/head.png'),
      isShow: false,
      appId: 'wx1305e88d2bc74073', //绍兴研学
      showChildList: false,
      showSchool: false,
      schoolNamesChoose: '',
      //集团认证
      auth: false,
    }
  },

  mounted() {
    let code = this.getQueryVariable('code')
    sessionStorage.setItem('prePage', 'HomeYX')
    let openid = sessionStorage.getItem('openId')
    let schoolNamesChoose = sessionStorage.getItem('schoolNamesChoose')
    if (schoolNamesChoose) {
      this.schoolNamesChoose = JSON.parse(schoolNamesChoose)
    }
    this.headImgUrl = sessionStorage.getItem('headImgUrl')
    this.nicknameUser = sessionStorage.getItem('nicknameUser')
    if (process.env.NODE_ENV === 'production' && this.common.isWeiXin()) {
      if (!openid) {
        this.$router.push({ name: 'Authorize' })
      } else {
        this.getUserInfo()
      }
    } else {
      sessionStorage.setItem('unionId', this.DevUnionId)
      this.getUserInfo()
    }
    this.againRZ()
  },
  methods: {
    // 集团认证
    handleGroup() {
      let isLogin = this.checkLogin()
      if (!isLogin) return
      this.getRZ()
      // this.$toast('暂未开放，敬请期待！');
    },
    // 子组件调用
    complete() {
      this.getUserInfo()
    },
    // 获取用户信息
    getUserInfo() {
      let userInfo = sessionStorage.getItem('userInfo')
      if (userInfo) {
        this.userInfo = JSON.parse(userInfo)
        this.auth = this.userInfo.auth

        this.showChildList = true
      } else {
        this.$toast.loading({
          message: '加载中...',
          duration: 0,
          forbidClick: true,
        })
        this.yxAxios
          .get(`${this.baseUrl}/prod/api/wx/${this.appId}/getUserInfo?unionId=${sessionStorage.getItem('unionId')}`)
          .then((res) => {
            this.$toast.clear()
            if (res.data.code == 200) {
              let userInfo = res.data.data
              this.userInfo = userInfo
              sessionStorage.setItem('userInfo', JSON.stringify(userInfo))

              if (res.data.data.schoolNames || res.data.data.schoolNames == [] || res.data.data.schoolNames == 'null') {
                sessionStorage.setItem('schoolNames', JSON.stringify(res.data.data.schoolNames))
                this.$store.commit('changeSchool', res.data.data.schoolNames)
                if (!sessionStorage.getItem('schoolNamesChoose')) {
                  sessionStorage.setItem('schoolNamesChoose', JSON.stringify(res.data.data.schoolNames[0]))
                  this.schoolNamesChoose = res.data.data.schoolNames[0]
                }
              } else {
                sessionStorage.setItem('schoolNames', [])
                this.$store.commit('changeSchool', [])
              }
              this.auth = userInfo.auth
            }
            this.showChildList = true
          })
      }
    },
    // 判断是否已登录
    checkLogin() {
      if (process.env.NODE_ENV != 'production') return true
      const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      if (!userInfo?.phone) {
        sessionStorage.setItem('prePage', 'HomeYX')
        sessionStorage.setItem('prePageQuery', JSON.stringify({ showTab: this.$route.query.showTab }))
        this.$router.push({ name: 'LoginPublic' })
        return false
      } else if (sessionStorage.getItem('schoolNames') == 'undefined' || !sessionStorage.getItem('schoolNames')) {
        this.$emit('openSchool')
        return false
      }
      return true
    },
    formatterTime(time) {
      if (time) {
        return time.split(' ')[0]
      } else {
        return ''
      }
    },
    // 获取链接参数
    getQueryVariable(variable) {
      // 取地址栏参数
      var query = window.location.search.substr(1)
      if (!query && window.location.hash.indexOf('?') > -1) {
        query = window.location.hash.split('?')[1]
      }
      var vars = query.split('&')
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=')
        if (pair[0] === variable) {
          return pair[1]
        }
      }
      return false
    },
    //切换学校
    changeSchool() {
      this.$router.push({ name: 'schoolFollow' })
    },
    //集团回调关闭页面
    closeJT() {
      this.showSchool = false
      this.getUserInfo()
    },
    //查看是否有集团认证
    getRZ() {
      if (this.auth) {
        //已认证
        this.$router.push({ name: 'schoolAttestation' })
      } else {
        this.showSchool = true
      }
    },
    //回跳重新认证
    againRZ() {
      let backRZ = sessionStorage.getItem('backRZ')
      if (backRZ == 'true') {
        this.showSchool = true
        sessionStorage.setItem('backRZ', false)
      }
    },
    // 我的收藏
    handleMyCollect() {
      let isLogin = this.checkLogin()
      if (!isLogin) return
      this.$router.push({ name: 'MyCollect' })
    },
    // 意见反馈
    handleFeedbook() {
      // this.$toast('暂未开放，敬请期待！');
      let isLogin = this.checkLogin()
      if (!isLogin) return
      this.$router.push({ name: 'FeedbookList' })
    },
  },
  components: {
    HomeChildList,
    HomeOrder,
    Tabbar,
    HomeScan,
    groupPenson,
  },
}
</script>
<style lang="scss" scoped>
p {
  margin: 0;
}
.home {
  width: 100%;
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 196px;
  box-sizing: border-box;
  .infomation {
    width: 100%;
    height: 320px;
    background: url('~@/assets/home/bg.png');
    background-size: 100%;
    background-position: center;
    .top {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 40px 28px;
      > div {
        display: flex;
      }
      .head {
        width: 96px;
        height: 96px;
        border-radius: 50%;
        overflow: hidden;
      }
      .right {
        height: 96px;
        margin-left: 24px;

        // display: flex;
        // align-content: space-around;
        // flex-wrap: wrap;
        color: #fff;
        .name {
          font-size: 33px;
          font-weight: bold;
          width: 100%;
          margin-bottom: 15px;
          display: flex;
          .school {
            max-width: 400px;
            border-radius: 30px;
            font-size: 26px;
            font-weight: normal;
            margin-left: 20px;
            padding: 0 20px;
            box-sizing: border-box;
            background-color: #13a82c;
            display: flex;
            align-items: center;

            img {
              width: 30px;
              height: 30px;
              margin-left: 5px;
            }
          }
        }
        .phone {
          font-size: 26px;
        }
      }
    }
  }

  .function {
    background: #ffffff;
    border-radius: 12px;
    margin: 24px;
    .item {
      margin: 0 32px;
      height: 96px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 34px;
      &:not(:first-of-type) {
        border-top: 1px solid #e2e2e2;
      }
      .left {
        display: flex;
        align-items: center;
        .icon {
          font-size: 40px;
          margin-right: 20px;
        }
        span {
          font-size: 30px;
        }
      }
      .pic {
        display: flex;
        align-items: center;
        margin-right: 5px;

        span {
          font-size: 27px;
          color: #333333;
        }
        img {
          width: 30px;
          height: 30px;
          margin-right: 5px;
        }
      }
    }
  }
}

.boxPic {
  width: 85vw;
  height: 115vw;
  margin: 10vh 7.5vw;
  position: absolute;
  top: 0;
  z-index: 99;
}
.cardPic {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: #0000008a;
  z-index: 99;
}
</style>