<template> 
  <sh-dialog :title="`${title[type]}人员`" :visible.sync="dialogFormVisible" width="600px"> 
    <sh-form :model="form"  ref="form" :disabled="type == 'view'" >
      <sh-form-item label="姓名"  prop="name" rules="required">
        <el-input v-model="form.name" placeholder="请输入名字"></el-input>
      </sh-form-item>
      <sh-form-item label="年龄"  prop="age" rules="required">
        <el-input v-model="form.age"  placeholder="请输入年龄，6~30岁"></el-input>
      </sh-form-item>
      <sh-form-item label="性别"  prop="gender" rules="required">
        <sh-input-select v-model="form.gender" placeholder="请选择性别">
          <sh-option value="0">男</sh-option>
          <sh-option value="1">女</sh-option>
        </sh-input-select>
      </sh-form-item>
      <sh-form-item label="班级"  prop="classNo" rules="required">
        <el-input v-model="form.classNo" placeholder="请输入班级"></el-input>
      </sh-form-item>
    </sh-form>
    <div slot="footer" class="dialog-footer">
      <el-button  @click="dialogFormVisible = false">关 闭</el-button>
      <el-button  type="primary" :loading="loading" @click="submit()" v-if="type != 'view'">提 交</el-button>
    </div>
  </sh-dialog>
</template>

<script>
import { CLAZZ_STUDENT_ADD, CLAZZ_STUDENT_UPDATE, } from '@/apis/demo'
export default {
  data () {
    return {
      dialogFormVisible: false,
      title: {
        add: '新增',
        edit: '修改',
        view: '查看'
      },
      type: 'add',
      form: { 
        name: '',
        age: '',
        gender: '',
        classNo: ''
      }
    }
  },
  methods: {
    submit () { // 提交
      this.$refs.form.validate((valid) => { 
        if (valid) {
          // 全局loading
          this.$store.state.fullscreenLoading = true
          this.$post(
            this.type == 'edit' ? CLAZZ_STUDENT_UPDATE: CLAZZ_STUDENT_ADD,
            this.form,
            data => {
              // 关闭弹框
              this.dialogFormVisible = false
              // 关闭全局loading
              this.$store.state.fullscreenLoading = false
              // 提示成功信息 
              this.$message.success(data.msg)
              // 刷新列表
              this.$emit('loadList')
            },           
            error => {
              this.$store.state.fullscreenLoading = false
              this.$message.error(error.msg)
            }
          )
        }
      })
    },
    open (type, row) {
      this.dialogFormVisible = true
      this.type = type
      this.$nextTick(() => {
        // 重置表单
        this.$refs.form.resetFields()
        row ? this.form = {...row} : ''
      })
    }
  }
}
</script>
