<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <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>
  <script type="text/javascript" src="../sdk/includeHead.js"></script>
  <script type="text/javascript" src="../sdk/axios_http3.js"></script>
  <style></style>
  <style>
    /* 添加禁用状态文字颜色保持 */
    input:disabled,
    input[disabled] {
      color: #333 !important;
      /* 保持与正常状态相同的颜色 */
      -webkit-text-fill-color: #333 !important;
      /* 兼容iOS Safari */
    }

    .van-uploader__preview-delete {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="wrapper" v-cloak>
      <van-tabs v-model:active="activeTab" @click="clickTab" title-active-color="#1989fa" line-height="2px"
        style="margin-bottom: 15px">
        <van-tab title="基础信息"></van-tab>
        <van-tab title="经营信息"></van-tab>
        <van-tab title="消费者安全建议"></van-tab>
        <!-- <van-tab title="培训演练"></van-tab> -->
      </van-tabs>

      <!-- form开始 -->
      <div class="form-container" v-if="activeTab==0">
        <div class="form-item">
          <span class="form-label">商家名称</span>
          <div class="form-input-wrap">
            <input maxlength="25" type="text" v-model="formData.unitName" class="form-input" :disabled="flag=='XQ'"
              placeholder="请输入商家名称" />
          </div>
        </div>

        <div class="form-item">
          <span class="form-label">负责人</span>
          <div class="form-input-wrap" style="display: flex; align-items: center;">
            <template v-if="flag=='XQ'"><!-- 详情模式 -->
              <span :class="'form-input'" style="line-height: .7rem;">
                {{ showOriginal.merchantName ? formData.merchantName : desensitize(formData.merchantName, 'name') }}
              </span>
              <van-icon 
                :name="showOriginal.merchantName ? 'eye-o' : 'closed-eye'"
                @click="toggleShow('merchantName')"
                style="margin-left: 8px; color: #1989fa; cursor: pointer;"
              />
            </template>
            <input v-else maxlength="4" type="text" v-model="formData.merchantName" class="form-input" :disabled="flag=='XQ'"
              placeholder="请输入负责人" />
          </div>
        </div>

        <div class="form-item">
          <span class="form-label">电话</span>
          <div class="form-input-wrap" style="display: flex; align-items: center;">
            <template v-if="flag=='XQ'"><!-- 详情模式 -->
              <span class="form-input" style="line-height: .7rem;">
                {{ showOriginal.merchantPhone ? formData.merchantPhone : desensitize(formData.merchantPhone, 'phone') }}
              </span>
              <van-icon 
                :name="showOriginal.merchantPhone ? 'eye-o' : 'closed-eye'"
                @click="toggleShow('merchantPhone')"
                style="margin-left: 8px; color: #1989fa; cursor: pointer;"
              />
            </template>
            <input v-else
              type="number"
              maxlength="11"
              v-model="formData.merchantPhone"
              class="form-input"
              placeholder="请输入电话"
            />
          </div>
        </div>

        <div class="form-item">
          <span class="form-label">地址</span>
          <div class="form-input-wrap">
            <input maxlength="100" type="text" v-model="formData.businessAddress" class="form-input"
              :disabled="flag=='XQ'" placeholder="请输入地址" />
          </div>
        </div>

        <!-- 新增字段  -->
        <div class="form-item">
          <span class="form-label">隶属网格</span>
          <div class="form-input-wrap">

            <!-- <select
                class="selector"
                v-model="formData.community"
                :disabled="flag=='XQ'"
              >
                <option
                  v-for="(item, i) in dict4community"
                  :key="i"
                  :label="item.label"
                  :value="item.label"
                ></option>
              </select> -->
            <div style="font-size: 15px;color: #666;">
              {{formData.gridName}}
            </div>
          </div>
        </div>


        <!-- <van-popup v-model="showCommunityModal" round position="bottom">
            <van-cascader
              v-model="formData.community"
              :options="dict4community"
              :field-names="{ text: 'label', value: 'id', children: 'children' }"
              @change="handleCommunityChange"
              class="community-cascader"
            />
          </van-popup> -->

          <div class="form-item" v-if="flag=='XQ'">
            <span class="form-label">网格员</span>
            <div class="form-input-wrap" style="display: flex; align-items: center;">
              <template v-if="flag=='XQ'"><!-- 详情模式 -->
                <span class="form-input" style="line-height: .7rem;">
                  {{ showOriginal.gridMemberName ? formData.gridMemberName : desensitize(formData.gridMemberName, 'name') }}
                </span>
                <van-icon 
                  :name="showOriginal.gridMemberName ? 'eye-o' : 'closed-eye'"
                  @click="toggleShow('gridMemberName')"
                  style="margin-left: 8px; color: #1989fa; cursor: pointer;"
                />
              </template>
              <input v-else type="text" v-model="formData.gridMemberName" class="form-input" :disabled="flag=='XQ'" />
            </div>
          </div>
          <div class="form-item" v-if="flag=='XQ'">
            <span class="form-label">网格员联系方式</span>
            <div class="form-input-wrap" style="display: flex; align-items: center;">
              <template v-if="flag=='XQ'">
                <span class="form-input" style="line-height: .7rem;">
                  {{ showOriginal.gridMemberPhone ? formData.gridMemberPhone : desensitize(formData.gridMemberPhone, 'phone') }}
                </span>
                <van-icon 
                  :name="showOriginal.gridMemberPhone ? 'eye-o' : 'closed-eye'"
                  @click="toggleShow('gridMemberPhone')"
                  style="margin-left: 8px; color: #1989fa; cursor: pointer;"
                />
              </template>
              <input v-else maxlength="11" type="number" v-model="formData.gridMemberPhone" class="form-input" placeholder="请输入网格员联系方式" />
            </div>
          </div>
        <div class="form-item">
          <span class="form-label">生产经营类型</span>
          <div class="form-input-wrap">
            <select class="selector" v-model="formData.businessType" :disabled="flag=='XQ'">
              <option v-for="(item, i) in dict4businessType" :key="i" :label="item.dictLabel" :value="item.dictValue">
              </option>
            </select>
          </div>
        </div>
        <div class="form-item">
          <span class="form-label">行业类型</span>
          <div class="form-input-wrap">
            <select class="selector" v-model="formData.industryType" :disabled="flag=='XQ'">
              <option v-for="(item, i) in dict4industryType" :key="i" :label="item.industryName" :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <!-- 特殊处理：编辑没有详情有 -->
        <div class="form-item" style="max-height: 1.4rem; height:auto;" v-if="flag=='XQ'">
          <span class="form-label">行业主管</span>
          <div class="form-input-wrap" style="color: #333;font-size: .3rem;padding-top:.2rem;padding-bottom: .2rem;">
            {{ formData.industryDeptName }}
          </div>
        </div>

        <div class="form-item">
          <span class="form-label">场所类型</span>
          <div class="form-input-wrap">
            <select class="selector" name="" v-model="formData.smallPlaceTypeId" :disabled="flag=='XQ'">
              <option v-for="(item, i) in dict4changhsuoType" :key="i" :label="item.categoryName" :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div>
          <h5 class="imager-item-title">
            <span class="form-label">商家平面图</span>
            <span></span>
          </h5>
          <!-- 详情模式 -->
          <div class="img-wrapper" style="display: flex;gap:.16rem;">
            <div style="position: relative;" v-for="(imgItem, index) in formData.floorPlanPhotos">
              <img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;"
                @click="showImage(formData.floorPlanPhotos, index)" />
              <div v-if="flag=='XG'" class="van-uploader__preview-delete"
                @click="handleDeleteFloorPlan(index, 'floorPlan')"><i
                  class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i></div>
            </div>
            <div v-if="formData.floorPlanPhotos.length<4 && flag=='XG' ">
              <van-uploader :before-read="beforeRead" :after-read="(file) => afterRead(file, 'floorPlan')"
                class="uploader-wrapper" :deletable="false" :preview-image="false">
                <img src="../image/code/upload.png" style="width:1.6rem;height: 1.6rem;" alt="" srcset="">
              </van-uploader>
            </div>
          </div>
        </div>
        <div>
          <h5 class="imager-item-title">
            <span class="form-label">商家平面疏散图</span>
            <span></span>
          </h5>
          <!-- 详情模式 -->
          <div class="img-wrapper" style="display: flex;gap:.16rem;">
            <div style="position: relative;" v-for="(imgItem, index) in formData.floorEvacuationPlan">
              <img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;"
                @click="showImage(formData.floorEvacuationPlan, index)" />
              <div v-if="flag=='XG'" class="van-uploader__preview-delete"
                @click="handleDeleteFloorPlan(index, 'floorEvacuationPlan')"><i
                  class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i></div>
            </div>
            <div v-if="formData.floorEvacuationPlan.length<4 && flag=='XG' ">
              <van-uploader :before-read="beforeRead" :after-read="(file) => afterRead(file, 'floorEvacuationPlan')"
                class="uploader-wrapper" :deletable="false" :preview-image="false">
                <img src="../image/code/upload.png" style="width:1.6rem;height: 1.6rem;" alt="" srcset="">
              </van-uploader>
            </div>
          </div>
        </div>
        <div>
          <h5 class="imager-item-title">
            <span class="form-label">营业执照</span>
            <span></span>
          </h5>
          <!-- 详情模式 -->
          <div class="img-wrapper" style="display: flex;gap:.16rem;">
            <div style="position: relative;" v-for="(imgItem, index) in formData.businessLicensePhotos">
              <img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;"
                @click="showImage(formData.businessLicensePhotos, index)" />
              <div v-if="flag=='XG'" class="van-uploader__preview-delete"
                @click="handleDeleteFloorPlan(index, 'license')"><i
                  class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i></div>
            </div>
            <div v-if="formData.businessLicensePhotos.length<1 && flag=='XG' ">
              <van-uploader :before-read="beforeRead" :after-read="(file) => afterRead(file, 'license')"
                class="uploader-wrapper" :deletable="false" :preview-image="false">
                <img src="../image/code/upload.png" style="width:1.6rem;height: 1.6rem;" alt="" srcset="">
              </van-uploader>
            </div>
          </div>
        </div>
        <div>
          <h5 class="imager-item-title">
            <span class="form-label">门头图</span>
            <span></span>
          </h5>
          <!-- 详情模式 -->
          <div class="img-wrapper" style="display: flex;gap:.16rem;">
            <div style="position: relative;" v-for="(imgItem, index) in formData.storefrontPhotos">
              <img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;"
                @click="showImage(formData.storefrontPhotos, index)" />
              <div v-if="flag=='XG'" class="van-uploader__preview-delete"
                @click="handleDeleteFloorPlan(index, 'storeFront')"><i
                  class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i></div>
            </div>
            <div v-if="formData.storefrontPhotos.length<1 && flag=='XG' ">
              <van-uploader :before-read="beforeRead" :after-read="(file) => afterRead(file, 'storeFront')"
                class="uploader-wrapper" :deletable="false" :preview-image="false">
                <img src="../image/code/upload.png" style="width:1.6rem;height: 1.6rem;" alt="" srcset="">
              </van-uploader>
            </div>
          </div>
        </div>

        <button v-if="flag=='XG'" class="save-btn" style="margin-left: 50%; transform: translateX(-50%)" @click="save">
          保存
        </button>
        <div>
          <h5 class="imager-item-title" style="border: none">
            <span class="form-label">安全二维码</span>
            <span></span>
          </h5>
          <div>
            <img :src="formData.qrCodeUrl" style="margin-left: 50%; transform: translateX(-50%)"
              @click="showImage(formData.storefrontPhotos)" />
          </div>
        </div>
        <button v-if="userType==='shop'" class="save-btn" style="margin-left: 50%; transform: translateX(-50%)"
          @click="saveCanvas">
          保存二维码
        </button>
      </div>
      <!-- form结束 -->

      <!-- 经营信息开始 -->
      <div class="form-container" v-if="activeTab==1">
        <div class="form-item">
          <span class="form-label">建筑面积(㎡)</span>
          <div class="form-input-wrap">
            <input maxlength="4" type="number" v-model="formData.area" class="form-input" :disabled="flag=='XQ'"
              placeholder="请输入建筑面积(㎡)" />
          </div>
        </div>

        <div class="form-item">
          <span class="form-label">建筑结构</span>
          <div class="form-input-wrap">
            <input maxlength="25" type="text" v-model="formData.buildingStructure" class="form-input"
              :disabled="flag=='XQ'" placeholder="请输入建筑结构" />
          </div>
        </div>

        <div class="form-item">
          <span class="form-label">产权人</span>
          <div class="form-input-wrap" style="display: flex; align-items: center;">
            <template v-if="flag=='XQ'"><!-- 详情模式 -->
              <span class="form-input" style="line-height: .7rem;">
                {{ showOriginal.owner ? formData.owner : desensitize(formData.owner, 'name') }}
              </span>
              <van-icon 
                :name="showOriginal.owner ? 'eye-o' : 'closed-eye'"
                @click="toggleShow('owner')"
                style="margin-left: 8px; color: #1989fa; cursor: pointer;"
              />
            </template>
            <input v-else
              type="text"
              maxlength="4"
              v-model="formData.owner"
              class="form-input"
              placeholder="请输入产权人"
            />
          </div>
        </div>

        <div class="form-item">
          <span class="form-label">产权人联系方式</span>
          <div class="form-input-wrap" style="display: flex; align-items: center;">
            <template v-if="flag=='XQ'"><!-- 详情模式 -->
              <span class="form-input" style="line-height: .7rem;">
                {{ showOriginal.ownerPhone ? formData.ownerPhone : desensitize(formData.ownerPhone, 'phone') }}
              </span>
              <van-icon 
                :name="showOriginal.ownerPhone ? 'eye-o' : 'closed-eye'"
                @click="toggleShow('ownerPhone')"
                style="margin-left: 8px; color: #1989fa; cursor: pointer;"
              />
            </template>
            <input v-else
              type="number"
              maxlength="11"
              v-model="formData.ownerPhone"
              class="form-input"
              placeholder="请输入产权人联系方式"
            />
          </div>
        </div>

        <div class="form-item">
          <span class="form-label">经营人</span>
          <div class="form-input-wrap" style="display: flex; align-items: center;">
            <template v-if="flag=='XQ'"><!-- 详情模式 -->
              <span class="form-input" style="line-height: .7rem;">
                {{ showOriginal.operator ? formData.operator : desensitize(formData.operator, 'name') }}
              </span>
              <van-icon 
                :name="showOriginal.operator ? 'eye-o' : 'closed-eye'"
                @click="toggleShow('operator')"
                style="margin-left: 8px; color: #1989fa; cursor: pointer;"
              />
            </template>
            <input v-else
              type="text"
              maxlength="4"
              v-model="formData.operator"
              class="form-input"
              placeholder="请输入经营人"
            />
          </div>
        </div>
        <!-- 新增字段  -->
        <div class="form-item">
          <span class="form-label">经营人联系方式</span>
          <div class="form-input-wrap" style="display: flex; align-items: center;">
            <template v-if="flag=='XQ'"><!-- 详情模式 -->
              <span class="form-input" style="line-height: .7rem;">
                {{ showOriginal.operatorPhone ? formData.operatorPhone : desensitize(formData.operatorPhone, 'phone') }}
              </span>
              <van-icon 
                :name="showOriginal.operatorPhone ? 'eye-o' : 'closed-eye'"
                @click="toggleShow('operatorPhone')"
                style="margin-left: 8px; color: #1989fa; cursor: pointer;"
              />
            </template>
            <input v-else
              type="number"
              maxlength="11"
              v-model="formData.operatorPhone"
              class="form-input"
              placeholder="请输入经营人联系方式"
            />
          </div>
        </div>

        <div class="form-item">
          <span class="form-label">房屋类型</span>
          <div class="form-input-wrap">
            <select class="selector" v-model="formData.houseType" :disabled="flag=='XQ'">
              <option v-for="(item, i) in dict4fangwuType" :key="i" :label="item.dictLabel" :value="item.dictValue">
              </option>
            </select>
          </div>
        </div>
        <div class="form-item">
          <span class="form-label">房屋用途</span>
          <div class="form-input-wrap">
            <select class="selector" v-model="formData.houseUsage" :disabled="flag=='XQ'">
              <option v-for="(item, i) in dict4fangwuyongtuType" :key="i" :label="item.dictLabel"
                :value="item.dictValue"></option>
            </select>
          </div>
        </div>
        <div class="form-item">
          <span class="form-label">房东姓名</span>
          <div class="form-input-wrap" style="display: flex; align-items: center;">
            <template v-if="flag=='XQ'"><!-- 详情模式 -->
              <span class="form-input" style="line-height: .7rem;">
                {{ showOriginal.landlordName ? formData.landlordName : desensitize(formData.landlordName, 'name') }}
              </span>
              <van-icon 
                :name="showOriginal.landlordName ? 'eye-o' : 'closed-eye'"
                @click="toggleShow('landlordName')"
                style="margin-left: 8px; color: #1989fa; cursor: pointer;"
              />
            </template>
            <input v-else
              type="text"
              maxlength="4"
              v-model="formData.landlordName"
              class="form-input"
              placeholder="请输入房东姓名"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="form-label">房东联系方式</span>
          <div class="form-input-wrap" style="display: flex; align-items: center;">
            <template v-if="flag=='XQ'"><!-- 详情模式 -->
              <span class="form-input" style="line-height: .7rem;">
                {{ showOriginal.landlordContact ? formData.landlordContact : desensitize(formData.landlordContact, 'phone') }}
              </span>
              <van-icon 
                :name="showOriginal.landlordContact ? 'eye-o' : 'closed-eye'"
                @click="toggleShow('landlordContact')"
                style="margin-left: 8px; color: #1989fa; cursor: pointer;"
              />
            </template>
            <input v-else
              type="number"
              maxlength="11"
              v-model="formData.landlordContact"
              class="form-input"
              placeholder="请输入房东联系方式"
            />
          </div>
        </div>
        <button v-if="flag=='XG'" class="save-btn" style="margin-left: 50%; transform: translateX(-50%)" @click="save">
          保存
        </button>
      </div>
      <!-- form结束 -->

      <!-- 消费者安全建议列表 -->
      <div v-if="activeTab==2">
        <van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了"
          @load="getConsumerSuggestList" :immediate-check="false">
          <van-cell v-for="(item, index) in consumerSuggestList" :key="item.id" @click="viewDetail(item)">
            <div style="width: 100%">
              <div style="display: flex; justify-content: space-between; margin: 8px 0">
                <span style="color: #737373; font-size: 0.28rem">日期：{{ item.submitDate }}</span>
              </div>
              <div
                style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; font-size: 0.3rem; font-weight: bold; font-family: PingFang SC">
                {{item.content}}</div>
            </div>
          </van-cell>
        </van-list>
      </div>
      <!-- 消费者安全建议列表结束 -->
    </div>
  </div>
</body>

</html>