<template>
  <div class="system-user-dialog-container">
    <el-dialog v-model="state.dialog.isShowDialog" width="400px" draggable>
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <span>上传报表</span>
        </div>
      </template>
      <el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="80px" :rules="rules">
        <el-row :gutter="35">
          <el-col :xs="24" class="mb20">
            <el-form-item label="选择类型" prop="roleList">
              <el-select v-model="state.ruleForm.roleList" placeholder="请选择报表类型" style="width: 100%">
                <el-option v-for="item in state.soption" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" class="mb20">

          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default">{{
            state.dialog.submitTxt
          }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="systemUserDialog">
import { reactive, ref, defineAsyncComponent, nextTick } from "vue";
import { userApi } from "/@/api/sys/role";
import { ElAlert, ElMessage, ElNotification } from "element-plus";
import { entApi } from "/@/api/ent/index";

// 定义子组件向父组件传值/事件
const emit = defineEmits(["refresh"]);
const userDialogFormRef = ref();
const organiZation = defineAsyncComponent(
  () => import("/@/components/organization/index.vue")
);

const organiZationRef = ref();

const forms = {
  phone: "", // 手机号
  email: "", // 邮箱
  sex: "", // 性别
  username: "", // 账户名称
  realName: "", //用户昵称
  roleList: [] as any, // 用户角色
  orgId: "", //组织机
  areaCode: ''
};

// 定义变量内容
const state = reactive({
  ruleForm: {
    phone: "", // 手机号
    email: "", // 邮箱
    sex: "", // 性别
    username: "", // 账户名称
    realName: "", //用户昵称
    roleList: [] as any, // 用户角色
    orgId: "", //组织机构
  },
  options: [] as any,
  deptData: [] as DeptTreeType[], // 部门数据
  dialog: {
    isShowDialog: false,
    type: "",
    title: "",
    submitTxt: "",
  },
  soption: [] as any
});
// 表单验证
const rules = reactive({
  username: [{ required: true, message: "请输入用户账号", trigger: "blur" }],
  realName: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
  phone: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
  email: [{ required: true, message: "请输入注册邮箱", trigger: "blur" }],
  orgId: [{ required: true, message: "请选择组织机构", trigger: "blur" }],
  roleList: [{ required: true, message: "请选择用户角色", trigger: "blur" }],
});

const getvalue = (e: string) => {
  state.ruleForm.orgId = e;
};


async function loadData() {
  // 角色
  let item = await userApi().getEnableRoles();
  state.options = item.data;
  // 区域
  let itemQx = await entApi().typeApi();
  itemQx.data.unshift({ label: '潍坊市', value: '' })
  state.soption = itemQx.data;
}
// 打开弹窗
const openDialog = (type: string, row: any) => {
  loadData();
  state.ruleForm = Object.assign({}, forms);
  if (type === "edit") {
    state.dialog.title = "修改用户";
    state.dialog.submitTxt = "修 改";
    getoneuser(row.id, row);
  } else {
    state.dialog.title = "新增用户";
    state.dialog.submitTxt = "新 增";
    // 清空表单，此项需加表单验证才能使用
    // setTimeout(() => {
    // },500);
  }
  state.dialog.type = type;
  state.dialog.isShowDialog = true;
  setTimeout(() => {
    if (type != "edit") {
      userDialogFormRef.value.resetFields();
    }
  }, 100);
};
async function getoneuser(params: number, row: any) {
  let item = await userApi().selectuserOne(params);
  state.ruleForm = {
    id: item.data.id,
    phone: item.data.phone, // 手机号
    email: item.data.email, // 邮箱
    sex: item.data.sex, // 性别
    username: item.data.username, // 账户名称
    realName: item.data.realName, //用户昵称
    roleList: item.data.roleList.map((res: any) => {
      return res.id;
    }), // 用户角色
  };
}

// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = async () => {
  let _form = state.ruleForm;
  if (_form.username == "") return ElMessage.error("请输入用户账号");
  if (_form.realName == "") return ElMessage.error("请输入用户昵称");
  if (_form.phone == "") return ElMessage.error("请输入联系电话");
  if (_form.email == "") return ElMessage.error("请输入注册邮箱");
  if (_form.roleList.length == 0) return ElMessage.error("请选择用户角色");
  let list = _form.roleList.map((res: any) => {
    return { id: res };
  });
  _form.roleList = list;
  if (state.dialog.type == "edit") {
    let item = await userApi().putUser(_form);
    if (item.code == 200) {
      ElMessage.success(item.msg);
      closeDialog();
      emit("refresh");
    } else {
      ElNotification({
        title: "提示",
        message: item.msg,
        duration: 0,
        type: "error",
      });
    }
  } else {
    let item = await userApi().setUser(_form);
    if (item.code == 200) {
      ElMessage.success(item.msg);
      closeDialog();
      emit("refresh");
    } else {
      ElNotification({
        title: "提示",
        message: item.msg,
        duration: 0,
        type: "error",
      });
    }
  }
};
// 暴露变量
defineExpose({
  openDialog,
});
</script>
