<template>
  <div class="home">
    <!-- 调查须知弹窗 -->
    <div class="notice-overlay" v-if="showSurveyNotice">
      <div class="notice-dialog">
        <h2 class="notice-title">调查须知</h2>
        <div class="notice-content">
          <p>亲爱的病友及家属，您好!</p>
          <p>感谢您对我院的信任和支持，为不断提高我们的医疗质量和服务水平，诚邀您参加此次满意度调查，并提出宝贵的意见和建议，请您客观如实填写问卷问题，希望能得到您在就诊中的真实感受及评价，我们将据此不断改进提高。</p>
          <p>本调查匿名进行，我们承诺对您的所有信息严格保密，满意度评价不会影响您诊疗服务。感谢您的支持，祝您平安、健康、幸福!</p>
        </div>
        <button class="enter-button" @click="closeNotice">进入调查</button>
      </div>
    </div>
    
    <nav-bar 
      url="/" 
      title="问卷列表"
      class="custom-nav-bar"
    />
    
    <!-- 背景装饰元素 -->
    <div class="bg-decoration top-left"></div>
    <div class="bg-decoration bottom-right"></div>
    
    <div class="container">
      <div class="page-title">
        <h1>请选择需要填写的问卷</h1>
        <p>点击下方问卷开始填写</p>
      </div>
      
<div class="button-container">
  <div 
    v-for="(survey, index) in surveyList"
    :key="survey.id"
    class="button-item" 
    @click="goToUrl(index)"
    :class="{ 'button-item--active': activeIndex === index }"
    @mouseenter="activeIndex = index"
    @mouseleave="activeIndex = -1"
  >
    <div class="button-icon">
      {{ index + 1 }}
    </div>
    <div class="button-text">{{ survey.name }}</div>
    <div class="button-arrow">→</div>
  </div>

  <!-- 可选：加载中或错误提示 -->
  <div v-if="loading && surveyList.length === 0" class="loading-tip">
    加载中...
  </div>
  <div v-if="error && surveyList.length === 0" class="error-tip">
    {{ error }}
  </div>
</div>
      
      <div class="footer-note">
        <p>填写问卷大约需要5-10分钟时间</p>
        <p>感谢您的参与和支持</p>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar } from "vant";
import { surveys } from '@/request/api.js';

export default {
  name: "myd.vue",
  components: {
    NavBar
  },
  data() {
    return {
      // 控制调查须知弹窗显示
      showSurveyNotice: true,
      // 三个问卷的URL
      surveyList: [], // 格式: [{ id: 1, name: '门诊满意度调查', address: 'https://...' }, ...]
      activeIndex: -1, // 用于跟踪当前激活的按钮索引
        loading: true, // 可选：加载状态
      error: null    // 可选：错误信息
    };
  },
  mounted() {
    // 获取问卷列表
    this.fetchSurveys();
  },
  methods: {
    fetchSurveys() {
        // 替换为你的实际后端接口地址
        surveys().then(response => {
          this.surveyList = response.data || [];
        }).catch(err => {
          console.error("获取问卷列表失败:", err);
        this.error = "加载问卷失败，请稍后重试";
        this.$toast({
          message: "问卷加载失败",
          type: "fail",
          duration: 2000
        });
        }).finally(() => {
          this.loading = false;
        });
    },
    // 关闭调查须知弹窗
    closeNotice() {
      this.showSurveyNotice = false;
    },
    
    goToUrl(index) {
  const survey = this.surveyList[index];
  if (!survey || !survey.address) {
    this.showErrorToast("该问卷地址不存在");
    return;
  }

  const button = document.querySelectorAll('.button-item')[index];
  if (button) {
    button.classList.add('button-item--click');
  }

  setTimeout(() => {
    window.location.href = survey.address;
  }, 300);
},
    showErrorToast(message) {
      // 可以使用Vant的Toast组件
      this.$toast({
        message,
        type: 'fail',
        duration: 2000
      });
    }
  }
};
</script>

<style scoped>
/* 基础设置 - 确保rem单位正确转换 */
html {
  font-size: 77.27px; /* 基于17px = 0.22rem计算得出 (17 / 0.22 ≈ 77.27) */
}

.home {
  min-height: 100vh;
  background-color: #f9fafd;
  position: relative;
  overflow: hidden;
}

/* 调查须知弹窗样式 */
.notice-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 0.5rem;
}

.notice-dialog {
  background-color: white;
  border-radius: 0.3rem;
  width: 100%;
  padding: 0.6rem;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
}

.notice-title {
  font-size: 0.5rem;
  color: #333;
  text-align: center;
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: #409EFF;
}

.notice-content {
  font-size: 0.34rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.notice-content p {
  margin-bottom: 0.25rem;
}

.notice-content p:last-child {
  margin-bottom: 0;
}

.enter-button {
  width: 100%;
  background: linear-gradient(135deg, #409EFF, #69b1ff);
  color: white;
  border: none;
  border-radius: 0.25rem;
  padding: 0.3rem 0;
  font-size: 0.38rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0.08rem 0.2rem rgba(64, 158, 255, 0.3);
}

.enter-button:hover {
  transform: translateY(-0.03rem);
  box-shadow: 0 0.12rem 0.3rem rgba(64, 158, 255, 0.4);
}

.enter-button:active {
  transform: translateY(0);
}

/* 导航栏样式 */
.custom-nav-bar {
  background: linear-gradient(135deg, #409EFF, #69b1ff);
  color: white;
  box-shadow: 0 0.05rem 0.15rem rgba(64, 158, 255, 0.15);
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: rgba(64, 158, 255, 0.05);
  z-index: 0;
}

.top-left {
  top: -2.5rem;
  left: -2.5rem;
}

.bottom-right {
  bottom: -2.5rem;
  right: -2.5rem;
}

/* 容器样式 */
.container {
  max-width: 7rem;
  margin: 0 auto;
  padding: 0.4rem;
  position: relative;
  z-index: 1;
}

/* 页面标题 */
.page-title {
  text-align: center;
  margin: 0.8rem 0 1rem;
}

.page-title h1 {
  font-size: 0.6rem;
  color: #333;
  margin-bottom: 0.2rem;
  font-weight: 600;
}

.page-title p {
  font-size: 0.45rem;
  color: #666;
  opacity: 0.8;
}

/* 按钮容器 */
.button-container {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

/* 按钮样式 */
.button-item {
  background: white;
  border-radius: 0.3rem;
  padding: 0.4rem 0.4rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0.08rem 0.25rem rgba(0, 0, 0, 0.03);
  border: 0.02rem solid transparent;
  overflow: hidden;
  position: relative;
}

.button-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0.1rem;
  height: 100%;
  background-color: #409EFF;
  transform: scaleY(0);
  transition: transform 0.3s ease;
  border-radius: 0.05rem 0 0 0.05rem;
}

.button-item:hover {
  transform: translateY(-0.05rem);
  box-shadow: 0 0.15rem 0.35rem rgba(64, 158, 255, 0.1);
}

.button-item--active {
  border-color: #e6f7ff;
  background-color: #f0f7ff;
}

.button-item--active::before {
  transform: scaleY(1);
}

.button-item--click {
  animation: buttonClick 0.3s ease;
}

@keyframes buttonClick {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* 按钮图标 */
.button-icon {
  width: 0.8rem;
  height: 0.8rem;
  background: linear-gradient(135deg, #409EFF, #69b1ff);
  color: white;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.4rem;
  font-weight: bold;
  margin-right: 0.35rem;
  flex-shrink: 0;
  box-shadow: 0 0.08rem 0.15rem rgba(64, 158, 255, 0.2);
}

/* 按钮文字 */
.button-text {
  font-size: 0.4rem;
  color: #333;
  font-weight: 500;
  flex-grow: 1;
  text-align: left;
}

/* 按钮箭头 */
.button-arrow {
  color: #ccc;
  font-size: 0.4rem;
  transition: all 0.3s ease;
  margin-left: 0.2rem;
}

.button-item:hover .button-arrow {
  color: #409EFF;
  transform: translateX(0.1rem);
}

/* 页脚说明 */
.footer-note {
  text-align: center;
  color: #999;
  font-size: 0.34rem;
  padding: 0.35rem;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 0.2rem;
  box-shadow: 0 0.04rem 0.15rem rgba(0, 0, 0, 0.02);
}

.footer-note p {
  margin: 0.1rem 0;
}

/* 适配小屏幕 */
@media (max-width: 375px) {
  .page-title h1 {
    font-size: 0.5rem;
  }
  
  .button-text {
    font-size: 0.35rem;
  }
  
  .button-icon {
    width: 0.7rem;
    height: 0.7rem;
    font-size: 0.35rem;
  }
  
  .notice-title {
    font-size: 0.45rem;
  }
  
  .notice-content {
    font-size: 0.32rem;
  }
  
  .enter-button {
    font-size: 0.35rem;
  }
}
</style>
