<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>高区安全“码”上查监管平台-首页</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover" />
  <link rel="stylesheet" href="home.css" />

  <!-- 在 includeHead.js 之后添加环境判断 -->
  <script src="./sdk/includeHead.js"></script>
  <!-- 获取授权用户信息 本地token等操作 -->
  <script>
    // 监听 includeHead.js 加载完成事件
    document.querySelector('script[src="./sdk/includeHead.js"]').onload = function() {
      // includeHead.js 加载完成后，动态加载 home.js
      const homeScript = document.createElement('script');
      homeScript.type = 'text/javascript';
      homeScript.src = './home.js';
      document.body.appendChild(homeScript);
    };

  </script>
</head>

<body>
  <div id="app" class="page_wrapper" v-cloak>
       <!-- 原有内容（数据加载完成后显示） -->
       <div v-show="!isLoading">
          <!-- 第二层：商户图标、名称、等级、场所类型和地址 -->
          <div class="second-layer second-layer-zf" v-if="showOrg">
            <!-- v-show="" -->
            <img class="merchant-icon" src="image/code/zhengfu_logo.png" alt="" />
            <div class="merchant-info welcome">
              <p>欢迎您，{{userInfo.deptName}}<br />进入安全“码”上查</p>
              <div class="user_tag">
                <img src="image/code/user.png" alt="" />
                <span>{{userInfo.roleName}}</span>
              </div>
            </div>
          </div>

          <!-- 第二层：商户图标、名称、等级、场所类型和地址 -->
          <div class="second-layer-sj" v-if="showShop">
            <div class="header">
              <span>商家信息</span>
              <div class="user_tag">
                <img src="image/code/user.png" alt="" />
                <span>商家</span>
              </div>
            </div>
            <div class="bottom">
              <div class="left">
                <img class="merchant-icon" src="image/code/sj.png" alt="商户图标" />
              </div>
              <div class="right">
                <div class="merchant-info">
                  <div class="name-rank">
                    <span class="merchant-name">{{userInfo.unitName}}</span>
                    <span class="user-rank green" v-if="userInfo.safeLevel==0" @click="gotoPage('anquan_level')">安全等级:绿</span>
                    <span class="user-rank yellow" v-if="userInfo.safeLevel==1"
                      @click="gotoPage('anquan_level')">安全等级:黄</span>
                    <span class="user-rank red" v-if="userInfo.safeLevel==2" @click="gotoPage('anquan_level')">安全等级:红</span>
                  </div>
                  <div class="divider"></div>
                  <div class="type-address">
                    <p>场所类型：{{userInfo.smallPlaceTypeName}}</p>
                    <p>{{userInfo.businessAddress}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 第三层：统计信息 -->
          <div class="third-layer">
            <div class="stats-header">
              <div class="stats-title" @click="openDebug">数据统计</div>
              <!-- <van-cell-group> -->
              <div @click="showPopup('showPopup4completionDate')" style="position: absolute; top: -0.08rem; right: 0.4rem">
                <span class="formValue">{{showDate|formatterData}}</span><van-icon name="arrow-down" />
              </div>
              <van-popup v-model="showPopup4completionDate" position="bottom">
                <van-datetime-picker v-model="selectedDate" :min-date="minDate" :max-date="maxDate" type="year-month"
                  title="选择年月" @confirm="confirm4completionDate" @cancel="showPopup4completionDate=false"
                  :formatter="needData" />
              </van-popup>
              <!-- </van-cell-group> -->
            </div>
            <div class="stats-content">
              <div class="stat-item">
                <div class="stat-value">{{userData.checkCount}}次</div>
                <div class="stat-label">检查数</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{userData.checkSelfCount}}次</div>
                <div class="stat-label">自查数</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{userData.hiddenCount}}处</div>
                <div class="stat-label">隐患数</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{userData.hiddenNoReCount}}处</div>
                <div class="stat-label">未整改</div>
              </div>
            </div>
          </div>

          <!-- 第三层统计信息之后新增提醒模块（商户专属） -->
          <div class="info-reminder" v-if="showShop">
            <!-- 第一个提醒项：整改未通过 -->
            <div class="reminder-item" v-for="item in remindStatistic" @click="navTo(`${item.name}`)">
              <div class="reminder-badge" :class="`reminder-badge${item.icon}`">{{item.num}}</div>
              <img :src="`./image/code/home/icon${item.icon}.png`" class="reminder-img">
              <p class="reminder-text">{{item.title}}</p>
            </div>
          </div>

          <!-- 原第三层统计信息 -->
          <div class="third-layer">
            <!-- ... 原有统计内容保持不变 ... -->
          </div>


          <!-- 第四层：检查专区 -->
          <div class="fourth-layer">
            <h2>检查专区</h2>
            <div class="check-modules">
              <div class="check-module" v-for="(item,index) in menuList" :key="index" :class="item.className"
                @click="scanCode(item.navTo)">
                <p>{{item.title}} <van-icon name="arrow" /></p>
                <p class="module-intro">{{item.remark}}</p>
                <div class="new-badge" v-if="item.msgFlag">新</div>
              </div>
            </div>
          </div>

        </div>

  </div>
</body>

</html>