<template>
  <div>
    <WellcomeCard class="relative left-1/2 -translate-x-1/2">
      <div>
        <div class="mb-2">
          欢迎认证 · <span style="font-weight: bold">上链查存证平台</span>
        </div>
        <Step :list="steps" :model-value="step" class="-ml-10 -mr-10"></Step>
      </div>
    </WellcomeCard>
    <div
      style="font-size: 12px; font-weight: 500; color: #3370fe"
      class="mt-2.5"
    >
      <span class="cursor-pointer" @click="$emit('select')">认证中心 ></span>
      <span style="color: var(--sy-black)">申请企业认证</span>
    </div>
    <div class="mx-auto" style="width: 770px">
      <Step1 v-if="step === '身份认证'" @update="step1Collect = $event"></Step1>
      <Step2 v-if="step === '账户认证'" @update="step2Collect = $event"></Step2>
      <Step3 v-if="step === '打款信息'" @update="step3Collect = $event"></Step3>
      <Step4 v-if="step === '认证结果'" @update="$emit('update')"></Step4>
      <syButton
        v-if="step !== '认证结果'"
        :loading="loading"
        :disabled="isBtnDisabled"
        @click="handleClickNext"
        mode="elementBtn"
        type="primary"
        style="width: 100%; height: 40px; margin-top: 52px"
        >{{ step === "打款信息" ? "提交审核" : "下一步" }}</syButton
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import WellcomeCard from "./WellcomeCard.vue";
import Step from "./Step.vue";
import { syButton } from "cqk-sy-ui";
import { ElMessage } from "element-plus";
import { computed, ref } from "vue";
import Step1 from "./AuthCompanySteps/Step1.vue";
import { companVerify, enterBank, enterBaseInfo } from "@/service/Api.service";
import Step2 from "./AuthCompanySteps/Step2.vue";
import Step3 from "./AuthCompanySteps/Step3.vue";
import Step4 from "./AuthCompanySteps/Step4.vue";

const steps = [
  { name: "身份认证", value: "身份认证" },
  { name: "账户认证", value: "账户认证" },
  { name: "打款信息", value: "打款信息" },
  { name: "认证结果", value: "认证结果" },
];
const step = ref("身份认证");

const e = defineEmits(["update", "select"]);

const isBtnDisabled = computed(() => {
  if (step.value === "身份认证") {
    return !step1Collect.value.isValid;
  } else if (step.value === "账户认证") {
    return !step2Collect.value?.isValid;
  } else if (step.value === "打款信息") {
    return !step3Collect.value?.isValid;
  }
});

async function submitStep2(account: any) {
  loading.value = true;
  const res = await enterBank(account);
  if (res && res.code === 200) {
    ElMessage({
      message: "企业银行账户信息录入成功。",
      type: "success",
    });
    loading.value = false;
    return true;
  } else {
    if (res?.msg) {
      ElMessage.error(res?.msg);
    }
    loading.value = false;
    return false;
  }
}

async function submitStep3(remitMoney: number) {
  loading.value = true;
  const res = await companVerify(remitMoney * 100);
  if (res && res.code === 200) {
    ElMessage({
      message: "打款验证成功。",
      type: "success",
    });
    loading.value = false;
    return true;
  } else {
    ElMessage.error(res?.msg);
    loading.value = false;
    return false;
  }
}

const handleClickNext = async () => {
  if (step.value === "身份认证") {
    const res = await submitStep1(step1Collect.value.value);
    res && (step.value = "账户认证");
  } else if (step.value === "账户认证") {
    const res = await submitStep2(step2Collect.value?.value);
    res && (step.value = "打款信息");
  } else if (step.value === "打款信息") {
    const res = await submitStep3(Number(step3Collect.value?.value.remitMoney));
    res && (step.value = "认证结果");
  }
};

const step1Collect = ref<{
  value: {
    name: any;
    uscd: any;
    corporations_name: any;
  };
  isValid: boolean;
}>({
  value: {
    name: "",
    uscd: "",
    corporations_name: "",
  },
  isValid: false,
});

const step2Collect = ref<{
  value: {
    name: any;
    uscd: any;
    corporations_name: any;
  };
  isValid: boolean;
}>();

const step3Collect = ref<{
  value: any;
  isValid: boolean;
}>();

async function submitStep1(data: any) {
  loading.value = true;
  const res = await enterBaseInfo(data);
  if (res && res.code === 200) {
    ElMessage({
      message: "企业基本信息录入成功。",
      type: "success",
    });
    loading.value = false;
    return true;
  } else {
    if (res?.msg) {
      ElMessage.error(res?.msg);
    }
    loading.value = false;
    return false;
  }
}

const loading = ref(false);
</script>

<style></style>
