<template>
  <el-dialog
      model-value="edialogUpdateVisible"
      :title="dialogTitle"
      width="30%"
      @close="handleClose"
  >
    <el-form
        ref="formRef"
        :model="form"
        label-width="100px"
    >
      <el-form-item label="头像" prop="manicuristAvatar">
        <el-input v-model="form.manicuristAvatar"/>
      </el-form-item>
      <el-form-item label="用户昵称" prop="manicuristName">
        <el-input v-model="form.manicuristName"/>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-input v-model="form.gender"/>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="form.phone"/>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email"/>
      </el-form-item>
      <el-form-item label="工作名称" prop="specialties">
        <el-input v-model="form.specialties"/>
      </el-form-item>
      <el-form-item label="关联商家ID" prop="businessId">
        <el-input v-model="form.businessId"/>
      </el-form-item>
      <el-form-item label="工作时长" prop="employment_date">
        <el-input v-model="form.employment_date"/>
      </el-form-item>
      <el-form-item label="评分" prop="rating">
        <el-input v-model="form.rating"/>
      </el-form-item>
      <el-form-item label="余额" prop="salary">
        <el-input v-model="form.salary"/>
      </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: '',
    required: true
  },
  dialogTitle: {
    type: String,
    default: '',
    required: true
  }
})
const form = ref({
  id:null,
  email: "",
  gender: null,
  phone: "",
  businessId: "",
  manicuristName: "",
  employment_date: "",
  specialties: "",
  rating: null,
  salary: null,
  manicuristAvatar: ""
})

const formRef = ref(null);
const initFormData = async (id) => {
  const res = await axios.get("manicurist/queryById", {manicuristId: id})
  form.value = res.data.data;
 // console.log(res.data.data)
}
watch(
    () => props.id,
    () => {
    //  console.log("id=" + props.id);
       let id = props.id;
      initFormData(id)
    }
)
// 定义父组件事件
const emits = defineEmits(['update:modelValue', 'initEmployeeList'])
const handleClose = () => {
  console.log("xxx")
// 调用执行

  emits('update:modelValue', false)
}
const handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let result = await axios.post("manicurist/update", form.value)
      console.log(result.data.data)
      let data = result.data;
      if (data.code == 0) {
        ElMessage.success("执行成功！");
        formRef.value.resetFields();
        emits("initEmployeeList");
        handleClose();
      } else {
        ElMessage.error(data.description);
      }
    } else {
      console.log("fail")
      return false
    }
  })
}
</script>
<style scoped>
</style>