<template>
  <div class="taskPointRatingSet">
    <van-nav-bar title="评分标准" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <div class="pointSetWrapper">

      <van-cell-group>
        <van-cell>
          <template slot="title">
            <div class="text_center" style="font-size: .38rem; color: #323233;">标准</div>
          </template>
          <template slot="default">
            <div class="no_border" style="font-size: .38rem; color: #323233;">比例(%)</div>
          </template>
        </van-cell>

        <van-cell>
          <template slot="title">
            <div class="text_center">超预期</div>
          </template>
          <template slot="default">
            <input class="no_border"  type="number" @input="changeValue(1)" v-model="pointLevel.super_satisfied" placeholder="请输入比例" >
          </template>
        </van-cell>

        <van-cell>
          <template slot="title">
            <div class="text_center">满意</div>
          </template>
          <template slot="default">
            <input class="no_border" type="number"  @input="changesatisfied(2)" v-model="pointLevel.satisfied" placeholder="请输入比例" >
          </template>
        </van-cell>

        <van-cell class="qualified">
          <template slot="title">
            <div class="text_center">合格</div>
          </template>
          <template slot="default">
            <input class="no_border" type="number"  @input="changequalified(3)" disabled v-model="pointLevel.qualified" placeholder="请输入比例" >
          </template>
        </van-cell>

        <van-cell>
          <template slot="title">
            <div class="text_center">不合格</div>
          </template>
          <template slot="default">
            <input class="no_border" type="number"  @input="changeunqualified(4)" v-model="pointLevel.unqualified" placeholder="请输入比例" >
          </template>
        </van-cell>

      </van-cell-group>
    </div>
    <div class="tip">·【合格】标准积分默认为100%（不可修改）
        <br>· 各项标准积分 =【合格】标准积分 * 对应百分比
        <br>· 例如：【超预期】的比例为200%，当填写的【合格】积分为60分时，则超预期为 60 * 200% = 120
        <van-button class="confirmBtn" size="large" type="info" @click="saveTaskPointLevel">确认修改</van-button>
    </div>
        
  </div>
</template>

<script>
  import Vue from 'vue'
  import {Button} from 'vant'
  Vue.use(Button);
export default {
  data () {
    return {
      pointLevel:{
        super_satisfied:'200',
        satisfied:'150',
        qualified:'100',
        unqualified:'50',
      }
    }
  },
  created () {
    if (window.localStorage.getItem('pointLevel')) {
      this.pointLevel = JSON.parse(window.localStorage.getItem('pointLevel'))
    }
  },
  watch: {
  },
  methods: {
    changeValue(val) {
      let str = '' + this.pointLevel.super_satisfied;
      let str2 = ''
      //  satisfied:'150',
      //   qualified:'100',
      //   unqualified:'50',
      if (str.indexOf('.') != -1) {
        let arr = str.split('');
        arr.splice(arr.length - 1);
        let str2 = arr.join('');

        this.pointLevel.super_satisfied = +str2;
      }
    
    },

     changesatisfied(val) {
      let str = '' + this.pointLevel.satisfied;
      let str2 = ''
      if (str.indexOf('.') != -1) {
        let arr = str.split('');
        arr.splice(arr.length - 1);
        let str2 = arr.join('');

        this.pointLevel.satisfied = +str2;
      }
    
    },
    changequalified(val) {
      let str = '' + this.pointLevel.unqualified;
      let str2 = ''
      if (str.indexOf('.') != -1) {
        let arr = str.split('');
        arr.splice(arr.length - 1);
        let str2 = arr.join('');
        this.pointLevel.unqualified = +str2;
      }
    
    },
    changeunqualified(val) {
      let str = '' + this.pointLevel.qualified;
      let str2 = ''
      if (str.indexOf('.') != -1) {
        let arr = str.split('');
        arr.splice(arr.length - 1);
        let str2 = arr.join('');

        this.pointLevel.qualified = +str2;
      }
    
    },

    saveTaskPointLevel () {
      let isValueEmpty = false
      let pointLevel = JSON.stringify(this.pointLevel)
      window.localStorage.setItem('pointLevel', pointLevel)
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.taskPointRatingSet{
  background-color: #F5F7FA;
  .confirmBtn{
    width:6.86rem;
    margin: 0.86rem auto 0;
  }
  .tip{
    margin:0.24rem 0.32rem;
    font-size:0.24rem;
    color:rgba(144,147,153,1);
    line-height:0.34rem;
  }
  .pointSetWrapper{
    background-color: #fff;
    padding: 0 0.32rem;
  }
}
.text-center{
  text-align: center;
}
.no_border{
  border: none;
  text-align: center;
  background: rgba(0, 0, 0, 0);
}
.qualified{
  &::before{
    content: "不可修改";
    position: absolute;
    right: 0.3rem;
    color: #c0c4cc;
    font-size: .24rem;
    display: block;
  }
}
</style>
