<template>
  <div class="home">
    <div class="bj"></div>
    <div class="top_bj"></div>
    <div class="container">
      <!-- 用户信息头部 -->
      <div class="head">
        <img src="../assets/member_tx.png" class="avatar" />
        <div class="user-info">
          <div class="user-name">{{ info.name || "登录" }}</div>
          <div class="user-status">欢迎使用健康服务平台</div>
        </div>
      </div>

      <!-- 就诊人信息卡片 -->
      <div class="in_box">
        <router-link to="Member_jzr" v-if="!list || list.length === 0">
          <div class="add-card">
            <div class="addimg"><img class="img" src="../assets/add.png" /></div>
            <div class="addpatient">
              <h2 class="add">添加就诊人</h2>
              <p class="add">您还没有就诊人请先添加</p>
            </div>
          </div>
        </router-link>

        <div class="patient-card" v-if="list && list.length > 0">
          <div class="nr">
            <div class="patient-info">
              <div class="exname">
                <div class="patient-name">{{ list[0].name }}</div>
                <router-link class="exjzr" to="Member_jzr">
                  切换就诊人
                </router-link>
              </div>
              <div class="patient-id">
                <span class="label">卡号</span>
                <span class="value">{{ list[0].cardNo }}</span>
              </div>
            </div>
            <div @click="openqr" class="qr-code-container">
              <vue-qr :logo-src="logoSrc" v-if="list[0].cardNo" :size="80" :margin="0" :auto-color="true" :dot-scale="1"
                :text="list[0].cardNo" />
              <div class="qr-tip">点击查看大图</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 二维码弹窗 -->
      <van-overlay :show="show" @click="show = false" v-if="list && list.length > 0" class="qr-overlay">
        <div class="mwrapper">
          <div class="mblock" @click.stop>
            <vue-qr :logo-src="logoSrc" :size="250" :margin="0" :auto-color="true" :dot-scale="1"
              :text="list[0].cardNo" />
            <div class="qr-modal-tip">就诊人卡号二维码</div>
          </div>
        </div>
      </van-overlay>

      <!-- 功能模块列表 - 优化设计 -->
      <div class="functions-section">
        <div class="section-header">
          <h3 class="section-title">功能服务</h3>
          <div class="section-bg"></div>
        </div>
        <div class="functions-grid">
          <!-- 数据驾驶舱 -->
          <router-link to="Tj_jsc" class="function-card card-13" v-if="hasDataCockpitPermission">
            <div class="card-icon">
              <img src="../assets/管理驾驶舱.png" alt="数据驾驶舱" />
            </div>
            <div class="card-name">数据驾驶舱</div>
          </router-link>
          <!-- 挂号记录 -->
          <router-link to="Yylb" class="function-card card-1">
            <div class="card-icon">
              <img src="../assets/ghjl.png" alt="挂号记录" />
            </div>
            <div class="card-name">挂号记录</div>
          </router-link>

          <!-- 我的报告 -->
          <router-link to="Member_wdbg" class="function-card card-2">
            <div class="card-icon">
              <img src="../assets/baogao.png" alt="我的报告" />
            </div>
            <div class="card-name">我的报告</div>
          </router-link>

          <!-- 病案邮寄 -->
          <router-link to="Member_bayj" class="function-card card-3">
            <div class="card-icon">
              <img src="../assets/bingli.png" alt="病案服务" />
            </div>
            <div class="card-name">病案服务</div>
          </router-link>

          <!-- 我的就诊人 -->
          <router-link to="Member_jzr" class="function-card card-4">
            <div class="card-icon">
              <img src="../assets/patient.png" alt="我的就诊人" />
            </div>
            <div class="card-name">我的就诊人</div>
          </router-link>

          <!-- 我的关注 -->
          <router-link to="Member_gz" class="function-card card-5">
            <div class="card-icon">
              <img src="../assets/gz.png" alt="我的关注" />
            </div>
            <div class="card-name">我的关注</div>
          </router-link>

          <!-- 智能导诊 -->
          <router-link to="Zhdz_ai" class="function-card card-6">
            <div class="card-icon">
              <img src="../assets/dz.png" alt="智能导诊" />
            </div>
            <div class="card-name">智能导诊</div>
          </router-link>

   <!-- 智能导诊 -->
          <!-- <router-link to="Zndz" class="function-card card-6">
            <div class="card-icon">
              <img src="../assets/dz.png" alt="智能导诊" />
            </div>
            <div class="card-name">智能导诊</div>
          </router-link> -->

          <!-- 排队叫号 -->
          <router-link :to="{ name: 'Member_pdjh', query: { patientId: list[0]?.cardNo, patientName: list[0]?.name } }"
            class="function-card card-7">
            <div class="card-icon">
              <img src="../assets/pdjh.png" alt="排队叫号" />
            </div>
            <div class="card-name">排队叫号</div>
          </router-link>

          <!-- 排班查询 -->
          <router-link to="xzmz_pbcx" class="function-card card-8">
            <div class="card-icon">
              <img src="../assets/pb.png" alt="排班查询" />
            </div>
            <div class="card-name">排班查询</div>
          </router-link>

          <!-- 我的账单 -->
          <router-link to="Member_wdzd" class="function-card card-9">
            <div class="card-icon">
              <img src="../assets/zhangd.png" alt="缴费单据" />
            </div>
            <div class="card-name">缴费单据</div>
          </router-link>

          <!-- 满意度调查 -->
          <router-link to="myd" class="function-card card-10">
            <div class="card-icon">
              <img src="../assets/manyidu.png" alt="满意度调查" />
            </div>
            <div class="card-name">满意度调查</div>
          </router-link>
          <!-- 物价查询 -->
          <router-link to="Wjcx" class="function-card card-11">
            <div class="card-icon">
              <img src="../assets/wjcx.png" alt="物价查询" />
            </div>
            <div class="card-name">物价查询</div>
          </router-link>
              <!-- 门诊医保退费授权查询 -->
          <router-link to="ybAUTH" class="function-card card-14">
            <div class="card-icon">
              <img src="../assets/医保退费icon.png" alt="医保退费授权" />
            </div>
            <div class="card-name">医保退费授权</div>
          </router-link>
          <!-- 退出登录 -->
          <div @click="onLogOut" class="function-card card-12">
            <div class="card-icon">
              <img src="../assets/tcdl.png" alt="退出登录" />
            </div>
            <div class="card-name">退出登录</div>
          </div>
        </div>
      </div>

      <div class="zhichi">杭州九聚科技有限公司 提供开发与技术支持</div>
    </div>

    <dh />
  </div>
</template>


<script>
// @ is an alias to /src
import dh from "@/components/nav.vue";
import VueQr from 'vue-qr';
import { apiUserInfo, apiLogOut, apiUserCardList } from "@/request/api.js";
import { Dialog, Toast } from "vant";

export default {
  components: {
    dh,
    VueQr,
  },
  data() {
    return {
      show: false,
      title: "",
      info: {},
      list: [],
      logoSrc: "",
      hasDataCockpitPermission: false,
      //appSrc:""  
    };
  },
  mounted() {

    this.title = this.$route.meta.title;
    this.getUserInfo();
    this.getUserCardList();
  },
  methods: {

    openqr() {
      this.show = true;
    },
    getUserInfo() {
      apiUserInfo().then((res) => {
        console.log(res.data);
        this.info = res.data;
        if (res.data.role >= 1) {
          this.hasDataCockpitPermission = true;
        }
      });
    },
    getUserCardList() {
      apiUserCardList({ isYes: 0 }).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i].isYes === "0") {
            this.list.push(res.data[i]);
            break;
          }
        }
      });
    },
    onLogOut() {
      apiLogOut().then((res) => {
        Toast("退出成功");
        sessionStorage.clear();
        setTimeout(() => {
          this.$router.push({ path: "/Login" });
        }, 1000);
      });
    },
  },
};
</script>


<style scoped lang="scss">
// 基础样式
.zhichi {
  text-align: center;
  padding: 1rem 0.5rem;
  color: #999;
  font-size: 0.35rem;
}

.bj {
  background: #f5f5f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.container {
  position: relative;
  z-index: 3;
  padding: 0 0.5rem;
}

.top_bj {
  height: 6rem;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  border-radius: 0 0 2rem 2rem;
}

// 用户信息头部
.head {
  padding: 1.2rem 0 0.8rem;
  display: flex;
  align-items: center;
  color: #fff;
  position: relative;
  z-index: 3;

  .avatar {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    margin-right: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .user-info {
    flex: 1;

    .user-name {
      font-size: 0.55rem;
      font-weight: 600;
      margin-bottom: 0.15rem;
    }

    .user-status {
      font-size: 0.35rem;
      opacity: 0.9;
    }
  }
}

// 就诊人信息卡片
.in_box {
  position: relative;
  z-index: 3;
  margin-bottom: 0.7rem;

  .add-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0.5rem;
    padding: 0.7rem;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    }
  }

  .patient-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0.5rem;
    padding: 0.7rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  }

  .addimg {
    padding: 0 0 0 0.2rem;
  }

  .img {
    width: 1rem;
    height: 1rem;
  }

  .addpatient {
    padding-left: 0.375rem;
  }

  p.add {
    font-size: 0.375rem;
    color: #666;
  }

  h2.add {
    font-size: 0.5rem;
    color: #333;
    font-weight: 500;
  }

  .nr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .patient-info {
    flex: 1;

    .exname {
      display: flex;
      align-items: center;
      margin-bottom: 0.2rem;

      .patient-name {
        font-size: 0.5rem;
        color: #333;
        font-weight: 600;
      }

      .exjzr {
        margin-left: 0.5rem;
        padding: 0.1rem 0.3rem;
        text-align: center;
        border: 1px solid #4facfe;
        border-radius: 0.2rem;
        font-size: 0.3rem;
        color: #4facfe;
        white-space: nowrap;
        transition: all 0.2s ease;

        &:hover {
          background-color: #4facfe;
          color: white;
        }
      }
    }

    .patient-id {
      display: flex;
      align-items: center;

      .label {
        font-size: 0.375rem;
        color: #999;
        margin-right: 0.2rem;
      }

      .value {
        font-size: 0.4rem;
        color: #333;
        word-break: break-all;
        max-width: 5rem;
      }
    }
  }

  .qr-code-container {
    display: flex;
    flex-direction: column;
    align-items: center;

    .qr-tip {
      font-size: 0.3rem;
      color: #666;
      margin-top: 0.15rem;
      text-align: center;
    }
  }
}

// 功能模块区域 - 深度优化
.functions-section {
  background-color: #fff;
  border-radius: 0.6rem;
  padding: 0.6rem 0.4rem 0.7rem;
  margin-bottom: 0.7rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  overflow: hidden;

  // 优化标题区域
  .section-header {
    position: relative;
    margin-bottom: 0.6rem;
    padding-left: 0.2rem;

    .section-title {
      font-size: 0.48rem;
      color: #333;
      font-weight: 600;
      position: relative;
      z-index: 2;
      padding-left: 0.3rem;
    }

    .section-bg {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0.8rem;
      height: 0.8rem;
      background-color: rgba(79, 172, 254, 0.15);
      border-radius: 0.4rem;
      z-index: 1;
    }
  }

  // 网格布局优化
  .functions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  // 卡片样式优化
  .function-card {
    width: calc(33.333% - 0.17rem);
    background-color: #f8f9fa;
    border-radius: 0.4rem;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;

    // 卡片hover效果增强
    &:hover {
      transform: translateY(-6px) scale(1.02);
      box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
    }

    // 卡片顶部装饰条
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 0.08rem;
      opacity: 0.8;
    }

    .card-icon {
      width: 1.2rem;
      height: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-bottom: 0.3rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

      img {
        width: 0.7rem;
        height: 0.7rem;
        object-fit: contain;
      }
    }

    .card-name {
      font-size: 0.38rem;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 90%;
      font-weight: 500;
    }
  }

  // 优化色彩系统 - 更协调的配色
  .card-1 {
    background-color: #fff5f7;

    &:before {
      background-color: #ff4d6d;
    }

    .card-icon {
      background-color: #ffe6ec;
    }
  }

  .card-2 {
    background-color: #f0f7ff;

    &:before {
      background-color: #4dabff;
    }

    .card-icon {
      background-color: #e6f0ff;
    }
  }

  .card-3 {
    background-color: #fff8e6;

    &:before {
      background-color: #ffc107;
    }

    .card-icon {
      background-color: #fff1cc;
    }
  }

  .card-4 {
    background-color: #e6f7f0;

    &:before {
      background-color: #38b000;
    }

    .card-icon {
      background-color: #ccf5e1;
    }
  }

  .card-5 {
    background-color: #f0f0ff;

    &:before {
      background-color: #7b61ff;
    }

    .card-icon {
      background-color: #e6e6ff;
    }
  }

  .card-6 {
    background-color: #fff5e6;

    &:before {
      background-color: #ff9f1c;
    }

    .card-icon {
      background-color: #ffeedd;
    }
  }

  .card-7 {
    background-color: #e6f7ff;

    &:before {
      background-color: #00b4d8;
    }

    .card-icon {
      background-color: #ccf0ff;
    }
  }

  .card-8 {
    background-color: #e6fff0;

    &:before {
      background-color: #06d6a0;
    }

    .card-icon {
      background-color: #ccffe6;
    }
  }

  .card-9 {
    background-color: #fff0f3;

    &:before {
      background-color: #ff758f;
    }

    .card-icon {
      background-color: #ffdee6;
    }
  }

  .card-10 {
    background-color: #f0fff4;

    &:before {
      background-color: #4cc9f0;
    }

    .card-icon {
      background-color: #d6fcff;
    }
  }

  .card-11 {
    background-color: #fff0e6;

    &:before {
      background-color: #fb8500;
    }

    .card-icon {
      background-color: #ffead6;
    }
  }

  .card-12 {
    background-color: #f8f0ff;

    &:before {
      background-color: #9d4edd;
    }

    .card-icon {
      background-color: #f0e6ff;
    }
  }

  .card-13 {
    background-color: #f0f9ff;

    &:before {
      background-color: #0077b6;
    }

    .card-icon {
      background-color: #e6f4ff;
    }
  }
    .card-14 {
    background-color: #f0f7ff;

    &:before {
      background-color: #4dabff;
    }

    .card-icon {
      background-color: #e6f0ff;
    }
  }
}


// 二维码弹窗样式
.qr-overlay {
  z-index: 1000 !important;
}

.mwrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1rem;
}

.mblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 8rem;
  padding: 0.8rem;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 1001;

  .qr-modal-tip {
    font-size: 0.4rem;
    color: #333;
    margin-top: 0.5rem;
    text-align: center;
  }
}

// 响应式优化
@media (max-width: 320px) {
  .functions-grid {
    gap: 0.2rem;
  }

  .function-card {
    width: calc(33.333% - 0.13rem);
    padding: 0.4rem 0;
  }

  .card-icon {
    width: 1rem !important;
    height: 1rem !important;

    img {
      width: 0.6rem !important;
      height: 0.6rem !important;
    }
  }

  .card-name {
    font-size: 0.35rem !important;
  }
}
</style>
