<!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>
    <!-- 在 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" @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"
              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="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>
        </div>
      </div>
    </div>
  </body>
</html>
