<template>
  <LoginLayout>
    <div>
      <!-- 注册form -->
      <a-form
        v-show="step === 1"
        class="w-600"
        ref="registerFormRef"
        :model="registerForm"
        :rules="registerFormRules"
        :colon="false"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-item label=" ">
          <h3 class="c-333 text-center fs-28">供应商注册</h3>
        </a-form-item>

        <a-form-item ref="phoneNumber" label="手机号" name="phoneNumber">
          <a-input v-model:value="registerForm.phoneNumber" size="large" />
        </a-form-item>
        <a-form-item ref="username" label="名字" name="username">
          <a-input v-model:value="registerForm.username" size="large" />
        </a-form-item>
        <a-form-item ref="password" label="密码" name="password">
          <a-input-password v-model:value="registerForm.password" size="large" />
        </a-form-item>
        <a-form-item label="营业执照" name="busLicense">
          <!-- <UploadOneImage
            v-model:src="registerForm.busLicense"
            api="/jeecgboot/shop/ocr/BusinessLicense"
            @success="handleUploadSuccess"
          ></UploadOneImage> -->
          <UploadFile v-model:url="registerForm.busLicense" api="/jeecgboot/shop/ocr/BusinessLicense" @success="handleUploadSuccess"></UploadFile>
        </a-form-item>
        <a-form-item ref="name" label="公司名称" name="name">
          <a-input v-model:value="registerForm.name" size="large" />
        </a-form-item>
        <a-form-item ref="regCode" label="统一信用代码" name="regCode">
          <a-input v-model:value="registerForm.regCode" size="large" />
        </a-form-item>
        <a-form-item ref="legalMan" label="法定代表人" name="legalMan">
          <a-input v-model:value="registerForm.legalMan" size="large" />
        </a-form-item>
        <a-form-item ref="address" label="详细地址" name="address">
          <a-input v-model:value="registerForm.address" size="large" />
        </a-form-item>
        <a-form-item label=" " name="isUnlock">
          <DragVerify v-model:value="registerForm.isUnlock"></DragVerify>
        </a-form-item>
        <a-form-item label=" " name="isRead">
          <a-checkbox v-model:checked="registerForm.isRead">
            <div class="ml-8 lh-none">
              我已阅读并同意 <router-link target="_blank" to="/agreement">《用户协议》</router-link>及<router-link target="_blank" to="/agreement"
                >《隐私协议》</router-link
              >
            </div>
          </a-checkbox>
        </a-form-item>
        <a-form-item label=" ">
          <a-button class="w-full" type="primary" size="large" @click="onSendCaptcha">提交</a-button>
          <!-- <a-button style="margin-left: 10px" @click="resetForm">Reset</a-button> -->
        </a-form-item>
        <a-form-item label=" ">
          <div class="text-center">已有账号，点击 <router-link to="/login" class="c-primary underline">登录</router-link></div>
        </a-form-item>
      </a-form>
      <!-- 验证码form -->
      <a-form
        v-show="step === 2"
        class="w-600 pl-100"
        ref="captchaFormRef"
        :model="registerForm"
        :rules="registerFormRules"
        :colon="false"
        :label-col="{ span: 0 }"
        :wrapper-col="{ span: 24 }"
      >
        <h3 class="c-333 text-center fs-28">请输入6位短信验证码</h3>
        <div class="tips flex flex-justify-between mb-10">
          <div class="text">验证码已发送至 {{ registerForm.phoneNumber }}</div>

          <div class="c-primary cursor-pointer" @click="onSendCaptcha" v-if="seconds === 0">重新发送</div>
          <div class="c-ccc" @click="onSendCaptcha" v-else>{{ seconds }}秒后重发</div>
          <!-- <a-button type="link" class="resend-btn" :disabled="seconds !== 0" @click="onSendCaptcha"> -->
          <!-- {{ seconds === 0 ? '重新发送' : `${seconds}秒后重发` }} -->
          <!-- </a-button> -->
        </div>
        <a-form-item label="" class="mb-60">
          <CaptchaCodeInput v-model="registerForm.captcha"></CaptchaCodeInput>
        </a-form-item>
        <a-form-item label="">
          <a-button class="w-full" size="large" type="primary" @click="onRegister">提交</a-button>
          <!-- <a-button style="margin-left: 10px" @click="resetForm">Reset</a-button> -->
        </a-form-item>
      </a-form>
    </div>
  </LoginLayout>
</template>

<script setup lang="ts">
// import LoginLayout from 'Components/layout/LoginLayout.vue'
import useUserStore from 'Store/modules/user'
import { useRoute } from 'vue-router'

// import type { RegisterData, CaptchaData } from 'Types/api/user'
// import UploadOneImage from '@/components/upload/UploadOneImage.vue'
// import DragVerify from '@/components/DragVerify.vue'
// import CaptchaCodeInput from '@/components/CaptchaCodeInput.vue'

// import { Dayjs } from 'dayjs';
import type { UnwrapRef } from 'vue'
import type { Rule } from 'ant-design-vue/es/form'
import { apiSendCaptcha } from 'API/user'

import { validatePhone, validatePassword, genValidateTrue } from 'Utils/validate'
import type { RegisterData, CaptchaData } from 'Types/api'

// 获取地址栏参数
const route = useRoute()
const phone = route.query.phone as string

const registerFormRef = ref()
const captchaFormRef = ref()
// 当前注册阶段
let step = ref(1)
let seconds = ref(0)
interface ICaptcha {
  phoneNumber: string
  type: string
}

const registerForm: UnwrapRef<RegisterData> = reactive({
  phoneNumber: phone || '',
  username: '',
  password: '',
  busLicense: '',
  name: '',
  regCode: '',
  legalMan: '',
  address: '',
  captcha: '',
  isRead: false,
  isUnlock: false,
})
const registerFormRules: Record<string, Rule[]> = {
  phoneNumber: [{ required: true, validator: validatePhone, trigger: 'change' }],
  username: [{ required: true, message: '名字未输入', trigger: 'change' }],
  password: [{ required: true, validator: validatePassword, trigger: 'change' }],
  busLicense: [{ required: true, message: '营业执照未上传', trigger: 'change' }],
  name: [{ required: true, message: '营业执照未上传', trigger: 'change' }],
  regCode: [{ required: true, message: '营业执照未上传', trigger: 'change' }],
  legalMan: [{ required: true, message: '营业执照未上传', trigger: 'change' }],
  address: [{ required: true, message: '营业执照未上传', trigger: 'change' }],
  captcha: [{ required: true, message: '验证码未输入', trigger: 'change' }],
  isRead: [{ validator: genValidateTrue('未同意协议'), trigger: 'change' }],
  isUnlock: [{ validator: genValidateTrue('请完成滑动验证'), trigger: 'change' }],
}

const onSendCaptcha = async () => {
  await registerFormRef.value.validate()
  const captcha: CaptchaData = {
    phoneNumber: registerForm.phoneNumber,
    type: 's_register',
  }
  await apiSendCaptcha(captcha)
  countSeconds()
  step.value = 2
}

const countSeconds = () => {
  seconds.value = 60
  const timer = setInterval(() => {
    seconds.value--
    if (seconds.value === 0) {
      clearInterval(timer)
    }
  }, 1000)
}

const onRegister = () => {
  captchaFormRef.value
    .validate()
    .then(() => {
      console.log('values', registerForm, toRaw(registerForm))
      const userStore = useUserStore()
      userStore.register(toRaw(registerForm)).catch(() => {
        registerForm.isUnlock = false
      })
    })
    .catch((error: Error) => {
      console.log('error', error)
    })
}
const handleUploadSuccess = (fileList) => {
  console.log(fileList[0])
  if (fileList.length) {
    const data = fileList[0].response.result
    registerForm.address = data.address
    registerForm.name = data.companyName
    registerForm.legalMan = data.legalMan
    registerForm.regCode = data.regCode
  }
}
</script>

<style scoped lang="less">
.page {
  .side-img {
    width: 50%;
    height: 100%;
    background-color: aquamarine;
  }
}
</style>
