<template>
  <div class="layout-no-cols">
    <el-toolbar>
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary">
        <i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <el-button type="button" class="el-button el-button--default save" @click="addMemberHandler" :loading="confirmLoading" priv="Member.Information.Add">
        <span>
          <i class="fa fa-save"></i>保存</span>
      </el-button>
    </el-toolbar>
    <div>
      <div class="detail-panel">
        <h3>添加会员</h3>
        <el-form :model="tmpMember" :rules="memberRules" ref="addMemberForm" label-width="120px" label-suffix="：" class="add-member-form">
          <el-row>
            <el-col :span="12">
              <el-form-item label="会员名" prop="userName" :verify="['NotNull|必填，会员名称不能为空', 'Regex=^[a-zA-Z][a-zA-Z0-9_]{3,15}$|请输入4到16个英文字母开头、数字、下划线组合']">
                <el-input type="text" v-model="tmpMember.userName" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="真实姓名" prop="realName" :verify="['Length<21']">
                <el-input type="text" v-model="tmpMember.realName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="密码" prop="password" :verify="['NotNull|必填，密码不能为空','Length<21', 'Length>5']">
                <el-input type="password" v-model="tmpMember.password" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重复密码" prop="repeatPassword">
                <el-input type="password" v-model="tmpMember.repeatPassword" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="email" label="电子邮箱" :verify="['Email|请输入正确的邮箱','NotNull']">
                <el-input v-model="tmpMember.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="mobile" label="手机号码" :verify="['CnPhone|请输入正确的手机号']">
                <el-input v-model="tmpMember.mobile"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="status" label="状态" :verify="['NotNull|请设置会员状态']">
                <el-radio class="radio" v-model="tmpMember.status" label="Y">启用 </el-radio>
                <el-radio class="radio" v-model="tmpMember.status" label="N">禁用 </el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="gender" label="性别">
                <el-radio class="radio" v-model="tmpMember.gender" label="M">男 </el-radio>
                <el-radio class="radio" v-model="tmpMember.gender" label="F">女 </el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="pwdQuestion" label="密码提示问题">
                <el-input v-model="tmpMember.pwdQuestion" :maxlength="60"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="pwdAnswer" label="密码提示答案">
                <el-input v-model="tmpMember.pwdAnswer" :maxlength="60"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item prop="memo" label="备注">
            <el-input v-model="tmpMember.memo" :maxlength="30"></el-input>
          </el-form-item>
          <member-dialog-extend  :member.sync="tmpMember"></member-dialog-extend>

        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import MemberDialogExtend from './components/MemberDialogExtend.vue'
export default {
  components: {
    'member-dialog-extend': MemberDialogExtend
  },
  data() {
    return {
      // 会员验证规则
      memberRules: {
        repeatPassword: [
          {
            validator: (rule, value, callback) => {
              if (value !== this.tmpMember.password) {
                callback(new Error('请重复输入相同的密码'))
              } else {
                callback()
              }
            },
            trigger: 'blur',
            required: true
          }
        ]
      },
      // 临时会员
      tmpMember: {
        ID: '',
        userName: '',
        realName: '',
        email: '',
        password: '',
        repeatPassword: '',
        mobile: '',
        pwdQuestion: '',
        pwdAnswer: '',
        status: 'Y',
        memo: '',
        gender: 'M',
        extend: {}
      },
      confirmLoading: false
    }
  },
  methods: {
    // 处理添加事件
    async addMemberHandler() {
      this.confirmLoading = true
      try {
        await util.validateForm(this.$refs['addMemberForm'])
        let res = await axios.post('/ui/member', this.tmpMember)
        this.confirmLoading = false
        util.showResponseMessage(res.data)
        if (res.data.status === 1 && res.data.ID) {
          this.$router.replace({path: `/member/info/${res.data.ID}`})
        }
      } catch (e) {
        util.showErrorMessageBox(e)
        this.confirmLoading = false
      }
    }
  }
}
</script>
<style>
  .add-member-form .el-form-item .el-input {
    width: 260px;
    margin-right: 5px;
  }
</style>
