<template>
  <el-dialog @close="close" v-model="dialogVisible" :title="title" width="50%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="ruleForm.nickname" placeholder="请输入昵称" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio label=1 :value=1>男</el-radio>
          <el-radio label=0 :value=0>女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="关联角色" prop="role">
        <el-select v-model="ruleForm.role" placeholder="请选择" style="width: 100%">
          <el-option label="超级管理员" value=1 :key=0></el-option>
          <el-option label="管理员" value=2 :key=1></el-option>
          <el-option label="普通用户" value=3 :key=2></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="ruleForm.phone" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="账户密码">
        <el-input v-model="ruleForm.password" placeholder="请输入账户密码,如果不输入默认123456" type="password" clearable />
      </el-form-item>
      <el-form-item label="用户状态">
        <el-switch  inline-prompt v-model="ruleForm.status"  :active-text="'启用'" :inactive-text="'禁用'"
          :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="用户描述" prop="describe">
        <el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入用户描述" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
import { reactive, ref } from "vue";
import systemApi from '@/api/system'

const ruleFormRef = ref<FormInstance>()
const dialogVisible = ref<boolean>(false)
const title = ref('新增用户')

const rules = reactive({
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' },
  ],
  username: [{ required: true, message: '请输入', trigger: 'blur' }],
  role: [{ required: true, message: '请选择角色', trigger: 'change', },],
  sex: [{ required: true, message: '请选择性别', trigger: 'change', },],
})

const props = defineProps({
  callback: {
    type: Function,
    required: true
  },editCallback: {
    type: Function,
    required: true
  }
});

const ruleForm = reactive({
  username: '',
  nickname: null,
  sex: '1',
  role: 0,
  phone: null,
  password: null,
  describe: null,
  status: 0
})

const addOrUpdate = ref(1); // 1代表新增用户  2 修改用户

function close() {
  ruleFormRef.value.resetFields()
  Object.keys(ruleForm).forEach(key => {
    if (key === 'sex') ruleForm[key] = null
    else if (key === 'status') ruleForm[key] = true
    else ruleForm[key] = null

  })
  addOrUpdate.value = 1;
}

const show = (item = {}) => {
  title.value = '新增用户'
  if (item.username) {
    addOrUpdate.value = 2;
    title.value = '编辑用户'
    Object.keys(item).forEach(key => {
      if (key == 'sex' || key == 'role') {
        ruleForm[key] = item[key] + ''
      } else {
        ruleForm[key] = item[key]
      }

    })
  }
  dialogVisible.value = true
}

const handleClose = async (done: () => void) => {
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {

      // 调用接口进行上传数据

      let sex = parseInt(ruleForm.sex);
      let role = parseInt(ruleForm.role);
      let phone = parseInt(ruleForm.phone);
      let status = ruleForm.status ? 1 : 0;

      var data = {
        username: ruleForm.username,
        nickname: ruleForm.nickname,
        sex: sex,
        role: role,
        phone: phone,
        password: ruleForm.password,
        describe: ruleForm.describe,
        status: status
      }
    
      if (addOrUpdate.value == 1) {
        systemApi.addUser(data).then((resp) => {
          console.log(resp);
          
          if (resp.data.code == 401) {
            ElMessage({
              message: resp.data.msg,
              type: 'error',
              duration: 3000
            });
          } else {
            dialogVisible.value = false
            // 将新增用户传递会父组件
            props.callback(resp.data.result);
          }
        });
      } else {
        systemApi.editUser(data).then((resp) => {
          if (resp.data.code == 407) {
            ElMessage({
              message: resp.data.msg,
              type: 'error',
              duration: 3000
            });
          } else {
            dialogVisible.value = false
            // 将新增用户传递会父组件
            props.editCallback(resp.data.result);
          }
        });
      }

    } else {
      console.log('error submit!', fields)
    }
  })
}

defineExpose({
  show,
})

</script>
<style lang="scss" scoped></style>

