<template>
  <el-dialog class="client-data-dialog" title="用户修改" :visible.sync="visible" :before-close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
      <el-form-item label="登录名">
        <el-col :span="18">{{loginName}}</el-col>
      </el-form-item>

      <el-form-item label="用户名" prop="userName">
        <el-col :span="18">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="用户状态">
        <el-select v-model="ruleForm.status" placeholder="用户状态">
          <el-col :span="18">
            <el-option v-for="item in UserStatus" :label="item.name" :value="item.value" :key="item.value">
            </el-option>
          </el-col>
        </el-select>
      </el-form-item>

      <el-form-item label="手机号码" prop="userCell">
        <el-col :span="18">
          <el-input v-model.number="ruleForm.userCell"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="备注信息" prop="memo">
        <el-col :span="18">
          <el-input v-model="ruleForm.memo"></el-input>
        </el-col>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitClick('ruleForm')" :loading="ui.submitLoading">修改</el-button>
    </div>
  </el-dialog>
</template>

<script type="text/ecmascript-6">

  export default {
    name: 'UpdateUserManagementDialog',
    props: {
      dialogVisible: {
        type: Boolean,
        required: true
      },
      loginName: {
        type: String
      },
      userName: {
        type: String
      },
      status: {
        type: String
      },
      userCell: {
        type: String
      }
    },

    data() {
      /*验证手机号码*/
      var validateUserCell = (rule, value, callback) => {
        if (value !== '' && value !== null && value !== undefined) {
          const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
          if (!reg.test(value)) {
            callback(new Error('手机格式不正确'));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };

      /* 验证用户名 */
      var validateUserName = (rule, value, callback) => {
        const reg2 = /^[\u2E80-\u9FFF][\u2E80-\u9FFF0-9]+$/;
        if (!value) {
          return callback(new Error('请输入用户名'));
        } else if (!reg2.test(value)) {
          callback(new Error('用户名只支持中文或者中文后加数字'));
        } else {
          callback();
        }
      };

      return {
        ui: {
          submitLoading: false
        },
        visible: this.$props.dialogVisible,
        UserStatus: [
          {name: '离职', value: 'LEAVE'},
          {name: '正常', value: 'NORMAL'}
        ],
        ruleForm: {
          loginName: '',
          userName: '',
          status: '',
          userCell: '',
          memo: '',
        },
        rules: {
          userCell: [
            {validator: validateUserCell, trigger: 'blur'}
          ],
          userName: [
            {validator: validateUserName, trigger: 'blur'}
          ]
        }
      }
    },
    created() {
      this.ruleForm = {
        loginName: this.loginName,
        userName: this.userName,
        status: this.status,
        userCell: this.userCell,
        memo: '',
      }
    },
    methods: {
      /** 提交点击 */
      async submitClick(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$$post('/user/update', {
              loginName: this.loginName,
              userCell: this.ruleForm.userCell,
              userName: this.ruleForm.userName,
              memo: this.ruleForm.memo,
              status: this.ruleForm.status,
              bindStatus: 'ENABLED'
            })
              .then(res => {
                if (res.data.code < 1) {
                  this.$message.error(res.data.msg);
                  return
                }
                this.$message({message: '修改成功', type: 'success'});
                setTimeout(function () {
                  this.visible = false;
                  window.location.reload();
                }, 500)

              })
              .catch(err => {
                alert("error!")
              })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      /** 关闭处理 */
      handleClose() {
        this.visible = false;
        setTimeout(() => {
          this.$emit('update:dialogVisible', false)
        }, 300);
      }
    }
  }
</script>
