<template>
  <div class="home">
    <div class="index_bj"></div>

    <div class="container">
      <div class="in_search">
        <router-link to="search">
          <img src="../assets/search.png"/>可搜索医生、科室
        </router-link>
      </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>

 <!-- 桑不支持医保提示 -->
   <!-- <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 @click="show = true">-->
          <li>
            <!--router-link to="Yygh"-->
            <router-link to="xzmz">
              <h2 class="guahao">在线挂号</h2>
              <p class="guahao">在线预约 便捷挂号</p>
            </router-link>
          </li>
          <li>
            <router-link to="Member_wdbg">
              <h2 class="hsjc">报告查询</h2>
              <p class="hsjc">检查检验 一键获取</p>
            </router-link>
          </li>
        </ul>
        <ul class="ul2">
          <li>
            <router-link to="Member_wdzd">
              <h2 class="menzhenzf">门诊缴费</h2>
              <p class="menzhenzf">门诊费用 掌上支付</p>
            </router-link>
          </li>
          <li>
            <router-link to="ZYindex">
              <h2 class="zhuyuan">住院管理</h2>
              <p class="zhuyuan">每日清单 住院充值</p>
            </router-link>
          </li>
        </ul>
      </div>

      <router-link to="/Member" class="gg_image">
  <img src="../assets/gg.jpg"/>
</router-link>
      <div class="in_box1">
        <div class="bt">
          <img class="img" src="../assets/label.png"/>常用服务
        </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>
          <!--          <router-link to="Zndz">-->
          <!--            <img src="../assets/in_box1_pic7.png" alt/>-->
          <!--            <p>智能导诊</p>-->
          <!--          </router-link>-->
          <router-link to="myd">
            <img src="../assets/in_box1_pic4.png" alt/>
            <p>满意度评价</p>
          </router-link>
        </div>
      </div>

      <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,

      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;
}

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

.in_search a {
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1rem;
  border-radius: 1rem;
  font-size: 0.475rem;
  color: #fff;
  margin: 0.5rem 0 0.75rem 0;
}

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

.in_banner {
  width: 100%;
  border-radius: 0.25rem;

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

.in_box {
  padding: 0.5rem 0;

  ul {
    padding: 0.2rem 0;
    display: flex;
    justify-content: space-between;

    p {
      font-size: 0.25rem;
    }

    h2 {
      padding-bottom: 0.2rem;
      font-size: 0.45rem;
    }

    li a {
      display: block;
      color: #fff;
    }
  }

  .ul1 {
    li {
      width: 48%;
      box-sizing: border-box;
      padding: 6.5% 4%;
      background: url(../assets/in_box.png) no-repeat;
      background-size: 100% 100%;
      border-radius: 0.25rem;
    }

    li:nth-child(2) {
      background: url(../assets/in_box2.png) no-repeat;
      background-size: 100% 100%;
    }
  }

  .ul2 {
    li {
      width: 48%;
      box-sizing: border-box;
      padding: 6.5% 4%;
      background: url(../assets/in_box1.png) no-repeat;
      background-size: 100% 100%;
      border-radius: 0.25rem;
    }

    li:nth-child(2) {
      background: url(../assets/in_box3.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}

.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,
.in_box2 {
  .bt {
    font-size: 0.375rem;
    color: #000;
  }

  .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;
// }

</style>
