<template>
  <view class='search-container'>
    <view class="search-head"></view>
    <view class="search-content">
      <view class="search-title flex" :class="['active' + currentTab]">
        <view v-for="(item, index) in tabs" :key="index" class="tab" :class="currentTab === index ? 'active' : ''" @tap.stop="handeTab(index)">
          {{ item.title }}
        </view>
      </view>
      <view class="search-info">
        <view class="search-input">
          <input class="padding-left" v-model="competitionNo" type="text" placeholder="请输入参赛选手姓名或编号" confirm-type="search"></input>
        </view>
        <!-- 查询总决赛成绩 -->
        <view class="search-btn" @tap.stop="handleSearch(3)"> 
          <image src="/static/img/apply/btn_search.png" mode="" />
        </view>
        <view class="logo">
          <image src="/static/img/apply/logo.png" mode="" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { searchResult } from '@/api/apply';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      competitionNo: '', // 00000036
      currentTab: 0,
      tabs: [
        {
          title: '全国总决赛'
        },
        {
          title: '云赛总决赛'
        }
      ]
    }
  },

  onLoad() {},

  onShow() {},

  computed: {
    ...mapState({
      stageList: 'stageList',
      signUp: 'signUp'
    })
  },

  methods: {
    handleSearch(stage) {
      if (!this.signUp) {
        this.$mHelper.toast('暂无报名信息');
        return false;
      }
      if (!this.stageList || this.stageList.length <= 0) {
        this.$mHelper.toast('暂无赛事信息');
        return false;
      }
      if (!this.competitionNo) {
        this.$mHelper.toast('请输入参赛选手姓名或编号');
        return false;
      }
      // const competitionNo = this.signUp.competitionNo || '';
      const stageId = this.stageList[stage - 1].id || '';
      this.$http.
        get(searchResult, {
          no: this.competitionNo,
          stageId: 4 // 4
        })
        .then(res => {
          if (!res.data) {
            this.$mHelper.toast('暂未查询到比赛成绩');
          } else {
            this.$mHelper.toast('查询成功');
            this.$mStore.commit('result', res.data);
            setTimeout(() => {
              this.$mRouter.push({
                route: '/pages/search/result'
              })
            },1000)
          }
        })
        .catch(() => {
          console.log('catch');
        })
    },
    handeTab(index) {
      this.currentTab = index;
    }
  }

}
</script>

<style lang="scss" scope>
page {
  height: 100%;
}
.search-container {
  min-height: 100%;
  background: linear-gradient(180deg, #67DD5B, #72CF53);
  .search-head {
    background: url('@/static/img/apply/search_bg.png');
    background-size: cover;
    height: 326upx;
  }
  .search-content {
    position: relative;
    padding: 14upx 12upx;
    width: 686upx;
    background: #B6F9B6;
    box-shadow: 0px 12upx 20upx 0px rgba(35, 211, 33, 0.37);
    border-radius: 60upx;
    margin: 0 auto;
    transform: translateY(-56upx);
  }
  .search-title {
    position: relative;
    text-align: center;
    height: 163upx;
    padding-top: 20upx;
    &.active1 {
      &::before {
        transform: rotateY(180deg);
      }
    }
    &::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
      background-image: url('@/static/img/apply/tab_bg.png');
      background-size: 100% 100%;
    }
    .tab {
      flex: 1;
      font-size: 36upx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #3EE027;
      line-height: 50upx;
      &.active {
        font-size: 36upx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #3EE027;
        line-height: 50upx;
      }
    }
  }
  .search-info {
    background: #ffffff;
    height: 100%;
    border-radius: 0 0 60upx 60upx;
    padding: 52upx 34upx 0;
  }
  .search-input {
    background: #F7F7F7;
    border-radius: 80upx;
    uni-input {
      height: 96upx;
      line-height: 96upx;
    }
    .input-placeholder {
      height: 40upx;
      line-height: 40upx;
      font-size: 28upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #C8C8C8;
    }
  }
  .search-btn {
    text-align: center;
    font-size: 0;
    margin: 52upx auto 48upx; 
    image {
      width: 530upx;
      height: 122upx;
      margin: 20upx auto;
    }
  }
  .logo {
    text-align: center;
    font-size: 0;
    image {
      width: 151upx;
      height: 167upx;
    }
  }
}
</style>
