<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>商户检查页面</title>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <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"
    />
    <title>高区安全“码”上查监管平台-首页</title>
    <link
      rel="stylesheet"
      href="home.css"
    />
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
    <style>
      /* 新增提醒模块样式 */
      .info-reminder {
        width: 6.9rem;
        height: 2.54rem;
        background: #FFFFFF;
        border-radius: 0.2rem;
        margin: 0.3rem auto;
        padding: 0.24rem 0.3rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    
      .reminder-item {
        position: relative;
        width: 2.2rem;
        height: 100%;
        text-align: center;
      }
	  .new-badge{
		position: absolute;
		top: 0.15rem;
		right: 0.1rem;
		min-width: .8rem;
		text-align: left;
		text-indent: .16rem;
		height: 0.36rem;
		line-height: 0.36rem;
		font-size: 0.2rem;
		color: #FFFFFF;
		background-image: url(image/code/home/tip.png);
		background-size: contain;
		background-repeat: no-repeat;
	  }
      .reminder-badge {
        position: absolute;
		  top: -0.15rem;
		  right: 0.2rem;
        min-width: 0.4rem;
        height: 0.4rem;
        line-height: 0.4rem;
        padding: 0 0.12rem;
        border-radius: 0.2rem;
        font-size: 0.24rem;
        color: #FFFFFF;
        background: #00AEF1;
      }
	  .reminder-badge1{
		   background: #00AEF1; /* 默认 蓝色 */
	  }
      .reminder-badge2 {
        background: #FF9C01; /* 橙黄色 */
      }
      .reminder-badge2 {
        background: #FF4D4F; /* 红色 */
      }
    
      .reminder-img {
        width: 1.2rem;
        height: 1.2rem;
        margin-bottom: 0.16rem;
      }
    
      .reminder-text {
        font-size: 0.28rem;
        color: #333333;
        line-height: 1.2;
      }
    </style>
    <!-- 在 includeHead.js 之后添加环境判断 -->
    <script src="./sdk/includeHead.js"></script>
  </head>
  <body>
    <!-- 获取授权用户信息 本地token等操作 -->
    <script>
      if (window.env === 'pro') {
        document.write('<script type="text/javascript" src="sdk/jssdk2/index.js"><\/script>')
      }
    </script>
    <script
      type="text/javascript"
      src="./home.js"
    ></script>
    <div
      id="app"
      class="page_wrapper"
      v-cloak
    >
      <!-- 第二层：商户图标、名称、等级、场所类型和地址 -->
      <div
        class="second-layer second-layer-zf"
        v-if="showOrg"
        v-cloak
      >
        <!-- v-show="" -->
        <img
          class="merchant-icon"
          src="image/code/zhengfu_logo.png"
          alt=""
        />
        <div
          class="merchant-info welcome"
          v-cloak
        >
          <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"
        v-cloak
      >
        <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"
            v-cloak
          >
            <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"
        v-cloak
      >
        <div class="stats-header">
          <div class="stats-title">数据统计</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"
              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" alt="整改未通过">
		  <p class="reminder-text">{{item.title}}</p>
		</div>
        <!-- <div class="reminder-item" @click="navTo('nopass')">
          <div class="reminder-badge">3</div>
          <img src="./image/code/home/icon1.png" class="reminder-img" alt="整改未通过">
          <p class="reminder-text">整改未通过</p>
        </div>
        <div class="reminder-item" @click="navTo('willExpire')">
          <div class="reminder-badge orange-badge">5</div>
		   <img src="./image/code/home/icon2.png" class="reminder-img" alt="整改未通过">
          <p class="reminder-text">即将超期</p>
        </div>
        <div class="reminder-item" @click="navTo('expired')">
          <div class="reminder-badge red-badge">2</div>
		   <img src="./image/code/home/icon3.png" class="reminder-img" alt="整改未通过">
          <p class="reminder-text">整改超期</p>
        </div> -->
      </div>

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


      <!-- 第四层：检查专区 -->
      <div
        class="fourth-layer"
        v-cloak
      >
        <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>
  </body>
</html>
