<template>
  <div class="customer-container safe-area-top" :class="{ 'form-mode': pageMode === 'form' }">
    <template v-if="pageMode === 'entry'">
      <div class="setting flex flex-between">
        <SvgIcon name="left" size="70" @click="handleBack" />

        <SvgIcon name="setting" size="70" />
      </div>
      <div class="content flex flex-center flex-column">
        <div class="text">Who is Your Customer?</div>
      </div>
      <div class="entry-btn flex flex-center" @click="handleChangeMode('form')">Entry</div>
    </template>
    <template v-else>
      <div class="form-container">
        <div class="menu flex flex-between">
          <div class="back-container flex flex-between" @click="handleBack">
            <SvgIcon name="left" size="70" />
          </div>
          <SvgIcon name="setting" size="70" />
        </div>
        <div class="text">
          <div class="form-title">Customer ID</div>
          <div class="description">
            Redefine the styling experience with AI. Use<br />Styling Angel to speed up your
            fashion<br />journey.
          </div>
        </div>

        <div class="glass-form">
          <div class="form-field">
            <label class="field-label">VIP ID</label>
            <input
              v-model="customerData.vipId"
              type="text"
              placeholder="Enter your ID"
              class="form-input"
            />
          </div>
          <!-- <div class="form-field email">
            <label class="field-label">Email Address</label>
            <input
              v-model="customerData.email"
              type="email"
              placeholder="Enter your email"
              class="form-input"
            />
          </div> -->
          <button class="confirm-btn" @click="handleConfirm">Confirm</button>
        </div>
        <div class="copyright">Powered by AiDLab for Lane Crawford</div>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useGenerateStore, useUserInfoStore } from '@/stores'
import { showToast } from 'vant'
import { customerCheckin } from '@/api/workshop'

const router = useRouter()
const generateStore = useGenerateStore()

type PageMode = 'form' | 'entry'
const pageMode = ref<PageMode>('form')
// const pageMode = ref<PageMode>('entry')

const handleBack = () => {
  router.go(-1)
}

const handleChangeMode = (mode: PageMode) => {
  pageMode.value = mode
}

const customerData = ref({
  vipId: ''
  // email: ''
})

const handleConfirm = async () => {
  if (customerData.value.vipId === '') {
    showToast({
      message: 'please input name and email',
      position: 'top'
    })
    return
  }

  customerCheckin(customerData.value).then((res) => {
    useUserInfoStore().resetGenerateParams()
    // console.log('res', res)
    generateStore.setCustomerInfo(res)
    // router.push('/stylist/index')
    router.push('/homeNav')
  })
}
</script>
<style lang="less" scoped>
.customer-container {
  height: 100vh;
  overflow: hidden;
  color: #fff;
  position: relative;
  // background: url('@/assets/images/no_shouder_bg.png') no-repeat center center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  &.form-mode {
    background: url('@/assets/images/has_shouder_bg.png') no-repeat center center/cover;
    padding-top: 15.9rem;
  }

  .setting {
    z-index: 1;
    padding: 3.17rem 4.9rem 0 8.4rem;
    font-size: 7rem;
    .c-svg {
      width: initial;
    }
  }
  .content {
    margin-top: 55.3rem;
    .text {
      font-family: 'satoshiBold';
      font-size: 13rem;
      line-height: 112.99%;
      text-align: center;
      letter-spacing: 2;
    }
    .start-btn {
      font-size: 5.6rem;
      width: 32.5rem;
      height: 8.1rem;
      border: 0.2rem solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4rem;
    }
  }
  .entry-btn {
    position: absolute;
    border: 0.2rem solid #fff;
    bottom: 10.3rem;
    right: 5.5rem;
    height: 9rem;
    width: 27.5rem;
    line-height: 9rem;
    font-size: 5.6rem;
  }

  .form-container {
    .menu {
      padding: 0 4.8rem 0 8.4rem;
      .back-container {
        width: 7.3rem;
        height: 7.3rem;
        border-radius: 1.8rem;
        font-size: 4.3rem;
        position: relative;

        .back-icon {
          width: 2.08rem;
          height: 3.47rem;
        }
      }
    }
    .text {
      padding-left: 15.2rem;
      margin-top: 15.4rem;
      letter-spacing: 0.02rem;
    }
    .form-title {
      font-family: 'satoshiBold';
      font-size: 11rem;
      line-height: 1.24em;
    }
    .description {
      font-size: 3.6rem;
      line-height: 141%;
      letter-spacing: 0.08rem;
      margin-top: 2.7rem;
      font-family: 'satoshiRegular';
    }

    .glass-form {
      height: 68.8rem;
      border: 0.2rem solid #ffffff;
      border-radius: 4.7rem;
      margin: 0 14.2rem;
      //   padding: 8.2rem 7.9rem;
      padding: 11rem 7.5rem;
      margin-top: 11rem;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
      display: flex;
      flex-direction: column;

      background: radial-gradient(
        100% 100% at 0% 0%,
        rgba(115, 115, 115, 0.4) 0%,
        rgba(0, 0, 0, 0) 100%
      );
      backdrop-filter: blur(35px);
      justify-content: flex-start;

      .form-field {
        margin-bottom: 6.8rem;
        &.email {
          margin-bottom: 6.8rem;
        }
        .field-label {
          display: block;
          color: #fff;
          font-size: 3.6rem;
          font-family: 'satoshiRegular';
          margin-bottom: 3rem;
        }

        .form-input {
          width: 100%;
          height: 10rem;
          line-height: 10rem;
          border: 0.2rem solid #fff;
          border-radius: 7rem;
          padding: 0 5.5rem;
          color: #fff;
          font-size: 3.8rem;
          font-family: 'satoshiRegular';
          background: transparent;

          &::placeholder {
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }

      .confirm-btn {
        width: 100%;
        height: 10rem;
        line-height: 10rem;
        background: #000;
        border: none;
        border-radius: 7rem;
        color: #fff;
        font-size: 4rem;
        font-family: 'satoshiRegular';
        cursor: pointer;
        box-shadow: 0 0.2rem 8px rgba(0, 0, 0, 0.2);
      }
    }
    .copyright {
      font-family: 'satoshiRegular';
      font-size: 3rem;
      line-height: 124%;
      letter-spacing: 0.08rem;
      margin-top: 2.31rem;
      text-align: center;
      font-weight: 400;
      margin-top: 18.7rem;
    }
  }
}
.c-svg {
  width: initial;
}
</style>
