<template>
  <div class="home">
    <div class="banner-container">
      <div class="index_bj"></div>
      <van-swipe class="in_banner" :autoplay="5000">
        <!--van-swipe-item v-for="item in indexData.carousel" :key="item.id">          测试注释
          <img :src="item.img" /-->
        <van-swipe-item v-for="item in indexImage" :key="item.id">
          <img :src="item.img"/>
        </van-swipe-item>
      </van-swipe>
      <!-- <div class="color-overlay"></div> -->
      <div class="in_search">
        <router-link to="search">
          <img src="../assets/search.png"/>可搜索医生、科室
        </router-link>
      </div>
      <div class="service-prompt">请选择您需要的就医服务</div>
    </div>

    <div class="container">

 <!-- 桑不支持医保提示 -->
   <!-- <van-popup 
      v-model="showPopup" 
      class="notice-popup"
      :closeable="true" 
      :mask-closable="false"  
      :mask="true"
      :close-on-click-overlay="false"
      :lock-scroll="true"
    >
      <div class="popup-content">
        <h3 class="popup-title">公众号须知</h3>
        <div class="popup-text">
          该公众号目前仅支持
          <span class="highlight">微信自费</span>
          ，如需医保，请携带身份证，医保卡等到线下缴费处操作。
        </div>
        <div class="countdown">倒计时 {{ count }} 秒</div>
      </div>
    </van-popup> -->

      <!--      <van-popup v-model="show" @click="show = false" class="wrapper">-->
      <!--        <div class="block" @click.stop>-->
      <!--          <div class="ghbt">预约与挂号须知</div>-->
      <!--          <div class="ghxzbody">-->
      <!--            <span class="nr" v-html="info.body"></span>-->
      <!--          </div>-->
      <!--          <div class="di_nav" style="display: flex">-->
      <!--            <van-checkbox v-model="checked" checked-color="#129bff"-->
      <!--            >本人已阅读并同意-->
      <!--            </van-checkbox-->
      <!--            >-->
      <!--            <div class="btn">-->
      <!--              <a @click="selectTime()">确认</a>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </van-popup>-->
      <!--      -->
      <div class="in_box">
        <ul class="ul1">
          <li>
            <router-link to="xzmz">
              <img src="../assets/预约挂号-功能按键.png" alt="在线挂号" />
            </router-link>
          </li>
          <li>
            <router-link to="Member_wdbg">
              <img src="../assets/报告查询-功能按键.png" alt="报告查询" />
            </router-link>
          </li>
        </ul>
        <ul class="ul2">
          <li>
            <router-link to="Member_wdzd">
              <img src="../assets/门诊缴费-功能按键.png" alt="门诊缴费" />
            </router-link>
          </li>
          <li>
            <router-link to="ZYindex">
              <img src="../assets/住院管理-功能按键.png" alt="住院管理" />
            </router-link>
          </li>
        </ul>
      </div>

      <router-link to="/jkzd" class="gg_image">
  <img src="../assets/健康体检.png"/>
</router-link>
      <div class="in_box1">
        <div class="bt">
          <!-- 透明点击区域，覆盖在背景图上的更多位置 -->
          <div class="more-click-area" @click="showMorePopup = true"></div>
        </div>
        <div class="nr">
          <router-link to="Member_jzr">
            <img src="../assets/in_box1_pic.png" alt/>
            <p>添加就诊人</p>
          </router-link>

          <router-link to="jzxz">
            <img src="../assets/in_box1_pic1.png" alt/>
            <p>就诊须知</p>
          </router-link>
          <router-link to="Zstj_yy">
            <img src="../assets/in_box1_pic2.png" alt/>
            <p>体检预约</p>
          </router-link>
          <router-link to="jkzd">
            <img src="../assets/in_box1_pic3.png" alt/>
            <p>健康指导</p>
          </router-link>
        </div>
      </div>
      
      <!-- 更多服务弹出层 -->
      <van-popup
        v-model="showMorePopup"
        position="bottom"
        :closeable="true"
        :close-on-click-overlay="true"
        class="more-services-popup"
      >
        <div class="popup-content">
          <div class="popup-title">更多服务</div>
          <div class="popup-body">
            <!-- 预留内容区域 -->
            <div class="service-list">
              <!-- 可以在这里添加更多服务项 -->
              <router-link to="myd" class="service-item">
                <img src="../assets/in_box1_pic4.png" alt/>
                <p>满意度评价</p>
              </router-link>
              <!-- 其他服务项 -->
            </div>
          </div>
        </div>
      </van-popup>

      <div class="in_box2">
        <div class="bt">
          <img class="img" src="../assets/label.png"/>健康资讯
        </div>
        <ul>
          <li v-for="item in indexData" :key="item.id">
            <router-link :to="'Jkzd_detail?id=' + item.id">
              <img :src="item.img"/>
              <h2>{{ item.title }}</h2>
              <span>{{ item.create_time }}</span>
            </router-link>
          </li>
        </ul>
      </div>
      <div class="zhichi">杭州九聚科技有限公司 提供开发与技术支持</div>
    </div>
    <dh/>
  </div>
</template>

<script>
// @ is an alias to /src
import dh from "@/components/nav.vue";
import {apiBannerNew} from "@/request/api.js";
import Vue from "vue";
import {
  apiUserCardList,
  apiGetReservePresent,
  apiGetHospitalInfo,
} from "@/request/api.js";
import {Dialog, Toast, Popup} from "vant";

Vue.use(Popup);
export default {
  components: {
    dh,
  },
  data() {
    return {
    // 新增弹框相关数据
      // showPopup: true,
      // count: 5,
      // countdownTimer: null,
      showMorePopup: false,

      info: {},
      show: false,
      active: 0,
      title: "",
      flag: false,
      checked: true,
      // 首页接口数据
      indexData: {},
      indexImage: [],
    };
  },
  mounted() {
      // 初始化倒计时
    // this.startCountdown();
    this.getBanner();
    //   // this.getData();
    // return;
    // alert("mounted")
    let url = window.location.href;
    if (url.indexOf("?") != -1) {
      let str = url.substr(1);
      let strs = str.split("&");
      let token = strs[0].split("=")[1];
      let userid = strs[1].split("=")[1];
      localStorage.setItem("token", token);
      localStorage.setItem("userid", userid);

      window.location.href = "https://nxwj.btlsoln.com/nxwj-gzh/#/";
    }

    if (!sessionStorage.getItem("card")) {
      apiUserCardList().then((aa) => {
        for (var i = 0; i < aa.data.length; i++) {
          if (aa.data[i].isYes == "0") {
            sessionStorage.setItem("card", JSON.stringify(aa.data[i]));
            /*if (!sessionStorage.getItem("card")) {
              alert("getItem Faile");
            } else {
              alert(JSON.parse(sessionStorage.getItem("card")).name);
            }*/
          }
        }
      });
    }
    // this.getInfo();
  },
  //  beforeDestroy() {
  //   // 清除定时器防止内存泄漏
  //   if (this.countdownTimer) {
  //     clearInterval(this.countdownTimer);
  //   }
  // },
  methods: {

    // 新增倒计时方法
    // startCountdown() {
    //   this.countdownTimer = setInterval(() => {
    //     this.count--;
    //     if (this.count <= 0) {
    //       clearInterval(this.countdownTimer);
    //       this.showPopup = false;
    //     }
    //   }, 1000);
    // },
    // getInfo() {
    //   apiGetReservePresent().then((res) => {
    //     this.info = res.data;
    //     //console.log(res.data.title);
    //   });
    // },
    selectTime(type) {
      if (!this.checked) {
        Toast("请先阅读并同意挂号须知");
        return;
      }
      this.$router.push({path: "/xzmz"});
      return;
      this.yuyue.z = type; //挂号类型
      if (type == 1) {
        var aData = new Date();
        let value =
            aData.getFullYear() +
            "-" +
            (aData.getMonth() + 1) +
            "-" +
            aData.getDate();
        this.yuyue.t = value;
        sessionStorage.setItem("yuyue", JSON.stringify(this.yuyue));
        this.$router.push({path: "/xzmz"});
        return;
      }
      this.flag = true;
    },

    // 获取首页banner、健康资讯
    getBanner() {
      //console.log(this.indexImage);
      apiBannerNew().then((res) => {
        console.log("首页图片信息：", res.data.carousel);
        // this.indexImage = res.data.carousel; 远程图片
         this.indexImage = [
      {
        id: 1,
        img: require('@/assets/back.webp') // 替换为实际的本地图片文件名
      }]
        this.indexData = res.data.jiankang;
        //alert(res.data.carousel);
      });
    },
    // getData() {
    //   //console.log(this.indexImage);
    //   apiInforNew().then((res) => {
    //     this.indexData = res.data.jiankang;
    //     //console.log(res.data.carousel);
    //   });
    // },
  },
};
</script>

<style scoped lang="scss">
.gg_image {
  width: 100%;
  margin-top: -0.5rem;
  border-radius: 0.25rem;

  img {
    width: 100%;
    height: auto;
    border-radius: 0.25rem;
  }
}

.zhichi {
  text-align: center;
  padding-bottom: 1rem;
  color: #999;
}

.banner-container {
  position: relative;
  width: 100%;
  height: 5rem;
  overflow: hidden;
}

.index_bj {
  width: 100%;
  height: 100%;
  background: url(../assets/in_bgbj.png) no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.color-overlay {
  width: 100%;
  height: 100%;
  background-color: #36b2bc;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}

.in_banner {
  width: 100%;
  height: 100%;
  border-radius: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;

  img {
    width: 100%;
    height: 125%;
    object-fit: cover;
    border-radius: 0;
    // margin-top: 25px;
  }
}

.in_search {
  width: 90%;
  margin: 0 auto;
  position: relative;
  z-index: 5;
  padding-top: 0.5rem;
}

.in_search a {
  background: hsl(0deg 0% 0% / 40%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1rem;
  border-radius: 1rem;
  font-size: 0.475rem;
  color: #fff;
  margin: 0 0 0.75rem 0;
}

.in_search a img {
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.25rem;
  margin-top: 0.23rem;
}

.service-prompt {
  position: absolute;
  bottom: 0.3rem;
  right: 0.5rem;
  color: #fff;
  font-size: 0.37rem;
  font-weight: 700;
  z-index: 4;
  padding: 5px 10px;
  background: hsl(0deg 0% 0% / 40%);
  border-radius: 15px;
}



.in_box {
  padding: 0.5rem 0;

  ul {
    padding: 0.2rem 0;
    display: flex;
    justify-content: space-between;
    
    li {
      width: 48%; /* 两个图片一行，中间留间隔 */
      box-sizing: border-box;
      padding: 0; /* 去掉内边距 */
      background: none; /* 去掉背景图片 */
      border-radius: 0; /* 去掉圆角 */
      margin: 0;
    }

    li a {
      display: block;
      color: inherit;
      text-decoration: none;
    }
    
    li img {
      width: 100%;
      height: auto;
      display: block;
    }
  }

  .ul1,
  .ul2 {
    margin-bottom: 0.3rem; /* 上下两行之间的间隔 */
  }
}

.in_box1 {
  .nr {
    padding: 0.375rem;
    background: #ffffff;
    border-radius: 0.25rem;
    box-shadow: 0 0 0.125rem #ddd;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    a {
      text-align: center;
      color: #000;

      img {
        width: 1.25rem;
        height: 1.25rem;
      }
    }

    p {
      font-size: 0.275rem;
    }
  }
}

.in_box1 {
  .bt {
    // 使用常用服务条作为背景图
    background-image: url('../assets/常用服务条.png');
    background-size: cover;
    background-position: right;
    width: 100%;
    height: 1rem; // 根据图片实际高度调整
    position: relative;
    
    // 透明点击区域，覆盖在背景图上的更多位置
    .more-click-area {
      position: absolute;
      top: 0;
      right: 0;
      width: 24%;
      height: 100%;
      cursor: pointer;
    }
  }
}

.in_box2 {
  .bt {
    font-size: 0.375rem;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.2rem 0;
  }

  .img {
    //width: 64px;
    height: 18px;
    //height: 0.3rem;
    padding: 0 0.1rem;
  }
}

.in_box2 {
  padding: 0.25rem 0;

  ul {
    margin-top: 0.25rem;

    li {
      margin-bottom: 0.25rem;

      a {
        justify-content: space-between;

        img {
          width: 2rem;
          height: 1rem;
          float: left;
          margin-right: 0.5rem;
        }

        //h2 {
        //  font-size: 0.375rem;
        //  color: #000;
        //  line-height: 0.75rem;
        //  margin-bottom: 0.5rem;
        //  overflow: hidden;
        //  text-overflow: ellipsis;
        //  display: -webkit-box;
        //  -webkit-line-clamp: 2;
        //  -webkit-box-orient: vertical;
        //}
        h2 {
          font-size: 28px;
          color: #000;
          line-height: 40px;
          margin-bottom: 20px;
        }

        span {
          font-size: 0.25rem;
          color: #999;
        }
      }
    }
  }
}

.hsjc {
  color: #286ba5;
}

.guahao {
  color: #aa4131;
}

h2.hsjc,
h2.guahao,
h2.zhuyuan,
h2.menzhenzf {
  font-weight: 800;
}

.zhuyuan {
  color: #31aaa8;
}

.menzhenzf {
  color: #9e7837;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80%;
  width: 80%;
  border-radius: 0.25rem;
}

.block {
  width: 90%;
  height: 80%;
  border-radius: 0.25rem;
  margin: 0.25rem;
}

.di_nav {
  border-radius: 0 0 0.25rem 0.25rem;
  position: absolute;
  box-sizing: border-box;
  padding: 0 0.25rem;
  width: 90%;
  height: 2rem;
  background: #fff;
  display: none;
  justify-content: space-between;
  align-items: center;

  ::v-deep .van-checkbox__label {
    font-size: 0.375rem;
  }

  ::v-deep .van-checkbox__icon {
    width: 0.5rem;
  }
}

.btn {
  position: flex;
  justify-content: space-between;
  align-items: center;

  a {
    width: 2.5rem;
    height: 1rem;
    line-height: 1rem;
    display: block;
    border-radius: 0.25rem;
    background: #129bff;
    color: #fff;
    font-size: 0.5rem;
    text-align: center;
  }
}

.ghbt {
  font-size: 0.5rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #333333;
  text-align: center;
}

.nr {
  font-size: 0.375rem;
  color: #333333;
  line-height: 0.6rem;
  padding-left: 1rem;
}

.ghxzbody {
  padding: 0.1rem;
  font-size: 0.5rem;
}

// 桑医保提示样式

/* 弹窗样式优化 */
/* 弹窗样式 - 固定300px宽度 */
// ::v-deep .notice-popup.van-popup {
//   width: 85% !important;
//     height: 300px;
//     // max-width: 300px;
//   border-radius: 8px;
// }

// ::v-deep .popup-content {
//   width: 100%; 

//   background: #fff;
//   border-radius: 8px;
//   padding: 20px 15px;
//   text-align: center;
//   box-sizing: border-box;
// }

// .popup-title {
//   font-size: 0.45rem;
//   font-weight: bold;
//   color: #333;
//   margin-bottom: 15px;
// }

// .popup-text {
//   font-size: 0.36rem;
//   color: #666;
//   line-height: 1.5;
//   margin-bottom: 15px;
//   text-align: left;
// }

// .highlight {
//   color: #ff0000;
//   font-size: 0.4rem;
//   font-weight: bold;
//   margin: 0 3px;
// }

// .countdown {
//   font-size: 0.30rem;
//   color: #999;
//   margin-top: 10px;
//   font-weight: bold;
// }

// /* 确保弹窗在倒计时期间无法被关闭 */
// ::v-deep .van-popup--center {
//   pointer-events: auto;
// }

// ::v-deep .van-overlay {
//   pointer-events: auto;
// }

/* 更多按钮样式 */
.in_box1 .bt .service-tag {
  font-size: 0.375rem;
  color: #fff;
  background-color: #129bff;
  padding: 0.1rem 0.25rem;
  border-radius: 0.15rem;
  margin-right: 0.25rem;
}

.in_box1 .bt .more {
  font-size: 0.375rem;
  color: #129bff;
  margin-left: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.in_box1 .bt .more::after {
  content: "";
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  border-right: 1px solid #129bff;
  border-bottom: 1px solid #129bff;
  transform: rotate(45deg);
  margin-left: 0.125rem;
}

/* 更多服务弹出层样式 */
.more-services-popup {
  height: 50%;
  border-radius: 0.5rem 0.5rem 0 0;
}

.popup-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.popup-title {
  font-size: 0.5rem;
  font-weight: bold;
  color: #333;
  text-align: center;
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
}

.popup-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.service-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #333;
  text-decoration: none;
}

.service-item img {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.25rem;
}

.service-item p {
  font-size: 0.375rem;
  margin: 0;
}

/* 调整in_box1图片样式 - 改为方形 */
.in_box1 .nr img {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.25rem;
  border-radius: 0; /* 确保图片为方形 */
  object-fit: contain; /* 保持图片比例 */
}

</style>
