<!--
算投档 页面
-->
<script>
import StaticConstant from "@/common/StaticConstant";
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'
import JumpTool from "@/common/js/jumpTool";
import {stringIsNotEmpty} from "../../../common/util";

let request = new Request()
export default {
  name: "calculateInvestment",
  components: {},
  computed: {
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      show:true,
      vipInfo:{},
      scoreInfo:{},
      //省份
      provinceArray: StaticConstant.provinceList,
      provinceIndex: 0,
      //专业类别
      professionalCategoryArray: StaticConstant.professionalCategoryList,
      professionalCategoryIndex: 0,
      //文理分科选择参数
      categoryArray: StaticConstant.categoryList,
      categoryIndex: 0,
      //批次
      batchArray: [{label: '本科批', value: '本科'}, {label: '高职高专批', value: '高职高专'}],
      batchIndex: 0,
      culturalScore: '',//文化分
      professionalScore: '',//统考分
      list:[]
    }
  },
  onLoad(){
    this.vipInfo = uni.getStorageSync('vipInfo')
    this.scoreInfo = uni.getStorageSync('scoreInfo')
  },
  methods: {
    bindProvinceArrayPickerChange(e) {
      this.provinceIndex = e.detail.value
    },
    bindCategoryArrayPickerChange(e) {
      this.categoryIndex = e.detail.value
    },
    bindProfessionalCategoryArrayPickerChange(e) {
      this.professionalCategoryIndex = e.detail.value
      this.batchIndex = 0
    },
    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.vipInfo || !stringIsNotEmpty(this.vipInfo.vipLevel) || this.vipInfo.vipLevel<1) {
        uni.showModal({
          title: 'VIP专享',
          // 提示文字
          content: '该功能为增值内容，开通会员后即可免费查看！',
          // 取消按钮的文字自定义
          cancelText: "取消",
          // 确认按钮的文字自定义
          confirmText: "开通服务",
          //删除字体的颜色
          confirmColor: 'red',
          //取消字体的颜色
          cancelColor: '#dddddd',
          success: function (res) {
            if (res.confirm) {
              //JumpTool.openVip()
              uni.navigateTo({
                url: '/pages/zyb/vip/index'
              })
            }
          }
        })
        return
      }
      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.scoreInfo.cognitioPolyclinic,//this.categoryArray[this.categoryIndex].name
          professionalCategory:this.scoreInfo.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(() => {
        });
      }
    },
    //跳转到填报页面
    openMockList(e){
      let url = '/pages/zyb/fillVolunteer/mockList'
      //如果 关联的院校数量>0，则按录取方式跳转
      if(e.schoolNum && e.schoolNum>0){
        url+='?rulesEnrollProbability='+e.rulesEnrollProbability
      }
      JumpTool.goto(url);
    }
  }
}
</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: 50rpx">
        <view class="flex-item-4">
          <view class="fbox">
<!--            <view class="flex" style="width: 50%">
              <view class="ftitle">文化分</view>
            </view>-->
            <view class="flex white font-size-medium color3">
              <text style="margin: 0 auto">
                文化分
              </text>
            </view>
            <view class="flex" style="padding: 30rpx;font-size: 35rpx;">
              <input type="number" style="text-align: center;height: 50rpx" 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="text-align: center">
              <view class="ftitle-orange">专业分</view>
            </view>-->
            <view class="flex white font-size-medium color2">
              <text style="margin: 0 auto">
                专业分
              </text>
            </view>
            <view class="flex" style="padding: 30rpx;font-size: 35rpx">
              <input type="number" style="text-align: center;height: 50rpx" 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 color3">省份<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 color3">文理<label></label></view>
          </view>
          <view class="flex-item-7 ml10">
            <view class="right-input">{{this.scoreInfo.cognitioPolyclinic === '文科'?'历史组':'物理组'}}</view>
<!--            <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 color3">统考类别<label></label></view>
          </view>
          <view class="flex-item-7 ml10">
            <view class="right-input">{{this.scoreInfo.professionalCategory}}</view>
<!--            <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 color3">批次<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 color3">省份<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 color3">统考类别<label></label></view>
          </view>
          <view class="flex-item-7 ml10">
            <view class="right-input">{{ scoreInfo.professionalCategory }}</view>
          </view>
        </view>
        <!--批次-->
        <view class="flex flex option-item">
          <view class="flex-item-3">
            <view class="left-t color3">批次<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 color3 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 color3 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 color3 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 @click="openMockList(item)" style="border: 1rpx solid #399ee8;border-radius: 10rpx;width: 160rpx;padding: 5rpx 8rpx">查看院校{{item.schoolNum}}所</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom" style="position: relative;top: 100rpx">
      <view style="margin: 0 auto">
        <view class="" @click="clickCalculate"
              style="background-color:#f2876a;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%;
  //min-height: 1000rpx;
  padding: 0 15%;
}

.color2{
//  background-color: #f78668;
  background-color: #6b58fa;
}

.color3{
//  background-color: #399ee8;
  background-color: #f35b3d;
}

/*标题*/
.title {
  padding-top: 20rpx;
  //color: #399ee8;
  color: #8ebfe2;
  font-size: 70rpx;
  font-weight: 600;
}

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

  .ftitle {
    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;
    //background-color: #8162fa;
    color: white;
    height: 40rpx;
    line-height: 40rpx;
    border-radius: 10rpx;
    padding: 5rpx 10rpx;
    font-size: 28rpx;
    text-align: justify;
    label {
      display: inline-block;
      padding-left: 100%;
    }
  }
  .align-left{
    text-align: left !important;
  }

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

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

.ml10 {
  margin-left: 10rpx;
}

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

.datalist{
  height: 500rpx;
  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>
