<template>
  <div>
    <el-dialog title="人员管理" v-model="dialogVisible">
      <div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="loginRules"
          size="large"
          label-width="120px"
        >
          <el-form-item
            label="昵称"
            :rules="[
              {
                required: true,
                message: '请输入昵称',
                trigger: 'blur'
              }
            ]"
            prop="nickname"
          >
            <el-input
              clearable
              v-model="ruleForm.nickname"
              placeholder="请输入昵称"
              :maxlength="50"
              show-word-limit
            />
          </el-form-item>
          <el-form-item
            label="账号"
            :rules="[
              {
                required: true,
                message: '请输入账号',
                trigger: 'blur'
              }
            ]"
            prop="account"
          >
            <el-input
              clearable
              v-model="ruleForm.account"
              placeholder="请输入账号"
            />
          </el-form-item>

          <el-form-item v-if="props.rowData.id" label="密码">
            <el-input
              clearable
              show-password
              v-model="ruleForm.password"
              placeholder="密码"
            />
          </el-form-item>

          <el-form-item v-else prop="password" label="密码" required>
            <el-input
              clearable
              show-password
              v-model="ruleForm.password"
              placeholder="密码"
            />
          </el-form-item>

          <el-form-item>
            <el-text type="info" class="mx-1"
              >提示：初次设置账号密码和重置账号密码均在此处</el-text
            >
          </el-form-item>
          <el-form-item
            label="角色"
            :rules="[
              {
                required: true,
                message: '请选择角色',
                trigger: 'blur'
              }
            ]"
            prop="roleIds"
          >
            <el-select
              v-model="ruleForm.roleIds"
              placeholder="选择角色"
              size="large"
              multiple
              filterable
              style="width: 400px"
            >
              <el-option
                v-for="item in roleList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="登录状态" prop="status">
            <el-radio-group v-model="ruleForm.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit(ruleFormRef)"
              >确定</el-button
            >
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div></div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, defineProps, defineEmits, watch } from "vue";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";

import { loginRules } from "../../login/utils/rule";
import { request } from "@/utils";

const ruleForm = ref({
  account: "",
  nickname: "",
  password: "",
  status: 1,
  roleIds: []
});

const ruleFormRef = ref<FormInstance>();
const roleList = ref([]);
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(["update:show", "success"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  async n => {
    if (n) {
      await init();
      if (props?.rowData?.id) {
        for (let key in ruleForm.value) {
          ruleForm.value[key] = props.rowData[key];
        }
      }
    } else {
      onReset();
    }
  }
);
const getRoleList = () => {
  return request.get("/mechanism/role/list").then(resp => {
    roleList.value = resp.data.list;
  });
};

const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (!valid) return;
    let params = ruleForm.value;
    props.rowData.id && (params.id = props.rowData.id);
    request.post("/mechanism/staff/updateOrCreate", params).then(resp => {
      ElMessage.success(resp.message);
      dialogVisible.value = false;
      emits("success");
    });
  });
};
const onReset = () => {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.resetFields();
};
const init = () => {
  return getRoleList();
};
</script>
