<template>
  <el-dialog
      model-value="dialogVisible"
      :title="dialogTitle"
      width="30%"
      @close="handleClose"
  >
    <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
    >
      <el-form-item label="用户头像" prop="avatarUrl">
          <img :src="form.avatarUrl" alt="空" width="50" height="50"/>
      </el-form-item>
      <el-form-item label="用户昵称" prop="username">
        {{form.username}}
      </el-form-item>
      <el-form-item label="用户账号" prop="userAccount">
        {{form.userAccount}}
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <template v-if="form.gender==0">女</template>
        <template v-else>男</template>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
       {{form.phone}}
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        {{form.email}}
      </el-form-item>
      <el-form-item label="用户状态" prop="userStatus">
        <template v-if="form.userStatus==0">禁用</template>
        <template v-else>启用</template>

      </el-form-item>
      <el-form-item label="用户角色" prop="userRole">
        <template v-if="form.userRole===0">普通用户</template>
        <template v-else-if="form.userRole===1">管理员</template>
        <template v-else-if="form.userRole===2">商家</template>
        <template v-else>美甲师</template>
      </el-form-item>
    </el-form>
<!--    <template #footer>-->
<!--<span class="dialog-footer">-->
<!--<el-button @click="handleClose">取消</el-button>-->
<!--<el-button type="primary" @click="handleConfirm">确认</el-button>-->
<!--</span>-->
<!--    </template>-->
  </el-dialog>
</template>
<script setup>
import {defineEmits, defineProps, ref, watch} from "vue";
import axios from "@/util/axios";
import { ElMessage } from "element-plus";
const props=defineProps({
  id:{
    type:String,
    default:-1,
    required:true
  },
  dialogTitle:{
    type:String,
    default:'',
    required:true
  }
})
const form=ref({
  avatarUrl: "",
  createTime:"",
  email:"",
  gender:null,
  isDelete:null,
  openId:null,
  phone:null,
  unionId:null,
  updateTime:"",
  userAccount:"",
  userPassword:"",
  userRole:null,
  userStatus:null,
  username:""
})
// const rules=ref({
//   name: [
//     {
//       required: true,
//       message: '请输入商品大类名称！'
//     }
//   ],
//   remark: [
//     {
//       required: true,
//       message: '请输入商品大类描述！'
//     }
//   ]
// })
const formRef=ref(null);
const initFormData=async(ids)=>{
// console.log(ids)
  const res=await axios.get("user/getById",{id: ids})
 // console.log(res.data.data)
  form.value=res.data.data;

}
watch(
    ()=>props.id,
    ()=>{
      //console.log("id="+props.id);
      let ids=props.id;
        initFormData(ids)

      // }else{
      //   formRef.value.resetFields();
      //   form.value={
      //     id:-1,
      //     name:"",
      //     remark:""
      //   }
     // }
    }
)
// 定义父组件事件
const emits=defineEmits(['update:modelValue','initUserList'])
const handleClose=()=>{
  console.log("xxx")
// 调用执行
  emits('update:modelValue',false)
}
// const handleConfirm=()=>{
//   formRef.value.validate(async(valid)=>{
//     if(valid){
//       let result=await axios.post("admin/bigType/save",form.value)
//       let data=result.data;
//       if(data.code==0){
//         ElMessage.success("执行成功！");
//         formRef.value.resetFields();
//         emits("initUserList");
//         handleClose();
//       }else{
//         ElMessage.error(data.msg);
//       }
//     }else{
//       console.log("fail")
//       return false
//     }
//   })
// }
</script>
<style scoped>
</style>