<template>
  <div class="table-container">
    <el-row class="second-title">规则说明</el-row>
    <div>
      <el-row class="content">监督员得分 = 上报分数 - 未按时核查分 - 未按时核实分</el-row>
      <el-row class="content">上报分数 = 有效上报数量/要求上报数量 * 100</el-row>
      <el-row class="content">未按时核查分 = 超时核查数/安排核查数 * 100 * 核查因子</el-row>
      <el-row class="content">按时核实分 = 超时核实数/安排核实数 * 100 * 核实因子子</el-row>
    </div>
    <el-row style="padding:20px"/>
    <el-row class="second-title">考核因子</el-row>
    <div>
      <el-row>
        <el-col :span="8" class="cell">要求上报数量</el-col>
        <el-col :span="8" class="cell">核查因子</el-col>
        <el-col :span="8" class="cell">核实因子</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="cell">
          <el-input v-model="accessRule.shouldReport" size="small" style="width:25%"/>
          <el-button type="text" class="submit-button" @click="updateAccessFactor()">修改</el-button>
        </el-col>
        <el-col :span="8" class="cell">
          <el-input v-model="accessRule.check" size="small" style="width:25%"/>
          <el-button type="text" class="submit-button" @click="updateAccessFactor()">修改</el-button>
        </el-col>
        <el-col :span="8" class="cell">
          <el-input v-model="accessRule.verify" size="small" style="width:25%"/> %
          <el-button type="text" class="submit-button" @click="updateAccessFactor()">修改</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getAssessFactor, updateAssessFactor } from '@/api/assess/assessRule'
export default {
  name: 'AssessRuleSupervisor',
  data() {
    return {
      accessRule: {
        shouldReport: '',
        check: '',
        verify: ''
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getAssessFactor().then(response => {
        this.accessRule = response.data
      })
    },
    updateAccessFactor() {
      updateAccessFactor(this.accessRule).then(response => {
        if (response.code === 200) {
          this.$message.success('修改成功')
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.second-title{
  border: 1px solid #eee;
  background-color: #eee;
  border-top: 0;
  font-size: 1.5em;
  padding: 10px;
  text-align: center;
}
.content{
  border: 1px solid #eee;
  border-top: 0;
  font-size: 1.2em;
  padding: 5px;
  text-align: center;
}
.cell{
  border: 1px solid #eee;
  font-size: 1.2em;
  border-top: 0;
  padding: 5px;
  text-align: center;
  position: relative;
}
.submit-button{
  margin-left: 10px;
}
 /deep/ input.el-input__inner {
  color: red;
  font-size: 1.2em;
}
</style>