<template>
  <el-dialog v-model="dialogData.showDialog" :title="dialogData.pageType == 'add' ? '新增用户' : dialogData.pageType == 'edit' ? '编辑用户' : ''" width="560px">
    <el-form :model="userForm" :rules="rules" ref="userFormRef">
      <el-form-item label="姓名：" label-width="120px" prop="nickname">
        <el-input v-model="userForm.nickname" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="账号：" label-width="120px" prop="username">
        <el-input v-model="userForm.username" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="密码：" label-width="120px" prop="passwordOfNewUser" v-if="dialogData.pageType == 'add'">
        <el-input v-model="userForm.passwordOfNewUser" type="password" show-password placeholder="请输入密码" autocomplete="new-password" />
      </el-form-item>
      <el-form-item label="手机号：" label-width="120px" prop="phoneNo">
        <el-input v-model="userForm.phoneNo" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="性别：" label-width="120px" prop="gender">
        <el-radio-group v-model="userForm.gender">
          <el-radio :value="2">男</el-radio>
          <el-radio :value="1">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态：" label-width="120px" prop="status">
        <el-radio-group v-model="userForm.status">
          <el-radio :value="1">正常</el-radio>
          <el-radio :value="0">封禁</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button class="button_border_gray cancel" @click="dialogData.showDialog = false">取消</el-button>
      <el-button class="button_background" :loading="submitLoading" @click="SubmitForm(userFormRef)">确定</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts">
export default {
  name: 'AddAdmin',
}
</script>
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { ref, reactive, onMounted, inject } from 'vue'
import { managerDetails, addManager, editManager, deleteManager } from '@/api/manager'
interface DialogData {
  showDialog: boolean
  pageType: string
  id: string
}
let emit = defineEmits(['update'])
let dialogData = inject<DialogData>('dialogData', {
  showDialog: false,
  pageType: 'add',
  id: ''
})
// 新增用户表单数据定义
interface UserForm {
  id: string
  nickname: string
  username: string
  passwordOfNewUser: string
  phoneNo: string
  gender: number
  status: number
}
// 新增用户表单数据初始化
const userForm = reactive<UserForm>({
  id: '',
  nickname: '',
  username: '',
  passwordOfNewUser: '',
  phoneNo: '',
  gender: 0,
  status: 1,
})
const userFormRef = ref<FormInstance>()
// 表单校验规则
const rules = reactive<FormRules<UserForm>>({
  nickname: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  passwordOfNewUser: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  phoneNo: [
    { 
      validator: (rule, value, callback) => {
        if(!value) return callback() 
        const pattern = /^1[3-9]\d{9}$/
        if(!pattern.test(value)) {
          callback(new Error('请输入正确的手机号'))
        }
        callback()
      }, 
      trigger: 'blur' 
    }
  ],
  // gender: [
  //   { required: true, message: '请选择性别', trigger: 'change' }
  // ],
  // status: [
  //   { required: true, message: '请选择状态', trigger: 'change' }
  // ]
})
onMounted(() => {
  if (dialogData.pageType == 'edit') {
    GetManagerDetails()
  }
})
const GetManagerDetails = () => {
  managerDetails(dialogData.id).then((res: any) => {
    if(res.code == 200 && res.data) {
      const { data } = res
      userForm.id = data.id
      userForm.nickname = data.nickname
      userForm.username = data.username
      userForm.passwordOfNewUser = data.passwordOfNewUser
      userForm.phoneNo = data.phoneNo
      userForm.gender = data.gender
      userForm.status = data.status
    }
  })
}
const submitLoading = ref(false)
const SubmitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async(valid) => {
    if (valid) {
      submitLoading.value = true
      try {
        let res
        if(dialogData?.pageType == 'add') {
          res = await addManager(userForm)
        }else if(dialogData?.pageType == 'edit') {
          res = await editManager(userForm)
        }
        if (res.code == 200) {
          ElMessage.success(res.msg)
          if(userFormRef.value) {
            userFormRef.value.resetFields()
          }
          emit('update', false)
        } else {
          ElMessage.error(res.msg)
        }
        submitLoading.value = false
      }catch {
        submitLoading.value = false
      }
    }
  })
}
</script>
<style lang="scss" scoped>
.el-input {
  width: 320px;
}
</style>