<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>
            <p class="phone">{{userInfo.phone}}</p>
          </div>
        </div>
        <HomeScan></HomeScan>
      </div>
    </div>
    <HomeOrder parent="HomeKQ"></HomeOrder>
    <div class="function">
      <div class="item" @click="handleGroup">
        <div class="left">
          <van-icon class="icon" name="orders-o" />
          <span>集团权限</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <div class="item" @click="handleMyCard">
        <div class="left">
          <van-icon class="icon" name="discount" />
          <span>我的优惠券</span>
        </div>
        <van-icon name="arrow" />
      </div>
    </div>
    <HomeChildList v-if="centerNo" parent="HomeKQ"></HomeChildList>

    <!-- <div class="cardPic" v-show='isShow'>
      <div class="boxPic"  @click="isShow = false">
          <img style="width:100%;height:100%" src="../assets/coupon.png" />
      </div>
    </div> -->
    <tabbar4 active="center"></tabbar4>
  </div>
</template>

<script>
import PrefectBoxXST from '@/component/PrefectBoxXST'
import HomeChildList from '@/views/PublicHome/component/HomeChildList'
import HomeOrder from '@/views/PublicHome/component/HomeOrder'
import HomeScan from '@/views/PublicHome/component/HomeScan'
import Tabbar4 from '@/component/Tabbar4'
export default {
  data () {
    return {
      centerNo: '',
      userInfo: {
        openId: '',
        headImg: '',
        nickName: '',
        phone: '',
        roleType: '',
        time: '',
        year: '',
        studentName: '',
        school: '',
      },
      nicknameUser: '',
      headImgUrl: '',
      defaultHead: require('@/assets/head.png'),
      isShow: false,
      appId: 'wx1305e88d2bc74073', //绍兴研学
      publicName: 'KQ',
    }
  },

  mounted () {
    sessionStorage.setItem('publicName', 'KQ')
    sessionStorage.setItem('prePage', 'HomeKQ');
    this.headImgUrl = sessionStorage.getItem('headImgUrl')
    this.nicknameUser = sessionStorage.getItem('nicknameUser')

    if (process.env.NODE_ENV === "production" && this.common.isWeiXin()) {
      let openid = sessionStorage.getItem('openIdKQ');
      if (!openid) {
        this.$router.push({ name: 'Authorize' + this.publicName })
      } else {
        this.nicknameUser = sessionStorage.getItem('nicknameUser')
        this.headImgUrl = sessionStorage.getItem('headImgUrl')
        this.getUserInfoXST()
      }
    } else {
      sessionStorage.setItem('unionId', 'oJPmPuLaAx2x2DaRGfCFeYuLWzLU')
      this.getUserInfoXST()

    }
  },
  methods: {
    // 研学码
    handleYanxue () {
      let isLogin = this.checkLogin()
      if (!isLogin) return;
      this.$router.push({ name: 'YanxueCode' })
    },
    // 我的订单
    handleOrder () {
      let isLogin = this.checkLogin()
      if (!isLogin) return;
      this.$router.push({ name: 'ServiceOrderXST' })
    },
    // 集团认证
    handleGroup () {
      this.$toast('暂未开放，敬请期待！');
    },
    // 我的优惠券
    handleMyCard () {
      let isLogin = this.checkLogin()
      if (!isLogin) return;
      this.$router.push({ name: 'CardBoxXST' })
    },
    // 合伙人中心
    handlePartner () {
      this.$toast('暂未开放，敬请期待！');
      //   this.$router.push({ name: 'Partner' })
    },
    // 获取用户信息
    getUserInfoXST () {
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true
      })
      this.yxAxios.get(`${this.proxyUrl}/prod/api/wx/${this.appId}/getUserInfo?unionId=${sessionStorage.getItem('unionId')}`).then((res) => {
        this.$toast.clear()
        if (res.data.code == 200) {
          this.userInfo = res.data.data;
          this.centerNo = res.data.data.centerNo
          sessionStorage.setItem('userInfo', JSON.stringify(res.data.data))
          // 设置分享
          this.$emit('getWxConfig', {
            title: '趣研学啦', // 分享标题
            desc: '现在世界是孩子的书本，一起学才更好玩！', // 分享描述
            link: `https://payment.myjxt.com/center/#/HomeKQ`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'https://payment.myjxt.com/share_qxy.png', // 分享图标
          })
        }
      })
    },
    //获取优惠券
    getSendFlag () {
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true
      })
      this.http.getSendFlag().then((res) => {
        this.$toast.clear()
        if (res.success) {
          if (res.data == 1) {
            this.isShow = true
          }
        } else {
          this.$toast.fail(res.message)
        }
      })
    },
    // 判断是否已登录
    checkLogin () {
      if (process.env.NODE_ENV != "production") return true;
      const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      if (!userInfo?.phone) {
        sessionStorage.setItem('prePage', 'Home' + sessionStorage.getItem('publicName'));
        sessionStorage.setItem('prePageQuery', JSON.stringify({ showTab: this.$route.query.showTab }));
        this.$router.push({ name: 'LoginPublic', query: { publicName: sessionStorage.getItem('publicName') } })
        return false;
      }
      return true;
    },
    formatterTime (time) {
      if (time) {
        return time.split(' ')[0]
      } else {
        return ''
      }
    },
    complete () {
      this.getUserInfoXST()
    }
  },
  components: {
    Tabbar4,
    PrefectBoxXST,
    HomeChildList,
    HomeOrder,
    HomeScan
  },
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  min-height: 100%;
  background: #f8f8f8;
  padding-bottom: 196px;
  .infomation {
    width: 100%;
    height: 320px;
    background: url("~@/assets/home/bg_kq.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: 34px;
          font-weight: bold;
          width: 100%;
        }
        .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;
        }
      }
    }
  }
}

.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>