<template>
  <div class="loan-management">
    <div class="page-header">
      <h1>贷款管理</h1>
      <p>管理银行贷款相关业务</p>
    </div>

    <div class="content">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-card hoverable @click="goToProducts" class="menu-card">
            <div class="menu-item">
              <CreditCardOutlined class="menu-icon" />
              <div class="menu-content">
                <h3>贷款商品</h3>
                <p>管理和配置银行贷款产品</p>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card hoverable @click="goToApplications" class="menu-card">
            <div class="menu-item">
              <FileTextOutlined class="menu-icon" />
              <div class="menu-content">
                <h3>贷款申请进度</h3>
                <p>管理和跟踪贷款申请流程</p>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card hoverable @click="goToContracts" class="menu-card">
            <div class="menu-item">
              <FileProtectOutlined class="menu-icon" />
              <div class="menu-content">
                <h3>贷款合同</h3>
                <p>管理和跟踪贷款合同状态</p>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card hoverable @click="goToRelease" class="menu-card">
            <div class="menu-item">
              <UnlockOutlined class="menu-icon" />
              <div class="menu-content">
                <h3>贷款解押</h3>
                <p>管理和处理贷款抵押物解押业务</p>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>

      <!-- 子路由出口 -->
      <div class="sub-route-content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { 
  CreditCardOutlined, 
  FileTextOutlined, 
  FileProtectOutlined, 
  UnlockOutlined 
} from '@ant-design/icons-vue'

const router = useRouter()

const goToProducts = () => {
  router.push('/loan-management/products')
}

const goToApplications = () => {
  router.push('/loan-management/applications')
}

const goToContracts = () => {
  router.push('/loan-management/contracts')
}

const goToRelease = () => {
  router.push('/loan-management/release')
}
</script>

<style scoped>
.loan-management {
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.content {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}

.menu-card {
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.menu-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
}

.menu-icon {
  font-size: 32px;
  color: #1890ff;
  margin-right: 16px;
}

.menu-content h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
}

.menu-content p {
  margin: 0;
  color: #666;
  font-size: 12px;
  line-height: 1.4;
}

.sub-route-content {
  margin-top: 24px;
}
</style>
