<script setup lang="ts">
import { ref, computed, unref } from "vue";
import { useAsync } from "/@/hooks/core/useAsync";
import { httpList } from "/@/api/interest/role";
import { ModalTypes } from "./../types";
import { ElForm } from "element-plus";
import { useCompany } from "/@/hooks/core/useCompany";

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

const visible = ref(false);
const modalType = ref<ModalTypes>(ModalTypes.create);
const formRef = ref<InstanceType<typeof ElForm>>(null);
let companyNo = "";

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

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

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

const { currentCompany } = useCompany();

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

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

function handleSave() {
  formRef.value.validate(isValid => {
    if (!isValid) return;

    emit(
      "finance-save",
      {
        companyNo,
        relaComNo: currentCompany.value.companyNo,
        ...unref(formData)
      },
      unref(modalType)
    );
    visible.value = false;
  });
}

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

    visible.value = true;
    modalType.value = type;
    companyNo = _data.companyCode;
    runRole(httpList({ companyNo, size: "1000", level: "2" }));

    if (_data) {
      const { mobile, nickname, roleid, id, companyName } = _data;
      company.value = companyName;
      formData.value = { mobile, nickname, roleid, id };
    }
  }
});
</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="{}"
      :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="companyName" v-if="company">
        <ElInput placeholder="请输入业务公司" :value="company" 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>
