<template>
  <view class="main">
    <scroll-view class="pageScroll" :style="{
      height:
        extendObj.situation !== 0 && (extendObj.errorStatus === 0 || extendObj.errorStatus === 1)
          ? 'calc(100% - 120rpx)'
          : '100%',
    }" :scroll-y="true">
      <view class="topContent">
        <view class="placeBox"
          :style="{ backgroundImage: `url(${extendObj.situation === 0 ? 'https://eshangtech.com/minTestImg/normalBg.png' : 'https://eshangtech.com/minTestImg/errorBg.png'})` }">
          <view class="placeBoxTop">
            <view class="placeLeft">
              <image class="itemIcon" src="/static/images/mbwa/fixed.svg" />
              <view class="placeName">{{ detailObj.placeName || "-" }}</view>
            </view>
            <view class="statusBox" :style="{
              color:
                extendObj.situation === 0
                  ? '#139942'
                  : extendObj.situation === 1
                    ? '#F75031'
                    : '',
              background:
                extendObj.situation === 0
                  ? '#EBF7EF'
                  : extendObj.situation === 1
                    ? '#FEF0ED'
                    : '',
            }">{{
              extendObj.situation === 0
                ? "正常情况"
                : extendObj.situation === 1
                  ? "急需处理"
                  : "-"
            }}</view>

          </view>


          <view class="placeBoxBottom">
            <view class="topBox">巡检进度 </view>

            <view class="progressContent">
              <view class="progressItem">
                <view class="itemLeft">
                  <image class="img" :src="user.Membership_Headimage" />
                  <image class="successIcon" src="/static/images/mbwa/successSmallIcon.svg" />
                </view>
                <view class="itemRight">
                  <view class="itemTop">
                    <text class="name">{{ detailObj.template.serverPartName || "" }}{{ detailObj.userName || "-"
                      }}</text>
                    <text class="time">{{
                      detailObj.createdAt
                        ? $moment(detailObj.createdAt).format(
                          "YYYY-MM-DD HH:mm:ss"
                        )
                        : "-"
                    }}</text>
                  </view>
                  <view class="itemBottom">
                    <view class="itemBottonLeft">{{ extendObj.uploadResult }}</view>
                    <view class="itemBottonRight">提交</view>
                  </view>
                </view>
              </view>

              <view class="progressItem" style="margin-top: 40rpx" v-if="extendObj.errorStatus >= 1"
                @click="handleShowPopup(1)">
                <view class="itemLeft">
                  <image class="img" :src="user.Membership_Headimage" />
                  <image class="successIcon" src="/static/images/mbwa/successSmallIcon.svg" />
                </view>
                <view class="itemRight">
                  <view class="itemTop">
                    <text class="name">{{
                      extendObj.personMemberShipName || "-"
                    }}</text>
                    <text class="time">{{
                      extendObj.suggestTime
                        ? $moment(extendObj.suggestTime).format(
                          "YYYY-MM-DD HH:mm:ss"
                        )
                        : "-"
                    }}</text>
                  </view>
                  <view class="itemBottom">
                    <view class="itemBottonLeft">{{ extendObj.suggestion }}</view>
                    <view style="display: flex;">
                      <view class="itemBottonRight" style="margin-right: 20rpx;" @click="handleOpenChangePopup"
                        v-if="canChangePerson">更换指派人</view>
                      <view class="itemBottonRight" v-if="extendObj.suggestTime">指派</view>
                    </view>
                  </view>
                  <!-- <view class="itemBottom">{{ extendObj.suggestion }}</view> -->
                </view>
              </view>

              <view class="progressItem" style="margin-top: 40rpx" v-if="extendObj.errorStatus === 2"
                @click="handleShowPopup(2)">
                <view class="itemLeft">
                  <image class="img" :src="user.Membership_Headimage" />
                  <image class="successIcon" src="/static/images/mbwa/successSmallIcon.svg" />
                </view>
                <view class="itemRight">
                  <view class="itemTop">
                    <text class="name">{{
                      extendObj.personMemberShipName || "-"
                    }}</text>
                    <text class="time">{{
                      extendObj.feedbackTime
                        ? $moment(extendObj.feedbackTime).format(
                          "YYYY-MM-DD HH:mm:ss"
                        )
                        : "-"
                    }}</text>
                  </view>
                  <view class="itemBottom">
                    <view class="itemBottonLeft">{{ extendObj.feedbackContent }}</view>
                    <view class="itemBottonRight" v-if="extendObj.feedbackTime">反馈</view>
                  </view>
                  <!-- <view class="itemBottom">{{ extendObj.feedbackContent }}</view> -->
                </view>
              </view>
            </view>
          </view>

          <!-- <view class="userBox">
            <view class="userTop">
              <text class="userName">{{ detailObj.userName || "" }}</text>
              <text class="labelBox">巡查人员</text>
            </view>
            <view class="timeBox">
              <image class="timeIcon" src="/static/images/mbwa/timeIcon.svg" />
              <text class="nowTime">{{
                detailObj.createdAt
                  ? $moment(detailObj.createdAt).format("YYYY-MM-DD HH:mm:ss")
                  : "-"
              }}</text>
            </view>
          </view> -->
        </view>

        <!-- 指派人 -->
        <view class="assignedPerson" v-if="extendObj.situation === 1 && isManager">
          <view class="contentTop">
            整改意见<span class="required">*</span>
          </view>
          <div class="inputBox">
            <textarea auto-height v-model="suggestion" placeholder="请输入整改意见"
              :disabled="extendObj.errorStatus !== 0"></textarea>
          </div>

          <view class="contentTop" style="margin-top: 40rpx;">
            指派异常处理人<span class="required">*</span>
          </view>

          <view class="radioSelectPersonBox">
            <radio-group class="radioGroup" @change="handleNewChangePerson">
              <label class="choiceItem" v-for="(item, index) in selectPersonList" :key="index"
                :style="{ marginTop: index > 2 ? '16rpx' : '' }">
                <view>
                  <radio :value="index" color="#409eff" style="transform: scale(0.8)" />
                </view>
                <view>{{ item.MEMBERSHIP_NAME }}</view>
              </label>
            </radio-group>
          </view>
        </view>

        <!-- 反馈的  -->
        <view class="assignedPerson" v-if="extendObj.errorStatus >= 1 && isFeedback">
          <view class="contentTop">
            反馈内容<span class="required">*</span>
          </view>

          <div class="inputBox">
            <textarea auto-height v-model="feedbackContent" placeholder="请输入反馈内容"
              :disabled="extendObj.errorStatus === 2"></textarea>
          </div>
        </view>



        <view class="inspectionContent">
          <view class="contentTop">
            巡检内容<span class="required">*</span>
          </view>
          <view>
            <textarea v-model="uploadResult" class="contentBoxResult" placeholder="请输入巡查内容，并上传现场照片"
              placeholderStyle="font-size: 24rpx;color: #CDCED1" :auto-height="true" disabled></textarea>
          </view>

          <view class="uploadImgBox">
            <!-- <div class="submitImgBox" @click="submitImg">
              <image
                class="addIcon"
                src="/static/images/mbwa/addImageIcon.svg"
              />
            </div> -->

            <div class="imgItem" v-for="(item, index) in imgsList" :key="index">
              <image :src="item" @tap="showImg2(index, imgsList)" mode="aspectFill" />
              <!-- <view class="closeBox" @click.stop="deleteImgFunc(item, index)">
                <image
                  class="closeIcon"
                  src="/static/images/mbwa/closeIcon.svg"
                />
              </view> -->
            </div>
          </view>
        </view>
      </view>

      <view class="otherBox">
        <view class="questionItem">
          <view class="quetionTitle">情况类型<text class="required">*</text></view>

          <radio-group class="radioGroup" @change="handleChangeSituationType">
            <label class="radioItem">
              <view>
                <radio color="#3B72FF" :value="'0'" :checked="0 === current" disabled />
              </view>
              <view style="font-size: 24rpx">情况正常</view>
            </label>
            <label class="radioItem">
              <view>
                <radio color="#3B72FF" :value="'1'" :checked="1 === current" disabled />
              </view>
              <view style="font-size: 24rpx">急需处理</view>
            </label>
          </radio-group>
        </view>
      </view>

      <view class="qusetionBox">
        <!-- requestionRadioList -->
        <!-- requestionCheckedList -->

        <!-- 单选题 -->
        <view v-if="requestionRadioList && requestionRadioList.length > 0">
          <view class="questionItem" v-for="(item, index) in requestionRadioList" :key="index">
            <template>
              <view class="quetionTitle">{{ item.question.title
              }}<text class="required" v-if="item.isRequired">*</text></view>

              <view class="checkedBottom" v-if="item.isChecked && item.isChecked.length > 0">
                <view class="bottomItem" style="margin-bottom: 0" v-for="(subItem, subIndex) in item.isChecked"
                  :key="subIndex">
                  <view>{{ subItem || "" }}</view>
                  <!-- <image
                  @click="handDeleteChecked(item, subItem)"
                  class="closeIcon"
                  src="/static/images/mbwa/closeIcon.svg"
                /> -->
                </view>
              </view>

              <view class="beforeRectification" v-if="extendObj.errorStatus >= 1">整改前</view>
              <view style="display: flex;flex-wrap: wrap;">
                <view class="imgItem" v-for="(subItem, subIndex) in item.imageResponse" :key="subIndex">
                  <image :src="subItem" @click="showImg2(subIndex, item.imageResponse)" mode="aspectFill" />
                </view>
              </view>
              <view class="afterRectification" v-if="extendObj.errorStatus >= 1">整改后</view>

              <view class="uploadImgBox" v-if="extendObj.errorStatus >= 1">
                <div v-if="extendObj.errorStatus === 1" class="submitImgBox"
                  @click="submitImg($event, item, 'feedback')">
                  <image class="addIcon" src="/static/images/mbwa/addImageIcon.svg" />
                </div>
                <view style="display: flex;flex-wrap: wrap;">
                  <div class="imgItem" v-for="(subItem, subIndex) in item.feedbackImg" :key="subIndex">
                    <image :src="subItem" @tap="showImg2(subIndex, item.feedbackImg)" mode="aspectFill" />
                    <view v-if="extendObj.errorStatus === 1" class="closeBox" @click.stop="
                      deleteImgFuncResponse(item.feedbackImg, subIndex)
                      ">
                      <image class="closeIcon" src="/static/images/mbwa/closeIcon.svg" />
                    </view>
                  </div>
                </view>


              </view>


            </template>

            <!-- <radio-group
              class="radioGroup"
              v-if="
                item.question &&
                item.question.options &&
                item.question.options.length > 0
              "
              @change="radioChange($event, item)"
            >
              <label
                class="radioItem"
                v-for="(subItem, subIndex) in item.question.options"
                :key="subIndex"
              >
                <view>
                  <radio
                    color="#3B72FF"
                    :value="subItem.text"
                    :checked="subItem.isChecked"
                    disabled
                  />
                </view>
                <view style="font-size: 24rpx">{{ subItem.text }}</view>
              </label>
            </radio-group> -->
          </view>
        </view>

        <view v-if="requestionCheckedList && requestionCheckedList.length > 0">
          <view class="requestionCheckedItem" v-for="(item, index) in requestionCheckedList" :key="index">
            <!-- @click="handleShowCheckPopup(item)" -->
            <view class="checkedTop">
              <view class="topLeft">
                {{ item.question.title || ""
                }}<text class="required" v-if="item.isRequired">*</text>
              </view>
              <view class="topRight">
                <!-- <text
                  class="placeSelect"
                  v-if="!(item.isChecked && item.isChecked.length > 0)"
                  >请选择</text
                >
                <image
                  class="rightArrow"
                  src="/static/images/mbwa/rightArrow.svg"
                /> -->
              </view>
            </view>
            <view class="checkedBottom" v-if="item.isChecked && item.isChecked.length > 0">
              <view class="bottomItem" v-for="(subItem, subIndex) in item.isChecked" :key="subIndex">
                {{ subItem.text || "" }}
                <!-- <image
                  @click="handDeleteChecked(item, subItem)"
                  class="closeIcon"
                  src="/static/images/mbwa/closeIcon.svg"
                /> -->
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 只有异常的时候才会出现的巡检进度 -->
      <view class="progressBox" v-if="false">
        <view class="progress">
          <view class="topBox">巡检进度</view>

          <view class="progressContent">
            <view class="progressItem">
              <view class="itemLeft">
                <image class="img" :src="user.Membership_Headimage" />
                <image class="successIcon" src="/static/images/mbwa/successSmallIcon.svg" />
              </view>
              <view class="itemRight">
                <view class="itemTop">
                  <text class="name">{{ detailObj.userName || "-" }}</text>
                  <text class="time">{{
                    detailObj.createdAt
                      ? $moment(detailObj.createdAt).format(
                        "YYYY-MM-DD HH:mm:ss"
                      )
                      : "-"
                  }}</text>
                </view>
                <view class="itemBottom">{{ extendObj.uploadResult }}</view>
              </view>
            </view>

            <view class="progressItem" style="margin-top: 40rpx" v-if="extendObj.errorStatus >= 1"
              @click="handleShowPopup(1)">
              <view class="itemLeft">
                <image class="img" :src="user.Membership_Headimage" />
                <image class="successIcon" src="/static/images/mbwa/successSmallIcon.svg" />
              </view>
              <view class="itemRight">
                <view class="itemTop">
                  <text class="name">{{
                    extendObj.personMemberShipName || "-"
                  }}</text>
                  <text class="time">{{
                    extendObj.suggestTime
                      ? $moment(extendObj.suggestTime).format(
                        "YYYY-MM-DD HH:mm:ss"
                      )
                      : "-"
                  }}</text>
                </view>
                <view class="itemBottom">{{ extendObj.suggestion }}</view>
              </view>
            </view>

            <view class="progressItem" style="margin-top: 40rpx" v-if="extendObj.errorStatus === 2"
              @click="handleShowPopup(2)">
              <view class="itemLeft">
                <image class="img" :src="user.Membership_Headimage" />
                <image class="successIcon" src="/static/images/mbwa/successSmallIcon.svg" />
              </view>
              <view class="itemRight">
                <view class="itemTop">
                  <text class="name">{{
                    extendObj.personMemberShipName || "-"
                  }}</text>
                  <text class="time">{{
                    extendObj.feedbackTime
                      ? $moment(extendObj.feedbackTime).format(
                        "YYYY-MM-DD HH:mm:ss"
                      )
                      : "-"
                  }}</text>
                </view>
                <view class="itemBottom">{{ extendObj.feedbackContent }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="bottomBtnBox" v-if="
      extendObj.situation !== 0 &&
      (
        (extendObj.errorStatus === 0 && isManager) ||
        (extendObj.errorStatus === 1 && isFeedback) ||
        (feedbackStatus === 1 && isManager) ||
        (feedbackStatus === 2 && isFeedback)
      )
    ">
      <view class="bottomBtn" @click="handleAssign">{{
        extendObj.errorStatus === 0 || feedbackStatus === 1
          ? "指派"
          : extendObj.errorStatus === 1 || feedbackStatus === 2
            ? "反馈"
            : ""
      }}</view>
    </view>

    <!-- 正常指派人  和 反馈的弹出框 -->
    <uniPopup v-if="false" ref="checkPopup" type="bottom" :show="isShowPopup" @hidePopup="handleClosePopup">
      <view class="popupBox">
        <view class="contentTop">
          <view class="left"></view>
          <view class="center">{{
            extendObj.errorStatus === 0 || feedbackStatus === 1
              ? "指派"
              : extendObj.errorStatus === 1 || feedbackStatus === 2
                ? "反馈"
                : ""
          }}</view>
          <view class="right" @click="handleClosePopup">
            <image class="closeIcon" src="/static/images/mbwa/closeIcon.svg" />
          </view>
        </view>
        <scroll-view class="checkPopupContent" :scroll-y="true">
          <view class="itemContent" v-if="extendObj.errorStatus === 0 || feedbackStatus === 1">
            <view class="title">异常处理人<text style="color: red">*</text></view>

            <view class="anwersList" v-if="
              selectPersonList &&
              selectPersonList.length > 0 &&
              extendObj.errorStatus === 0
            ">
              <view class="anwersItem" v-for="(item, index) in selectPersonList" :key="index"
                @click="handleSelectPerson(item)">
                <view :class="item.isChecked ? 'anwers selectAnwersItem' : 'anwers'">
                  {{ item.STAFF_NAME || "" }}</view>
              </view>
            </view>

            <view v-if="feedbackStatus === 1" class="anwersList">
              <view class="anwersItem">
                <view class="anwers selectAnwersItem">
                  {{ extendObj.personMemberShipName || "" }}</view>
              </view>
            </view>

            <view class="changePersonBox" v-if="canChangePerson">
              <view class="changePersonBtn" @click="handleOpenChangePopup">
                更换指派人
              </view>
            </view>
          </view>

          <view class="itemContent" v-if="extendObj.errorStatus === 0 || feedbackStatus === 1">
            <view class="title">整改意见<text style="color: red">*</text></view>
            <div class="descBox">
              <textarea v-if="extendObj.errorStatus === 0" auto-height v-model="suggestion" placeholder="请输入整改意见"
                :disabled="extendObj.errorStatus !== 0 || !isManager" style="text-align: left"
                placeholderStyle="font-size: 28rpx;color: #CDCED1;text-align: left;"></textarea>
              <view style="text-align: left" v-else>{{
                extendObj.suggestion || ""
              }}</view>
            </div>
          </view>

          <view class="NewItemContent" v-if="extendObj.errorStatus === 1 || feedbackStatus === 2">
            <view class="newItem" v-for="(item, index) in detailObj.questionResponses" :key="index"
              :style="{ marginBottom: item.score > 0 ? '0' : '' }">
              <template v-if="!(item.score > 0)">
                <view class="feedbackTitle">{{ item.isChecked[0] || ""
                }}<text style="color: red">*</text></view>
                <view class="uploadImgBox">
                  <div v-if="extendObj.errorStatus !== 2 && isFeedback" class="submitImgBox"
                    @click="submitImg($event, item, 'feedback')">
                    <image class="addIcon" src="/static/images/mbwa/addImageIcon.svg" />
                  </div>
                  <view v-if="extendObj.errorStatus === 1">
                    <div class="imgItem" v-for="(subItem, subIndex) in item.feedbackImg" :key="subIndex">
                      <image :src="subItem" @tap="showImg2(subIndex, item.feedbackImg)" mode="aspectFill" />
                      <view class="closeBox" @click.stop="
                        deleteImgFuncResponse(item.feedbackImg, subIndex)
                        ">
                        <image class="closeIcon" src="/static/images/mbwa/closeIcon.svg" />
                      </view>
                    </div>
                  </view>
                  <view v-if="extendObj.errorStatus === 2 && extendObj">
                    <div style="display: inline-block;" class="imgItem" v-for="(subItem, subIndex) in extendObj
                      .newFeedbackImgList[item.id]" :key="subIndex">
                      <image :src="subItem" @tap="
                        showImg2(
                          subIndex,
                          extendObj.newFeedbackImgList[item.id]
                        )
                        " mode="aspectFill" />
                    </div>
                  </view>
                </view>
              </template>
            </view>
          </view>

          <!-- <view
            class="itemContent"
            v-if="extendObj.errorStatus === 1 || feedbackStatus === 2"
          >
            <view class="title">反馈图片<text style="color: red">*</text></view>

            <view class="uploadImgBox">
              <div
                class="submitImgBox"
                @click="submitImg"
                v-if="feedbackStatus !== 2 && isFeedback"
              >
                <image
                  class="addIcon"
                  src="/static/images/mbwa/addImageIcon.svg"
                />
              </div>

              <div
                class="imgItem"
                v-for="(item, index) in feedbackImgList"
                :key="index"
              >
                <image
                  :src="item"
                  @click="showImg2(index, feedbackImgList)"
                  mode="aspectFill"
                />
                <view
                  class="closeBox"
                  @click.stop="deleteImgFunc(item, index)"
                  v-if="feedbackStatus !== 2"
                >
                  <image
                    class="closeIcon"
                    src="/static/images/mbwa/closeIcon.svg"
                  />
                </view>
              </div>
            </view>
          </view> -->

          <view class="itemContent" style="margin-top: 40rpx"
            v-if="extendObj.errorStatus === 1 || feedbackStatus === 2">
            <view class="title">反馈结果<text style="color: red">*</text></view>
            <div class="descBox">
              <textarea v-if="extendObj.errorStatus === 1" auto-height v-model="feedbackContent" placeholder="请输入反馈内容"
                :disabled="extendObj.errorStatus === 2 || !isFeedback" style="text-align: left"
                placeholderStyle="font-size: 28rpx;color: #CDCED1;text-align: left;"></textarea>

              <view style="text-align: left" v-if="feedbackStatus === 2">{{
                extendObj.feedbackContent || "-"
              }}</view>
            </div>
          </view>
        </scroll-view>

        <view class="bottomBtnBox">
          <view class="bottomBtn" v-if="extendObj.errorStatus === 0 && isManager" @click="handleGetUpdate">确定</view>

          <button v-if="extendObj.errorStatus === 1 && isFeedback" class="bottomBtn" @click="handleGetUpdate">
            确定
          </button>
        </view>
      </view>
    </uniPopup>

    <!-- 修改指派人的弹出框 -->
    <uniPopup ref="changePersonPopup" type="bottom" showIndex="1" :show="showChangePopup"
      @hidePopup="handleCloseChangePopup">
      <view class="changePersonPopupBox">
        <view class="changePersonContent">
          <view class="changePersonContentBox">
            <view class="itemContent">
              <view class="title">更换异常处理人<text style="color: red">*</text></view>

              <view class="anwersList">
                <view class="anwersItem" v-for="(item, index) in selectPersonList" :key="index"
                  @click="handleSelectPerson(item)">
                  <view :class="item.isChecked ? 'anwers selectAnwersItem' : 'anwers'">
                    {{ item.STAFF_NAME || "" }}</view>
                </view>
              </view>
            </view>
          </view>

          <view class="bottomBtnBox">
            <view class="bottomBtn" @click="handleChangePersonConfirm">确定</view>
          </view>
        </view>
      </view>
    </uniPopup>

    <view v-if="false">
      <div class="pageHeader">
        <div class="hederContent">
          <img :src="user.Membership_Headimage" alt="" />
          <div>
            <p>{{ detailObj.userName || "" }}</p>
            <p class="fs12">巡查人员</p>
          </div>
        </div>
      </div>

      <div class="addressBox">
        <div class="contentBox">
          <image src="/static/images/publicity/dingwei.png" mode="aspectFit" class="addressIcon"></image>
          <div>
            <p class="xuncha address">{{ detailObj.placeName || "-" }}</p>
            <div>
              <span>巡查时间：</span><span>{{
                detailObj.createdAt
                  ? $moment(detailObj.createdAt).format("YYYY-MM-DD HH:mm:ss")
                  : "-"
              }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="formBox">
        <ul>
          <li>
            <span :class="inputfocus ? 'circle' : 'circle'"></span>
            <div class="examineContent">
              <div class="titleBox">
                <i :class="inputfocus ? 'img-zds activezds' : 'img-zds'"></i>
                <div :class="inputfocus ? 'titleTextActive' : 'titleText'" style="display: flex">
                  <i style="color: red; margin-right: 5px">*</i>巡查内容
                </div>
              </div>

              <div class="inputBox">
                <textarea auto-height v-model="uploadResult" placeholder="请输入巡查内容" disabled></textarea>
              </div>

              <div class="tagList" v-for="(tags, i) in tagList" :key="i">
                <div class="tagName">
                  <span style="display: inline-block; max-width: calc(100% - 10rpx)">
                    {{ tags.question.title || "" }}
                  </span>
                  <span v-if="tags.isRequired" style="color: red">*</span>
                </div>

                <div class="tagsBox">
                  <div v-for="(tag, s) in tags.choiceResponse" :key="s" class="tagUnit active">
                    {{ tag }}
                  </div>
                </div>
                <!-- <div class="tagsBox">
                <div
                  v-for="(tag, s) in tags.question.options"
                  :key="s"
                  @tap="selectTag(tag, tags.question)"
                  :class="tag.ischecked ? 'tagUnit active ' : 'tagUnit'"
                >
                  {{ tag.text }}
                </div>
              </div> -->
              </div>
            </div>
          </li>

          <li>
            <span :class="imgfocus ? 'circle' : 'circle'"></span>
            <div class="examineContent">
              <div class="titleBox">
                <i :class="imgfocus
                  ? 'img-upload activeupload'
                  : 'img-upload activeupload'
                  "></i>
                <div style="display: flex" :class="imgfocus ? 'titleTextActive' : 'titleTextActive'">
                  <i style="color: red; margin-right: 5px">*</i>现场图片
                </div>
              </div>
              <div class="uploadBox">
                <div class="uploadList" v-for="(item, index) in imgsList" :key="index">
                  <image :src="item" @click="showImg2(index, imgsList)" mode="aspectFill" />
                </div>
              </div>
            </div>
          </li>

          <li>
            <span :class="radiofocus
              ? 'circle circleActive circle-last'
              : 'circle circle-last'
              ">
            </span>
            <div class="examineContent">
              <radio-group style="display: flex">
                <label class="uni-list-cell" v-for="(item, index) in options" :key="item.value">
                  <view>
                    <radio :value="item.value" color="#409eff" :checked="index === current"
                      style="transform: scale(0.8)" :disabled="true" />
                  </view>
                  <view>{{ item.name }}</view>
                </label>
              </radio-group>
            </div>
          </li>
        </ul>

        <view v-if="pageType === 'error' && extendObj.errorStatus >= 0">
          <ul>
            <li>
              <span class="circle"> </span>
              <div class="examineContent">
                <div class="titleBox">
                  <div class="titleTextActive" style="display: flex">
                    <i style="color: red; margin-right: 5px">*</i>异常处理人
                  </div>
                </div>

                <div class="inputBox" style="margin-top: 12rpx">
                  <picker v-if="extendObj.errorStatus === 0" :value="selectPersonIndex" :range="selectPersonList"
                    @change="handleChangePerson" range-key="STAFF_NAME">
                    {{
                      selectPersonIndex === -1
                        ? "--请选择处理人--"
                        : selectPersonList[selectPersonIndex].STAFF_NAME
                    }}
                  </picker>
                  <view v-else>{{ showPersonName || "" }}</view>
                </div>
              </div>
            </li>
            <li>
              <span :class="inputfocus ? 'circle' : 'circle'"></span>
              <div class="examineContent">
                <div class="titleBox">
                  <i class="img-zds"></i>
                  <div :class="inputfocus ? 'titleTextActive' : 'titleText'" style="display: flex">
                    <i style="color: red; margin-right: 5px">*</i>整改意见
                  </div>
                </div>

                <div class="inputBox">
                  <textarea auto-height v-model="suggestion" placeholder="请输入整改意见"
                    :disabled="extendObj.errorStatus !== 0"></textarea>
                </div>
              </div>
            </li>
          </ul>

          <button v-if="extendObj.errorStatus === 0" class="btn" @click="handleGetUpdate">
            提交
          </button>
        </view>

        <view v-if="pageType === 'error' && extendObj.errorStatus >= 1">
          <ul>
            <li>
              <span :class="imgfocus ? 'circle' : 'circle'"></span>
              <div class="examineContent">
                <div class="titleBox">
                  <i :class="imgfocus
                    ? 'img-upload activeupload'
                    : 'img-upload activeupload'
                    "></i>
                  <div style="display: flex" :class="imgfocus ? 'titleTextActive' : 'titleTextActive'">
                    <i style="color: red; margin-right: 5px">*</i>反馈图片
                  </div>
                </div>
                <div class="uploadBox">
                  <div class="uploadList" v-for="(item, index) in feedbackImgList" :key="index">
                    <span v-if="extendObj.errorStatus === 1" class="upload-file-remove"
                      @click.stop="deleteImgFunc(item, index)">×</span>
                    <image :src="item" @click="showImg2(index, feedbackImgList)" mode="aspectFill" />
                  </div>

                  <div class="uploadAdd" @click="submitImg" v-if="extendObj.errorStatus === 1">
                    <div class="upload-file-add-container">
                      <span class="walk-manage-plus">+</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>

            <li>
              <span :class="inputfocus ? 'circle' : 'circle'"></span>
              <div class="examineContent">
                <div class="titleBox">
                  <i :class="inputfocus ? 'img-zds activezds' : 'img-zds'"></i>
                  <div :class="inputfocus ? 'titleTextActive' : 'titleText'" style="display: flex">
                    <i style="color: red; margin-right: 5px">*</i>反馈内容
                  </div>
                </div>

                <div class="inputBox">
                  <textarea auto-height v-model="feedbackContent" placeholder="请输入整改意见"
                    :disabled="extendObj.errorStatus === 2"></textarea>
                </div>
              </div>
            </li>

            <button v-if="extendObj.errorStatus === 1" class="btn" @click="handleGetUpdate">
              提交
            </button>
          </ul>
        </view>
      </div>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import uniPopup from "@/components/uni-popup";
export default {
  data() {
    let nowTime = this.$util.cutDate(new Date(), "hh:mm:ss");
    return {
      now_time: nowTime,
      inputfocus: true, // 是否聚焦
      uploadResult: "", // 巡查内容
      tagList: [], // 当前显示的巡查内容
      imgfocus: false, // 是否聚焦图片
      radiofocus: false, // 类型的聚焦
      options: [
        {
          name: "情况正常",
          value: "0",
        },
        {
          name: "急需处理",
          value: "1",
        },
      ],
      value: "0",
      current: 0,
      selectAnwersList: [], // 选择的答案列表
      selectAnwersObj: {}, // 已经选择答案的实际对象格式  问题的id: [选项1，选项2]
      detailObj: {}, //点位详情
      imgsList: [],
      submit: false, // 是否提交成功了
      requiredList: [], // 必填项的数组
      pageType: "", // 页面类型
      extendObj: {},
      selectPerson: "--请选择处理人--",
      selectPersonIndex: -1,
      selectPersonList: [],
      suggestion: "", // 整改意见
      feedbackContent: "", // 反馈内容
      feedbackImgList: [], // 反馈图片
      showPersonName: "", // 当状态过了 直接显示 名称

      requestionRadioList: [], // 单选题
      requestionCheckedList: [], // 多选题
      isShowPopup: false,
      selectPersonObj: {}, // 当前选择的派遣人
      feedbackStatus: 0, // 回显的状态 1 为 管理员选整改的人 2 为反馈
      isManager: false, // 判断是否出现指派按钮
      isFeedback: false, // 判断是否为反馈人

      canChangePerson: false,// 判断是否可以更换指派人
      showChangePopup: false
    };
  },
  components: {
    uniPopup,
  },
  computed: {
    ...mapGetters({
      user: "getUser",
    }),
  },
  onLoad(query) {
    console.log("query", query);
    if (query.pageType) {
      this.pageType = query.pageType;
    }
    console.log("this.pageType", this.pageType);
    console.log("user", this.user);

    if (query.id) {
      this.handleGetDetail(query.id);
    }
  },
  methods: {
    // 更换指派人的实际方法
    async handleChangePersonConfirm() {
      let newPerson = {
        ...this.selectPersonObj,
        personIsChecked: this.extendObj.personIsChecked
      }
      let newExtendObj = JSON.parse(JSON.stringify(this.extendObj))
      newExtendObj.person = newPerson

      console.log('newExtendObj', newExtendObj);


      const data = await this.$request.$webJavaPOST(
        `questionnaire-responses/update`,
        {
          id: this.detailObj.id,
          extend: JSON.stringify(newExtendObj)
        }
      )

      if (data.Result_Code === 100) {
        uni.showToast({
          title: "修改成功！",
          icon: "success",
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          });
        }, 1000);
      } else {
        uni.showToast({
          title: data.Result_Desc,
          icon: "none",
        });
      }
    },
    // 回显内容
    handleShowPopup(value) {
      this.isShowPopup = true;
      this.feedbackStatus = value;
      // 里面的 suggestTime  就是上一次选择处理人的时间 
      // 选择判断一下 当前时间 跟 这个时间 是否在天数上已经不是同一天了 那么就可以重新选择人 
      let nowTime = this.$util.cutDate(new Date(), "YYYY-MM-DD")
      // let nowTime = '2025-04-23'
      let suggestTime = this.$util.cutDate(this.extendObj.suggestTime, "YYYY-MM-DD")

      // 因为上面都转成了 年月日格式 当对不上的时候 就说明天数不是同一天 即第二天或以后 那么这个时候就可以显示更换指派人
      if (nowTime !== suggestTime && this.extendObj.errorStatus === 1) {
        this.canChangePerson = true
      }
      this.$forceUpdate();
    },
    // 新的选指派人
    handleSelectPerson(obj) {
      // 如果更换指派人的悬浮框出现了 那么就是更换指派人 不然就是第一次指派人
      console.log("obj", obj);
      let list = JSON.parse(JSON.stringify(this.selectPersonList));
      let personObj = {};
      list.forEach((item) => {
        if (item.STAFF_ID === obj.STAFF_ID) {
          item.isChecked = true;
          personObj = item;
        } else {
          item.isChecked = false;
        }
      });
      this.selectPersonList = list;
      this.selectPersonObj = personObj;
      console.log("this.selectPersonList", this.selectPersonList);
    },
    // 显示更换指派人的悬浮框
    async handleOpenChangePopup() {
      // 被指派的人
      const req = {
        SERVERPART_ID: this.detailObj.serverPartId,
        PROVINCE_CODE: this.user.ProvinceCode,
      };

      const data = await this.$request.$getMp("GetDealerList", req);
      console.log("handleGetPersonList", data);

      const list = data.Data.List
      console.log("listlistlistlist", list);
      this.selectPersonList = list;

      this.showChangePopup = true;
      this.$forceUpdate();
    },
    // 关闭更换指派人的悬浮框
    handleCloseChangePopup() {
      this.showChangePopup = false;
    },
    // 指派
    handleAssign() {
      // this.isShowPopup = true;
      this.handleGetUpdate()
    },
    // 关闭
    handleClosePopup() {
      this.isShowPopup = false;
      this.feedbackStatus = 0;
    },
    // 删除图片
    deleteImgFunc(item, index) {
      this.feedbackImgList.splice(index, 1);
    },
    // 新的 在碗面的选择异常处理人
    handleNewChangePerson(e) {
      console.log('eeeee', e);
      let index = Number(e.detail.value);
      this.selectPersonIndex = index;
      console.log('this.selectPersonIndexthis.selectPersonIndex', this.selectPersonIndex);

      let list = JSON.parse(JSON.stringify(this.selectPersonList));
      let personObj = list[this.selectPersonIndex]

      this.selectPersonObj = personObj;
    },
    // 修改选择的异常处理人
    handleChangePerson(e) {
      let index = Number(e.detail.value);
      this.selectPersonIndex = index;
    },
    showImg2(index, imgList) {
      uni.previewImage({
        urls: imgList,
        current: index,
        loop: true,
        indicator: "number",
      });
    },
    // 删除答案里面的图片
    deleteImgFuncResponse(item, index) {
      console.log("item", item);
      item = item.splice(index, 1);
      this.$forceUpdate();
    },
    async handleGetDetail(id) {
      // const data = await this.$request.$webNodeGet(
      //   `questionnaire-responses/${id}`
      // );
      const data = await this.$request.$webJavaGet(
        'questionnaire-responses/get',
        {
          id: id
        }
      );


      let obj = data.Result_Data;
      this.detailObj = obj;
      console.log("this.detailObj", this.detailObj);

      // requestionRadioList
      // requestionCheckedList

      // 这里是问题列表 我们稍微筛选一下
      // 单选 必填
      let radioRequiredList = [];
      let radioList = [];
      // 多选必填
      let checkRequiredList = [];
      let checkList = [];

      let requestionList = obj.questionResponses;
      console.log("requestionList", requestionList);

      if (requestionList && requestionList.length > 0) {
        requestionList.forEach((item) => {
          // type 是单选还是多选 questionType 是题目类型 暂时只有选择题
          let [type, questionType] = item.question.type.split("_");
          item.isChecked = item.choiceResponse;
          if (item.question.options && item.question.options.length > 0) {
            item.question.options.forEach((subItem) => {
              if (item.choiceResponse.indexOf(subItem.text) !== -1) {
                subItem.isChecked = true;
              }
            });
          }
          if (!(item.score > 0)) {
            if (type === "radio") {
              if (item.isRequired) {
                radioRequiredList.push(item);
              } else {
                radioList.push(item);
              }
            } else if (type === "checked") {
              if (item.isRequired) {
                checkRequiredList.push(item);
              } else {
                checkList.push(item);
              }
            }
          }
        });
      }
      // 全部的单选题
      let requestionRadioList = radioRequiredList.concat(radioList);
      // 全部的多选题
      let requestionCheckedList = checkRequiredList.concat(checkList);

      this.requestionRadioList = requestionRadioList;
      this.requestionCheckedList = requestionCheckedList;

      console.log("this.requestionRadioList", this.requestionRadioList);
      console.log("this.requestionCheckedList", this.requestionCheckedList);

      // this.tagList = obj.questionnaireTemplateQuestions;

      // this.tagList = obj.questionResponses;
      console.log("this.tagList", this.tagList);

      let extend = {
        questionnaireResponsesId: obj.questionnaireResponsesId,
        uploadResult: obj.uploadResult,
        situation: obj.situation,
        errorStatus: obj.errorStatus,

        suggestion: obj.suggestion,
        suggestTime: obj.suggestTime,

        suggestPersonId: obj.suggestPersonId,
        suggestPersonName: obj.suggestPersonName,
        suggestMemberShipId: obj.suggestMemberShipId,
        suggestMemberShipName: obj.suggestMemberShipName,


        personMemberShipId: obj.personMemberShipId,
        personMemberShipName: obj.personMemberShipName,
        personIsChecked: obj.personIsChecked,
        personId: obj.personId,
        personName: obj.personName,

        imgsList: obj.imgsList,
        feedbackContent: obj.feedbackContent,
        feedbackTime: obj.feedbackTime,
        feedbackImgList: obj.feedbackImgList,
        newFeedbackImgList: obj.newFeedbackImgList
      }

      this.uploadResult = extend.uploadResult;
      this.current = extend.situation;
      this.extendObj = extend;
      this.imgsList = extend.imgsList;
      if (extend.situation === 1) {
        console.log("this.extendObj", this.extendObj);
        if (extend.errorStatus === 1) {
          this.suggestion = {
            STAFF_NAME: extend.personName,
            STAFF_ID: extend.personId,
            MEMBERSHIP_NAME: extend.personMemberShipName,
            MEMBERSHIP_ID: extend.personMemberShipId,
          };
          this.showPersonName = extend.personName;
        }
        if (extend.errorStatus > 1) {
          this.feedbackContent = extend.feedbackContent;
          this.feedbackImgList = extend.feedbackImgList;
        }

        if (
          extend.personName &&
          extend.personId === this.user.UserId
        ) {
          // 判断是不是反馈人
          this.isFeedback = true;
        }

        if (extend.errorStatus === 2) {
          // 赋值上反馈的图片
          if (requestionRadioList && requestionRadioList.length > 0) {
            requestionRadioList.forEach((item) => {
              if (extend.newFeedbackImgList[item.id]) {
                item.feedbackImg = extend.newFeedbackImgList[item.id]
              }
            })
          }
          this.requestionRadioList = requestionRadioList;
        }
      }


      // if (obj.extend) {
      //   let extend = JSON.parse(obj.extend);
      //   console.log("extendObj", extend);

      //   this.uploadResult = extend.uploadResult;
      //   this.imgsList = extend.imgsList;
      //   this.current = extend.situation;
      //   this.extendObj = extend;
      //   if (extend.errorStatus === 1) {
      //     this.suggestion = extend.suggestion;
      //     this.showPersonName = extend.person.MEMBERSHIP_NAME;
      //   }
      //   if (extend.errorStatus > 1) {
      //     this.feedbackContent = extend.feedbackContent;
      //     this.feedbackImgList = extend.feedbackImgList;
      //   }

      //   if (
      //     extend.person &&
      //     extend.person.MEMBERSHIP_ID === this.user.Membership_Id
      //   ) {
      //     // 判断是不是反馈人
      //     this.isFeedback = true;
      //   }
      // }
      console.log('this.isFeedback', this.isFeedback);
      // 获取处理人列表
      if (this.extendObj.errorStatus === 0) {
        this.handleGetPersonList();
      }
    },
    async handleGetPersonList() {
      // 被指派的人
      const req = {
        SERVERPART_ID: this.detailObj.serverPartId,
        PROVINCE_CODE: this.user.ProvinceCode,
      };
      console.log("req", req);

      const data = await this.$request.$getMp("GetDealerList", req);
      console.log("handleGetPersonList", data);

      // 指派他们的人
      const managerReq = {
        SERVERPART_ID: this.detailObj.serverPartId,
        PROVINCE_CODE: this.user.ProvinceCode,
        module_Guid: "ce6f442c-fbaa-4512-9754-44b563457dda",
      };
      console.log("req", req);

      const managerData = await this.$request.$getMp(
        "GetDealerList",
        managerReq
      );
      console.log("req", req);
      let managerList = managerData.Data.List;
      let managerIdList = [];
      if (managerList && managerList.length > 0) {
        managerList.forEach((item) => {
          managerIdList.push(item.MEMBERSHIP_ID);
        });
      }

      let list = data.Data.List;
      console.log("managerList", managerList);
      if (managerIdList.indexOf(this.user.Membership_Id) !== -1) {
        this.isManager = true;
      } else {
        this.isManager = false;
      }

      console.log('this.isManager', this.isManager);


      // isManager
      this.selectPersonList = list;
    },
    async handleGetUpdate() {
      console.log('this.extendObj', this.extendObj);
      console.log('this.selectPersonObj', this.selectPersonObj);
      console.log('this.suggestion', this.suggestion);
      console.log('this.detailObj', this.detailObj);

      let req = {};
      if (this.extendObj.errorStatus === 0) {
        if (!this.selectPersonObj.MEMBERSHIP_ID) {
          uni.showToast({
            title: "请选择处理人！",
            icon: "none",
          });
          return;
        }
        if (!this.suggestion) {
          uni.showToast({
            title: "请输入整改意见！",
            icon: "none",
          });
          return;
        }
        // let personObj = this.selectPersonList[this.selectPersonIndex];
        let personObj = this.selectPersonObj;
        console.log("personObj", personObj);
        req = {
          ...this.extendObj,
          questionnaireResponsesId: this.detailObj.id,
          // person: personObj,
          errorStatus: 1,
          suggestion: this.suggestion,
          suggestTime: this.$util.cutDate(new Date(), "YYYY-MM-DD hh:mm:ss"), // 选处理人的时间
          personMemberShipId: this.user.Membership_Id,
          personMemberShipName: this.user.Membership_Name,
          personId: this.user.UserId,
          personName: this.user.UserName,
          suggestMemberShipId: this.detailObj.suggestMemberShipId || personObj.MEMBERSHIP_ID,
          suggestMemberShipName: this.detailObj.suggestMemberShipName || personObj.MEMBERSHIP_NAME,
          suggestPersonId: this.detailObj.suggestPersonId || personObj.STAFF_ID,
          suggestPersonName: this.detailObj.suggestPersonName || personObj.STAFF_NAME,

          // suggestPerson: {
          //   STAFF_NAME: this.user.UserName,
          //   STAFF_ID: this.user.UserId,
          //   MEMBERSHIP_NAME: this.user.Membership_Name,
          //   MEMBERSHIP_ID: this.user.Membership_Id,
          // },
        };
      } else if (this.extendObj.errorStatus === 1) {
        console.log("this.detailObj321321312", this.detailObj);
        // 判断是不是全部的反馈照片都传了
        let haveAllFeedbackImg = true;
        let feedBackTitle = "";
        // 为了兼容老的数据 这个数组 只传反馈的照片
        let resImgList = [];
        // 这个是新的 要带上key 回显的时候好匹配
        let newResImgList = {};
        let list = this.detailObj.questionResponses;

        console.log('listlistlistlistlistlist', list);


        if (list && list.length > 0) {
          list.forEach((item) => {
            if (!(item.score > 0)) {
              if (item.feedbackImg && item.feedbackImg.length > 0) {
                item.feedbackImg.forEach((subItem) => {
                  resImgList.push({
                    keyName: item.id,
                    imageUrl: subItem
                  });
                });
                newResImgList[item.id] = item.feedbackImg;
              } else {
                haveAllFeedbackImg = false;
                if (feedBackTitle) {
                  feedBackTitle += `、${item.isChecked[0]}`;
                } else {
                  feedBackTitle = `${item.isChecked[0]}`;
                }
              }
            }
          });
        }
        if (!haveAllFeedbackImg) {
          uni.showToast({
            title: `${feedBackTitle}缺少反馈图片！`,
            icon: "none",
          });
          return;
        }

        console.log("resImgListresImgListresImgList", resImgList);
        console.log(
          "newResImgListnewResImgListnewResImgListnewResImgList",
          newResImgList
        );

        // if (!(this.feedbackImgList && this.feedbackImgList.length > 0)) {
        //   uni.showToast({
        //     title: "请选择上传反馈图片！",
        //     icon: "none",
        //   });
        //   return;
        // }

        if (!this.feedbackContent) {
          uni.showToast({
            title: "请输入反馈内容！",
            icon: "none",
          });
          return;
        }

        req = {
          ...this.extendObj,
          // feedbackImgList: this.feedbackImgList,
          feedbackImgList: resImgList,
          newFeedbackImgList: newResImgList,
          feedbackContent: this.feedbackContent,
          feedbackTime: this.$util.cutDate(new Date(), "YYYY-MM-DD hh:mm:ss"), // 反馈时间
          errorStatus: 2,
        };
      }

      // const data = await this.$request.$webNodePOST(
      //   `questionnaire-responses/${this.detailObj.id}/extend`,
      //   { extend: JSON.stringify(req) }
      // );
      // const data = await this.$request.$webJavaPOST(
      //   `questionnaire-responses/update`,
      //   {
      //     ...req
      //     // id: this.detailObj.id,
      //     // extend: JSON.stringify(req)
      //   }
      // ) 
      console.log('req', req);
      // return
      const data = await this.$request.$webJavaPOST(
        `questionnaire-responses/extend/update`,
        {
          ...req,
          questionnaireResponsesId: this.detailObj.id,
        }
      )


      console.log("data", data);
      if (data.Result_Code === 100) {
        uni.showToast({
          title: "提交成功！",
          icon: "success",
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          });
        }, 1000);
      } else {
        uni.showToast({
          title: data.Result_Desc,
          icon: "none",
        });
      }
    },
    submitImg(e, obj, type) {
      this.imgfocus = true;
      let _this = this;
      uni.chooseImage({
        count: 9, //默认9
        sizeType: ["original", "compressed"],
        sourceType: ["camera"],
        // "album",
        success: function (rs) {
          console.log("rs", rs);

          let quality = 100;
          if (rs.tempFiles[0].size > 1024 * 200) {
            quality = ((1024 * 200) / rs.tempFiles[0].size) * 100;
          }
          if (quality < 100 && rs.tempFiles[0].path.indexOf(".jpg") > -1) {
            uni.compressImage({
              src: rs.tempFilePaths[0], // 图片路径
              quality: quality, // 压缩质量
              success(res) {
                console.log("res", res);
                let data = {};
                if (res.data) {
                  data = JSON.parse(res.data);
                }
                console.log("data", data);
                uni.showLoading({
                  title: "图片上传中...",
                });
                uni.uploadFile({
                  // url: "https://user.eshangtech.com/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=MBWA",
                  // url: "https://es.robot-z.cn/oss/upload",
                  url: "https://es.eshangtech.com/oss/upload",
                  filePath: res.tempFilePath,
                  header: {
                    "Content-Type": "multipart/form-data",
                  },
                  formData: {},
                  fileType: "image",
                  name: "file",
                  success(res) {
                    console.log("res", res);
                    let data = {};
                    if (res.data) {
                      data = JSON.parse(res.data);
                    }
                    console.log("data", data);
                    uni.hideLoading();
                    if (type === "feedback") {
                      if (obj.feedbackImg && obj.feedbackImg.length > 0) {
                        obj.feedbackImg.push(
                          `https://es.eshangtech.com/${data.data.path}`
                        );
                      } else {
                        obj.feedbackImg = [
                          `https://es.eshangtech.com/${data.data.path}`,
                        ];
                      }

                      // if (obj.feedbackImg && obj.feedbackImg.length > 0) {
                      //   obj.feedbackImg.push(
                      //     `https://es.eshangtech.com/${data.data.path}`
                      //   );
                      // } else {
                      //   obj.feedbackImg = [
                      //     `https://es.eshangtech.com/${data.data.path}`,
                      //   ];
                      // }
                      _this.$forceUpdate();
                      console.log("objobjobjobj21321", obj);
                    } else {
                      _this.feedbackImgList.push(
                        `https://es.eshangtech.com/${data.data.path}`
                      );
                    }
                  },
                  fail(error) {
                    console.log("error", error);
                    _this.noPost = true;
                  },
                });
              },
              fail(error) {
                _this.noPost = true;
              },
            });
          } else {
            uni.showLoading({
              title: "图片上传中...",
              // mask: true
            });
            uni.uploadFile({
              // url: "https://user.eshangtech.com/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=MBWA",
              // url: "https://es.robot-z.cn/oss/upload",
              url: "https://es.eshangtech.com/oss/upload",
              filePath: rs.tempFilePaths[0],
              fileType: "image",
              header: {
                "Content-Type": "multipart/form-data",
              },
              name: "file",
              success(res) {
                console.log("res", res);
                let data = {};
                if (res.data) {
                  data = JSON.parse(res.data);
                }
                console.log("data", data);
                uni.hideLoading();
                if (type === "feedback") {
                  if (obj.feedbackImg && obj.feedbackImg.length > 0) {
                    obj.feedbackImg.push(
                      `https://es.eshangtech.com/${data.data.path}`
                    );
                  } else {
                    obj.feedbackImg = [
                      `https://es.eshangtech.com/${data.data.path}`,
                    ];
                  }
                  // if (obj.feedbackImg && obj.feedbackImg.length > 0) {
                  //   obj.feedbackImg.push(
                  //     `https://es.eshangtech.com/${data.data.path}`
                  //   );
                  // } else {
                  //   obj.feedbackImg = [
                  //     `https://es.eshangtech.com/${data.data.path}`,
                  //   ];
                  // }
                  console.log("objobjobjobj21321", obj);
                } else {
                  _this.feedbackImgList.push(
                    `https://es.eshangtech.com/${data.data.path}`
                  );
                }
                _this.$forceUpdate();
                // path;
              },
              fail(error) {
                console.log("error", error);
                _this.noPost = true;
              },
            });
          }
        },
        fail: function (err) { },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom);

  .pageScroll {
    width: 100%;
    // height: calc(100% - 120rpx); 
    background-color: #f6f7f9;
    box-sizing: border-box;
    padding-bottom: 32rpx;

    .topContent {
      width: 100%;
      box-sizing: border-box;
      padding: 16rpx 32rpx 0;
      background: linear-gradient(#e6eefd 0%, #f6f7f9 100%);

      .placeBox {
        width: 100%;
        box-sizing: border-box;
        padding: 24rpx;
        border-radius: 16rpx;
        background: #fff;
        background-image: url("https://eshangtech.com/minTestImg/errorBg.png");
        background-size: 100% 100%;
        // background-position: 2rpx 2rpx;
        background-repeat: no-repeat;

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

          .placeLeft {
            display: flex;
            align-items: center;

            .itemIcon {
              width: 24rpx;
              height: 24rpx;
              margin-right: 10rpx;
            }

            .placeName {
              font-family: "PingFangSC";
              font-weight: 400;
              font-size: 30rpx;
              color: #010b18;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
            }
          }

          .statusBox {
            margin-left: 12rpx;
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 24rpx;
            color: #139942;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
            padding: 2rpx 8rpx;
            border-radius: 4rpx;
          }
        }

        .placeBoxBottom {
          width: 100%;
          border-radius: 16rpx;
          box-sizing: border-box;
          // padding: 24rpx;
          margin-top: 20rpx;

          .topBox {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 28rpx;
            color: #676d74;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }

          .progressContent {
            width: 100%;
            margin-top: 24rpx;

            .progressItem {
              width: 100%;
              display: flex;
              align-items: center;

              .itemLeft {
                width: 80rpx;
                height: 80rpx;
                margin-right: 16rpx;
                position: relative;

                .img {
                  width: 80rpx;
                  height: 80rpx;
                  border-radius: 50%;
                }

                .successIcon {
                  width: 32rpx;
                  height: 32rpx;
                  position: absolute;
                  right: 0;
                  bottom: 4rpx;
                }
              }

              .itemRight {
                width: 100%;

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

                  .name {
                    font-family: "PingFangSC";
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #010b18;
                    line-height: 40rpx;
                    text-align: left;
                    font-style: normal;
                  }

                  .time {
                    font-family: "PingFangSC";
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #676d74;
                    line-height: 32rpx;
                    text-align: left;
                    font-style: normal;
                  }
                }

                .itemBottom {
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-top: 8rpx;

                  .itemBottonLeft {
                    font-family: "PingFangSC";
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #676d74;
                    line-height: 32rpx;
                    text-align: left;
                    font-style: normal;
                    margin-top: 4rpx;
                  }

                  .itemBottonRight {
                    font-family: "PingFangSC";
                    font-weight: 500;
                    font-size: 22rpx;
                    color: #425EA4;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                    padding: 0 14rpx;
                    background-color: #D9E4FF;
                    border-radius: 8rpx;
                  }
                }
              }
            }
          }
        }



        .userBox {
          width: 100%;
          margin-top: 20rpx;

          .userTop {
            .userName {
              font-family: "PingFangSC";
              font-weight: 400;
              font-size: 30rpx;
              color: #010b18;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
              margin-right: 12rpx;
            }

            .labelBox {
              font-family: "PingFangSC";
              font-weight: 400;
              font-size: 22rpx;
              color: #676d74;
              line-height: 32rpx;
              text-align: left;
              font-style: normal;
              padding: 2rpx 8rpx;
              background: #f0f2f7;
              border-radius: 4rpx;
            }
          }

          .timeBox {
            display: flex;
            align-items: center;
            margin-top: 8rpx;

            .timeIcon {
              width: 32rpx;
              height: 32rpx;
              margin-right: 4rpx;
            }

            .nowTime {
              font-family: "PingFangSC";
              font-weight: 400;
              font-size: 24rpx;
              color: #676d74;
              line-height: 32rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }
      }

      .assignedPerson {
        width: 100%;
        margin-top: 24rpx;
        background: #fff;
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 24rpx;

        .contentTop {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 28rpx;
          color: #676d74;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;

          .required {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 24rpx;
            color: #ff0000;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            margin-left: 4rpx;
          }
        }

        .inputBox {
          width: 100%;
          margin-top: 8rpx;
        }

        .radioSelectPersonBox {
          .radioGroup {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            margin-top: 30rpx;

            .choiceItem {
              width: 33%;
              display: flex;
              align-items: flex-start;
              padding-right: 0;
            }
          }
        }
      }

      .inspectionContent {
        width: 100%;
        margin-top: 24rpx;
        background: #fff;
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 24rpx;

        .contentTop {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 28rpx;
          color: #676d74;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;

          .required {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 24rpx;
            color: #ff0000;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            margin-left: 4rpx;
          }
        }

        .contentBoxResult {
          width: 100%;
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 24rpx;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }

        .uploadImgBox {
          width: 100%;
          margin-top: 16rpx;
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .submitImgBox {
            width: 148rpx;
            height: 148rpx;
            background: #f7f7f8;
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16rpx;

            .addIcon {
              width: 48rpx;
              height: 48rpx;
              color: #b4b5ba;
            }
          }

          .imgItem {
            width: 148rpx;
            height: 148rpx;
            margin-right: 16rpx;
            position: relative;
            border-radius: 8rpx;
            overflow: hidden;

            image {
              width: 100%;
              height: 100%;
            }

            .closeBox {
              width: 32rpx;
              height: 32rpx;
              border-radius: 0rpx 8rpx 0rpx 8rpx;
              background: rgba(6, 10, 25, 0.5);
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              top: 0;
              right: 0;

              .closeIcon {
                width: 24rpx;
                height: 24rpx;
              }
            }
          }
        }
      }
    }

    .qusetionBox {
      width: 100%;
      margin-top: 24rpx;
      box-sizing: border-box;
      padding: 0 32rpx;

      .questionItem {
        width: 100%;
        background: #fff;
        box-sizing: border-box;
        padding: 24rpx;
        border-radius: 16rpx;
        margin-bottom: 24rpx;

        .quetionTitle {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 28rpx;
          color: #676d74;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;

          .required {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 24rpx;
            color: #ff0000;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            margin-left: 4rpx;
          }
        }

        .radioGroup {
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .radioItem {
            display: flex;
            align-items: center;
            padding: 8rpx;
          }
        }

        .checkedBottom {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          margin-top: 16rpx;

          .bottomItem {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 24rpx;
            color: #676d74;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            padding: 8rpx 16rpx;
            border-radius: 6rpx;
            // background: #f6f6f7;
            margin-right: 16rpx;
            margin-bottom: 16rpx;

            .closeIcon {
              width: 24rpx;
              height: 24rpx;
              margin-left: 16rpx;
            }
          }
        }

        .beforeRectification {
          font-family: "PingFangSC";
          font-weight: 500;
          font-size: 24rpx;
          line-height: 30rpx;
          color: #FF0004;
          text-align: center;
          font-style: normal;
          padding: 2rpx 4rpx;
          background-color: #FFD9D9;
          border-radius: 8rpx;
          display: inline-block;
          margin-bottom: 10rpx;
        }

        .imgItem {
          width: 148rpx;
          height: 148rpx;
          margin-right: 16rpx;
          position: relative;
          border-radius: 8rpx;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
          }

          .closeBox {
            width: 32rpx;
            height: 32rpx;
            border-radius: 0rpx 8rpx 0rpx 8rpx;
            background: rgba(6, 10, 25, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            right: 0;

            .closeIcon {
              width: 24rpx;
              height: 24rpx;
            }
          }
        }

        .afterRectification {
          font-family: "PingFangSC";
          font-weight: 500;
          font-size: 24rpx;
          line-height: 30rpx;
          color: #00AC4F;
          text-align: center;
          font-style: normal;
          padding: 2rpx 4rpx;
          background-color: #D9FFEB;
          border-radius: 8rpx;
          display: inline-block;
          margin-bottom: 10rpx;
        }

        .uploadImgBox {
          width: 100%;
          margin-top: 16rpx;
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .submitImgBox {
            width: 148rpx;
            height: 148rpx;
            background: #f7f7f8;
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16rpx;

            .addIcon {
              width: 48rpx;
              height: 48rpx;
              color: #b4b5ba;
            }
          }

          .imgItem {
            width: 148rpx;
            height: 148rpx;
            margin-right: 16rpx;
            position: relative;
            border-radius: 8rpx;
            overflow: hidden;

            image {
              width: 100%;
              height: 100%;
            }

            .closeBox {
              width: 32rpx;
              height: 32rpx;
              border-radius: 0rpx 8rpx 0rpx 8rpx;
              background: rgba(6, 10, 25, 0.5);
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              top: 0;
              right: 0;

              .closeIcon {
                width: 24rpx;
                height: 24rpx;
              }
            }
          }
        }

      }

      .requestionCheckedItem {
        width: 100%;
        box-sizing: border-box;
        padding: 24rpx;
        background: #ffffff;
        border-radius: 16rpx;
        margin-bottom: 24rpx;

        .checkedTop {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .topLeft {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 26rpx;
            color: #676d74;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;

            .required {
              font-family: "PingFangSC";
              font-weight: 400;
              font-size: 24rpx;
              color: #ff0000;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
              margin-left: 4rpx;
            }
          }

          .topRight {
            display: flex;
            align-items: center;

            .placeSelect {
              font-family: "PingFangSC";
              font-weight: 400;
              font-size: 30rpx;
              color: #d6d7da;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
            }

            .rightArrow {
              width: 32rpx;
              height: 32rpx;
              margin-left: 8rpx;
            }
          }
        }

        .checkedBottom {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          margin-top: 16rpx;

          .bottomItem {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 24rpx;
            color: #676d74;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            padding: 8rpx 16rpx;
            border-radius: 6rpx;
            background: #f6f6f7;
            margin-right: 16rpx;
            margin-bottom: 16rpx;

            .closeIcon {
              width: 24rpx;
              height: 24rpx;
              margin-left: 16rpx;
            }
          }
        }

        .imgItem {
          width: 148rpx;
          height: 148rpx;
          margin-right: 16rpx;
          position: relative;
          border-radius: 8rpx;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
          }

          .closeBox {
            width: 32rpx;
            height: 32rpx;
            border-radius: 0rpx 8rpx 0rpx 8rpx;
            background: rgba(6, 10, 25, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            right: 0;

            .closeIcon {
              width: 24rpx;
              height: 24rpx;
            }
          }
        }
      }
    }

    .otherBox {
      width: 100%;
      box-sizing: border-box;
      padding: 16rpx 32rpx 0;

      .questionItem {
        width: 100%;
        background: #fff;
        box-sizing: border-box;
        padding: 24rpx;
        border-radius: 16rpx;
        margin-bottom: 24rpx;

        .quetionTitle {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 28rpx;
          color: #676d74;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;

          .required {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 24rpx;
            color: #ff0000;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            margin-left: 4rpx;
          }
        }

        .radioGroup {
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .radioItem {
            display: flex;
            align-items: center;
            padding: 8rpx;
          }
        }
      }
    }

    .progressBox {
      width: 100%;
      margin-top: 24rpx;
      box-sizing: border-box;
      padding: 0 24rpx;

      .progress {
        width: 100%;
        background: #fff;
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 24rpx;

        .topBox {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 28rpx;
          color: #676d74;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }

        .progressContent {
          width: 100%;
          margin-top: 24rpx;

          .progressItem {
            width: 100%;
            display: flex;
            align-items: center;

            .itemLeft {
              width: 80rpx;
              height: 80rpx;
              margin-right: 16rpx;
              position: relative;

              .img {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
              }

              .successIcon {
                width: 32rpx;
                height: 32rpx;
                position: absolute;
                right: 0;
                bottom: 4rpx;
              }
            }

            .itemRight {
              width: 100%;

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

                .name {
                  font-family: "PingFangSC";
                  font-weight: 400;
                  font-size: 26rpx;
                  color: #010b18;
                  line-height: 40rpx;
                  text-align: left;
                  font-style: normal;
                }

                .time {
                  font-family: "PingFangSC";
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #676d74;
                  line-height: 32rpx;
                  text-align: left;
                  font-style: normal;
                }
              }

              .itemBottom {
                font-family: "PingFangSC";
                font-weight: 400;
                font-size: 24rpx;
                color: #676d74;
                line-height: 32rpx;
                text-align: left;
                font-style: normal;
                margin-top: 4rpx;
              }
            }
          }
        }
      }
    }
  }

  .bottomBtnBox {
    width: 100%;
    height: 120rpx;
    box-sizing: border-box;
    padding: 16rpx 40rpx;
    background: #fff;

    .bottomBtn {
      width: 100%;
      height: 100%;
      font-family: "PingFangSC";
      font-weight: 400;
      font-size: 32rpx;
      color: #ffffff;
      font-style: normal;
      background: #3b72ff;
      border-radius: 6rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .popupBox {
    width: 100%;
    height: 80vh;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
    border-radius: 24rpx 24rpx 0rpx 0rpx;

    .contentTop {
      width: 100%;
      height: 108rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx;
      box-sizing: border-box;

      .left,
      .right {
        width: 32rpx;
        height: 32rpx;

        .closeIcon {
          width: 32rpx;
          height: 32rpx;
        }
      }

      .center {
        font-family: "PingFangSC";
        font-weight: 400;
        font-size: 26rpx;
        color: #010b18;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }
    }

    .checkPopupContent {
      width: 100%;
      height: calc(100% - 100rpx - 108rpx);
      background: #fff;
      border-radius: 24rpx 24rpx 0rpx 0rpx;
      box-sizing: border-box;
      padding: 0 32rpx;

      .itemContent {
        width: 100%;
        margin-top: 16rpx;

        .title {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 30rpx;
          color: #010b18;
          line-height: 40rpx;
          text-align: justify;
          font-style: normal;
        }

        .anwersList {
          width: 100%;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          margin-top: 16rpx;

          .anwersItem {
            .anwers {
              min-width: calc((100% - 48rpx) / 3);
              background: #f6f6f7;
              border-radius: 6rpx;
              text-align: center;
              padding: 14rpx;
              margin-right: 16rpx;
              margin-bottom: 16rpx;
              font-family: "PingFangSC";
              font-weight: 400;
              font-size: 28rpx;
              color: #010b18;
              line-height: 40rpx;
              font-style: normal;
            }

            .selectAnwersItem {
              background: #e7eeff;
              color: #3b72ff;
            }
          }
        }

        .changePersonBox {
          width: 100%;
          margin-top: 16rpx;
          display: flex;
          align-items: center;
          justify-content: flex-start;

          .changePersonBtn {
            color: #F75031;
            background: #FEF0ED;
            padding: 2rpx 8rpx;
            border-radius: 8rpx;
          }
        }

        .descBox {
          width: 100%;
          background: #f6f6f7;
          border-radius: 6rpx;
          box-sizing: border-box;
          padding: 16rpx 24rpx;
          margin-top: 12rpx;
        }

        .uploadImgBox {
          width: 100%;
          margin-top: 16rpx;
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .submitImgBox {
            width: 148rpx;
            height: 148rpx;
            background: #f7f7f8;
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16rpx;

            .addIcon {
              width: 48rpx;
              height: 48rpx;
              color: #b4b5ba;
            }
          }

          .imgItem {
            width: 148rpx;
            height: 148rpx;
            margin-right: 16rpx;
            position: relative;
            border-radius: 8rpx;
            overflow: hidden;

            image {
              width: 100%;
              height: 100%;
            }

            .closeBox {
              width: 32rpx;
              height: 32rpx;
              border-radius: 0rpx 8rpx 0rpx 8rpx;
              background: rgba(6, 10, 25, 0.5);
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              top: 0;
              right: 0;

              .closeIcon {
                width: 24rpx;
                height: 24rpx;
              }
            }
          }
        }
      }

      .NewItemContent {
        margin-top: 24rpx;

        .newItem {
          margin-bottom: 16rpx;

          .feedbackTitle {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 30rpx;
            color: #010b18;
            line-height: 40rpx;
            text-align: justify;
            font-style: normal;
            margin-bottom: 16rpx;
          }

          .uploadImgBox {
            width: 100%;
            margin-top: 16rpx;
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .submitImgBox {
              width: 148rpx;
              height: 148rpx;
              background: #f7f7f8;
              border-radius: 8rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 16rpx;

              .addIcon {
                width: 48rpx;
                height: 48rpx;
                color: #b4b5ba;
              }
            }

            .imgItem {
              width: 148rpx;
              height: 148rpx;
              margin-right: 16rpx;
              position: relative;
              border-radius: 8rpx;
              overflow: hidden;

              image {
                width: 100%;
                height: 100%;
              }

              .closeBox {
                width: 32rpx;
                height: 32rpx;
                border-radius: 0rpx 8rpx 0rpx 8rpx;
                background: rgba(6, 10, 25, 0.5);
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: 0;
                right: 0;

                .closeIcon {
                  width: 24rpx;
                  height: 24rpx;
                }
              }
            }
          }
        }
      }
    }

    .bottomBtnBox {
      width: 100%;
      height: 100rpx;
      box-sizing: border-box;
      padding: 12rpx 40rpx 0;
      background: #fff;

      .bottomBtn {
        width: 100%;
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "PingFangSC";
        font-weight: 400;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 44rpx;
        font-style: normal;
        background: #3b72ff;
        border-radius: 6rpx;
      }
    }
  }

  .changePersonPopupBox {
    width: 100%;
    height: 60vh;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
    border-radius: 24rpx 24rpx 0rpx 0rpx;

    .changePersonContent {
      width: 100%;
      height: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 32rpx;

      .changePersonContentBox {
        width: 100%;
        height: calc(100% - 140rpx);

        .itemContent {
          width: 100%;
          margin-top: 16rpx;

          .title {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 30rpx;
            color: #010b18;
            line-height: 40rpx;
            text-align: justify;
            font-style: normal;
          }

          .anwersList {
            width: 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 16rpx;

            .anwersItem {
              .anwers {
                min-width: calc((100% - 48rpx) / 3);
                background: #f6f6f7;
                border-radius: 6rpx;
                text-align: center;
                padding: 14rpx;
                margin-right: 16rpx;
                margin-bottom: 16rpx;
                font-family: "PingFangSC";
                font-weight: 400;
                font-size: 28rpx;
                color: #010b18;
                line-height: 40rpx;
                font-style: normal;
              }

              .selectAnwersItem {
                background: #e7eeff;
                color: #3b72ff;
              }
            }
          }

          .changePersonBox {
            width: 100%;
            margin-top: 16rpx;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .changePersonBtn {
              color: #F75031;
              background: #FEF0ED;
              padding: 2rpx 8rpx;
              border-radius: 8rpx;
            }
          }

          .descBox {
            width: 100%;
            background: #f6f6f7;
            border-radius: 6rpx;
            box-sizing: border-box;
            padding: 16rpx 24rpx;
            margin-top: 12rpx;
          }

          .uploadImgBox {
            width: 100%;
            margin-top: 16rpx;
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .submitImgBox {
              width: 148rpx;
              height: 148rpx;
              background: #f7f7f8;
              border-radius: 8rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 16rpx;

              .addIcon {
                width: 48rpx;
                height: 48rpx;
                color: #b4b5ba;
              }
            }

            .imgItem {
              width: 148rpx;
              height: 148rpx;
              margin-right: 16rpx;
              position: relative;
              border-radius: 8rpx;
              overflow: hidden;

              image {
                width: 100%;
                height: 100%;
              }

              .closeBox {
                width: 32rpx;
                height: 32rpx;
                border-radius: 0rpx 8rpx 0rpx 8rpx;
                background: rgba(6, 10, 25, 0.5);
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: 0;
                right: 0;

                .closeIcon {
                  width: 24rpx;
                  height: 24rpx;
                }
              }
            }
          }
        }
      }



      .bottomBtnBox {
        width: 100%;
        height: 120rpx;
        box-sizing: border-box;
        padding: 16rpx 40rpx;
        background: #fff;

        .bottomBtn {
          width: 100%;
          height: 100%;
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 32rpx;
          color: #ffffff;
          font-style: normal;
          background: #3b72ff;
          border-radius: 6rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  // width: 100%;
  // // height: 100vh;
  // background-color: #fff;
  // box-sizing: border-box;
  // padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS 11.2+ */
  // padding-bottom: constant(safe-area-inset-bottom);
  // .pageHeader {
  //   height: 120rpx;
  //   width: 100%;
  //   background-color: rgb(246, 246, 246);
  //   box-shadow: rgb(214, 207, 207) 4rpx 0px 20rpx;
  //   background: url("../../static/images/mbwa/bj_logo.png") no-repeat bottom
  //     right;
  //   background-size: 34%;
  //   padding-left: 30rpx;
  //   box-sizing: border-box;
  //   .hederContent {
  //     display: flex;
  //     align-items: center;
  //     img {
  //       width: 100rpx;
  //       height: 100rpx;
  //       border-radius: 50%;
  //       margin-top: 10rpx;
  //       margin-right: 20rpx;
  //     }
  //   }
  // }

  // .addressBox {
  //   color: #727272;
  //   padding: 30rpx;
  //   .contentBox {
  //     display: flex;
  //     .addressIcon {
  //       display: inline-block;
  //       width: 49rpx;
  //       height: 48rpx;
  //       border-radius: 10rpx;
  //       margin-right: 6rpx;
  //     }
  //     .xuncha {
  //       font-size: 26rpx;
  //       color: #1b1c20;
  //     }
  //   }
  // }

  // .formBox {
  //   position: relative;
  //   margin-left: 24rpx;
  //   box-sizing: border-box;
  //   ul {
  //     li {
  //       width: 100%;
  //       position: relative;
  //       margin-top: 16rpx;

  //       .circle {
  //         background-color: #b2b2b2;
  //         height: 16rpx;
  //         width: 16rpx;
  //         border-radius: 50%;
  //         position: absolute;
  //         top: 16rpx;
  //         left: 1rpx;
  //       }
  //       .circle-first {
  //         top: 14rpx;
  //       }
  //       .circle-last {
  //         top: 46rpx;
  //       }
  //       .circleActive {
  //         height: 16rpx;
  //         width: 16rpx;
  //         border-radius: 50%;
  //         position: absolute;
  //         left: 1rpx;
  //         top: 18rpx;
  //         background-color: #409eff;
  //       }

  //       .examineContent {
  //         width: 100%;
  //         box-sizing: border-box;
  //         padding-left: 40rpx;
  //         .titleBox {
  //           display: flex;
  //           align-items: center;

  //           .img-zds {
  //             display: inline-block;
  //             width: 32rpx;
  //             height: 32rpx;
  //             background: url("../../static/images/mbwa/content_img_gray.png")
  //               no-repeat center;
  //             background-size: contain;
  //             margin-right: 6rpx;
  //           }

  //           .img-upload {
  //             display: inline-block;
  //             width: 32rpx;
  //             height: 32rpx;
  //             background: url("../../static/images/mbwa/pic_img_gray.png")
  //               no-repeat center;
  //             background-size: contain;
  //             margin-right: 6rpx;
  //           }

  //           .activezds {
  //             background-image: url("../../static/images/mbwa/zdsgl_sm_nr.png");
  //           }

  //           .activeupload {
  //             background-image: url("../../static/images/mbwa/zdsgl_sm_pic.png");
  //           }

  //           .titleText {
  //             font-size: 26rpx;
  //             color: #7a7a7a;
  //           }
  //           .titleTextActive {
  //             font-size: 26rpx;
  //             color: #409eff;
  //           }
  //         }

  //         .inputBox {
  //           color: #939393;
  //           font-size: 24rpx;
  //           padding-bottom: 40rpx;
  //           width: 100%;
  //           box-sizing: border-box;
  //           textarea {
  //             min-height: 50rpx;
  //             font-size: 24rpx;
  //             line-height: 1.8;
  //             border-bottom: 1rpx solid #eee;
  //             margin-top: 20rpx;
  //             color: #727272;
  //           }
  //         }

  //         .tagList {
  //           display: flex;
  //           font-size: 24rpx;
  //           color: #606266;
  //           width: 100%;
  //           box-sizing: border-box;
  //           .tagName {
  //             width: 200rpx;
  //             margin-right: 16rpx;
  //             font-size: 22rpx;
  //             line-height: 2.9;
  //           }
  //           .tagsBox {
  //             width: calc(100% - 200rpx);
  //             // width: 546rpx;
  //             padding: 0 24rpx 0 12rpx;
  //           }
  //           .tagUnit {
  //             padding: 4rpx 16rpx;
  //             background-color: #f4f4f4;
  //             color: #606266;
  //             border-radius: 24rpx;
  //             margin: 8rpx;
  //             font-size: 22rpx;
  //             display: inline-block;
  //             vertical-align: middle;
  //           }
  //           .active {
  //             color: #ed7043;
  //             background-color: #fdf1ec;
  //           }
  //         }

  //         .uploadBox {
  //           display: flex;
  //           flex-flow: row wrap;
  //           justify-content: flex-start;
  //           align-items: flex-start;
  //           width: 100%;
  //           box-sizing: border-box;
  //           padding: 20rpx 0;
  //           /* padding-left: 54rpx; */
  //           min-height: 160rpx;
  //           .uploadList {
  //             position: relative;
  //             display: flex;
  //             flex-flow: row nowrap;
  //             justify-content: center;
  //             align-items: center;
  //             background-color: #f1f1f1;
  //             box-sizing: border-box;
  //             width: 160rpx;
  //             height: 160rpx;
  //             border-radius: 6rpx;
  //             margin-top: 16rpx;
  //           }
  //           .uploadList:nth-child(3n-1) {
  //             margin-left: 16rpx;
  //             margin-right: 16rpx;
  //           }
  //           .uploadList image {
  //             width: 160rpx;
  //             height: 160rpx;
  //             border-radius: 6rpx;
  //           }

  //           .uploadAdd {
  //             width: 26%;
  //             box-sizing: border-box;
  //             .upload-file-add-container {
  //               display: flex;
  //               flex-flow: column nowrap;
  //               justify-content: center;
  //               align-items: center;
  //               border: 1rpx dashed #c6c6c6;
  //               height: 160rpx;
  //               width: 160rpx;
  //               margin-top: 15rpx;
  //               border-radius: 6rpx;
  //               margin-left: 12rpx;
  //               .walk-manage-plus {
  //                 line-height: 60rpx;
  //                 width: 62rpx;
  //                 height: 62rpx;
  //                 text-align: center;
  //                 border-radius: 50%;
  //                 background-color: #409eff;
  //                 color: #ffffff;
  //                 font-size: 48rpx;
  //                 box-shadow: 0 2rpx 6rpx 0 #eee;
  //               }
  //             }
  //           }
  //         }

  //         .uni-list-cell {
  //           justify-content: unset;
  //           margin-top: 28rpx;
  //         }

  //         .uni-list-cell:after {
  //           background-color: #f9f9f9;
  //         }
  //       }
  //     }

  //     .active .img-zds {
  //       background-image: url("../../static/images/mbwa/zdsgl_sm_nr.png");
  //     }
  //   }

  //   .btn {
  //     width: 80%;
  //     margin: 0 auto;
  //     margin-top: 50rpx;
  //     background-color: #409eff;
  //     border-radius: 10rpx;
  //     color: #fff;
  //     font-size: 28rpx;
  //     line-height: 2.8;
  //     margin-top: 96rpx;
  //   }
  // }
}
</style>