<template>
  <div class="scoring-rubric-setting-content">
    <el-form ref="scoringRubric" :inline="false" :model="form" :rules="rules" label-position="right"
             label-width="120px">
      <div class="setting-top">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="评分规则" label-width="120px" prop="scoringRubricType">
              <el-radio-group v-model="form.scoringRubricType" size="mini">
                <el-radio label="1">有</el-radio>
                <el-radio label="2">无</el-radio>
              </el-radio-group>

            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="naxtBox">
              <el-button size="mini" type="primary" @click="previousTab()">上一步</el-button>
              <el-button class="" size="mini" type="primary" @click="submitForm('scoringRubric')">下一步</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label-width="0" prop="scoringRubricValue">
            <el-col :span="23">
              <y-edit-ace
                  ref="scoring-rubric-edit"
                  v-model="form.scoringRubricValue"
                  lang="text"
                  height="400px"
                  theme="chrome"
              />
            </el-col>
          </el-form-item>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import config from './config'

export default {
  name: 'scoring-rubric',
  data () {
    return {
      configName: 'scoringRubric', // 配置名称
      showPreviousBtn: false, // 下一步开关
      form: {
        scoringRubricType: '1', // 评分规则开关
        scoringRubricValue: '', // 评分规则内容
      },
      rules: {
        scoringRubricType: [
          { required: true, message: '评分规则类型不能为空', trigger: 'blur' },
        ],
        scoringRubricValue: [
          { required: false, message: '评分规则不能为空', trigger: 'blur' },
          { required: false, max: 500, message: '评分规则不能超过500字符', trigger: 'blur' },
        ],
      }
    }
  },
  methods: {
    loadData () {
      if (config.localGetConclusionList('updateData', this.configName)) {
        this.form = config.localGetConclusionList('updateData', this.configName)
      } else if (config.localGetConclusionList('requestData', this.configName)) {
        this.form = config.localGetConclusionList('requestData', this.configName)
      }
      this.showPreviousBtn = config.permissionIndex(this.configName)
    },
    // 上一步
    previousTab () {
      this.$emit('PreviousTab')
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 保存接口
          config.localSetConclusionList('updateData', this.configName, this.form)
          this.showUid = false
          this.$emit('NextTab')
        } else {
          this.$message.error('请检查评分规则配置')
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.scoring-rubric-setting-content {
  padding: 0 20px;
  /* padding-top: 36px; */
  position: relative;
}

.el-form {
  background: #f0f0f0;
  margin: 0;
}

.setting-top .el-form-item {
  /*margin: 10px;*/
}

.setting-top .el-form-item .button {
  position: absolute;
  right: 50px;
  bottom: 5px;
}

.setting-top {
  background: #FFFFFF;
  padding-top: 20px;
}

.naxtBox {
  position: absolute;
  right: 50px;
}

.setting-content {
  margin: 10px 10px 0px 10px;
  /* height: 600px; */
  /* overflow-y: scroll; */
}

.setting-content-item {
  margin-bottom: 10px;
  background-color: #f7f9fd;
}
</style>
