<template>
  <el-dialog :title="form.userId ? '修改商家管理员' : '新增商家管理员'" :visible.sync="show" width="600px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" :size="ELsize">
      <el-form-item label="用户昵称" prop="nickName">
        <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
      </el-form-item>
      <el-form-item label="手机号码" prop="phonenumber">
        <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
      </el-form-item>
      <el-form-item label="用户账号" prop="userName">
        <el-input v-model="form.userName" :disabled="Boolean(form.userId)" placeholder="请输入用户账号" maxlength="30" />
      </el-form-item>
      <template v-if="!form.userId">
        <el-form-item label="用户密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
        </el-form-item>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :size="ELsize" :loading="btnLoading" @click="submitForm">确 定</el-button>
      <el-button :size="ELsize" @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { systemUserAdd, businessSystemUser, systemUserEdit } from "@/api/shop.js";
export default {
  data() {
    return {
      form: {
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        userId: undefined
      },
      btnLoading: false,
      title: "新增商家管理员",
      show: false,
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "用户账号不能为空", trigger: "blur" },
          { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
        ],
        phonenumber: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      },
      businessObj: {}
    }
  },
  methods: {
    open(row) {
      this.form = {
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        userId: undefined
      };
      this.businessObj = row;
      if (row.businessUser && row.businessUser.userId) {
        this.getDetails(row.businessId)
      }
      this.show = true
    },
    getDetails(id) {
      businessSystemUser(id).then(res => {
        this.form = res.data.user
      })
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.btnLoading = true;
          this.form.userName = this.form.userName.trim()
          let apiFun = systemUserAdd;
          if (this.form.userId) {
            apiFun = systemUserEdit;
          }
          apiFun(this.businessObj.businessId, this.form).then(res => {
            this.$message({
              message: '提交成功',
              type: 'success'
            })
            this.cancel()
            this.$emit('success')
          }).finally(() => {
            this.btnLoading = false;
          })
        }
      })
    },
    reset() {
      this.form = {
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        userId: undefined
      }
    },
    // 取消按钮
    cancel() {
      this.show = false;
      this.reset();
    },
  }
}
</script>

<style lang='scss' scoped></style>