import { Component } from '@angular/core';
import { Location } from '@angular/common'; // 必须导入Location服务
import { RouterModule } from '@angular/router';

@Component({
    selector: 'page-crm-development',
    standalone: true,
    imports: [RouterModule], // 确保导入RouterModule
    template: `
    <section class="under-development">
      <div class="container">
        <h1>功能开发中</h1>
        <p>我们正在全力开发此功能，即将为您呈现更优质的服务体验</p>
        <div class="construction-icon">🚧</div>
        <button (click)="goBack()" class="back-link">返回</button>
      </div>
    </section>
  `,
    styles: [`
    .under-development {
      min-height: 70vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2rem;
      background-color: #f9f9f9;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
    }
    h1 {
      color: #2F7DAD;
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }
    p {
      font-size: 1.2rem;
      color: #555;
      margin-bottom: 2rem;
    }
    .construction-icon {
      font-size: 5rem;
      margin: 2rem 0;
      animation: bounce 2s infinite;
    }
    .home-link {
      display: inline-block;
      padding: 0.8rem 1.5rem;
      background-color: #2F7DAD;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      transition: background-color 0.3s;
    }
    .home-link:hover {
      background-color: #1a5a8a;
    }
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
    }
    .back-link {
      /* 尺寸调整 */
      padding: 1.2rem 2.4rem;
      min-width: 140px;
      font-size: 1.1rem;
  
      /* 视觉增强 */
      border-radius: 8px; /* 更大的圆角 */
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
  
      /* 交互效果 */
      &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 8px rgba(0,0,0,0.15);
    }
  
    &:active {
      transform: translateY(0);
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  
    /* 移动端适配 */
    @media (max-width: 768px) {
      padding: 1.4rem 2.6rem;
    }
}
  `]
})
export class PageCrmDevelopment {
    constructor(private location: Location) { } // 注入Location服务

    // 新增goBack方法
    goBack() {
        this.location.back(); // 使用Angular的Location服务返回上一页
    }
}