<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/Travel/change.png" /></div>
            </div>
            <p class="phone">{{userInfo.phone}}</p>
          </div>
        </div>
        <HomeScan></HomeScan>
      </div>
    </div>
    <HomeOrder></HomeOrder>
    <div class="function">
      <div class="item" @click="handleMyCard">
        <div class="left">
          <van-icon class="icon" name="discount" />
          <span>我的优惠券</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <!-- <div class="item" @click="handleMyInfo">
        <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>

    <!-- <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 HomeChildList from '@/views/Home/component/HomeChildList'
import HomeOrder from '@/views/Home/component/HomeOrder'
import HomeScan from '@/views/Home/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,
      isElder: false,
      showChildList: false,
      showSchool: false,
      schoolNamesChoose: ''
    }
  },

  mounted () {
    const isElder = localStorage.getItem('isElder')
    if (isElder) {
      this.isElder = true
    }

    let schoolNamesChoose = localStorage.getItem('schoolNamesChoose')
    if (schoolNamesChoose) {
      this.schoolNamesChoose = JSON.parse(schoolNamesChoose)
    }
    this.centerNo = localStorage.getItem('centerNo');
    this.getUserInfo()
    this.againRZ()

  },
  computed: {
    schoolNames () {
      return this.$store.state.schoolName
    }
  },
  methods: {
    // 研学码
    handleYanxue () {
      this.$router.push({ name: 'YanxueCode' })
    },
    // 我的订单
    handleOrder () {
      this.$router.push({ name: 'ServiceOrderXST' })
    },
    // 集团认证
    handleGroup () {
      this.$toast('暂未开放，敬请期待！');
    },
    // 我的优惠券
    handleMyCard () {
      this.$router.push({ name: 'CardBoxXST' })
    },
    // 个人信息
    handleMyInfo () {
      this.$router.push({ name: 'HomeUserInfo' })
    },
    // 合伙人中心
    handlePartner () {
      this.$toast('暂未开放，敬请期待！');
      //   this.$router.push({ name: 'Partner' })
    },
    // 点击长辈版
    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
          });
      }
    },
    // 获取用户信息
    getUserInfo () {
      this.mgop({
        api: 'mgop.sz.hswsy.getPortalUserByNum', // 必须
        host: 'https://mapi.zjzwfw.gov.cn/',
        dataType: 'JSON',
        type: 'GET',
        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
        headers: {
          //   'isTestUrl': '1'
        },
        data: {
          "userNum": this.centerNo
        },
        onSuccess: res => {
          console.log('getUserInfo', 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') {
              localStorage.setItem('schoolNames', JSON.stringify(userInfo.schoolNames))
              this.$store.commit('changeSchool', userInfo.schoolNames)
              if (!localStorage.getItem('schoolNamesChoose')) {
                localStorage.setItem('schoolNamesChoose', userInfo.schoolNames[0])
                this.schoolNamesChoose = userInfo.schoolNames[0]
              }
            } else {
              localStorage.setItem('schoolNames', [])
              this.$store.commit('changeSchool', [])
            }
          }
          this.showChildList = true
        },
        onFail: err => {
          console.log('err', err)
        }
      });
    },
    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)
      }
    }
  },
  components: {
    Tabbar4,
    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;
      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;
        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: #d82b2b;
            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;
      }
      .phone {
        font-size: 44px;
      }
    }
    .function .item .left span {
      font-size: 40px;
    }
  }
}
</style>