<template>
  <component
    is="a-modal"
    :width="tool.getDevice() === 'mobile' ? '100%' : '600px'"
    v-model:visible="visible"
    :title="title"
    :mask-closable="false"
    :ok-loading="loading"
    @cancel="close"
    @before-ok="submit"
  >
    <!-- 表单信息 start -->
    <a-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      :auto-label-width="true"
    >
      {{ mode }}
      <a-form-item label="用户真实名" field="real_name" v-if="mode === 'real'">
        <a-input v-model="formData.real_name" placeholder="请输入用户真实名" />
      </a-form-item>
      <a-form-item label="证件号码" field="id_card" v-if="mode === 'real'">
        <a-input v-model="formData.id_card" placeholder="请输入证件号码" />
      </a-form-item>
      <a-form-item label="手机" field="mobile" v-if="mode === 'mobile'">
        <a-input v-model="formData.mobile" placeholder="请输入手机" />
      </a-form-item>
      <a-form-item label="密码" field="user_pwd" v-if="mode === 'pwd'">
        <a-input-password
          v-model="formData.user_pwd"
          placeholder="请输入密码"
        />
      </a-form-item>
    </a-form>
    <!-- 表单信息 end -->
  </component>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import tool from "@/utils/tool";
import { Message, Modal } from "@arco-design/web-vue";
import api from "../../api/customer/account";

const emit = defineEmits(["success"]);
// 引用定义
const visible = ref(false);
const loading = ref(false);
const formRef = ref();
const mode = ref("");

let title = computed(() => {
  return "账号信息" + (mode.value == "add" ? "-新增" : "-编辑");
});

// 表单初始值
const initialFormData = {
  uid: null,
  user_pwd: "",
  real_name: "",
  id_card: "",
  mobile: "",
};

// 表单信息
const formData = reactive({ ...initialFormData });

// 验证规则
const rules = {
  uid: [{ required: true, message: "用户UID必需填写" }],
  user_name: [{ required: true, message: "用户名必需填写" }],
  user_pwd: [{ required: true, message: "用户密码必需填写" }],
  email: [{ required: true, message: "用户邮箱必需填写" }],
  real_name: [
    {
      required: true,
      match: /^[\u4e00-\u9fa5]{2,4}$/,
      message: "用户真实名格式不正确",
    },
  ],
  id_card: [
    {
      required: true,
      match:
        /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[0-1])\d{3}[0-9Xx]$/,
      message: "证件号码格式不正确",
    },
  ],
  mobile: [
    { required: true, match: /^1[3-9]\d{9}$/, message: "手机格式不正确" },
  ],
};

// 打开弹框
const open = async (type = "add", data) => {
  mode.value = type;
  // 重置表单数据
  Object.assign(formData, data);
  formRef.value.clearValidate();
  visible.value = true;
  await initPage();
};

// 初始化页面数据
const initPage = async () => {};

// 设置数据
const setFormData = async (data) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      formData[key] = data[key];
    }
  }
};

// 数据保存
const submit = async (done) => {
  const validate = await formRef.value?.validate();
  if (!validate) {
    loading.value = true;
    let data = { ...formData };
    let result = {};

    // 修改数据
    if (mode.value === "pwd") {
      result = await api.updatePwdApi(data);
    } else if (mode.value === "mobile") {
      result = await api.updateMobileApi(data);
    } else if (mode.value === "real") {
      result = await api.updateRealApi(data);
    }

    if (result.code === 200) {
      Message.success("操作成功");
      emit("success");
      done(true);
    }
    // 防止连续点击提交
    setTimeout(() => {
      loading.value = false;
    }, 500);
  }
  done(false);
};

// 关闭弹窗
const close = () => (visible.value = false);

defineExpose({ open, setFormData });
</script>
