<template>
  <el-dialog
      model-value="dialogUpdateVisible"
      :title="dialogTitle"
      width="30%"
      @close="handleClose"
  >
    <el-form
        ref="formRef"
        :model="form"
        label-width="100px"
    >
      <el-form-item label="用户头像" prop="avatarUrl">
<!--        {{ form.avatarUrl }}-->
        <el-input v-model="form.avatarUrl"/>
      </el-form-item>
      <el-form-item label="用户昵称" prop="username">
        <el-input v-model="form.username"/>
      </el-form-item>
      <el-form-item label="用户ID" prop="id">
        <el-input v-model="form.id"/>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <template v-if="form.gender==0">女</template>
        <template v-else>男</template>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <el-radio-group v-model="form.gender">
           <el-radio :value="0"  size="default">女</el-radio>
           <el-radio :value="1"  size="default">男</el-radio>
         </el-radio-group>
      </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="userStatus">
        <el-input v-model="form.userStatus"/>
      </el-form-item>
      <el-form-item label="用户角色" prop="userRole">
<!--        {{form.userRole}}-->
<!--        {{labelt}}-->
<!--        展示由于v-model绑定出现v-model的form.userRole的值-->
        <el-select
            v-model="form.userRole"
            size="default"
            placeholder="用户角色"
            style="width: 100%"
        >

          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </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 labelt=ref('')

const form = ref({
  id:null,
  avatarUrl: "",
  email: "",
  gender: null,
  phone: null,
  userRole: null,
  userStatus: null,
  username: ""
})

const options = [
  {
    value: '',
    label: '用户身份',
  },
  {
    value: '0',
    label: '普通用户',
  },
  {
    value: '1',
    label: '管理员',
  },
  {
    value: '2',
    label: '商家',
  },
  {
    value: '3',
    label: '美甲师',
  },

]


const formRef = ref(null);
const initFormData = async (ids) => {
  const res = await axios.get("user/getById", {id: ids})
  form.value = res.data.data;
  labelt.value=options[form.value.userRole].label
 // console.log(options[form.value.userRole].label)
}


watch(
    () => props.id,
    () => {
    //  console.log("id=" + props.useraccount);
       let ids = props.id;
       initFormData(ids)
    }
)
// 定义父组件事件
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/update", form.value)
      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>

