<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">{{userInfo.nickName}}</p>
            <p class="phone">{{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>
        <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 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'
import { Dialog } from 'vant'
export default {
  data () {
    return {
      centerNo: '',
      userInfo: {
        openId: '',
        headImg: '',
        nickName: '',
        phone: '',
        roleType: '',
        time: '',
        year: '',
        studentName: '',
        school: '',
      },
      nicknameUser: '',
      headImgUrl: '',
      defaultHead: require('@/assets/head.png'),
      isShow: false,
      showChildList: false,
      isElder: false
    }
  },

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

  },
  methods: {
    // 研学码
    handleYanxue () {
      this.$router.push({ name: 'YanxueCode' })
    },
    // 我的订单
    handleOrder () {
      this.$router.push({ name: 'ServiceOrderXST' })
    },
    // 集团认证
    handleGroup () {
      this.$toast('暂未开放，敬请期待！');
    },
    // 我的优惠券
    handleMyCard () {
      this.$router.push({ name: 'CardBoxXST' })
    },
    // 合伙人中心
    handlePartner () {
      this.$toast('暂未开放，敬请期待！');
      //   this.$router.push({ name: 'Partner' })
    },
    // 点击长辈版
    handelElder () {
      if (this.isElder) {
        Dialog.confirm({
          title: '长辈版',
          message: '超大字号，看的更清楚，长辈版，专为长辈设计',
          confirmButtonColor: '#ee0a24',
          confirmButtonText: '关闭长辈版模式'
        })
          .then(() => {
            // on confirm
            this.isElder = false
            localStorage.removeItem('isElder')
            this.$emit('setElder', false)
          })
          .catch(() => {
            // on cancel
          });
      } else {
        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: function () {
      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))
          }
          this.showChildList = true

        },
        onFail: err => {
          console.log('err', err)
        }
      });
    },
    formatterTime (time) {
      if (time) {
        return time.split(' ')[0]
      } else {
        return ''
      }
    },
    complete () {
      this.getUserInfo()
    }
  },
  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;
      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>
<style lang="scss">
.elder {
  .home {
    .infomation .top .right {
      .name {
        font-size: 44px;
      }
      .phone {
        font-size: 44px;
      }
    }
    .function .item .left span {
      font-size: 40px;
    }
  }
}
</style>