<script lang="ts" setup>
import companyInfo from './companyInfo.vue'
import { isEmptyObject } from '@/utils'
import { CUR_STATUS } from '@/enums/common'
const visible = defineModel('visible', { default: false })
enum STATUS {
  FirstStep = 'select',
  SecondStep = 'companyInfo',
  ThirdStep = 'success',
}

const status = ref(STATUS.FirstStep)
const countNum = ref(20)
const isMyself = ref<CUR_STATUS>(CUR_STATUS.A)

const obj_cache = JSON.parse(sessionStorage.getItem('cache_register'))
if (obj_cache && !isEmptyObject(obj_cache)) {
  status.value = STATUS.SecondStep
  isMyself.value = obj_cache.type
}

const isSelf = computed(() => {
  return isMyself.value === CUR_STATUS.B
})
const onSelect = (val: CUR_STATUS) => {
  status.value = STATUS.SecondStep
  isMyself.value = val
}
const onSuccess = () => {
  status.value = STATUS.ThirdStep
  countDown()
}
const countDown = () => {
  countNum.value = 20
  const timer = setInterval(() => {
    countNum.value--
    if (countNum.value === 0) {
      clearInterval(timer)
      visible.value = false
    }
  }, 1000)
}
</script>

<template>
  <a-modal
    v-model:open="visible"
    :footer="false"
    :width="status === STATUS.FirstStep ? '646px' : '1080px'"
    wrapClassName="custom-info"
    :keyboard="false"
    :maskClosable="false"
    :closable="false"
  >
    <div class="pt-150px pb-180px px-135px text-center" v-if="status === STATUS.FirstStep">
      <img class="w-88px h-88px" src="@/assets/images/check.png" alt="" />
      <div class="my-27px fw-700 text-24px text-#000/85">注册成功</div>
      <div class="text-14px text-#333">请选择您的情况和需求，以便后续更好服务对接：</div>

      <a-button
        class="w-full my-20px bg-#fff !b-rd-6px text-#000/60 !text-14px !h-56px !hover:text-#0068FF !hover:border-#0068FF"
        size="large"
        @click="onSelect(CUR_STATUS.B)"
        >自有工厂/供应链，入驻为供应商 & 加入易杰出海圈</a-button
      >
      <a-button
        class="w-full bg-#fff !b-rd-6px text-#000/60 !text-14px !h-56px !hover:text-#0068FF !hover:border-#0068FF"
        size="large"
        @click="onSelect(CUR_STATUS.A)"
        >无自有工厂/供应链，加入易杰出海圈</a-button
      >
      <div class="mt-20 text-16px cursor-pointer text-#bbb hover:underline" @click="visible = false">跳过>>></div>
    </div>
    <div v-if="status === STATUS.SecondStep">
      <company-info :isMyself @success="onSuccess" v-model:visible="visible" />
    </div>
    <div v-if="status === STATUS.ThirdStep" class="text-center py-100px">
      <div>
        <img class="w-88px h-88px" v-if="isSelf" src="@/assets/images/check.png" alt="" />
        <img class="w-88px h-88px" v-else src="@/assets/images/smile.png" alt="" />
        <div>
          <h3 class="c-#000 fw-700 fs-34 mb-4px mt-37px">{{ isSelf ? '提交成功' : '欢迎加入' }}</h3>
          <div class="c-333 mb-26px">
            {{
              isSelf
                ? '您已提交成功， 请等待工作人员审核（约1-2个工作日）'
                : '如果您后续自有供应链，并期望成为易杰供应商合作伙伴，可联系我们更改您的状态。'
            }}
          </div>
          <a-button
            class="w-376px bg-#fff b-#0068FF !b-rd-6px text-#0068FF !h-56px !hover:text-#0068FF !hover:b-#0068FF"
            size="large"
            @click="visible = false"
            >已知晓，现在去“易杰出海圈”看看（{{ countNum }}s）</a-button
          >
        </div>
      </div>
    </div>
  </a-modal>
</template>

<style lang="less">
.custom-info {
  .ant-modal {
    .ant-modal-content {
      border-radius: 18px;
      padding: 0 !important;
    }
  }
}
</style>
