<!--
查排名 页面
-->
<script>
import StaticConstant from "@/common/StaticConstant";
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'
import CommonTool from "@/common/js/commonTool";
let request = new Request()
export default {
  name: "checkRanking",
  components: {},
  computed: {
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      province:'河南',
      score: '',
      list:[],
      tab: 'professional',
      show: true,
      modeClass: 'fade',
      styles: {},
      array: ['河南'],
      index: 0,
      professionalCategoryArray:[],
      professionalCategoryIndex:0,
      fdbList:[
        {
          score:285,
          personNum:36
        },
        {
          score:280,
          personNum:59
        },
        {
          score:275,
          personNum:161
        },
      ]
    }
  },
  async onLoad() {
    this.professionalCategoryArray = await CommonTool.loadStaticConfig('professionalCategoryList')
  },
  methods: {
    handle(type) {
      this.show = !this.show
      this.modeClass = type
    },
    /*切换分数类型*/
    switchTab(e) {
      this.tab = e
    },
    /*点击查询按钮*/
    clickSearch() {
      if (this.status === 'show') {
        this.handle('fade')
        return;
      }
      if (!this.score) {
        uni.showToast({
          title: '请先输入分数',
          icon: 'none'
        })
        return
      }
      this.handle('fade')
      if (!this.show) {
        this.getList()
      }
    },
    getList(){
      request.get(ApiConstant.Score.scoreSegmentSearchByScore, {
        province:this.array[this.index],
        score:this.score,
        professionalCategory:this.professionalCategoryArray[this.professionalCategoryIndex].label
      }).then(r => {
        console.log(r)
        if (r.success) {
          console.log(r)
          this.list = r.result
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    bindPickerChange(e){
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.index = e.detail.value
    },
    bindProfessionalCategoryArrayPickerChange(e){
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.professionalCategoryIndex = e.detail.value
    }
  }
}
</script>

<template>
  <view class="body">
    <view class="example">
      <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
                      :show="show">
      </uni-transition>
      <view style="transition:opacity  0.3s" :class="show?'t-show':'t-close'">
        <view class="b1">
          <view class="title">
            <text>艺考排名查询</text>
          </view>
        </view>
        <view class="b2">
          <!--输入分数-->
          <view style="display: flex;padding: 0 60rpx">
            <view style="width: 100%">
              <input style="font-size: 50rpx;height: 60rpx;text-align:center" v-model="score" placeholder="请输入分数"/>
            </view>
          </view>
          <!--切换成绩-->
          <view style="padding: 2rpx 30rpx;text-align: center;">
            <view style="display: flex;border-top:1px #dddddd dashed;">
              <view class="scoreTitle" :class="tab==='professional'?'scoreTitle-active':''" @click="switchTab('professional')">
                <text>统考成绩</text>
              </view>
<!--              <view class="scoreTitle" :class="tab==='cultural'?'scoreTitle-active':''" @click="switchTab('cultural')">
                <text>文化成绩</text>
              </view>-->
            </view>
          </view>
          <view style="display: flex;padding: 30rpx 60rpx">
            <view style="width: 50%;margin: 0 auto;text-align: center;">
              <picker @change="bindPickerChange" :value="index" :range="array">
                <view class="uni-input">{{array[index]}}</view>
              </picker>
            </view>
          </view>
          <view style="display: flex;padding: 30rpx 60rpx">
            <view style="width: 50%;margin: 0 auto;text-align: center;">
              <picker @change="bindProfessionalCategoryArrayPickerChange" :value="professionalCategoryIndex" :range="professionalCategoryArray" range-key="label">
                <view class="uni-input">{{professionalCategoryArray[professionalCategoryIndex].label}}</view>
              </picker>
            </view>
          </view>

        </view>
        <view class="fdb" v-if="false">
          <view class="table">
            <view class="tr tr-line-while">
              <view class="th">分数段</view>
              <view class="th">人数</view>
            </view>
            <view class="tr" v-for="(item,index) in fdbList" :key="index" :class="index%2===0?'backstar':'backwhile'">
              <view class="td">{{item.score}}</view>
              <view class="td">{{item.personNum}}</view>
            </view>
          </view>
        </view>
      </view>

    </view>
    <view class="b1" style="transition:opacity 0.5s" :class="!show?'t-show':'t-close'">
      <view class="title2">
        <text style="display: flex">{{province}}{{tab==='professional'?'统考成绩':'文化成绩'}}{{score}}分</text>
        <text style="display: flex">历年位次情况如下:</text>
      </view>
      <view class="list">
        <view v-for="(item,index) in list" :key="index" class="item">
          <view class="" v-if="item.type === 1">
            <view  style="display: flex">{{item.year}}年</view>
            <view  style="display: flex">{{item.beginScore}}分<text v-if="item.endScore">~{{item.endScore-1}}分</text> 超越全省</view>
            <view  style="display: flex"><view class="orange">{{item.rate}}%</view>的考生</view>
            <view class="item flexWrap">
              <text>排名介于</text>
              <text class="orange">{{item.endRank}}</text>
              <text>~</text>
              <text class="orange">{{item.startRank}}</text>
              <text>之间</text>
            </view>
          </view>
          <view class="" v-else-if="item.type === 2">
            <view style="display: flex">您的分数已低于{{item.year}}公布的最低分{{item.beginScore}}分<!--，排名为{{item.rank}}名--></view>
          </view>
        </view>
      </view>
    </view>
    <view class="b3">
      <view class="max-btn " @click="clickSearch" :class="show?'marginTopBot10':'margin-top-300'">
        <view class="btn">
          {{ show ? '查询' : '重置' }}
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.body {
  height: 100%;
  background: linear-gradient(#ffffff,#fffcf0,#fef4d2);
}

/*标题*/
.b1 {
  padding-top: 100rpx;
  text-align: center;
  font-size: 50rpx;
  margin-bottom: 100rpx;
}

.b2 {
}

.title2{
  margin-left: 25%;
  margin-right: 25%;
  font-size: 40rpx;
  color:#f9ca1b;
}
.list{
  margin-top: 30rpx;
  font-size: 35rpx;
  text-align: left;
  margin-left: 25%;
  margin-right: 20%;
  .item{
    margin-bottom: 20rpx;
  }
}

.scoreTitle {
  width: 100%;
  font-size: 30rpx;
  transition: 0.3s;
}
/*选择的tab*/
.scoreTitle-active {
  font-size: 35rpx;
  border-top: 6rpx solid #f9ca1b;
}

/*查询按钮*/
.max-btn {
  width: 200rpx;
  height: 200rpx;
  text-align: center;
  background-color: #f9ca1b;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  right: 38%;
  left: 37%;

  //bottom: 450rpx;
}
/*二层按钮*/
.btn {
  color: #f9ca1b;
  font-size: 40rpx;
  line-height: 180rpx;
  width: 180rpx;
  height: 180rpx;
  background-color: #3e3a39;
  border-radius: 50%;

}
.t-show{
}
.t-close{
  display: none;
}
.uni-input{
  font-size: 35rpx;
  background: none !important;
}

/*分段表 start*/
.fdb{
  position: relative;
  top: 300rpx;
  padding: 20rpx 50rpx;
}
.fdb .table{
}
.fdb .table .tr{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 70rpx;
  line-height: 70rpx;
}
.tr-line-while{
  background-color:  #ffffff;
  border-radius: 15rpx;
}
.fdb .table .tr .th{
  text-align: center;
  width: 49.5%;
  color: #9fa0a0;
}
.fdb .table .tr .td{
  text-align: center;
  width: 49.5%;
  color: #000000;
}
.backwhile{
  background-color: white;
}
.backstar{
  background-color: #f7f8f8;
}
/*分段表 end*/
</style>

