<!--新增会员-->
<template>
  <div>
    <el-dialog :title=title :visible.sync="open" width="600px">
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="会员姓名:" prop="studentName">
              <el-input v-model="form.studentName" placeholder="请输入会员姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别:" prop="sex">
              <el-select v-model="form.sex" placeholder="请选择性别">
                <el-option
                  v-for="dict in sexOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="出生日期:" prop="birthDay">
              <el-date-picker
                v-model="form.birthDay"
                clearable
                style="width: 190px"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择出生日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入校时间:" prop="inTime">
              <el-date-picker
                v-model="form.inTime"
                clearable
                style="width: 200px"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择入校时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="联系电话:" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入联系电话" />
          </el-form-item>
          </el-col>
        </el-row>
        <span style="color: #999; font-size: 12px; white-space: pre-line;">
        * 说明：本操作会自动关联相同手机号app用户；<br>
          如果手机号未在app注册，本操作会自动注册一个新的app用户,<br>
          登录账号默认为本手机号{{form.phone}}，登录密码同为本手机号{{form.phone}}；</span>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addStudent, getStudent, updateStudent } from '@/api/school/sc/student'
import moment from 'moment'

export default {
  name: 'AddStudent',
  data() {
    return {
      open: false,
      title:"",
      remark:'',
      // 表单参数
      form: {
        sex: '0',
        phone:''
      },
      // 性别数据字典
      sexOptions: [],
      rules: {
        studentName: [
          { required: true, message: '会员姓名不能为空', trigger: 'blur' }
        ],
        birthDay: [
          { required: true, message: '出生日期不能为空', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '性别不能为空', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' },
          {
            pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
            message: '请输入正确电话号码',
            trigger: 'blur'
          },
        ]
      },
      loadingSelect: false,
      // 联系人
      contactArray: [{
        contactRelation: 'self',
        contactNick: '',
        contactPhone: ''
      }],
      contactRelationOptions: []
    }
  },
  created() {
  },
  methods: {
    loadDictInfo() {
      this.getDictListByDictType('sys_user_sex').then(response => {
        this.sexOptions = response.data
      })
      this.getDictListByDictType('contact_relation').then(response => {
        this.contactRelationOptions = response.data
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    reset() {
      this.form = {
        studentName: undefined,
        birthDay: undefined,
        sex: '0',
        phone: '',
        inTime: moment(new Date()).format('YYYY-MM-DD')
      }
      this.resetForm('form')
      this.contactArray = [{
        contactRelation: 'self',
        contactNick: '',
        contactPhone: ''
      }]
    },
    handleAdd() {
      this.loadDictInfo()
      this.reset()
      this.open = true
      this.title = '添加会员基本信息'
    },
    handleUpdate(studentId) {
      this.loadDictInfo()
      this.reset()
      getStudent(studentId).then(response => {
        this.form = response.data
        if (response.data.contactList && response.data.contactList.length > 0) {
          this.contactArray = response.data.contactList
        }
        this.open = true
        this.title = '修改会员基本信息'
        this.remark=''
      })
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          // this.contactArray.forEach(item => {
          //   if (item.contactRelation === undefined || item.contactRelation === null || item.contactRelation.trim() === '') {
          //     this.msgError('请选择联系人与会员关系')
          //     valid = false
          //   } else if (item.contactPhone === undefined || item.contactPhone === null || item.contactPhone.trim() === '') {
          //     this.msgError('请填写联系人电话')
          //     valid = false
          //   }
          // })
          if (!valid) {
            return
          }
          // this.form.contactList = this.contactArray
          if (this.form.studentId !== undefined) {
            updateStudent(this.form).then(response => {
              if (response.respCode === '0000') {
                this.msgSuccess('修改成功')
                this.open = false
                this.$emit('success')
              } else {
                this.msgError(response.respMsg)
              }
            })
          } else {
            addStudent(this.form).then(response => {
              if (response.respCode === '0000') {
                this.msgSuccess('操作成功')
                this.open = false
                this.$emit('success',response.data)
              } else {
                this.msgError(response.respMsg)
              }
            })
          }
        }
      })
    },
  }
}
</script>
