<template>
  <div class="home page-container">
    <van-nav-bar
      title="Vant H5 模板"
      left-text="返回"
      left-arrow
      fixed
      placeholder
      @click-left="onBack"
    />

    <div class="hero-card">
      <div class="hero-title">Vue 2 + Vant</div>
      <div class="hero-subtitle">移动端开箱即用的 UI 模板</div>
      <van-button type="primary" block round @click="onAction">立即体验</van-button>
    </div>

    <van-grid :border="false" column-num="3" clickable>
      <van-grid-item icon="fire-o" text="高质量组件" />
      <van-grid-item icon="guide-o" text="移动端导航" />
      <van-grid-item icon="balance-o" text="主题可定制" />
    </van-grid>

    <van-cell-group inset title="快速入口">
      <van-cell title="登记列表" icon="orders-o" is-link to="/registrations" />
      <van-cell title="表单示例" icon="todo-list-o" is-link @click="onNav('表单示例')" />
    </van-cell-group>

    <van-divider>更多组件请查看 Vant 文档</van-divider>

    <van-tabbar v-model="activeTab" fixed>
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="friends-o">社区</van-tabbar-item>
      <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data () {
    return {
      activeTab: 0
    }
  },
  methods: {
    onBack () {
      if (window.history.length > 1) {
        this.$router.back()
      }
    },
    onAction () {
      this.$toast('Vant 已就绪')
    },
    onNav (name) {
      this.$dialog.alert({
        title: '示例入口',
        message: `${name} 可在此扩展`
      })
    }
  }
}
</script>

<style scoped>
.home {
  padding-top: 16px;
}

.hero-card {
  background: linear-gradient(135deg, #3f8cff, #65c5ff);
  color: #fff;
  border-radius: 12px;
  padding: 20px 16px;
  box-shadow: 0 10px 30px rgba(63, 140, 255, 0.16);
  margin-bottom: 16px;
}

.hero-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

.hero-subtitle {
  opacity: 0.9;
  margin-bottom: 14px;
}

.van-grid {
  margin-bottom: 12px;
}
</style>
