<script setup lang="ts" name="HomePage">
type HomeFeature = {
  title: string[]
  image: string
  route: string
}

defineOptions({ name: 'HomePage' })

const bannerImage = '/images/img.png'

const router = useRouter()

const features: HomeFeature[] = [
  {
    title: ['人民币头寸', '预报及查询'],
    image: '/images/f5876785-b927-4347-ba19-999114240649.png',
    route: '/rmb-position',
  },
  {
    title: ['外币头寸', '预报及查询'],
    image: '/images/12a73787-86a9-4891-a65f-66104746f6a8.png',
    route: '/foreign-position',
  },
  {
    title: ['人行头寸', '余额查询'],
    image: '/images/73fef1e4-0fd0-4a1a-9b8b-a70a5b6acbbc.png',
    route: '/pbc-position',
  },
  {
    title: ['头寸匡算'],
    image: '/images/ea745a10-42aa-4f44-8d7f-3ab02cc0adcd.png',
    route: '/position-estimate',
  },
  {
    title: ['人民币净借记', '可用额度管理'],
    image: '/images/5798d7aa-ba8b-4605-8079-58b35495ac55.png',
    route: '/net-debit',
  },
  {
    title: ['人民币小额网银', '清算场次明细'],
    image: '/images/c3dbbd9d-be56-490e-b9f4-6ee17ebefffc.png',
    route: '/clearing-detail',
  },
  {
    title: ['预警信息'],
    image: '/images/bc685b4c-0cca-4a79-924c-a8ee10e6f8eb.png',
    route: '/warning',
  },
]
</script>

<template>
  <main class="home-page">
    <section class="banner-section" aria-label="欢迎登录头寸管理系统">
      <img class="banner-image" :src="bannerImage" alt="欢迎登录头寸管理系统" />
    </section>

    <section class="feature-section">
      <div class="section-title">
        <span class="section-title-mark"></span>
        <h2>常用功能</h2>
      </div>

      <div class="feature-grid">
        <button
          v-for="item in features"
          :key="item.title.join('')"
          class="feature-card"
          type="button"
          @click="router.push(item.route)"
        >
          <span class="feature-title">
            <span v-for="line in item.title" :key="line">{{ line }}</span>
          </span>
          <span class="feature-arrow" aria-hidden="true"><van-icon name="arrow" /></span>
          <img class="feature-image" :src="item.image" :alt="item.title.join('')" />
        </button>
      </div>
    </section>
  </main>
</template>

<style scoped>
.home-page {
  width: 100%;
  max-width: 750px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 7px 11px 16px;
  color: #171b20;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 245, 245, 0.88), transparent 124px),
    #ffffff;
  box-sizing: border-box;
}

.feature-card {
  border: 0;
  padding: 0;
  font: inherit;
  background: transparent;
  appearance: none;
}

.banner-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
}

.feature-section {
  margin-top: 18px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  margin-bottom: 11px;
  padding-left: 2px;
}

.section-title-mark {
  width: 5px;
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ff1826 0%, #ff4854 100%);
}

.section-title h2 {
  margin: 0;
  color: #171b20;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.feature-card {
  position: relative;
  height: 104px;
  overflow: hidden;
  text-align: left;
  border: 1px solid #ffdfe1;
  border-radius: 9px;
  background:
    radial-gradient(circle at 78% 74%, rgba(255, 225, 225, 0.52), transparent 58px),
    linear-gradient(135deg, #fff4f4 0%, #ffffff 52%, #fffafa 100%);
  box-shadow: 0 4px 14px rgba(250, 70, 78, 0.035);
}

.feature-title {
  position: absolute;
  top: 16px;
  left: 12px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 104px;
  padding: 0;
  color: #15191d;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.42;
  word-break: keep-all;
}

.feature-arrow {
  position: absolute;
  left: 12px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff3443 0%, #ff5b62 100%);
  color: #ffffff;
  font-size: 11px;
}

.feature-image {
  position: absolute;
  right: -4px;
  bottom: -7px;
  width: 94px;
  height: 94px;
  object-fit: contain;
  pointer-events: none;
}
</style>
