<template>
  <DialogForm
    ref="formRef"
    :model="model"
    :rules="rules"
    title="编辑客户"
    :openButton="false"
    v-model:visible="dialogVisible"
    :dialogProps="{ width: '900px' }"
    @closed="closeDialog"
  >
  <el-row>
      <el-col :span="12">
        <el-form-item :label-width="labelWidth" label="用户名" prop="user_name">
          <el-input
            v-model="model.user_name"
            type="text"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item :label-width="labelWidth" label="角色" prop="roles">
          <el-select
            v-model="model.roles"
            multiple
            placeholder="请选择角色"
            style="width: 100%"
          >
            <el-option
              v-for="item in roles"
              :key="item.role_guid"
              :label="item.role_name"
              :value="item.role_guid"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label-width="labelWidth" label="手机号码" prop="user_phone">
          <el-input
            v-model="model.user_phone"
            type="text"
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item :label-width="labelWidth" label="头像" prop="user_img">
          <UploadImage ref='uploadRef' v-model='model.user_img' :data=uoloadData :limit='1' :fileSize='5'
              :drag='true' :isShowTip='true' />
        </el-form-item>
      </el-col>
    </el-row>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="handleCommitClick()">
          编辑
        </el-button>
        <el-button @click="handleResetClick()"> 重置 </el-button>
      </span>
    </template>
  </DialogForm>

</template>

<script setup>
import { reactive, ref, watch } from "vue";
import { editUser } from "~/service/user";
import { getRoleList } from "~/service/role";
import { useLoginStore } from "~/store";
import { isEmptyObject } from "~/utils/index";

const formRef = ref();
const roles = ref([]);
const loading = ref(false);
const dialogVisible = ref(false);
const labelWidth = 90;
const uoloadData = ref({
  dirName: "User"
})

const store = useLoginStore();

const headers = {
  Accept: "application/json",
  ...store.headers,
};
const props = defineProps({
  modelValue: Object,
  done: Function,
});

const emits = defineEmits(["update:modelValue"]);

getRoleList({
  scope: "customer_user",
  role_status: 1,
}).then((res) => {
  if (res.code == 0) {
    roles.value = res.data;
  }
});

watch(
  () => props.modelValue,
  (v) => {
    dialogVisible.value = !isEmptyObject(v);
    if (dialogVisible.value) {
      model.value = v;
    }
  }
);

const rules = {
  user_name: [
    {
      required: true,
      message: "请输入姓名",
    },
  ],
  roles: [
    {
      required: true,
      message: "请选择角色",
    },
  ],
};

const model = ref({
  user_name: "",
  user_account: "",
  user_password: "",
});

const closeDialog = () => {
  dialogVisible.value = false;
  emits("update:modelValue", {});
};

// const handleDepartmentClick = (value) => {
//   model.value.department_guid = value.department_guid;
//   model.value.department.department_name = value.department_name;
// };

const handleCommitClick = async () => {
  loading.value = true;
  try {
    await formRef.value.validate();
    const { code } = await editUser({
      ...model.value,
    });
    if (code == 0) {
      props.done();
      formRef.value.close();
    }
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
const handleResetClick = () => {
  formRef.value.resetFields();
};
</script>