<template>
  <DialogForm
    ref="formRef"
    :model="model"
    title="客户详情"
    :openButton="false"
    v-model:visible="dialogVisible"
    :dialogProps="{ width: '900px' }"
    @closed="closeDialog"
    :disabled="true"
  >
  <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="user_password">
          <el-input
            placeholder="请输入登录密码"
            v-model="model.user_password"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item :label-width="labelWidth" label="角色" prop="role">
          <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='false' />
        </el-form-item>
      </el-col>
    </el-row>
  </DialogForm>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
import { getRoleList } from '~/service/role';
import { isEmptyObject } from '~/utils/index';

const formRef = ref();
const roles = ref([]);
const dialogVisible = ref(false);
const labelWidth = 90;

const props = defineProps({
  modelValue: Object
});

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 model = ref({
  user_name: '',
  user_account: '',
  user_password: ''
});

const closeDialog = () => {
  dialogVisible.value = false;
  emits('update:modelValue', {});
  formRef.value.resetFields();
};
</script>