<template>
  <view class='me'>
    <!-- 头部 -->
    <view class="user-section">
      <view class="user-info-box flex align-center">
        <image class="avatar" :src="user.avatarUrl || userInfo.headimgurl" mode="" />
        <view class="user-info-content">
          <view class="username cu-cut">{{ userInfo.nickname || user.nickName || '暂无昵称' }}</view>
          <view class="tag cu-cut" v-if="signUp">
            {{baby.babyName}}
            <view class="tag-name">{{signUp.classLevel | filterLevel}}</view>
          </view>
        </view>
      </view>
      <image class="logo" :src="logoImg" mode="" />
    </view>
    <!-- 列表 -->
    <view class="list-section">
      <view class="list-content">
        <view class="list-item arrow" v-for="(item, index) in setList" :key="index" @tap="navTo(item.type,item.url)">
          <view class="list-item-info flex align-center">
            <image class="item-img" :src="item.icon" mode="aspectFill" />
            <view class="item-right flex justify-between align-center" :class="index + 1 === setList.length ? 'last-right' : ''">
              <text class="item-title">{{ item.title }}</text>
              <text class="cuIcon-right"></text>
            </view>
            <view class="open-weapp" v-if="weappShow && item.type == 3">
              <open-weapp :username="'gh_2a4feb568ecb'" :path="rightPath" :content="conntent"></open-weapp>
            </view>
          </view>
          <view class="line" v-if="index === 3"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import OpenWeapp from '@/components/open-weapp/open';

export default {
  data() {
    return {
      userAva: require('@/static/img/user/user_avatar.png'),
      logoImg: require('@/static/img/common/logo.png'),
      userInfo: {
        nickname: '暂无',
        headimgurl: require('@/static/img/user/user_avatar.png'),
      },
      setList: [
        {
          type: 1,
          title: '我的报名',
          icon: '/static/img/user/me_icon01.png',
          url: '/pages/apply/list'
        },
        {
          type: 2,
          title: '线上云赛',
          icon: '/static/img/user/me_icon02.png',
          url: ''
        },
        {
          type: 3,
          title: '赛前练习',
          icon: '/static/img/user/me_icon03.png',
          url: ''
        },
        {
          type: 4,
          title: '成绩查询',
          icon: '/static/img/user/me_icon06.png',
          url: '/pages/search/index'
        },
        {
          type: 5,
          title: '宝宝信息',
          icon: '/static/img/user/me_icon04.png',
          url: '/pages/me/baby'
        },
        {
          type: 6,
          title: '家长信息',
          icon: '/static/img/user/me_icon05.png',
          url: '/pages/me/parent'
        },
        {
          type: 7,
          title: '设置',
          icon: '/static/img/user/me_icon07.png',
          url: '/pages/me/set'
        }
      ],
      conntent: '<div class="btn" style="width:100%; min-height:50px; display:block; font-size:14px;color: #ffffff;">打开app</div>',
      weappShow: process.env.NODE_ENV === 'production' ? true : false,
      rightPath: '/pages/pattern/index'
    };
  },

  onLoad() {
    this.initData();
  },

  onShow() {},

  components: {
    OpenWeapp
  },

  filters: {
    filterLevel(val) {
      switch (val){
        case -1:
          return '托班'
        case 0:
          return '小班'
        case 1:
          return '中班'
        case 2:
          return '大班'
        default:
          return '待定'
      }
    }
  },

  computed: {
    ...mapState({
      wxUser: 'wxUser',
      user: 'user',
      signUp: 'signUp',
      baby: 'baby'
    })
  },

  methods: {
    initData() {
      if(this.wxUser || this.user) {
        this.userInfo = this.wxUser || this.user;
      }
    },
    navTo(type, route) {
      if (type == 1) { // 我的报名
        console.log('我的报名');
        // if (!this.signUp) {
        //   this.$mRouter.push({
        //     route: '/pages/index/gameDetail'
        //   });
        // }
      } else if (type == 2) { // 线上云赛
        this.$mHelper.toast('您还未参与线上云赛');
        return false;
      } else if (type == 3) { // 赛前练习
        // this.$mHelper.toast('您还未参与赛前练习');
        if (!this.weappShow) {
          this.$mHelper.toast('您还未参与赛前练习');
        }
        return false;
      } else if (type == 4) { // 成绩查询
        console.log('成绩查询');
        // if(!this.baby) {
        //   this.$mHelper.toast('暂未报名')
        //   return false;
        // }
      } else if (type == 5) { // 宝贝信息
        if (!this.baby) {
          this.$mHelper.toast('暂未信息')
          return false;
        }
      } else if (type == 6) { // 家长信息
        if (!this.signUp) {
          this.$mHelper.toast('暂未信息')
          return false;
        }
      } else {
        this.$mHelper.toast('暂待开发')
      }
      this.$mRouter.push({route});
    }
    
  },
};
</script>

<style lang="scss">
page {
  background: $color-white;
  // background: #F5F6F9;
  height: 100%;
}
.user-section {
  position: relative;
  background: #F5F6F9;
  .user-info-box {
    padding: 28rpx 0 120rpx;
    .avatar {
      width: 152upx;
      height: 152upx;
      margin: 0 26upx 0 32upx;
      border-radius: 50%;
    }
    .username {
      max-width: 350upx;
      font-size: 40upx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      line-height: 40upx;
    }
    .tag {
      max-width: 360upx;
      position: relative;
      margin-top: 18upx;
      padding: 0 12upx 0 98upx;
      height: 40upx;
      background: #FCC107;
      border-radius: 20upx;
      text-align: right;
      font-size: 24upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      display: inline-block;
      .tag-name {
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
        width: 86upx;
        height: 40upx;
        line-height: 40upx;
        background: #FFFFFF;
        box-shadow: 0px 4upx 8upx 0px rgba(252, 193, 7, 0.21);
        border-radius: 20upx;
        font-size: 28upx;
        font-family: YouSheBiaoTiHei;
        color: #FCC107;
      }
    }
    .user-info-content {
      max-width: 360upx;
    }
  }
  .logo {
    width: 210upx;
    height: 280upx;
    position: absolute;
    right: 10upx;
    bottom: -16upx;
  }
}
.list-section {
  background: $color-white;
  transform: translateY(-40upx);
  border-radius: 40upx 40upx 0upx 0upx;
}
.list-content {
  .list-item {
    position: relative;
    &.arrow {
      &::before {
        color: #CACACA;
      }
    }
    &:after {
      border-bottom: 1px solid #F6F6F6;
    }
    .item-img {
      width: 66upx;
      height: 66upx;
      margin-right: 16upx;
    }
    .item-title {
      font-size: 32upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 36upx;
    }
    .open-weapp {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
    }
    .list-item-info {
      padding: 0 54upx 0 42upx;
      .item-right {
        flex: 1;
        border-bottom: 2upx solid #F6F6F6;
        padding: 38upx 0 44upx;
        &.last-right {
          border-bottom: none;
        }
      }
    }
    .cuIcon-right {
      line-height: 1;
      color: #CACACA;
    }
  }
  .line {
    width: 100%;
    height: 20upx;
    background: #F8F8F8;
  }
}
</style>
