<script lang="ts" setup>
import { computed, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'

// import captcha from './captcha.vue'
import { PageEnum } from '@/enums/pageEnum'
import { useUserStore } from '@/store/modules/user'
import { ResultEnum } from '@/enums/httpEnum'
import { getCode, smsLogin } from '@/api/login/login'

const emit = defineEmits(['close', 'forget'])
interface FormState {
  enterprisecode?: string
  username: string
  password: string
}

interface FormSms {
  agentcode: string
  phone: string
  phonecode: string
}

const formRef = ref()
const formRefSms = ref()
const message = useMessage()
const loading = ref(false)
const autoLogin = ref(true)
const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const show = ref(false)
const flag = ref(true)

const formInline: FormState = reactive({
  enterprisecode: '演示公司',
  username: 'yanshi01',
  password: '123456',
})

const formSms: FormSms = reactive({
  agentcode: '',
  phone: '',
  phonecode: '',
})
const tab = ref(0)
const countTime = ref('获取验证码')
const rules = {
  enterprisecode: { required: true, message: '请输入企业编码', trigger: 'blur' },
  agentcode: { required: true, message: '请输入企业编码', trigger: 'blur' },
  phone: { required: true, message: '请输入手机号', trigger: 'blur' },
  phonecode: { required: true, message: '请输入验证码', trigger: 'blur' },
  username: { required: true, message: '请输入用户名', trigger: 'blur' },
  password: { required: true, message: '请输入密码', trigger: 'blur' },
  captcha: { required: true, message: '请输入验证码', trigger: 'blur' },
}

function handleSubmit(e) {
  e.preventDefault()
  formRef.value.validate(async (errors) => {
    if (!errors) {
      const { username, password, enterprisecode } = formInline
      message.loading('登录中...')
      loading.value = true

      const params = {
        username,
        password,
        codetoken: userStore.getCapToken,
        agentcode: enterprisecode,
      }

      try {
        const { code, message: msg } = await userStore.login(params)
        if (code === ResultEnum.SUCCESS) {
          await userStore.getInformation()
          message.destroyAll()

          const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
          message.success('登录成功，即将进入系统')
          if (route.name === LOGIN_NAME)
            router.replace('/')
          else router.replace(toPath)
        }
        else {
          message.destroyAll()
          message.info(msg || '登录失败')
        }
      }
      finally {
        loading.value = false
      }
    }
    else {
      message.error('请填写完整信息，并且进行验证码校验')
    }
  })
}

function handleSmsSubmit(e) {
  e.preventDefault()
  formRefSms.value.validate(async (errors) => {
    if (!errors) {
      const { phone, agentcode, phonecode } = formSms
      message.loading('登录中...')
      loading.value = true

      try {
        const res = await smsLogin({
          phone,
          agentcode,
          phonecode,
        })
        const { code, message: msg } = res
        if (code === ResultEnum.SUCCESS) {
        // const { code, message: msg } = await userStore.login(params)
          await userStore.getInformation()

          message.destroyAll()
          const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
          message.success('登录成功，即将进入系统')
          if (route.name === LOGIN_NAME)
            router.replace('/')
          else router.replace(toPath)
        }
        else {
          message.destroyAll()
          message.info(msg || '登录失败')
        }
      }
      finally {
        loading.value = false
      }
    }
    else {
      message.error('请填写完整信息，并且进行验证码校验')
    }
  })
}

function close() {
  emit('close')
}

function switchTab(type: number) {
  tab.value = type
}

function computedForm() {
  return !formInline.enterprisecode || !formInline.username || !formInline.password
}

async function sendCode(value) {
  if (!formSms.phonecode)
    return

  if (!flag.value)
    return
  flag.value = false

  const res = await getCode({
    phone: formSms.phone,
    agentcode: '',
  })
  startCount()
}

function startCount() {
  let time = 60
  countTime.value = '60s'
  const timer = setInterval(() => {
    countTime.value = `${--time}s`
    if (time === 0) {
      clearInterval(timer)
      countTime.value = '重新获取'
      flag.value = true
    }
  }, 1000)
}

function forget() {
  emit('forget')
}
</script>

<template>
  <div class="form-login">
    <img class="img-close" src="@/assets/images/login/close.png" alt="" @click="close">
    <div class="tab">
      <div :class="{ 'tab-item-active': tab === 0 }" class="tab-item" @click="switchTab(0)">
        密码登录
        <div class="line" />
      </div>
      <div :class="{ 'tab-item-active': tab === 1 }" class="tab-item" @click="switchTab(1)">
        短信登录
        <div class="line" />
      </div>
    </div>
    <div v-if="tab === 0" class="form-1">
      <n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
        <n-form-item class="form-item" path="enterprisecode">
          <n-input v-model:value="formInline.enterprisecode" class="item-input" placeholder="请输入企业编码">
            <template #prefix>
              <svg-icon size="20" name="enterprise" />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item class="form-item" path="username">
          <n-input v-model:value="formInline.username" class="item-input" placeholder="请输入用户名">
            <template #prefix>
              <svg-icon size="20" name="account" />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item class="form-item" path="password">
          <n-input v-model:value="formInline.password" class="item-input" type="password" show-password-on="click" placeholder="请输入密码">
            <template #prefix>
              <svg-icon size="20" name="password" />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item class="form-item">
          <n-button :class="{ 'btn-disabled': computedForm() }" class="btn" type="primary" size="large" :loading="loading" block @click="handleSubmit">
            登录
          </n-button>
        </n-form-item>
        <n-form-item class="default-color">
          <div class="w-full flex justify-between">
            <div class="flex-initial">
              <n-checkbox v-model:checked="autoLogin">
                记住账号
              </n-checkbox>
            </div>
            <div class="flex-initial order-last" @click="forget">
              <a href="javascript:">忘记密码</a>
            </div>
          </div>
        </n-form-item>
      </n-form>
    </div>
    <div v-else class="form-1">
      <n-form ref="formRefSms" label-placement="left" size="large" :model="formSms" :rules="rules">
        <n-form-item class="form-item" path="agentcode">
          <n-input v-model:value="formSms.agentcode" class="item-input" placeholder="请输入企业编码">
            <template #prefix>
              <svg-icon size="20" name="enterprise" />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item class="form-item" path="phone">
          <n-input v-model:value="formSms.phone" class="item-input" placeholder="请输入手机号">
            <template #prefix>
              <img class="img-phone" src="@/assets/images/login/phone.png" alt="" @click="close">
            </template>
          </n-input>
        </n-form-item>
        <n-form-item class="form-item" path="phonecode">
          <n-input v-model:value="formSms.phonecode" maxlength="6" class="item-input" placeholder="请输入验证码" clearable>
            <template #prefix>
              <img class="img-phone" src="@/assets/images/login/auth.png" alt="" @click="close">
            </template>
            <template #suffix>
              <div :class="{ 'code-count': countTime !== '获取验证码' }" class="code" @click="sendCode">
                {{ countTime }}
              </div>
            </template>
          </n-input>
        </n-form-item>
        <n-form-item class="form-item">
          <n-button :class="{ 'btn-disabled': computedForm() }" class="btn" type="primary" size="large" :loading="loading" block @click="handleSmsSubmit">
            登录
          </n-button>
        </n-form-item>
        <n-form-item class="default-color">
          <div class="w-full flex justify-between">
            <div class="flex-initial">
              <n-checkbox v-model:checked="autoLogin">
                记住账号
              </n-checkbox>
            </div>
            <div class="flex-initial order-last" @click="forget">
              <a href="javascript:">忘记密码</a>
            </div>
          </div>
        </n-form-item>
      </n-form>
    </div>
  </div>
</template>

<style lang="less" scoped>
.form-login {
  width: 420px;
  height: 417px;
  box-sizing: border-box;
  background: linear-gradient(136deg,rgba(226,236,255,0.80) 3%, rgba(251,251,251,0.80) 97%);
  border: 1px solid #ffffff;
  border-radius: 6px;
  box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.04);
  backdrop-filter: blur(12px);
  position: relative;
  padding: 48px 27px 0;

  .img-close{
    position: absolute;
    right: 0;
    top: -44px;
    width: 28px;
    height: 28px;
    cursor: pointer;
  }

  .tab{
    display: flex;
    .tab-item{
      width: 72px;
      height: 25px;
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 600;
      text-align: left;
      color: #666666;
      line-height: 33px;
      margin-right: 24px;

      &-active{
        width: 96px;
        height: 33px;
        font-size: 24px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 600;
        text-align: left;
        color: #507afd;
        line-height: 33px;

        .line{
          background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
        }
      }

      .line{
        width: 32px;
        height: 4px;
        border-radius: 2px;
        margin: 0 auto;
        margin-top: 9px;
      }
    }
  }

  .form-1{
    margin-top: 29px;

    .form-item{
      height: 60px;
    }

    .item-input{
      width: 366px;
      // height: 44px;
      background: rgba(255,255,255,0.50);
      border-radius: 4px;
    }

    .btn{
      width: 366px;
      height: 44px;
      background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
      border-radius: 3px;
      margin-top: 10px;
      margin-bottom: 14px;

      &-disabled{
        opacity: 0.5;
        background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
      }
    }
  }

  .img-phone{
    width: 20px;
    height: 20px;
  }

  .order-last{
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    color: #507afd;
  }

  .code{
    font-size: 15px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    color: #507afd;
    margin-left: 12px;

    &-count{
      font-size: 14px;
      color: #999999;
    }
  }
}
::v-deep(.n-form-item-feedback--error) {
  // color: #FF4E4F !important;
}
</style>
