<script setup lang="ts">
import { reactive, ref } from "vue";
import { addInvestor, modifyInvestor, getInvestorDetail } from "@/api/investor";
import { ElMessage } from "element-plus";

const emit = defineEmits(["refresh"]);

const formRef = ref();
const dialogVisible = ref(false);
const dialogType = ref<"add" | "edit">("add");
const loading = ref(false);

const state = reactive({
  ruleForm: {
    id: null as number | null,
    accountName: "",
    adminUserName: "",
    adminUserId: "",
    stationId: "",
    status: 1,
    telephone: "",
    bankCardNo: "",
    bankName: "",
    taxNo: "",
    vatRate: "",
    elecLossProportion: "",
    splittingProportion: "",
    remark: ""
  },
  rules: {
    telephone: [
      { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号", trigger: "blur" }
    ]
  }
});

const resetForm = () => {
  state.ruleForm = {
    id: null,
    accountName: "",
    adminUserName: "",
    adminUserId: "",
    stationId: "",
    status: 1,
    telephone: "",
    bankCardNo: "",
    bankName: "",
    taxNo: "",
    vatRate: "",
    elecLossProportion: "",
    splittingProportion: "",
    remark: ""
  };
  formRef.value?.resetFields();
};

const getTitle = () => {
  return dialogType.value === "add" ? "新增投资人/物业" : "编辑投资人/物业";
};

const open = async (type: "add" | "edit", row?: any) => {
  dialogType.value = type;
  resetForm();
  if (type === "edit" && row) {
    loading.value = true;
    try {
      const res = await getInvestorDetail(row.id);
      Object.assign(state.ruleForm, res);
    } catch (e) {
      ElMessage.error("获取详情失败");
    } finally {
      loading.value = false;
    }
  }
  dialogVisible.value = true;
};

const handleClose = () => {
  dialogVisible.value = false;
  resetForm();
};

const handleSubmit = async () => {
  const valid = await formRef.value?.validate().catch(() => false);
  if (!valid) return;

  loading.value = true;
  try {
    if (dialogType.value === "add") {
      await addInvestor(state.ruleForm);
    } else {
      await modifyInvestor(state.ruleForm);
    }
    ElMessage.success("操作成功");
    handleClose();
    emit("refresh");
  } catch (e) {
    ElMessage.error("操作失败");
  } finally {
    loading.value = false;
  }
};

defineExpose({ open });
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="getTitle()"
    width="650px"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-form ref="formRef" :model="state.ruleForm" :rules="state.rules" label-width="140px" :disabled="loading">
      <el-form-item label="账户名" prop="accountName">
        <el-input v-model="state.ruleForm.accountName" placeholder="请输入账户名" clearable />
      </el-form-item>
      <el-form-item label="客户名称" prop="adminUserName">
        <el-input v-model="state.ruleForm.adminUserName" placeholder="请输入客户名称" clearable />
      </el-form-item>
      <el-form-item label="电话号码" prop="telephone">
        <el-input v-model="state.ruleForm.telephone" placeholder="请输入电话号码" clearable />
      </el-form-item>
      <el-form-item label="银行卡号" prop="bankCardNo">
        <el-input v-model="state.ruleForm.bankCardNo" placeholder="请输入银行卡号" clearable />
      </el-form-item>
      <el-form-item label="开户行名称" prop="bankName">
        <el-input v-model="state.ruleForm.bankName" placeholder="请输入开户行名称" clearable />
      </el-form-item>
      <el-form-item label="税号" prop="taxNo">
        <el-input v-model="state.ruleForm.taxNo" placeholder="请输入税号" clearable />
      </el-form-item>
      <el-form-item label="增值税率" prop="vatRate">
        <el-input v-model="state.ruleForm.vatRate" placeholder="增值税率 (0.06表示6%)" clearable />
      </el-form-item>
      <el-form-item label="分成比例" prop="splittingProportion">
        <el-input v-model="state.ruleForm.splittingProportion" placeholder="分成比例 (0.45表示45%)" clearable />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="state.ruleForm.remark"
          placeholder="备注"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button :loading="loading" type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>
