<template>
  <div class="container">
    <section class="hero fade-up">
      <div class="hero-badge">CREATE ACCOUNT</div>
      <h1 class="hero-title">注册新账号</h1>
      <p class="hero-sub">填写基础信息后即可进入内容风控平台。</p>
    </section>

    <section class="card fade-up fade-up-delay-1" style="max-width: 520px; margin: 24px auto;">
      <div class="card-title">账号信息</div>

      <div class="field">
        <label class="field-label">用户名 *</label>
        <input class="input" v-model.trim="form.username" placeholder="登录用户名" />
      </div>

      <div class="field">
        <label class="field-label">密码 *</label>
        <input class="input" type="password" v-model.trim="form.password" placeholder="不少于 6 位" />
      </div>

      <div class="field">
        <label class="field-label">昵称</label>
        <input class="input" v-model.trim="form.nickname" placeholder="展示昵称" />
      </div>

      <div class="grid-2">
        <div class="field">
          <label class="field-label">公司</label>
          <input class="input" v-model.trim="form.company" placeholder="所属公司" />
        </div>
        <div class="field">
          <label class="field-label">岗位</label>
          <input class="input" v-model.trim="form.title" placeholder="岗位名称" />
        </div>
      </div>

      <div class="field">
        <label class="field-label">手机号</label>
        <input class="input" v-model.trim="form.phone" placeholder="联系方式" />
      </div>

      <button class="btn btn-primary" :disabled="loading" style="width: 100%;" @click="submit">
        {{ loading ? '提交中...' : '提交注册' }}
      </button>

      <button class="btn btn-ghost" type="button" style="width: 100%;" @click="goBack">返回登录</button>
    </section>
  </div>
</template>

<script>
import { request } from '@/utils/request'
import { toast } from '@/utils/feedback'

export default {
  name: 'RegisterView',
  data() {
    return {
      loading: false,
      form: {
        username: '',
        password: '',
        nickname: '',
        company: '',
        title: '',
        phone: ''
      }
    }
  },
  methods: {
    goBack() {
      this.$router.push('/login')
    },
    async submit() {
      if (this.loading) return
      if (!this.form.username || !this.form.password) {
        toast('用户名和密码必填', 'error')
        return
      }
      this.loading = true
      try {
        await request({ url: '/auth/register', method: 'POST', data: this.form })
        toast('注册成功，请登录', 'success')
        setTimeout(() => this.$router.push('/login'), 300)
      } catch (err) {
        // toast already shown
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
