<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">{{ phoneDesensitization(userInfo.phone, '*') }}</p>
          </div>
        </div>
        <HomeScan v-if="!isWechat"></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 class="item" @click="handleClearCache">
        <div class="left">
          <van-icon class="icon" name="user-circle-o" />
          <span>清除缓存</span>
        </div>
        <van-icon name="arrow" />
      </div> -->
      <div class="item" @click="handelElder">
        <div class="left">
          <van-icon class="icon" name="friends-o" />
          <span>长辈版</span>
        </div>
        <p>
          {{ isElder ? '已开启' : '未开启' }}
          <van-icon name="arrow" />
        </p>
      </div>
    </div>
    <HomeChildList v-if="showChildList"></HomeChildList>

    <!-- <van-popup style="background: transparent" get-container="body" v-model="showSchool">
      <group-penson @closeJT="closeJT"></group-penson>
    </van-popup> -->
    <tabbar active="home"></tabbar>
  </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 {
      centerNo: '',
      userInfo: {
        openId: '',
        headImg: '',
        nickName: '',
        phone: '',
        roleType: '',
        time: '',
        year: '',
        studentName: '',
        school: '',
      },
      nicknameUser: '',
      headImgUrl: '',
      defaultHead: require('@/assets/home/head.png'),
      isShow: false,
      isElder: false,
      showChildList: false,
      showSchool: false,
      schoolNamesChoose: '',
      isWechat: false,
    }
  },

  mounted() {
    this.$zwlogPvGlobal({ loadTime: new Date() })
    this.$nextTick(() => {
      this.$zwlogPvGlobal({ responseTime: new Date() })
    })
    localStorage.setItem('prePage','HomeYX')
    const isElder = localStorage.getItem('isElder')
    if (isElder) {
      this.isElder = true
    }

    let schoolNamesChoose = localStorage.getItem('schoolNamesChoose')
    if (schoolNamesChoose) {
      this.schoolNamesChoose = JSON.parse(schoolNamesChoose)
    }
    let isWechat = localStorage.getItem('isWechat')
    if (isWechat == 1) {
      this.isWechat = true
    }
    this.centerNo = localStorage.getItem('centerNo')
    this.getUserInfo()
    this.againRZ()
  },
  computed: {
    schoolNames() {
      return this.$store.state.schoolName
    },
  },
  methods: {
    // 集团认证
    handleGroup() {
      this.$toast('暂未开放，敬请期待！')
    },
    // 点击长辈版
    handelElder() {
      if (this.isElder) {
        this.$dialog
          .confirm({
            title: '长辈版',
            message: '超大字号，看的更清楚，长辈版，专为长辈设计',
            confirmButtonColor: '#ee0a24',
            confirmButtonText: '关闭长辈版模式',
          })
          .then(() => {
            // on confirm
            this.isElder = false
            localStorage.removeItem('isElder')
            this.$emit('setElder', false)
          })
          .catch(() => {
            // on cancel
          })
      } else {
        this.$dialog
          .confirm({
            title: '长辈版',
            message: '超大字号，看的更清楚，长辈版，专为长辈设计',
            confirmButtonColor: '#3385FF',
            confirmButtonText: '开启长辈版模式',
          })
          .then(() => {
            // on confirm
            this.isElder = true
            localStorage.setItem('isElder', 1)
            this.$emit('setElder', true)
          })
          .catch(() => {
            // on cancel
          })
      }
    },
    // 清除缓存
    handleClearCache() {
      this.$toast.loading({
        message: '清除成功，正在重新登录',
        duration: 1000,
        forbidClick: true,
      })
      localStorage.removeItem('schoolNamesChoose')
      localStorage.removeItem('schoolNames')
      localStorage.removeItem('centerNo')
      setTimeout(() => {
        this.$router.replace({ path: '/' })
      }, 1000)
    },
    // 获取用户信息
    getUserInfo() {
      this.yxAxios.get(`${this.proxyUrl}/user/info/getPortalUserByNum?userNum=${this.centerNo}`).then((res) => {
        console.log('获取用户信息getPortalUserByNum:', res)
        if (res.data.code == 200) {
          let userInfo = res.data.data.userInfo
          this.userInfo = userInfo
          localStorage.setItem('userInfo', JSON.stringify(userInfo))
          if (userInfo.schoolNames || userInfo.schoolNames == [] || userInfo.schoolNames == 'null') {
            userInfo.schoolNames = userInfo.schoolNames.filter((n) => n)
            localStorage.setItem('schoolNames', JSON.stringify(userInfo.schoolNames))
            this.$store.commit('changeSchool', userInfo.schoolNames)
            if (!localStorage.getItem('schoolNamesChoose') || localStorage.getItem('schoolNamesChoose') == 'null') {
              localStorage.setItem('schoolNamesChoose', JSON.stringify(userInfo.schoolNames[0]))
              this.schoolNamesChoose = userInfo.schoolNames[0]
            }
          } else {
            localStorage.setItem('schoolNames', [])
            this.$store.commit('changeSchool', [])
          }
        }
        this.showChildList = true
      })
    },
    formatterTime(time) {
      if (time) {
        return time.split(' ')[0]
      } else {
        return ''
      }
    },
    complete() {
      this.getUserInfo()
    },
    //切换学校
    changeSchool() {
      this.$router.push({ name: 'schoolFollow' })
    },
    //集团回调关闭页面
    closeJT() {
      this.showSchool = false
      this.getUserInfo()
    },
    //查看是否有集团认证
    getRZ() {
      // this.showSchool = true
      this.$router.push({ name: 'schoolAttestation' })
    },
    //回跳重新认证
    againRZ() {
      let backRZ = localStorage.getItem('backRZ')
      if (backRZ == 'true') {
        this.showSchool = true
        localStorage.setItem('backRZ', false)
      }
    },
    /**手机号码脱敏处理
     * @method phoneDesensitization
     * @param {String} phone 需要处理的手机号码
     * @param {String} char 脱敏替换的字符
     * @return {String} 脱敏处理后的手机号码
     */
    phoneDesensitization(phone, char) {
      if (phone) {
        return phone.replace(/(\d{3})\d*(\d{4})/, `$1${new Array(5).join(char)}$2`)
      } else {
        return ''
      }
    },
    // 我的收藏
    handleMyCollect() {
      this.$router.push({ name: 'MyCollect' })
    },
    // 意见反馈
    handleFeedbook() {
      // this.$toast('暂未开放，敬请期待！');
      this.$router.push({ name: 'FeedbookList' })
    },
  },
  components: {
    Tabbar,
    HomeChildList,
    HomeOrder,
    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>
<style lang="scss">
.elder {
  .home {
    .infomation .top .right {
      .name {
        font-size: 44px;
        .school {
          font-size: 34px;
        }
      }
      .phone {
        font-size: 44px;
      }
    }
    .function .item .left span {
      font-size: 40px;
    }
  }
  .home_order {
    .top p {
      font-size: 40px;
    }
    .icon_box p {
      font-size: 40px;
    }
  }
  .home_child_list .stu_info {
    .title p {
      font-size: 40px;
    }
    .item {
      font-size: 34px;
    }
  }
}
</style>