<script setup lang="ts">
import { ref, computed, unref, reactive, shallowRef } from "vue";
import { useAsync } from "/@/hooks/core/useAsync";
import { httpRoleQuery } from "/@/api/system/accountRole";
import { ModalTypes } from "./../types";
import { ElForm, ElMessage } from "element-plus";

const emit = defineEmits(["finance-save"]);

const visible = ref(false);
const modalType = ref<ModalTypes>(ModalTypes.create);
const formRef = ref<InstanceType<typeof ElForm>>(null);
const level = shallowRef(0);

const {
  run: runRole,
  data: rolelist,
  loading: loadingRole
} = useAsync<Record<string, string>[]>({
  initalData: [],
  isList: false
});

const defaultData = {
  nickname: "",
  mobile: "",
  roleid: ""
};

const formData = ref<Record<string, any>>({ ...defaultData });

const title = computed(() => {
  const baseName = "账号角色设置";

  switch (modalType.value) {
    case ModalTypes.create:
      return "创建" + baseName;
    case ModalTypes.preview:
      return "查看" + baseName;
    default:
      return "修改" + baseName;
  }
});

const rules = reactive({
  nickname: [{ required: true, message: "请输入真实姓名", trigger: "blur" }],
  mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  roleid: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (Number(value) === 0) {
          callback(new Error("请选择角色"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
});

function handleSave() {
  formRef.value.validate(isValid => {
    if (!isValid) return;
    emit("finance-save", { ...unref(formData) }, unref(modalType));
    visible.value = false;
  });
}

defineExpose({
  onDisplay: (_data?: any, type?: ModalTypes) => {
    formData.value = { ...defaultData };

    visible.value = true;
    modalType.value = type;
    runRole(httpRoleQuery({}));

    if (_data) {
      const { mobile, nickname, role_id, id, level: _l } = _data;
      level.value = Number(_l);
      formData.value = { mobile, nickname, roleid: role_id, id };
    } else {
      level.value = 0;
    }
  }
});
</script>

<template>
  <ElDialog
    center
    v-model="visible"
    :title="title"
    :close-on-click-modal="false"
  >
    <ElForm
      ref="formRef"
      labelWidth="100px"
      label-position="left"
      :model="formData"
      v-loading="loadingRole"
      :rules="rules"
      :disabled="modalType === ModalTypes.preview"
    >
      <ElFormItem label="真实姓名" prop="nickname">
        <ElInput
          placeholder="请输入真实姓名"
          v-model="formData.nickname"
          disabled
        />
      </ElFormItem>

      <ElFormItem label="手机号" prop="mobile">
        <ElInput
          placeholder="请输入手机号"
          v-model="formData.mobile"
          disabled
        />
      </ElFormItem>

      <ElFormItem label="角色" prop="roleid">
        <ElRadioGroup v-model="formData.roleid">
          <ElRadio
            :disabled="String(role.status) === '0'"
            v-for="role in rolelist"
            :key="role.id"
            :label="role.id"
            >{{ role.role_name }}</ElRadio
          >
        </ElRadioGroup>
      </ElFormItem>

      <ElFormItem>
        <div class="flex w-full justify-end">
          <ElButton type="取消" @click="() => (visible = false)">取消</ElButton>
          <ElButton type="primary" @click="() => handleSave()">保存</ElButton>
        </div>
      </ElFormItem>
    </ElForm>
  </ElDialog>
</template>
