<!--
算投档 页面
-->
<script>
import StaticConstant from "@/common/StaticConstant";
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'

let request = new Request()
export default {
  name: "calculateInvestment",
  components: {},
  computed: {
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      show:true,
      //省份
      provinceArray: StaticConstant.provinceList,
      provinceIndex: 0,
      //专业类别
      professionalCategoryArray: StaticConstant.professionalCategoryList.filter((item)=>{
        return item.value !=='体育类'
      }),
      professionalCategoryIndex: 0,
      //文理分科选择参数
      categoryArray: StaticConstant.categoryList,
      categoryIndex: 0,
      //批次
      batchArray: StaticConstant.batchAllList,
      batchIndex: 0,
      culturalScore: '',//文化分
      professionalScore: '',//统考分
      list:[
        {
          rulesEnrollProbability:'文过专排',
          probabilityOperator:'专业分',
          score:1,
          schoolNum:11
        },
        {
          rulesEnrollProbability:'文3专7',
          probabilityOperator:'文化分*0.04+专业分+0.233',
          score:1,
          schoolNum:5
        }
      ]
    }
  },
  methods: {
    bindProvinceArrayPickerChange(e) {
      this.provinceIndex = e.detail.value
    },
    bindCategoryArrayPickerChange(e) {
      this.categoryIndex = e.detail.value
    },
    bindProfessionalCategoryArrayPickerChange(e) {
      this.professionalCategoryIndex = e.detail.value
    },
    bindBatchArrayPickerChange(e) {
      this.batchIndex = e.detail.value
    },
    inputCulturalScoreClick(e) {
      const o = e.detail.value
      const inputRule = /[^\d]/g
      this.$nextTick(() => {
        this.culturalScore = o.replace(inputRule, '');
      })
    },
    inputProfessionalScoreClick(e) {
      const o = e.detail.value
      const inputRule = /[^\d]/g
      this.$nextTick(() => {
        this.professionalScore = o.replace(inputRule, '');
      })
    },
    clickCalculate(){
      if (!this.culturalScore) {
        uni.showToast({
          title: '请输入文化分',
          icon: 'none'
        })
        return
      }
      if (!this.professionalScore) {
        uni.showToast({
          title: '请输入专业分',
          icon: 'none'
        })
        return
      }
      this.show = !this.show
      if (!this.show) {
        request.get(ApiConstant.Major.calculateInvestment, {
          province:this.provinceArray[this.provinceIndex].label,
          culturalScore: this.culturalScore,//文化分
          professionalScore: this.professionalScore,//统考分
          category:this.categoryArray[this.categoryIndex].name,
          professionalCategory:this.professionalCategoryArray[this.professionalCategoryIndex].label,
          batch:this.batchArray[this.batchIndex].value
        }).then(r => {
          console.log(r)
          if (r.success) {
            console.log(r)
            this.list = r.result
          }
        }).catch(err => {
        }).finally(() => {
        });
      }
    }
  }
}
</script>

<template>
  <view class="body">
    <view class="flex">
      <view class="title marginCenter">
        <text>轻松投档分测算</text>
      </view>
    </view>
    <view v-if="show">
      <!--分数-->
      <view class="flex flex" style="margin-top: 100rpx">
        <view class="flex-item-4">
          <view class="fbox">
            <view class="flex" style="width: 50%">
              <view class="ftitle">文化分</view>
            </view>
            <view class="flex" style="padding: 30rpx;font-size: 35rpx">
              <input type="number" style="text-align: center;" v-model="culturalScore" @input='inputCulturalScoreClick'
                     placeholder="输入分数"/>
            </view>
            <view class="flex flex">
              <view class="right-text">分</view>
            </view>
          </view>
        </view>
        <view class="flex-item-4 margin-right">
          <view class="fbox">
            <view class="flex" style="width: 50%">
              <view class="ftitle-orange">专业分</view>
            </view>
            <view class="flex" style="padding: 30rpx;font-size: 35rpx">
              <input type="number" style="text-align: center;" v-model="professionalScore"
                     @input='inputProfessionalScoreClick' placeholder="输入分数"/>
            </view>
            <view class="flex flex">
              <view class="right-text-orange">分</view>
            </view>
          </view>
        </view>
      </view>
      <!--下拉项-->
      <view class="options">
        <!--省份-->
        <view class="flex flex option-item">
          <view class="flex-item-3">
            <view class="left-t">省份<label></label></view>
          </view>
          <view class="flex-item-7 ml10">
            <picker @change="bindProvinceArrayPickerChange" :value="provinceIndex" :range="provinceArray"
                    range-key='label'>
              <view class="right-input">{{ provinceArray[provinceIndex].label }}</view>
            </picker>
          </view>
        </view>
        <!--文理-->
        <view class="flex flex option-item">
          <view class="flex-item-3">
            <view class="left-t">文理<label></label></view>
          </view>
          <view class="flex-item-7 ml10">
            <picker @change="bindCategoryArrayPickerChange" :value="categoryIndex" :range="categoryArray"
                    range-key='name'>
              <view class="right-input">{{ categoryArray[categoryIndex].name }}</view>
            </picker>
          </view>
        </view>
        <!--统考类别-->
        <view class="flex flex option-item">
          <view class="flex-item-3">
            <view class="left-t">统考类别<label></label></view>
          </view>
          <view class="flex-item-7 ml10">
            <picker @change="bindProfessionalCategoryArrayPickerChange" :value="professionalCategoryIndex"
                    :range="professionalCategoryArray" range-key='label'>
              <view class="right-input">{{ professionalCategoryArray[professionalCategoryIndex].label }}</view>
            </picker>
          </view>
        </view>
        <!--批次-->
        <view class="flex flex option-item">
          <view class="flex-item-3">
            <view class="left-t">批次<label></label></view>
          </view>
          <view class="flex-item-7 ml10">
            <picker @change="bindBatchArrayPickerChange" :value="batchIndex" :range="batchArray" range-key='label'>
              <view class="right-input">{{ batchArray[batchIndex].label }}</view>
            </picker>
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <view class="options">
        <!--省份-->
        <view class="flex flex option-item">
          <view class="flex-item-3">
            <view class="left-t">省份<label></label></view>
          </view>
          <view class="flex-item-7 ml10">
            <view class="right-input">{{ provinceArray[provinceIndex].label }}</view>
          </view>
        </view>
        <!--批次-->
        <view class="flex flex option-item">
          <view class="flex-item-3">
            <view class="left-t">统考类别<label></label></view>
          </view>
          <view class="flex-item-7 ml10">
            <view class="right-input">{{ professionalCategoryArray[professionalCategoryIndex].label }}</view>
          </view>
        </view>
        <!--批次-->
        <view class="flex flex option-item">
          <view class="flex-item-3">
            <view class="left-t">批次<label></label></view>
          </view>
          <view class="flex-item-7 ml10">
            <view class="right-input">{{ batchArray[batchIndex].label }}</view>
          </view>
        </view>
        <!--文化成绩，专业成绩-->
        <view class="flex flex option-item">
          <view class="flex-item-3">
            <view class="left-t width1">文化成绩<label></label></view>
          </view>
          <view class="flex-item-2 ml10">
            <view class="right-input">{{ culturalScore }}</view>
          </view>
        </view>
        <view class="flex flex option-item">
          <view class="flex-item-3">
            <view class="left-t width1">专业成绩<label></label></view>
          </view>
          <view class="flex-item-2 ml10">
            <view class="right-input">{{ professionalScore }}</view>
          </view>
        </view>
        <view class="flex flex option-item">
          <view class="flex-item-10">
            <view class="left-t align-left">本批次所有院校录取规则为<label></label></view>
          </view>
        </view>
      </view>
      <!--数据列表-->
      <view class="datalist">
        <!--表头-->
        <view class="th">
          <text>类型</text>
          <text>录取规则</text>
          <text>综合分</text>
        </view>
        <view class="tr" v-for="(item,index) in list" :key="index">
          <text class="text">{{item.rulesEnrollProbability}}</text>
          <text class="text" style="font-size: 23rpx">{{item.probabilityOperator}}</text>
          <view class="zhf">
            <text v-if="item.score">{{item.score}}分</text>
            <view style="border: 1rpx solid #399ee8;border-radius: 10rpx;width: 160rpx;padding: 5rpx 8rpx">查看院校{{item.schoolNum}}所</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view style="margin: 0 auto">
        <view class="" @click="clickCalculate"
              style="background-color:#ed9916;color:white;font-size: 40rpx;width: 200rpx;height: 200rpx;border-radius: 50%;text-align: center;line-height: 200rpx">
          <text>{{show?'计算':'重置'}}</text>
        </view>
      </view>
    </view>
  </view>

</template>

<style scoped lang="scss">
.body {
  background: white;
  height: 100%;
  padding: 0 15%;
}

/*标题*/
.title {
  padding-top: 50rpx;
  color: #399ee8;
  font-size: 60rpx;
  font-weight: 600;
}

.fbox {
  min-height: 200rpx;
  border-radius: 10rpx;
  box-shadow: 0 0 10rpx 5rpx #aaa;

  .ftitle {
    background-color: #399ee8;
    color: white;
    border-radius: 10rpx;
    font-size: 28rpx;
    margin: 0 auto;
    text-align: center;
    height: 40rpx;
    line-height: 40rpx;
  }
}

.ftitle-orange {
  background-color: #ed9916;
  color: white;
  border-radius: 10rpx;
  font-size: 28rpx;
  margin: 0 auto;
  text-align: center;
  height: 40rpx;
  line-height: 40rpx;
}

.right-text {
  color: #399ee8;
  margin: 0 10rpx 0 auto;
  height: 40rpx;
  line-height: 40rpx;
}

.right-text-orange {
  color: #ed9916;
  margin: 0 10rpx 0 auto;
  height: 40rpx;
  line-height: 40rpx;
}

.margin-right {
  margin: 0 0 0 auto;
}

.options {
  margin-top: 100rpx;

  .left-t {
    background-color: #399ee8;
    color: white;
    height: 50rpx;
    line-height: 50rpx;
    border-radius: 10rpx;
    padding: 5rpx 10rpx;
    font-size: 33rpx;
    text-align: justify;
    label {
      display: inline-block;
      padding-left: 100%;
    }
  }
  .align-left{
    text-align: left !important;
  }

  .right-input {
    padding: 5rpx 10rpx;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 35rpx;
  }

  .option-item {
    margin-bottom: 10rpx;
  }
}

.ml10 {
  margin-left: 10rpx;
}

.bottom {
  display: flex;
  /*position: fixed;*/
  /*bottom: 80rpx;*/
  padding: 0 20%;
}

.datalist{
  height: 700rpx;
  overflow:scroll;
  text-align: center;
  .th{
    display: flex;
    text{
      width: 33%;
      font-size: 30rpx;
      font-weight: 600;
    }
  }
  .tr{
    height: 100rpx;
    margin: 30rpx 0;
    display: flex;
    .text{
      margin: auto 0;
      font-size: 28rpx;
      width: 33%;
    }
    .zhf{
      color: #399ee8;
      font-size: 25rpx;
    }
    .text2{

    }
  }
}
</style>
