<template>
  <div class="min-h-screen flow-root" style="background: #f9f9f9">
    <HeaderLine></HeaderLine>
    <ContentBox
      style="margin-top: 17px; padding-bottom: 150px; margin-bottom: 40px"
    >
      <Step :steps="steps" v-model:current="currentStep"></Step>
      <FileUploadForm
        v-show="currentStep === eStep.file"
        ref="FileUploadFormRef"
        v-model="fileUploadFormModel"
      ></FileUploadForm>
      <WorkMsgUploadForm
        v-show="currentStep === eStep.msg"
        v-model="workMsgUploadFormModel"
        ref="WorkMsgUploadFormRef"
      ></WorkMsgUploadForm>
      <OwnerShipForm
        v-show="currentStep === eStep.ownership"
        v-model="ownerShipFormModel"
        ref="OwnerShipFormRef"
      ></OwnerShipForm>
      <OwnerAndAutherForm
        v-show="currentStep === eStep.ownerAndAuther"
        ref="OwnerAndAutherFormRef"
      ></OwnerAndAutherForm>
      <div class="flex" style="margin-top: 59px">
        <syButton
          mode="elementBtn"
          style="width: 113px"
          type="primary"
          @click="next"
          >下一步</syButton
        >
        <syButton mode="elementBtn" style="width: 113px">保存草稿箱</syButton>
      </div>
    </ContentBox>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

import Step from "@/components/Step/index.vue";
import HeaderLine from "./HeaderLine.vue";
import ContentBox from "./ContentBox.vue";
import FileUploadForm from "./FileUploadForm/index.vue";
import WorkMsgUploadForm from "./WorkMsgUploadForm/index.vue";
import { syButton } from "cqk-sy-ui";

import { eStep } from "./types";
import { iPropsFileUplaodForm } from "./FileUploadForm/types";
import { iPropsWorkMsgUploadForm } from "./WorkMsgUploadForm/types";
import OwnerAndAutherForm from "./OwnerAndAutherForm/index.vue";
import { iPropsOwnerShipForm } from "./OwnerShipForm/types";
import OwnerShipForm from "./OwnerShipForm/index.vue";

const currentStep = ref(eStep.ownership);
const FileUploadFormRef = ref<InstanceType<typeof FileUploadForm>>();
const WorkMsgUploadFormRef = ref<InstanceType<typeof WorkMsgUploadForm>>();
const OwnerShipFormRef = ref<InstanceType<typeof OwnerShipForm>>();
const OwnerAndAutherFormRef = ref<InstanceType<typeof OwnerAndAutherForm>>();
const fileUploadFormModel = ref<iPropsFileUplaodForm>({
  files: [],
  powerOfAttorney: null,
});

const workMsgUploadFormModel = ref<iPropsWorkMsgUploadForm>({
  name: "",
  type: "",
  nature: "",
  desc: "",
  progress: "",
  date: undefined,
  address: "",
  status: "已发表",
  firstDate: undefined,
  firstAddress: "",
});

const ownerShipFormModel = ref<iPropsOwnerShipForm>({
  wayToGetRights: "",
  certificate: "",
  ownershipOfRights: "",
  proofOfOwnership: "",
});

const next = async () => {
  const isValid = await checkFormValid();
  console.log(isValid, "show isValid");
  if (!isValid) return;
  goToNextStep();
};

const checkFormValid = () => {
  const step = steps.find((step) => step.value === currentStep.value);
  return new Promise((r) => {
    step?.ref?.value?.formRef?.validate((isValid: boolean) => {
      r(isValid);
    });
  });
};

const goToNextStep = () => {
  const currentIndex = steps.findIndex(
    (step) => step.value === currentStep.value
  );
  steps[currentIndex + 1]
    ? (currentStep.value = steps[currentIndex + 1].value)
    : confirmAllTheFormMsg();
};
const steps = [
  {
    name: "作品文件",
    value: eStep.file,
    ref: FileUploadFormRef,
  },
  {
    name: "作品信息",
    value: eStep.msg,
    ref: WorkMsgUploadFormRef,
  },
  {
    name: "作品权属",
    value: eStep.ownership,
    ref: OwnerShipFormRef,
  },
  {
    name: "著作权人与作者",
    value: eStep.ownerAndAuther,
    ref: OwnerAndAutherFormRef,
  },
];
</script>

<style scoped></style>
