<script>
import StaticConstant from "@/common/StaticConstant";
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'
import {arrayIsNotEmpty, stringIsNotEmpty} from "@/common/util";
import CommonTool from "@/common/js/commonTool";
import commonTool from "../../../common/js/commonTool";

let request = new Request()
export default {
  name: "socre-edit",
  computed: {
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      sportsScore:[0,0,0],
      sportsScoreSum:0,
      formData:{
        year:'2024',// 年份
        sex:'男',
        sprint:'',//100米短跑
        jump:'',// 立定跳远
        shotPut:'',// 推铅球
      },
      sexList:[
        {name:'男'},
        {name:'女'}
      ],
      scoreInfo: {
        province: '河南',//省份
      },
      formRuleFlag: false,//表单是否校验成功
    }
  },
  async onLoad() {
  },
  async onShow() {
  },
  methods: {
    stringIsNotEmpty() {
      return stringIsNotEmpty
    },
    validateSprint(e) {
      let that = this
      e.target.value = (e.target.value.match(/^\d*(\.?\d{0,3})/g)[0]) || null
      this.$nextTick(() => {
        that.formData.sprint= e.target.value
      })
      this.checkForm()
    },
    validateJump(e) {
      let that = this
      e.target.value = (e.target.value.match(/^\d*(\.?\d{0,3})/g)[0]) || null
      this.$nextTick(() => {
        that.formData.jump= e.target.value
      })
      this.checkForm()
    },
    validateShotPut(e) {
      let that = this
      e.target.value = (e.target.value.match(/^\d*(\.?\d{0,3})/g)[0]) || null
      this.$nextTick(() => {
        that.formData.shotPut= e.target.value
      })
      this.checkForm()
    },
    checkForm() {
      console.log('qqq')
      this.formRuleFlag = false
      if(!this.formData.sex){
        return;
      }
      if(!this.formData.sprint){
        return;
      }
      if(!this.formData.jump){
        return;
      }
      if(!this.formData.shotPut){
        return;
      }
      this.formRuleFlag = true
    },
    //选择考区
    bindPicker_provinceChange: function (e) {
      console.log('考区picker发送选择改变，携带值为：' + e)
      this.scoreInfo.province = this.provinceArray[e.detail.value].name
      this.checkForm()
    },
    switchSex(e){
      this.formData.sex = e.name
      this.checkForm()
    },
    //选择科目
    switchKelei(e) {
      this.scoreInfo.cognitioPolyclinic = e.name
      this.checkForm()
    },
    formSubmit:async function (e) {
      let that = this
      //==
      this.sportsScore = await commonTool.loadStaticConfigParams('sportsScore',this.formData)
      console.log(this.sportsScore)
      let sum = 0
      this.sportsScore.forEach((s,index)=>{
        sum+=s
      })
      this.sportsScoreSum = sum

      this.$refs.popup.open("center")
    },
    cooperateClose(){
      this.$refs.popup.close()
    },
    formReset: function (e) {
      console.log('清空数据')
    },
    onProfessionalCategoryOpen() {
      console.log('打开')
    },
    onProfessionalCategoryBottom() {
      console.log('触底');
    },
  }
}
</script>

<template>
  <view class="container" style="background-color: #ffffff">
    <view class="uni-padding-wrap" style="text-align: center">
      <view class="font-size-medium font-weight-b">
        河南体育成绩计算器
      </view>
    </view>
    <!--表单-->
    <view class="uni-padding-wrap uni-common-mt border-top">
      <view class="forms">
        <!--选考科目-->
        <view class="form-item">
          <view class="form-item-label">性别</view>
          <view class="form-item-view">
            <view class="flexWrap">
              <view class="kelei-item" @click="switchSex(item)"
                    :class="formData.sex===item.name?'kelei-item-active':''"
                    v-for="(item,index) in sexList" :key="index">
                <text>{{ item.name }}</text>
              </view>
            </view>
          </view>
        </view>
        <!--100米-->
        <view class="form-item">
          <view class="form-item-label">100米</view>
          <view class="form-item-view form-input flexWrap">
            <view class="flex-item-9">
              <input class="uni-input" type="digit" @input="validateSprint" v-model="formData.sprint" name="sprint"
                     placeholder="请输入成绩"/>
            </view>
            <view class="flex-item-1">
              <text style="line-height: 80rpx">秒</text>
            </view>
          </view>
        </view>
        <!--立定跳远-->
        <view class="form-item">
          <view class="form-item-label">立定跳远</view>
          <view class="form-item-view form-input flexWrap">
            <view class="flex-item-9">
              <input class="uni-input" type="text" @input="validateJump" v-model="formData.jump" name="jump"
                     placeholder="请输入成绩"/>
            </view>
            <view class="flex-item-1">
              <text style="line-height: 80rpx">米</text>
            </view>
          </view>
        </view>
        <!--原地推铅球-->
        <view class="form-item">
          <view class="form-item-label">原地推铅球</view>
          <view class="form-item-view form-input flexWrap">
            <view class="flex-item-9">
              <input class="uni-input" type="text" @input="validateShotPut" v-model="formData.shotPut" name="shotPut"
                     placeholder="请输入成绩"/>
            </view>
            <view class="flex-item-1">
              <text style="line-height: 80rpx">米</text>
            </view>
          </view>
        </view>

      </view>
    </view>

    <view class="submitButtonView"
          :class="formRuleFlag?'button-active':'button-disabled'" @click="formSubmit">
      <text class="font-weight-b">查询</text>
    </view>

    <uni-popup ref="popup" background-color="#fff" class="radius15">
      <view class="popup-content radius15" style="padding: 30rpx 30rpx">
        <view class="font-size-mini4 font-weight-b" style="text-align: center">总分</view>
        <view class="font-size-mini4 font-weight-b" style="text-align: center">{{sportsScoreSum}}</view>
        <view class="flexWrap marginTopBot20 margin-top-20"><text class="text">100米，成绩：{{formData.sprint}}，分数：{{sportsScore[0]}}</text></view>
        <view class="flexWrap marginTopBot20 margin-top-20"><text class="text">立定跳远，成绩：{{formData.jump}}，分数：{{sportsScore[1]}}</text></view>
        <view class="flexWrap marginTopBot20 margin-top-20"><text class="text">原地推铅球，成绩：{{formData.shotPut}}，分数：{{sportsScore[2]}}</text></view>
        <view class="font-size-mini4 font-weight-b margin-top-20 margin-top-20" @click="cooperateClose" style="text-align: center">继续查询</view>
      </view>
    </uni-popup>
  </view>

</template>

<style scoped lang="scss">
.container {
  height: 100%;
}

.uni-form-item .title {
  padding: 20rpx 0;
}

/*表单 start*/
.form-item {
  display: flex;
  align-items: center;
  margin: 30rpx 0;
}

.form-item-label {
  width: 20%;
}

.form-item-view {
  width: 80%;
  min-height: 80rpx;
}

.form-input {
  border: 1rpx solid #e6e6e6;
}

//选考科目
.kelei-item {
  background-color: #f7f7f7;
  color: black;
  padding: 20rpx 30rpx;
  margin-right: 30rpx;
}

.kelei-item-active {
  background-color: #feede1;
  color: #f96712;
}

.submitButtonView {
  margin: 30rpx;
  text-align: center;
  border-radius: 15rpx;
  line-height: 80rpx;
}

.button-disabled {
  color: white;
  background-color: #d8d8d8;
}

.button-active {
  color: white;
  background: linear-gradient(#f79459, #f96622);
}

/*表单 end*/

.uni-picker-tips {
  font-size: 12px;
  color: #666;
  margin-bottom: 15px;
  padding: 0 15px;
}

/*底部抽屉 报考方向内容 start*/
.professionalCategoryPopup .professionalCategoryItem {
  margin: 20rpx;
  padding: 20rpx;
  text-align: center;
  border: 1rpx solid #f1f2f3;

  .text {
    margin: 0 auto;
  }
}

.active {
  background-color: #3e89fe;
  color: white;
  border-radius: 15rpx;
}

.professionalCategoryChildren .childrenItem {
  margin: 20rpx;
}

/*底部抽屉 报考方向内容 end*/
</style>
