<template>
  <div v-if="product.requireLogin && !loggedIn" class="flex flex-col gap-3 items-center p-5 text-center border border-white/35 rounded-lg bg-white/60">
    <p class="text-base font-semibold text-apptext">该商品需要登录后才能购买</p>
    <a class="primary inline-block no-underline px-5 py-2 rounded-lg text-[15px] font-bold cursor-pointer" :href="loginUrl">立即登录</a>
  </div>

  <form v-else class="flex flex-col gap-1.5 min-w-0 w-full" @submit.prevent="emit('submit')">
    <p class="tag text-accent" v-if="product.maxPerAccount > 0">
      该商品每个账户最多可购买 {{ product.maxPerAccount }} 个
    </p>

    <div class="form-field !mb-1">
      <label>备注（选填）</label>
      <textarea v-model="form.note" class="!min-h-[72px]" placeholder="填写您的备注信息…" rows="2"></textarea>
    </div>

    <div class="flex flex-col gap-2">
      <div class="form-field !mb-1">
        <label>手机号（选填）</label>
        <input v-model="form.contactPhone" type="tel" placeholder="138xxxx0000" />
      </div>
      <div class="form-field !mb-1">
        <label>邮箱（选填）</label>
        <input v-model="form.contactEmail" type="email" placeholder="you@example.com" />
      </div>
    </div>

    <p class="tag leading-snug" v-if="!loggedIn">
      <a class="text-accent2 no-underline font-semibold hover:underline" :href="loginUrl">登录萌芽账号</a> 后购买可享受：历史订单记录、专属优惠商品及更多购买权益
    </p>

    <button class="primary w-full py-2" type="submit" :disabled="submitting">
      {{ submitting ? '生成中...' : '生成二维码下单' }}
    </button>
    <p class="text-[#d64848] text-[15px]" v-if="error">{{ error }}</p>
  </form>
</template>

<script setup>
defineProps({
  product: { type: Object, required: true },
  form: { type: Object, required: true },
  loggedIn: { type: Boolean, required: true },
  loginUrl: { type: String, required: true },
  submitting: { type: Boolean, default: false },
  error: { type: String, default: '' }
})

const emit = defineEmits(['submit'])
</script>
