<template>
  <view class='apply-detail'>
    <view class="info-wrapper" v-if="signUp">
      <view class="sign-info flex align-center justify-center">
        <view class="content">
          <view class="title-info flex align-center">
            <image class="no_img" src="/static/img/apply/sign_no.png" mode="" />
            <text class="no">{{ signUp.competitionNo }}</text>
          </view>
          <view class="apply-info">
            <view class="label-en text-ABC">register information</view>
            <view class="label">报名信息</view>
            <view class="user-info flex align-center" v-if="baby">
              <view class="avatar-bg">
                <image class="avatar cu-avatar loading round" :src="baby.headImg" mode="aspectFill" />
              </view>
              <view class="flex flex-direction">
                <view class="info-item flex align-center">
                  <view class="name">
                    选手姓名：{{ baby.babyName }}
                  <image class="gender" :src="baby.sex | imgUrlFilter" mode="" />
                  </view>
                </view>
                <view class="info-item" v-if="signUp.school">所在园所：{{ signUp.school.schoolName }}</view>
                <view class="info-item" v-else-if="signUp.schoolName">所在园所：{{ signUp.schoolName }}</view>
                <view class="info-item" v-else="signUp.shoppeName">所在专柜：{{ signUp.shoppeName }}</view>
                <!-- <view class="info-item">组别：{{ signUp.classLevel | filterLevel }}</view> -->
                <view class="info-item" v-if="baby">出生日期：{{ baby.babyBirthday | dateFormat('YYYY年MM月DD日') }}</view>
              </view>
            </view>
            <view class="parent-info" v-if="signUp">
              <view class="parent-item">家长姓名：{{ signUp.parentName }}</view>
              <view class="parent-item">联系方式：{{ signUp.parentPhone | phoneFilter }}</view>
              <view class="parent-item">家庭地址：{{ signUp.regionCity | regionCityFilter }}{{ signUp.address }}</view>
            </view>
            <view class="footer-text" v-if="signUp.type==1">
              <view class="footer-item">全国总决赛选手成绩、排名支持线上查询</view>
              <view class="footer-item">收费详情，请咨询全国各地大赛举办方</view>
            </view>
            <view class="footer-text" v-else>
              云赛总决赛选手成绩、排名支持线上查询
            </view>
          </view>
        </view>
      </view>
      <view class="stage">
        <!-- 0 线上 1线下 -->
        <view v-if="signUp.type==1" class="game-info flex flex-direction justify-center">
          <view class="game-item" :class="index === stageList.length -1 ? 'last-item' : ''" v-for="(item, index) in stageList" :key="index">
            <view class="cover-box">
              <view :class="['cover', index == 0 ? 'fisrt' : '']"></view>
              <view class="circle"></view>
            </view>
            <view :class="['game-header', item.state == 1 ? 'active' : '']">
              <text class="game-name">{{ item.name }}</text><text class="game-time">{{ item.startTime | dateFormat('YYYY年MM月DD日') }}-{{ item.endTime | dateFormat('MM月DD日') }}</text>
            </view>
            <view class="game-content flex" :class="['stage-section' + index, 'state' + item.state]">
              <view class="game-left"><image src="/static/img/apply/game_img.png" mode="" /></view>
              <view class="game-center" v-if="item.state == 0">
                <view class="center-title">{{ item.name }}时间：</view>
                <view class="center-time">{{ item.startTime | dateFormat('YYYY年MM月DD日') }}-{{ item.endTime | dateFormat('MM月DD日') }}</view>
              </view>
              <view class="game-center" v-else-if="item.state > 0 && (index == 0 || index == 1)">
                <view class="game-over">
                  <view class="over-item" v-if="index == 0">区域海选赛的最终成绩及排名</view>
                  <view class="over-item" v-else>区域决赛的最终成绩及排名</view>
                  <view class="over-item">请联系组织园所/老师</view>
                </view>
              </view>
              <view class="game-center" v-else-if="index == 2">
                <view class="center-title">{{ item.name }}时间：</view>
                <view class="center-time">{{ item.startTime | dateFormat('YYYY年MM月DD日') }}-{{ item.endTime | dateFormat('MM月DD日') }}</view>
                <image class="pay-status" :src="hasPaid ? '/static/img/apply/pay_success.png' : '/static/img/apply/pay_wait.png'" mode="" />
              </view>
              <view class="game-right flex justify-center align-center" v-if="item.state == 0">
                <view class="status">敬请期待</view>
                <!-- <image class="img-btn" src="/static/img/apply/status_btn.png" mode="" /> -->
                <image class="lock lock-right" src="/static/img/apply/lock.png" mode="" />
              </view>
              <view class="game-right flex justify-center align-center" :class="['game-right' + index, 'state' + item.state, 'pay' + item.hasPaid]" v-else-if="index== 2">
                <view class="status" v-if="hasPaid == 0" @tap.stop="handlePay()">缴费入口</view>
                <view class="status" v-else @tap.stop="handleResult()">成绩查询</view>
                <image class="lock lock-right" src="/static/img/apply/lock.png" mode="" />
              </view>
            </view>
          </view>
        </view>
        <view v-else class="game-info game-info-online flex flex-direction justify-center">
          <view class="game-item" :class="index === stageList.length -1 ? 'last-item' : ''" v-for="(item, index) in stageList" :key="index">
            <view class="cover-box">
              <view :class="['cover', index == 0 ? 'fisrt' : '']"></view>
              <view class="circle"></view>
            </view>
            <view :class="['game-header', item.state == 1 ? 'active' : '']">
              <text class="game-name">{{ item.name }}时间</text><text class="game-time">{{ item.startTime | dateFormat('YYYY年MM月DD日') }}-{{ item.endTime | dateFormat('MM月DD日') }}</text>
            </view>
          </view>
        </view>
        <view class="card-submit" @tap.stop="navTo('/pages/index/index')">
          <image src="/static/img/apply/card_submit.png" mode="" />
        </view>
      </view>
    </view>
    <template v-else>
      <zd-empty></zd-empty>
    </template>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import zdEmpty from '@/components/zd-empty';

export default {
  data() {
    return {
      hasPaid: 0, // 0 未支付，1已支付
      state: 0 // 0 未开始 1进行中 2已结束
    }
  },
  computed: {
    ...mapState({
      signUp: 'signUp',
      baby: 'baby',
      stageList: 'stageList'
    })
  },

  components: {
    zdEmpty
  },

  onLoad(options) {
    if(options && options.id) {
      const id = options.id;
      const type = options.type; // type 0 线上 1线下
      const url = options.type  == 1 ?  'getUserInfo' : 'getUserInfoOnline';
      this.$mStore.dispatch(url, {
        competitionChildId: id
      })
    }
  },

  onShow() {},

  filters: {
    filterLevel(val) {
      switch (val){
        case -1:
          return '托班'
        case 0:
          return '小班'
        case 1:
          return '中班'
        case 2:
          return '大班'
        default:
          return '待定'
      }
    },
    imgUrlFilter(val) {
      switch (val){
        case 1:
          return require('static/img/index/male.png')
        case 2:
          return require('static/img/index/female.png')
        default:
          return require('static/img/index/female.png')
      }
    },
    regionCityFilter(val) {
      if(val) {
        let regionCity;
        try {
          regionCity = JSON.parse(val) || [];
        } catch (error) {
          regionCity = val;
        }
        if(!Array.isArray(regionCity)) {
          return regionCity;
        } else {
          return regionCity.join('');
        }
      }
    },
    phoneFilter(val) {
      if (!val) return '暂无';
      let reg = /^(\d{3})\d{4}(\d{4})$/;
      let tel = val.replace(reg, "$1****$2");
      return tel;
    }
  },

  methods: {
    handlePay() {
      this.$mHelper.toast('暂未开始缴费');
    },
    handleResult() {
      this.$mRouter.push({
        route: '/pages/search/index'
      })
    },
    navTo(route) {
      this.$mRouter.push({
        route
      })
    }
  }

}
</script>

<style lang="scss">
page {
  background: $color-white;
  height: 100%;
}
.apply-detail {
  min-height: 100%;
  .info-wrapper {
    padding-top: 32upx;
    background: #4CD84A;
  }
  .sign-info {
    background: #4CD84A;
    margin: 0 auto;
    width: 686upx;
    padding: 12upx 12upx 14upx;
    // height: 782upx;
    background: #B6F9B6;
    box-shadow: 0px 12upx 20upx 0px rgba(35, 211, 33, 0.37);
    border-radius: 60upx;
    .content {
      width: 662upx;
      // height: 756upx;
      background: #FFFEFF;
      border-radius: 60upx;
      margin: 0 auto;
      padding: 40upx 24upx 20upx 34upx;
      .title-info {
        padding: 0 0 40upx 0upx;
        border-bottom: 2upx solid rgba(153, 153, 153, 0.1);
        .no {
          font-size: 32upx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #4CD84A;
        }
      }
      .no_img {
        width: 106upx;
        height: 36upx;
        margin-right: 20upx;
      }
    }
    .apply-info {
      padding-top: 44upx;
      .label-en {
        font-size: 40upx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #F4F4F4;
        line-height: 32upx;
      }
      .label {
        transform: translateY(-10upx);
        // margin: 64upx 0 38upx 0;
        font-size: 48upx;
        font-family: YouSheBiaoTiHei;
        color: #4D6348;
        line-height: 32upx;
      }
      .user-info {
        font-size: 0;
        margin-top: 38upx;
        .avatar-bg {
          margin-right: 30upx;
          width: 180upx;
          height: 180upx;
          border-radius: 90upx;
          border: 4upx solid #38D736;
        }
        .avatar {
          width: 180upx;
          height: 180upx;
          transform: translate(-6upx, -10upx);
          background: #FFFFFF;
        }
        .info-item {
          margin: 12upx 0;
          font-size: 28upx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #4D6348;
          line-height: 28upx;
          .name {
            max-width: 350upx;;
          }
          .gender {
            margin-left: 16upx;
            vertical-align: middle;
            width: 28upx;
            height: 28upx;
          }
        }
      }
      .parent-info {
        margin-top: 48upx;
        padding: 36upx 0 36upx 24upx;
        background: #F6F6F6;
        border-radius: 40upx;
        .parent-item {
          line-height: 28upx;
          font-size: 24upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          margin-bottom: 20upx;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
      .footer-text {
        margin-top: 18upx;
        text-align: center;
        font-size: 22upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 0.49);
        line-height: 28upx;
        .footer-item {
          position: relative;
          text-align: center;
          font-size: 22upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #4CD84A;
          line-height: 28upx;
          margin-bottom: 10upx;
          &::before {
            position: absolute;
            content: '';
            width: 6upx;
            height: 6upx;
            background: #4CD84A;
            border-radius: 50%;
            top: 50%;
            transform: translate(-16upx,-50%);
          }
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
  .stage {
    background: #4CD84A;
    margin-top: 66upx;
    // padding-left: 72upx;
    .game-info {
      &.game-info-online {
        .game-item {
          .game-header {
            margin-bottom: 62upx;
          }
        }
      }
      .game-item {
        position: relative;
        border-left: 2px solid rgba(255, 255, 255, 0.4);
        padding-left: 28upx;
        margin-left: 42upx;
        &.last-item {
          border-left: 2px solid;
          border-top: 0px;
          border-image: linear-gradient(rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%) 1 0 0 1; /* 标准的必须写在最后 */
        }
        .game-header {
          display: inline-block;
          border: 2upx solid #EAFFE9;
          padding: 0 20upx;
          height: 60upx;
          line-height: 60upx;
          border-radius: 12upx;
          margin-bottom: 26upx;
          &.active {
            background: #EAFFE9;
            .game-name {
              color: #23D321;
            }
            .game-time {
              color: #23D321;
            }
          }
          .game-name {
            font-size: 32upx;
            font-family: YouSheBiaoTiHei;
            color: #EAFFE9;
            height: 28upx;
            line-height: 28upx;
            margin-right: 12upx;
          }
          .game-time {
            font-size: 24upx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #EAFFE9;
            height: 28upx;
            line-height: 28upx;
          }
        }
        .game-content {
          position: relative;
          width: 646upx;
          height: 216upx;
          background: url('@/static/img/apply/game_item.png');
          background-size: cover;
          margin-bottom: 58upx;
          padding: 18upx 10upx 10upx 50upx;
          &.state0 {
            justify-content: space-between;
          }
          &.state1 {
            .game-left {
              margin-right: 20upx;
            }
          }
          &.state2 {
            .game-left {
              margin-right: 20upx;
            }
          }
          &.stage-section2 {
            justify-content: space-between;
            .game-center {
              .center-title {
                max-width: 274upx;
              }
            }
            &.state0 {
              .game-right {
                background: url('@/static/img/apply/status_btn.png');
                background-size: cover;
              }
            }
            .game-right {
              background: url('@/static/img/apply/status_active_btn.png');
              background-size: cover;
            }
          }
          .game-left {
            margin-top: 26upx;
            image {
              width: 112upx;
              height: 126upx;
            }
          }
          .game-center {
            margin-top: 50upx;
            .center-title {
              font-family: YouSheBiaoTiHei;
              color: #002100;
              font-size: 36upx;
              line-height: 36upx;
              margin-bottom: 20upx;
            }
            .center-time {
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
              font-size: 24upx;
              line-height: 32upx;
            }
            .game-over {
              .over-item {
                font-size: 36upx;
                font-family: YouSheBiaoTiHei;
                color: #002100;
                line-height: 40upx;
                text-align: center;
              }
            }
            .pay-status {
              position: absolute;
              transform: translateX(-146upx);
              width: 174upx;
              height: 162upx;
              top: 14upx;
              right: 0;
            }
          }
          .game-right {
            position: relative;
            background: url('@/static/img/apply/status_btn.png');
            background-size: cover;
            width: 152upx;
            height: 188upx;
            .lock-right {
              position: absolute;
              z-index: 111;
              top: -18upx;
              right: 28upx;
              width: 36upx;
              height: 38upx;
            }
            .state0 {
              background: url('@/static/img/apply/status_btn.png');
            }
            .status {
              width: 56upx;
              font-size: 30upx;
              font-family: YouSheBiaoTiHei;
              color: #FFFFFF;
              line-height: 28upx;
            }
          }
        }
        .cover-box {
          position: absolute;
          transform: translateX(-14upx);
          left: 0;
          .cover {
            width: 18upx;
            height: 18upx;
            &.fisrt {
              background: #4CD84A;
            }
          }
          .circle {
            width: 24upx;
            height: 24upx;
            background: #4CD84A;
            border: 4upx solid #FFFEFF;
            border-radius: 50%;
          }
        }
      }
    }
    .card-submit {
      font-size: 0;
      text-align: center;
      padding-bottom: 42upx;
      image {
        width: 666upx;
        height: 124upx;
      }
    }
  }
}
</style>
