<template>
  <div>
    <div class="label-box rig-margin">
      <span class="label-title right">基本信息</span>
    </div>

    <el-form :model="basicForm" label-width="120px" label-position="right" ref="basicForm" :rules="rules">

      <div class="top-buttons">
        <el-button size="small" type="primary" @click="saveAccount">保存</el-button>
        <el-button size="small" @click="cancel">取消</el-button>
      </div>

      <div class="form">

        <el-form-item
          prop="operatorName"
          label="姓名"
        >
          <el-input v-model="basicForm.operatorName" size="small" placeholder="请输入" class="page-form-input" />
        </el-form-item>

        <el-form-item
          prop="operatorMobilePhone"
          label="手机号"
        >
          <el-input v-model="basicForm.operatorMobilePhone" size="small" placeholder="请输入" class="page-form-input" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item
          prop="loginPassword"
          label="密码"
        >
          <el-input
            v-model="basicForm.loginPassword"
            size="small"
            placeholder="密码任意6位数字，大小写字母，符号组合"
            class="page-form-input"
            type="password"
            minlength="6"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item
          prop="departmentName"
          label="部门"
        >
          <el-input v-model="basicForm.departmentName" placeholder="请输入" size="small" class="page-form-input"></el-input>
        </el-form-item>

        <el-form-item
          prop="positionName"
          label="职位"
        >
          <el-input v-model="basicForm.positionName" placeholder="请输入" size="small" class="page-form-input"></el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import { staffInfo, changeInfo } from '../../api/account'
import { validPhone } from '../../utils/validate.js'
import { validPassword } from '../../utils/validate.js'

export default {
  data() {
    const password = (rule, value, callback) => {
      if (value === '') {
        callback(this.$message({
          message: '带*为必填项',
          type: 'error',
          showClose: true,
        }))
      } else if (!validPassword(value)) {
        callback(this.$message({
          message: '密码必须是由6-20位数字和字母组合',
          type: 'error',
          showClose: true
        }))
      } else {
        callback()
      }
    }

    // 手机正则
    const checkPhone = (rule, value, callback) => {
      if (value === '') {
        callback(this.$message({
          message: '带星号的不能为空',
          type: 'error',
          showClose: true
        }))
      } else if (!validPhone(value)) {
        callback(this.$message({
          message: '手机号格式填写错误',
          type: 'error',
          showClose: true
        }))
      } else {
        callback()
      }
    }

    return {
      basicForm: {
        operatorName: '',
        operatorMobilePhone: '',
        loginPassword: '',
        departmentName: '',
        positionName: '',
        operatorId: '',
      },
      rules: {
        operatorName: [{ required: true, message: '', trigger: 'blur' }],
        operatorMobilePhone: [
          // {required: true, message: '', trigger: 'blur'},
          { required: true, message: '', trigger: 'blur', validator: checkPhone }

        ],

        loginPassword: [{ required: true, message: '', trigger: 'blur', validator: password }],
      },
    }
  },
  mounted() {
    this.basicForm = JSON.parse(localStorage.getItem('row'))
    this.getAccountDetail(this.basicForm.operatorId)
  },
  methods: {
    getAccountDetail(data) {
      staffInfo({ operatorId: data })
        .then(res => {
          this.basicForm = res.data
        })
    },

    saveAccount() {
      // 校验
      // valid是是否校验成功和item是未通过校验的字段
      this.$refs['basicForm'].validate((valid) => {
        if (valid) {
          changeInfo(this.basicForm)
            .then((res) => {
              if (res.code === 'OPERATION_002') {
                this.$message({
                  message: '用户名冲突',
                  type: 'error',
                  showClose: true,
                })
                return;
              } else if (res.code === 'OPERATION_003') {
                this.$message({
                  message: '手机号冲突',
                  type: 'error',
                  showClose: true,
                })
                return;
              } else if (res.code === 'AUTH_006') {
                this.$message({
                  message: '新密码与原始密码相同',
                  type: 'error',
                  showClose: true
                })
                return;
              } else if (res.code === '200') {
                this.$message({
                  message: '保存成功',
                  type: 'success',
                  showClose: true
                });
              }
              // 返回
              this.$router.go(-1)
            })
            .catch(() => {
              this.$message({
                message: '错误',
                type: 'error',
                showClose: true
              })
            })
        } else {
          this.$message({
            message: '*为必填信息',
            type: 'error',
            showClose: true
          })
        }
      })
    },
    cancel() {
      // 检测改动，如果检测到有改动，则提示
      if (this.basicForm.operatorName || this.basicForm.operatorMobilePhone || this.basicForm.password || this.basicForm.departmentName || this.basicForm.positionName) {
        this.$confirm('账号信息尚未保存，确定要离开吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.go(-1)
        })
      } else {
        // 否则直接退出
        this.$router.go(-1)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.rig-margin {
  padding: 15px 0 0 20px;
}

.form {
  margin: 30px 0 0 10px;
}
</style>
