<template>
  <div>
    <div class="rule-row">
      <div class="rule-title">
        <div class="title">规则说明：</div>
      </div>
      <div class="rule-content">
        <div class="content">处置单位得分 = 100 - 超时分 - 返工分 - 超时未处理分 + 工作量调节</div>
        <div class="content">超时分数 = 时限内所有超时案卷数/时限内应处置案卷数 *100 * 超时因子</div>
        <div class="content">返工分数 = 时限内所有返工案卷数/时限内应处置案卷数 * 100 * 返工因子</div>
        <div class="content">超时未处置分数 = 时限内所有超时未处置案卷数/时限内应处置案卷数 * 100 * 超时未处置因子</div>
        <div class="content">工作量调节 = 该单位接收派遣数 / 系统总派遣数 * 100 * 调节因子</div>
      </div>
    </div>
    <div class="rule-row">
      <div class="rule-title">
        <div class="title">考核因子：</div>
      </div>
      <div class="rule-content">
        <el-row>
          <span class="sub-title">工作量调节因子</span>
          <el-input v-model="ruleForm.workrate" size="small" class="sub-input">
            <template slot="append">%</template>
          </el-input>
          <el-button type="text" class="submit-button" @click="updateAccessFactor()">修改</el-button>
        </el-row>
        <el-row>
          <span class="sub-title">超时因子</span>
          <el-input v-model="ruleForm.delayrate" size="small" class="sub-input">
            <template slot="append">%</template>
          </el-input>
          <el-button type="text" class="submit-button" @click="updateAccessFactor()">修改</el-button>
        </el-row>
        <el-row>
          <span class="sub-title">返工因子</span>
          <el-input v-model="ruleForm.reworkrate" size="small" class="sub-input">
            <template slot="append">%</template>
          </el-input>
          <el-button type="text" class="submit-button" @click="updateAccessFactor()">修改</el-button>
        </el-row>
        <el-row>
          <span class="sub-title">超时未处置因子</span>
          <el-input v-model="ruleForm.delaynorate" size="small" class="sub-input">
            <template slot="append">%</template>
          </el-input>
          <el-button type="text" class="submit-button" @click="updateAccessFactor()">修改</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getRuleList, updateRule } from '@/api/assess/assessDept'
import { validateIntPlus } from '@/utils/validate'

export default {
  name: 'AccessRule',
  data() {
    return {
      ruleForm: {
        id: '',
        workrate: '',
        delayrate: '',
        reworkrate: '',
        delaynorate: ''
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getRuleList().then(res => {
        const data = res.data[0]
        this.ruleForm = {
          id: data.id,
          workrate: data.workrate,
          delayrate: data.delayrate,
          reworkrate: data.reworkrate,
          delaynorate: data.delaynorate
        }
      })
    },
    // 更新考核规则
    updateAccessFactor() {
      if (this.validateData()) {
        updateRule(this.ruleForm).then(response => {
          if (response.code === 200) {
            this.$message.success('修改成功')
          }
        })
      }
    },
    validateData() {
      if (!validateIntPlus('' + this.ruleForm.workrate, 0, 100)) {
        this.$message.error('工作量调节因子的允许填写范围为0到100')
        return false
      }
      if (!validateIntPlus('' + this.ruleForm.delayrate, 0, 100)) {
        this.$message.error('超时因子的允许填写范围为0到100')
        return false
      }
      if (!validateIntPlus('' + this.ruleForm.reworkrate, 0, 100)) {
        this.$message.error('返工因子的允许填写范围为0到100')
        return false
      }
      if (!validateIntPlus('' + this.ruleForm.delaynorate, 0, 100)) {
        this.$message.error('超时未处置因子的允许填写范围为0到100')
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
  .title {
    font-size: 16px;
    padding-top: 10px;
    font-weight: bolder;
  }
  .sub-title{
    padding: 10px;
    font-size: 16px;
    font-weight: bolder;
    width: 150px;
    display: inline-block;
  }
  .content{
    font-size: 16px;
    padding: 10px;
  }
  .submit-button{
    margin-left: 10px;
  }
  .sub-input{
    width: 120px;
  }
  .rule-row {
    display: flex;
  }
  .rule-title {
    width: 20%;
    text-align: end;
  }
  .rule-content {
    width: 80%;
  }
  /deep/ input.el-input__inner {
    color: red;
    font-size: 16px;
  }
</style>