<template>
  <div class="home">
    <nav-bar />

    <!-- 体检须知弹窗 -->
    <van-dialog
      v-model="showNotice"
      :title="noticeTitle"
      :overlay="false"
      show-cancel-button="false"
      confirm-text="我已阅读"
      @confirm="handleConfirmNotice"
      class="notice-dialog"
      close-on-click-overlay="false"
      :before-close="handleBeforeClose"
      style="top: 50% !important;"
    >
      <div class="notice-content" v-html="noticeContent"></div>
    </van-dialog>

 
    <!-- <div class="container" v-if="!showNotice">
      
      <div class="title-section">
        <h1 class="bt">{{ tit }}</h1>
        <div class="subtitle">请仔细阅读以下注意事项，以便顺利完成体检</div>
      </div>
      

      <div class="di_nav">
        <div class="btn">
          <h3>
            <span @click="toTc()">选择套餐</span>
          </h3>
        </div>
      </div>
    </div> -->
    
    <!-- 回到顶部按钮 -->
    <button @click="scrollToTop" class="back-to-top" v-if="showBackToTop && !showNotice">
      <van-icon name="arrow-up" color="#fff" size="24" />
    </button>
  </div>
</template>

<script>
import { Toast, Dialog, Checkbox, Icon } from "vant";
import { getMedicalNotice,isBlack } from "@/request/api.js";
export default {
  components: {
    [Checkbox.name]: Checkbox,
    [Icon.name]: Icon
  },
  data() {
    return {
      active: 0,
      title: "",
      flag: false,
      tit: "预约体检须知",
      showNotice: true, 
      // 控制须知弹窗显示
      noticeTitle: "预约体检须知",
      noticeContent: "",
      showBackToTop: false // 控制回到顶部按钮显示
    };
  },
  mounted() {
    console.log(this.$route.meta.title);
    this.title = this.$route.meta.title;

    this.getblack();
    // 设置须知内容
    this.setNoticeContent();
    
    // 监听滚动事件
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    getblack(){
       isBlack().then(res => {
      if (res.data == 2 || res.data == 3) {
        Toast("您已被列入黑名单，无法使用体检预约服务。如有疑问请联系医院公众号。");
        this.$router.replace({ path: "/" });
         return;
      }
    })
    },
    setNoticeContent() {
       getMedicalNotice({type:"体检"}).then(res => {
        this.noticeTitle = res.data.title || "体检预约须知";
        this.noticeContent = res.data.content || this.getDefaultNotice();
      })
    },
    getDefaultNotice(){
      return `
        <p>体检时间: 周一至周五上午8:30-11:30。</p>
        <p>网上预约体检项目不收费，需到线下进行体检项目缴费。</p>
        <p>体检前三天，请您保持正常饮食，勿饮酒，避免剧烈运动。</p>
        <p>体检当天需进行抽血、腹部B超检查，请您在受检前8-12小时禁食禁饮；进行抽血、腹部B超后方可进食；糖尿病患者凭特病卡优先检查抽血及B超。</p>
        <p>糖尿病、高血压、心脏病等慢性病患者，请将平时服用的药物携带备用；查内科时，先测好血压、身高、体重。</p>
        <p>怀孕或可能已受孕的女性受检者，请事先告知医护人员，勿做X光检查及宫颈刮片检查；未婚女性请勿做妇科检查及宫颈刮片检查。女性月经期间勿做妇科检查及尿常规检查。</p>
        <p>需作妇科B超、前列腺B超者，晨起尽量勿解小便，待妇科、前列腺B超后再留尿标本或妇科检查。</p>
        <p>体检当天应穿宽松、易于暴露体检部位的无金属的衣裤，女性避免穿连衣裙。</p>
        <p>进行各科检查时，请务必按体检表内容进行逐项检查，若自动放弃某一项目检查将造成漏诊，会影响对您健康状况的评估。</p>
      `;
    },
    handleConfirmNotice() {
      // 记录用户已阅读须知
      this.showNotice = false;
      this.$router.push({ path: "/Zstj_tc" });
    },
    handleBeforeClose(action, done) {
      if (action === 'confirm') done();
    },
    // toTc() {
    //   this.$router.push({ path: "/Zstj_tc" });
    // },
    // 处理滚动事件
    handleScroll() {
      this.showBackToTop = window.scrollY > 300;
    },
    // 滚动到顶部
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    }
  },
};
</script>

<style scoped lang="scss">
.home {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  overflow: hidden;
}

.title-section {
  text-align: center;
  padding: 30px 0 20px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.bt {
  font-size: 32px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #333333;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 20px;
  color: #666;
  opacity: 0.9;
}

// 核心：须知弹窗样式
::v-deep .notice-dialog {
  .van-dialog__wrap {
    padding: 0 0.3rem;
  }
  .van-dialog {
    width: 100%;
    max-width: 750px;
    border-radius: 0.2rem;
    overflow: hidden;
  }
  
  .van-dialog__title {
    font-size: 0.42rem !important;
    color: #333;
    padding: 0.4rem 0.4rem 0.2rem;
    font-weight: 600;
    text-align: center;
  }
  
  .van-dialog__content {
    padding: 0.3rem 0.4rem;
    max-height: 60vh;
    overflow-y: auto;
    box-sizing: border-box;
    
    .notice-content {
      p {
        font-size: 0.35rem !important;
        color: #666;
        line-height: 1.6;
        margin: 0.2rem 0;
        text-align: justify;
      }
    }
  }
  
  .van-dialog__footer {
    padding: 0.2rem 0.4rem 0.4rem;
    display: flex;
    justify-content: center;
    background-color: #fff;
    
    .van-dialog__cancel {
      display: none !important;
    }
    
    .van-dialog__confirm {
      width: 80%;
      height: 0.9rem;
      line-height: 0.9rem;
      font-size: 0.34rem;
      background-color: #46c3b0;
      color: #fff;
      border-radius: 0.45rem;
    }
  }
}

// 滚动条美化
::v-deep .van-dialog__content::-webkit-scrollbar {
  width: 6px;
}
::v-deep .van-dialog__content::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}

// 底部导航样式
.di_nav {
  position: fixed;
  bottom: 0px;
  left: 0px;
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  height: 130px;
  background: #ffffff;
  box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.04);
  
  .btn {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    h3 span {
      width: 190px;
      height: 65px;
      line-height: 65px;
      text-align: center;
      background: linear-gradient(270deg, #1ce27d, #05c6af);
      border-radius: 12px;
      display: inline-block;
      font-size: 32px;
      color: #ffffff;
      transition: all 0.3s ease;
      cursor: pointer;
      
      &:hover {
        opacity: 0.9;
        transform: translateY(-2px);
      }
    }
  }
}

// 回到顶部按钮
.back-to-top {
  position: fixed;
  bottom: 150px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #46C3B0;
  color: white;
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 100;
  
  &:hover {
    background-color: #3aad9b;
    transform: scale(1.1);
  }
}

// 响应式调整
@media (max-width: 768px) {
  .bt {
    font-size: 28px;
  }
  
  .di_nav .btn h3 span {
    width: 150px;
    height: 55px;
    line-height: 55px;
    font-size: 28px;
  }
}
</style>