<template>
  <div class="fx-column">
    <el-form ref="form" :model="settingModel" :rules="settingRules" label-width="80px" label-position="right"
             class="mt20">
      <div class="fx-row fx-bet-cen">
        <el-form-item prop="year" label="学年">
          <el-select v-model="settingModel.year" :disabled="!!settingModel.roundId">
            <el-option v-for="year in yearOptions" :key="year.code" :label="year.label" :value="year.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="name" label="名称">
          <el-input v-model="settingModel.name" clearable></el-input>
        </el-form-item>
      </div>
      <div class="fx-row fx-bet-cen">
        <el-form-item prop="activeGroupModelIndex" label="模型">
          <el-radio-group v-model="settingModel.activeGroupModelIndex">
            <el-radio-button v-for="(gm,index) in settingModel.groupModels" :key="index" :label="index">
              {{ gm.displayName }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="preferenceCount" label="学生填报志愿数" label-width="120px">
          <el-input-number v-model="settingModel.preferenceCount" :min="1"></el-input-number>
        </el-form-item>
      </div>
      <div class="fx-row fx-bet-cen">
        <el-form-item label="签名">
          <div class="fx-row fx-sta-cen">
            <el-switch v-model="settingModel.enableEsign" class="mr5"></el-switch>
            启用学生电子签名
            <template v-if="settingModel.enableEsign">
              <el-switch v-model="settingModel.enablePaperSign" class="ml20 mr5"></el-switch>
              启用学生纸质签名
            </template>
          </div>
        </el-form-item>
        <el-form-item label="隐私">
          <div class="fx-row fx-sta-cen">
            <el-switch v-model="settingModel.scoreInvisible" class="mr5"></el-switch>
            隐藏学生分数
            <el-switch v-model="settingModel.rankInvisible" class="ml20 mr5"></el-switch>
            隐藏学生排名
          </div>
        </el-form-item>
      </div>
      <el-form-item prop="dateRange" label="时间">
        <mx-date-range-picker v-model="settingModel.dateRange" emit-all-changes></mx-date-range-picker>
      </el-form-item>
      <el-form-item prop="state" label="开启">
        <el-switch v-model="settingModel.state"></el-switch>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'round-setting-limit',
  props: {
    settingModel: {
      type: Object,
      default: _ => ({})
    },
    yearOptions: {
      type: Array,
      default: _ => []
    }
  },
  data() {
    return {
      //
      settingRules: {
        year: [{
          required: true,
          message: '学年必填'
        }],
        name: [{
          required: true,
          message: '名称必填'
        }],
        activeGroupModelIndex: [{
          required: true,
          message: '模型必选'
        }],
        dateRange: [{
          message: '时间必填',
          validator: function(r, v, cb) {
            if (v.length === 2 && v.first() && v.last()) {
              cb()
              return
            }
            cb(r.message)
          }
        }]
      }
    }
  },
  computed: {},
  methods: {
    shouldGoNext() {
      return this.$refs.form.validate()
    }
  }
}
</script>

<style scoped>

</style>
