<template>
  <el-row>
    <el-row>
      <white-board>
        <el-row><el-divider content-position="left">当前学年学期</el-divider></el-row>

        <el-row style="text-align: center;">
          <el-col :span="8" :offset="8">
            <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
              <el-form-item label="学年" prop="schoolYear">
                <select-school-year v-model="form.schoolYear" clearable filterable />
              </el-form-item>
              <el-form-item label="学期" prop="semester">
                <select-semester v-model="form.semester" clearable filterable />
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>

        <el-row><el-divider content-position="left">操作</el-divider></el-row>

        <el-row style="text-align: right;">
          <el-button type="primary" plain @click="handleSave">保存</el-button>
        </el-row>
      </white-board>
    </el-row>
  </el-row>
</template>

<script>
import { SelectSchoolYear, SelectSemester } from '@/components/school-year-semester'
import yearSemesterApi from '@/api/basics/yearSemesterApi'

export default {
  name: 'YearSemester',
  components: {
    'select-school-year': SelectSchoolYear,
    'select-semester': SelectSemester
  },
  data() {
    return {
      form: {
        schoolYear: '',
        semester: ''
      },
      formRules: {
        schoolYear: [{ required: true, message: '请输入学年', trigger: 'blur' }],
        semester: [{ required: true, message: '请输入学期', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.find()
  },
  methods: {
    find() {
      yearSemesterApi.find().then(data => {
        this.form['schoolYear'] = String(data.schoolYear)
        this.form['semester'] = String(data.semester)
      })
    },
    handleSave() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }

        yearSemesterApi.saveOrUpdate(this.form).then(data => {
          this.find()
          this.$message({ message: '操作成功', type: 'success' })
        })
      })
    }
  }
}
</script>

<style scoped>
</style>
