<template>
  <div class="customer-home">
    <!-- 轮播图部分 -->
    <div class="carousel">
      <div class="carousel-container" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
        <div v-for="(slide, index) in slides" :key="index" class="carousel-slide">
          <img :src="slide.image" :alt="slide.title">
          <div class="slide-content">
            <h2>{{ slide.title }}</h2>
            <p>{{ slide.description }}</p>
          </div>
        </div>
      </div>
      <div class="carousel-dots">
        <span
          v-for="(slide, index) in slides"
          :key="index"
          :class="{ active: currentIndex === index }"
          @click="setSlide(index)"
        ></span>
      </div>
    </div>

    <!-- 系统介绍部分 -->
    <div class="system-intro">
      <h1>养老服务系统</h1>
      <div class="intro-cards">
        <div class="intro-card">
          <i class="fas fa-heart"></i>
          <h3>专业照护</h3>
          <p>提供24小时专业护理服务，确保老年人得到细致周到的照顾</p>
        </div>
        <div class="intro-card">
          <i class="fas fa-user-md"></i>
          <h3>医疗保障</h3>
          <p>配备专业医疗团队，定期体检，及时响应健康需求</p>
        </div>
        <div class="intro-card">
          <i class="fas fa-hands-helping"></i>
          <h3>生活照料</h3>
          <p>提供饮食起居、清洁卫生等全方位生活服务</p>
        </div>
      </div>
    </div>

    <!-- 服务特色部分 -->
    <div class="service-features">
      <h2>我们的服务特色</h2>
      <div class="features-grid">
        <div class="feature">
          <h3>个性化服务</h3>
          <p>根据每位老人的具体需求，制定个性化的护理方案</p>
        </div>
        <div class="feature">
          <h3>智能监护</h3>
          <p>采用现代化设备，实时监测老人的身体状况</p>
        </div>
        <div class="feature">
          <h3>营养配餐</h3>
          <p>专业营养师搭配，确保营养均衡</p>
        </div>
        <div class="feature">
          <h3>文娱活动</h3>
          <p>丰富多样的文化娱乐活动，丰富晚年生活</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomerHome',
  data () {
    return {
      currentIndex: 0,
      slides: [
        {
          image: '/images/slide1.jpg', // 需要添加实际的图片路径
          title: '温馨舒适的生活环境',
          description: '为老年人提供宾至如归的居住体验'
        },
        {
          image: '/images/slide2.jpg',
          title: '专业的医疗护理团队',
          description: '24小时专业护理，保障老年人健康'
        },
        {
          image: '/images/slide3.jpg',
          title: '丰富多彩的文娱活动',
          description: '让晚年生活充满欢乐与活力'
        }
      ]
    }
  },
  methods: {
    setSlide (index) {
      this.currentIndex = index
    }
  },
  mounted () {
    // 自动轮播
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.slides.length
    }, 5000)
  }
}
</script>

<style scoped>
.customer-home {
  width: 100%;
}

/* 轮播图样式 */
.carousel {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.carousel-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
}

.carousel-slide {
  min-width: 100%;
  position: relative;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-content {
  position: absolute;
  bottom: 50px;
  left: 50px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.carousel-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}

.carousel-dots span.active {
  background: white;
}

/* 系统介绍样式 */
.system-intro {
  padding: 50px 20px;
  text-align: center;
}

.intro-cards {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

.intro-card {
  flex: 1;
  max-width: 300px;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.intro-card:hover {
  transform: translateY(-5px);
}

.intro-card i {
  font-size: 40px;
  color: #4CAF50;
  margin-bottom: 20px;
}

/* 服务特色样式 */
.service-features {
  background: #f5f5f5;
  padding: 50px 20px;
  text-align: center;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
  padding: 0 50px;
}

.feature {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

h1, h2 {
  color: #2c3e50;
  margin-bottom: 20px;
}

h3 {
  color: #34495e;
  margin-bottom: 15px;
}

p {
  color: #666;
  line-height: 1.6;
}
</style>
