<template>
  <el-dialog
      model-value="dialogaddVisible"
      :title="dialogTitle"
      width="30%"
      @close="handleClose"
  >
    <el-form
        ref="formRef"
        :model="form"
        label-width="100px"
    >
      <el-form-item label="门店头像" prop="avatarUrl">

        <el-upload   list-type="picture-card" limit="1" :auto-upload="false" drag action="#">
          <el-icon><Plus /></el-icon>
          <template #tip>
            <div class="el-upload__tip">
              （最多传一张）
            </div>
          </template>
        </el-upload>

      </el-form-item>
      <el-form-item label="用户昵称" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="用户账号" prop="userAccount">
        <el-input v-model="form.userAccount" />
      </el-form-item>
      <el-form-item label="用户密码" prop="userPassword">
        <el-input v-model="form.userPassword" show-password />
      </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";
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'


const props=defineProps({
  dialogTitle:{
    type:String,
    default:'',
    required:true
  }
})
const form=ref({
  avatarUrl:'',
  userAccount:'',
  userPassword:'',
  username:null

})
// const rules=ref({
//   name: [
//     {
//       required: true,
//       message: '请输入商品大类名称！'
//     }
//   ],
//   remark: [
//     {
//       required: true,
//       message: '请输入商品大类描述！'
//     }
//   ]
// })
const formRef=ref(null);

// 定义父组件事件
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("user/add",form.value)
      console.log(result.data)
      let data=result.data;
      if(data.code==0){
        ElMessage.success("执行添加成功！");
        formRef.value.resetFields();
        emits("initUserList");
        handleClose();
      }else{
        ElMessage.error(data.description);
      }
    }else{
      console.log("fail")
      return false
    }
  })
}
</script>
<style scoped>
</style>