<template>
  <view class="main">
    <scroll-view class="pageScroll" :scroll-y="true">
      <view class="topContent">
        <view class="placeBox">
          <view class="placeName">{{ detailObj.title || "-" }}</view>

          <view class="userBox">
            <view class="userTop">
              <text class="userName">{{ user.Membership_Name || "" }}</text>
              <text class="labelBox">巡查人员</text>
            </view>
            <view class="timeBox">
              <image class="timeIcon" src="/static/images/mbwa/timeIcon.svg" />
              <text class="nowTime">{{ now_time || "-" }}</text>
            </view>
          </view>
        </view>

        <view class="inspectionContent">
          <view class="contentTop">
            巡检内容<span class="required">*</span>
          </view>
          <textarea v-model="uploadResult" class="contentBox" placeholder="请输入巡查内容，并上传现场照片"
            placeholderStyle="font-size: 24rpx;color: #CDCED1" :auto-height="true"></textarea>
          <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="qusetionBox">
        <!-- requestionRadioList -->
        <!-- requestionCheckedList -->

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

              <!-- <view class="quetionRight">
                <text class="placeSelect" v-if="
                  !(item.choiceResponse && item.choiceResponse.length > 0)
                ">请选择</text>
                <image class="rightArrow" src="/static/images/mbwa/rightArrow.svg" />
              </view> -->
            </view>
            <!-- v-if="!(item.choiceResponse && item.choiceResponse.length > 0)" -->
            <view class="choiceResList">
              <radio-group @change="handleOutRadioChange($event, item)">
                <label class="choiceItem" v-for="(subItem, subIndex) in item.question.options" :key="subItem.text"
                  :style="{ marginBottom: subIndex + 1 === item.question.options.length ? '0' : '' }">
                  <view>
                    <radio :checked="item.choiceResponse[0] === subItem.text" :value="subItem.text" color="#409eff"
                      style="transform: scale(0.8)" />
                    <!-- :checked="subIndex === current" -->
                  </view>
                  <view>{{ subItem.text }}</view>
                </label>
              </radio-group>
            </view>

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

            <view class="uploadImgBox" v-if="item.showAddImg">
              <div class="submitImgBox" @click="submitImg($event, item, 'response')">
                <image class="addIcon" src="/static/images/mbwa/addImageIcon.svg" />
              </div>

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

        <!-- 多选题 暂时没有不进行显示 -->
        <!-- <view v-if="requestionCheckedList && requestionCheckedList.length > 0">
          <view class="requestionCheckedItem" v-for="(item, index) in requestionCheckedList" :key="index">
            <view class="checkedTop" @click="handleShowCheckPopup(item, 'checked')">
              <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, 'checked')" class="closeIcon"
                  src="/static/images/mbwa/closeIcon.svg" />
              </view>
            </view> -->

        <!-- <checkbox-group @change="handleChangeCheck">
            <label
              class="checkItem"
              v-for="(subItem, subIndex) in item.question.options"
              :key="subIndex"
            >
              <view>
                <checkbox :value="subItem.text" />
              </view>
              <view>{{ subItem.text }}</view>
            </label>
          </checkbox-group> -->
        <!-- </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" />
              </view>
              <view style="font-size: 24rpx">情况正常</view>
            </label>
            <label class="radioItem">
              <view>
                <radio color="#3B72FF" :value="'1'" :checked="1 === current" />
              </view>
              <view style="font-size: 24rpx; text-align: left">急需处理</view>
            </label>
          </radio-group>
        </view>
      </view>


    </scroll-view>

    <view class="bottomBtnBox">
      <view class="bottomBtn" @click="submitUpload">提交</view>
    </view>
    <!-- 
    <view v-if="false">
      <div class="pageHeader">
        <div class="hederContent">
          <img :src="user.Membership_Headimage" alt="" />
          <div>
            <p>{{ user.Membership_Name || "" }}</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.title || "-" }}</p>
            <div>
              <span>巡查时间：</span><span>{{ now_time }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="formBox">
        <ul>
          <li>
            <span :class="inputfocus
              ? 'circle circleActive circle-first '
              : 'circle circle-first'
              "></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="请输入巡查内容" focus="true"
                  @focus="inputfocus = true" @blur="inputfocus = false"></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.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 ? 'circleActive' : 'circle'"></span>
            <div class="examineContent">
              <div class="titleBox">
                <i :class="imgfocus ? 'img-upload activeupload' : 'img-upload'"></i>
                <div style="display: flex" :class="imgfocus ? 'titleTextActive' : 'titleText'">
                  <i style="color: red; margin-right: 5px">*</i>请上传现场图片
                </div>
              </div>
              <div class="uploadBox">
                <div class="uploadList" v-for="(item, index) in imgsList" :key="index">
                  <span class="upload-file-remove" @click.stop="deleteImgFunc(item, index)">×</span>
                  <image :src="item" @tap="showImg2(index, imgsList)" mode="aspectFill" />
                </div>
                <div class="uploadAdd" @click="submitImg">
                  <div class="upload-file-add-container">
                    <span class="walk-manage-plus">+</span>
                  </div>
                </div>
              </div>
            </div>
          </li>

          <li>
            <span :class="radiofocus
              ? 'circle circleActive circle-last'
              : 'circle circle-last'
              ">
            </span>
            <div class="examineContent">
              <radio-group @change="radioChange" style="display: flex" @click="radioFocus" @blur="radiofocus = false">
                <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)" />
                  </view>
                  <view>{{ item.name }}</view>
                </label>
              </radio-group>
            </div>
          </li>
        </ul>

        <button v-if="!submit" class="btn" @click="submitUpload">提交</button>
      </div>
    </view> -->

    <uniPopup ref="checkPopup" type="bottom" :show="isShowPopup" @hidePopup="handleClosePopup">
      <view class="popupBox">
        <scroll-view class="checkPopupContent" :scroll-y="true">
          <view v-if="questionType === 'checked'">
            <view class="anwersList" v-if="popupShowObj">
              <view class="anwersItem" v-for="(item, index) in popupShowObj.question.options" :key="index"
                @click="handleCheckAnwers(popupShowObj, item)">
                <view :class="item.checked ? 'anwers selectAnwersItem' : 'anwers'">
                  {{ item.text || "" }}</view>
              </view>
            </view>
          </view>

          <view v-if="questionType === 'radio'">
            <radio-group class="radioGroup" v-if="
              popupShowObj.question &&
              popupShowObj.question.options &&
              popupShowObj.question.options.length > 0
            " @change="radioChange($event, popupShowObj)">
              <label class="radioItem" v-for="(subItem, subIndex) in popupShowObj.question.options" :key="subIndex">
                <view>
                  <radio color="#3B72FF" iconColor="#3B72FF" :value="subItem.text"
                    :checked="popupShowObj.choiceResponse[0] === subItem.text" />
                </view>
                <view style="font-size: 24rpx; text-align: left">{{
                  subItem.text
                }}</view>
              </label>
            </radio-group>
          </view>
        </scroll-view>

        <view class="bottomBtnBox">
          <view class="bottomBtn" @click="handleClosePopup">确认</view>
        </view>
      </view>
    </uniPopup>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import uniPopup from "@/components/uni-popup";
export default {
  data() {
    let nowTime = this.$util.cutDate(new Date(), "YYYY-MM-DD 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: [], // 必填项的数组

      requestionRadioList: [], // 单选题
      requestionCheckedList: [], // 多选题
      isShowPopup: false, // 显示弹出框
      popupShowObj: {},
      questionType: "", // 判断是 单选还是多选
      submiting: false, // 判断是否已经点击过了
      isSubmitted: false,// 判断是否已经提交成功了
    };
  },
  components: {
    uniPopup,
  },
  computed: {
    ...mapGetters({
      user: "getUser",
    }),
  },
  async onLoad(query) {
    // pageType  1的话  就是将缓存信息录入 没有就是重新开始
    console.log("query", query);

    await this.handleGetModalData(query.id);

    let CacheObj = uni.getStorageSync('CacheObj')
    if (CacheObj && query.pageType === '1') {

      this.handleSetCacheDetial(CacheObj)
    }
  },
  onUnload() {
    // 没提交过就走了 说明是需要进行缓存的 
    if (!this.isSubmitted) {
      // 巡检内容
      let inspectionContent = this.uploadResult
      // 上面的巡检图片
      let inspectionImgList = this.imgsList
      // 情况类型
      let situation = this.current // 0 正常 1 紧急

      console.log('dsadasd', this.requestionRadioList);

      // 把当前已经选择了的问题答案 记录一下
      let chooseAnswer = {}

      if (this.requestionRadioList && this.requestionRadioList.length > 0) {
        this.requestionRadioList.forEach((item) => {
          if (item.choiceResponse) {
            chooseAnswer[item.id] = {
              choiceResponse: item.choiceResponse,
              imageResponse: item.imageResponse
            }
          }
        })
      }



      // 需要缓存的内容
      let CacheObj = {
        inspectionContent: inspectionContent, // 巡检内容
        inspectionImgList: inspectionImgList,  // 巡检图片
        situation: situation, // 0 正常 1 紧急
        chooseAnswer: chooseAnswer,// 当前已经选择了的记录问题
        id: this.detailObj.id,// 点位id
        title: this.detailObj.title
      }

      uni.setStorageSync('CacheObj', CacheObj)
    }
  },
  methods: {
    // 将缓存记录中的内容 再赋值到这条记录里面
    handleSetCacheDetial(CacheObj) {
      // 巡检内容
      this.uploadResult = CacheObj.inspectionContent
      // 巡检图片
      this.imgsList = CacheObj.inspectionImgList
      // 是否异常
      this.current = CacheObj.situation

      // 把缓存里面已经有了的数据 匹配到问题列表的字段里面
      if (CacheObj.chooseAnswer) {
        let obj = CacheObj.chooseAnswer
        let list = JSON.parse(JSON.stringify(this.requestionRadioList))

        for (let key in obj) {
          if (list && list.length > 0) {
            list.forEach(item => {

              if (Number(item.id) === Number(key)) {
                item.choiceResponse = obj[key].choiceResponse
                item.imageResponse = obj[key].imageResponse
                item.showAddImg = obj[key].imageResponse && obj[key].imageResponse.length > 0
              }
            })
          }
        }
        this.requestionRadioList = list

      }

    },
    // 新的 在外面选择答案的内容
    handleOutRadioChange(e, obj) {
      console.log('eeee', e);
      console.log('objobjobjobjobj', obj);

      let requestionList = obj.question.options
      let score = 0
      requestionList.forEach(item => {
        if (item.text === e.detail.value) {
          score = item.mark
          if (item.mark !== 1) {
            obj.showAddImg = true;
          } else {
            obj.showAddImg = false;
          }
        }
      })
      obj.choiceResponse = [e.detail.value]
      obj.score = score
      // obj.question = {
      //   ...obj.question,
      //   choiceResponse: [e.detail.value],
      //   score: score
      // }

      console.log("requestionRadioList", this.requestionRadioList);
      if (this.requestionRadioList && this.requestionRadioList.length > 0) {
        // 判断有没有选择了 0分的 因为 单选 只要选了就不能改
        // 且 不选之前 mark的值为undefined  选了 就是0 或 1
        let haveError = false;
        this.requestionRadioList.forEach((item) => {
          if (item.score === 0) {
            haveError = true;
          }
        });
        if (haveError) {
          this.current = 1;
        } else {
          this.current = 0;
        }
      }
      this.$forceUpdate()
    },
    // 删除图片
    deleteImgFunc(item, index) {
      this.imgsList.splice(index, 1);
    },
    // 删除答案里面的图片
    deleteImgFuncResponse(item, index) {
      console.log("item", item);
      item = item.splice(index, 1);
      this.$forceUpdate();
    },
    // 提交表单内容
    async submitUpload() {
      console.log("user", this.user);
      console.log("this.detailObj", this.detailObj);

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

      if (!(this.imgsList && this.imgsList.length > 0)) {
        uni.showToast({
          title: "请上传现场照片！",
          icon: "none",
        });
        return;
      }

      let AllOK = true;
      // 判断有没有 异常项选择了
      let haveError = false;

      let questionResponsesList = [];

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

      // 看单选题中是否有必填的没填
      if (this.requestionRadioList && this.requestionRadioList.length > 0) {
        this.requestionRadioList.forEach((item) => {
          if (item.isRequired) {
            if (item.choiceResponse && item.choiceResponse.length > 0) {
            } else {
              AllOK = false;
            }
          }

          if (item.showAddImg) {
            if (item.imageResponse && item.imageResponse.length > 0) {
            } else {
              AllOK = false;
            }
          }

          if (item.choiceResponse && item.choiceResponse.length > 0) {
            questionResponsesList.push({
              questionId: item.questionId,
              textResponse: "",
              choiceResponse: item.choiceResponse,
              imageResponse: item.imageResponse,
              // score: item.choiceResponse[0].mark || (item.mark ? item.mark : 0),
              score: item.score,
            });
            let mark =
              item.choiceResponse[0].mark || (item.mark ? item.mark : 0);
            if (mark === 0) {
              haveError = true;
            }
          }
        });
      }

      // 看多选题中是否有必填的没填
      if (this.requestionCheckedList && this.requestionCheckedList.length > 0) {
        this.requestionCheckedList.forEach((item) => {
          if (item.isRequired) {
            if (item.isChecked && item.isChecked.length > 0) {
            } else {
              AllOK = false;
            }
          }
          if (item.isChecked && item.isChecked.length > 0) {
            questionResponsesList.push({
              questionId: item.questionId,
              textResponse: "",
              choiceResponse: item.isChecked,
              imageResponse: item.imageResponse,
              score: item.isChecked[0].mark || (item.mark ? item.mark : 0),
            });
          }
        });
      }

      if (!AllOK) {
        uni.showToast({
          title: "有必填项未填写，请检查！",
          icon: "none",
        });
        return;
      }
      console.log("haveError", haveError);
      if (!haveError && this.current === 1) {
        uni.showToast({
          title: "考核过程均为正常，请检查！",
          icon: "none",
        });
        return;
      }


      if (this.submiting) {
        return;
      }

      this.submiting = true;
      let extendObj = {
        uploadResult: this.uploadResult,
        imgsList: this.imgsList,
        situation: this.current, // 0 正常 1 紧急
        errorStatus: this.current === 1 ? 0 : undefined, // 0是经理选择人 1 是反馈结果
      };

      const req = {
        ...extendObj,
        templateId: this.detailObj.id,
        userId: this.user.UserId,
        userName: this.user.UserName,
        // extend: extendObj ? extendObj : "",
        completed: true,
        placeId: 0,
        placeName: this.detailObj.title,
        provinceId: this.user.ProvinceCode,
        provinceName: "",
        serverPartId: this.detailObj.serverPartId,
        serverPartName: this.detailObj.serverPartName,
        questionResponses: questionResponsesList,
      };

      console.log("req", req);
      // 原node接口
      // const data = await this.$request.$webNodePOST(
      //   `questionnaire-responses`,
      //   req
      // );
      // 新java接口
      const data = await this.$request.$webJavaPOST(
        `questionnaire-responses/save`,
        req
      );
      console.log("data", data);


      console.log("data", data);
      if (data.Result_Code === 100) {
        this.submit = true;
        uni.showToast({
          title: "提交成功!",
          icon: "none",
        });
        let _this = this;
        _this.isSubmitted = true


        let CacheObj = uni.getStorageSync('CacheObj')
        if (CacheObj) {
          uni.setStorageSync('CacheObj', null)
        }

        setTimeout(() => {
          _this.submiting = false;
          _this.$util.toNextRoute(
            "redirectTo",
            `/pages/walkAroundManager/statusPage?id=${data.Result_Data.id}`
          );
        }, 1000);
      } else {
        uni.showToast({
          title: data.Result_Desc,
          icon: "error",
        });
      }
    },
    // 选中的考核内容
    selectTag(item, detailItem) {
      // 判断当前里面有没有自己选中的答案
      let have = false;
      if (this.selectAnwersList && this.selectAnwersList.length > 0) {
        let haveList = this.selectAnwersList.filter(
          (item) => item.questionId === detailItem.id
        );

        if (haveList && haveList.length > 0) {
          have = true;
        }
      }

      // 当have为true的时候 这个问题已经作答过了
      if (have) {
        // 判断这个问题 是不是多选的
        let [type, questionType] = detailItem.type.split("_");
        // 单选
        if (type === "radio") {
          // 那么要去除它之前的答案
          if (detailItem.options && detailItem.options.length > 0) {
            detailItem.options.forEach((itemOption) => {
              if (itemOption.text === item.text) {
                itemOption.ischecked = true;
              } else {
                itemOption.ischecked = false;
              }
            });
          }
          // 这一次选的答案
          let res = {
            questionId: detailItem.id,
            textResponse: "",
            choiceResponse: [item.text],
            imageResponse: item.imageResponse,
            score: item.mark ? item.mark : 0,
          };
          this.selectAnwersObj[detailItem.id] = [item];

          let newList = [];
          if (this.selectAnwersList && this.selectAnwersList.length > 0) {
            this.selectAnwersList.forEach((listItem) => {
              if (listItem.questionId === detailItem.id) {
                newList.push(res);
              } else {
                newList.push(listItem);
              }
            });
          }
          this.selectAnwersList = newList;
        } else {
          // 判断点击的这个是不是已经选中了
          if (item.ischecked) {
            // 已经选中的话 再次点击应该去除
            let old = JSON.parse(
              JSON.stringify(this.selectAnwersObj[detailItem.id])
            );
            let newList = [];
            if (old && old.length > 0) {
              old.forEach((olditem) => {
                if (olditem.text === item.text) {
                } else {
                  newList.push(olditem);
                }
              });
            }
            this.selectAnwersObj[detailItem.id] = newList;

            let newselectAnwersList = [];
            if (this.selectAnwersList && this.selectAnwersList.length > 0) {
              this.selectAnwersList.forEach((listItem) => {
                if (listItem.questionId === detailItem.id) {
                  let old = JSON.parse(JSON.stringify(listItem.choiceResponse));
                  let newList = [];
                  if (old && old.length > 0) {
                    old.forEach((olditem) => {
                      if (olditem === item.text) {
                      } else {
                        newList.push(olditem);
                      }
                    });
                  }
                  listItem.choiceResponse = newList;
                  if (newList && newList.length > 0) {
                    newselectAnwersList.push(listItem);
                  }
                  // listItem.choiceResponse.push(item.text);
                }
              });
            }
            this.selectAnwersList = newselectAnwersList;
            item.ischecked = false;
          } else {
            item.ischecked = true;
            let old = JSON.parse(
              JSON.stringify(this.selectAnwersObj[detailItem.id])
            );
            old.push(item);
            this.selectAnwersObj[detailItem.id] = old;

            if (this.selectAnwersList && this.selectAnwersList.length > 0) {
              this.selectAnwersList.forEach((listItem) => {
                if (listItem.questionId === detailItem.id) {
                  listItem.choiceResponse.push(item.text);
                }
              });
            }
          }
        }
      } else {
        // have为false 说明第一次作答 记录他点击的答案
        let res = {
          questionId: detailItem.id,
          textResponse: "",
          choiceResponse: [item.text],
          imageResponse: item.imageResponse,
          score: item.mark ? item.mark : 0,
        };
        this.selectAnwersObj[detailItem.id] = [item];
        this.selectAnwersList.push(res);
        item.ischecked = true;
      }
      this.$forceUpdate();
    },
    // 获取单个的模版数据
    async handleGetModalData(id) {
      // const data = await this.$request.$webNodePOST(
      //   `questionnaire-templates/${id}`
      // );

      const data = await this.$request.$webJavaGet(
        "questionnaire-templates/get",
        {
          id: id,
        }
      );

      let obj = data.Result_Data;
      this.detailObj = obj;
      console.log(
        "this.detailObjthis.detailObjthis.detailObjthis.detailObj",
        this.detailObj
      );
      if (!this.detailObj.status) {
        uni.showModal({
          title: "提示",
          content: "该点位已无效，请联系管理员！",
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              uni.navigateBack({
                delta: 1,
              });
            }
          },
        });
      }

      let list = [];
      if (
        obj.questionnaireTemplateQuestions &&
        obj.questionnaireTemplateQuestions.length > 0
      ) {
        obj.questionnaireTemplateQuestions.forEach((item) => {
          if (item.isRequired) {
            list.push(item.questionId);
          }
        });
      }
      this.requiredList = list;

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

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

      if (requestionList && requestionList.length > 0) {
        requestionList.forEach((item) => {
          // type 是单选还是多选 questionType 是题目类型 暂时只有选择题
          let [type, questionType] = item.question.type.split("_");
          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;

      this.tagList = obj.questionnaireTemplateQuestions;
      console.log("this.requestionRadioList", this.requestionRadioList);
      console.log("this.requestionCheckedList", this.requestionCheckedList);
    },
    radioFocus() {
      this.radiofocus = true;
      this.imgfocus = false;
    },
    radioChange(evt, obj) {
      console.log("evt", evt);
      console.log("obj", obj);
      obj.choiceResponse = [evt.detail.value];
      if (obj.question.options && obj.question.options.length > 0) {
        obj.question.options.forEach((item) => {
          if (item.text === evt.detail.value) {
            obj.mark = item.mark || 0;
          }
        });
      }
      // 判断 只要在这里点击了 那就不可能能变回默认了 那么就可以给他赋值显示图片了
      // 只有分数不是1 的时候 才让它显示添加图片
      if (obj.mark !== 1) {
        obj.showAddImg = true;
      } else {
        obj.showAddImg = false;
      }

      // if(!(obj.mark>0)){
      //   this.current = 1;
      // }

      console.log("requestionRadioList", this.requestionRadioList);
      if (this.requestionRadioList && this.requestionRadioList.length > 0) {
        // 判断有没有选择了 0分的 因为 单选 只要选了就不能改
        // 且 不选之前 mark的值为undefined  选了 就是0 或 1
        let haveError = false;
        this.requestionRadioList.forEach((item) => {
          if (item.mark === 0) {
            haveError = true;
          }
        });
        if (haveError) {
          this.current = 1;
        } else {
          this.current = 0;
        }
      }

      // this.value = evt.target.value;
      // for (let i = 0; i < this.options.length; i++) {
      //   if (this.options[i].value === evt.target.value) {
      //     this.current = i;
      //     break;
      //   }
      // }
    },
    handleChangeCheck(e) {
      console.log("e", e);
    },
    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 === "response") {
                      if (obj.imageResponse && obj.imageResponse.length > 0) {
                        obj.imageResponse.push(
                          `https://es.eshangtech.com/${data.data.path}`
                        );
                      } else {
                        obj.imageResponse = [
                          `https://es.eshangtech.com/${data.data.path}`,
                        ];
                      }
                      console.log(
                        "objobjobjobjobjobjobjobj",
                        _this.requestionRadioList
                      );
                      _this.$forceUpdate();
                    } else {
                      _this.imgsList.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 === "response") {
                  if (obj.imageResponse && obj.imageResponse.length > 0) {
                    obj.imageResponse.push(
                      `https://es.eshangtech.com/${data.data.path}`
                    );
                  } else {
                    obj.imageResponse = [
                      `https://es.eshangtech.com/${data.data.path}`,
                    ];
                  }
                  console.log(
                    "objobjobjobjobjobjobjobj",
                    _this.requestionRadioList
                  );
                  _this.$forceUpdate();
                } else {
                  _this.imgsList.push(
                    `https://es.eshangtech.com/${data.data.path}`
                  );
                }

                // _this.imgsList.push(
                //   `https://es.eshangtech.com/${data.data.path}`
                // );
                // path;
              },
              fail(error) {
                console.log("error", error);
                _this.noPost = true;
              },
            });
          }
          //   uni.uploadFile({
          //     url: "https://user.eshangtech.com/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=MBWA",
          //     filePath: imageSrc,
          //     fileType: "image",
          //     name: "data",
          //     success: (res) => {
          //       let _data = JSON.parse(res.data);

          //       uni.hideLoading();
          //       _this.imgsList.push(imageSrc);
          //       _this.imgData.push(_data.Data.IMAGE_PATH);
          //     },
          //     fail: (err) => {
          //       uni.showModal({
          //         content: err.errMsg,
          //         showCancel: false,
          //       });
          //     },
          //   });
        },
        fail: function (err) { },
      });
    },
    // 显示多选的弹出框
    handleShowCheckPopup(obj, type) {
      this.questionType = type;
      this.isShowPopup = true;
      this.popupShowObj = obj;
    },
    handleClosePopup() {
      this.isShowPopup = false;
      this.popupShowObj = undefined;
      this.questionType = "";
    },
    handleCheckAnwers(detailObj, selectObj) {
      console.log("detailObj", detailObj);
      console.log("selectObj", selectObj);

      if (selectObj.checked) {
        selectObj.checked = false;
        let old = JSON.parse(JSON.stringify(detailObj.isChecked));
        let res = [];
        if (old && old.length > 0) {
          old.forEach((item) => {
            if (item.checked && item.text !== selectObj.text) {
              res.push(item);
            }
          });
        }
        detailObj.isChecked = res;
      } else {
        if (detailObj.isChecked && detailObj.isChecked.length > 0) {
          detailObj.isChecked.push(selectObj);
        } else {
          detailObj.isChecked = [selectObj];
        }
        selectObj.checked = true;
      }

      this.$forceUpdate();
    },
    // 点击了多选里面的删除 去掉里面的当前项
    handDeleteChecked(obj, smallObj, type) {
      console.log("obj", obj);
      console.log("smallObj", smallObj);
      if (type === "checked") {
        let list = JSON.parse(JSON.stringify(obj.isChecked));
        let res = [];
        list.forEach((item) => {
          if (item.text === smallObj.text) {
          } else {
            res.push(item);
          }
        });
        if (obj.question.options && obj.question.options.length > 0) {
          obj.question.options.forEach((item) => {
            if (item.text === smallObj.text) {
              item.checked = false;
            }
          });
        }

        obj.isChecked = res;
        this.$forceUpdate();
      } else {
        obj.choiceResponse = [];
        obj.imageResponse = [];
        obj.showAddImg = false;
        this.$forceUpdate();
      }
    },
    showImg2(index, imgList) {
      uni.previewImage({
        urls: imgList,
        current: index,
        loop: true,
        indicator: "number",
      });
    },

    // 修改情况类型
    handleChangeSituationType(e) {
      console.log("e", e);
      this.current = Number(e.detail.value);
    },
  },
};
</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/placeBg.png");
        background-size: 100% 100%;
        // background-position: 2rpx 2rpx;
        background-repeat: no-repeat;

        .placeName {
          font-family: "PingFang SC";
          font-weight: 500;
          font-size: 26rpx;
          line-height: 36rpx;
          color: #000000;
          text-align: left;
          font-style: normal;
        }

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

          .userTop {
            .userName {
              font-family: "PingFang SC";
              font-weight: 500;
              font-size: 26rpx;
              line-height: 36rpx;
              color: #000000;
              text-align: left;
              font-style: normal;
              margin-right: 12rpx;
            }

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

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

            .timeIcon {
              width: 30rpx;
              height: 30rpx;
              margin-right: 6rpx;
            }

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

      .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: 26rpx;
          color: #010b18;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;

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

        .contentBox {
          width: 100%;
          margin-top: 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;
              }
            }
          }
        }
      }
    }

    .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 {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 30rpx;

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

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

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

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

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

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

          .bottomItem {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 24rpx;
            color: #676d74;
            line-height: 36rpx;
            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;
            }
          }
        }

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

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

        .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;
              }
            }
          }
        }


        .choiceResList {
          width: 100%;

          .choiceItem {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20rpx;
          }
        }
      }

      .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: #010b18;
            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: 24rpx;
              color: #d6d7da;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
            }

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

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

          .bottomItem {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 24rpx;
            color: #676d74;
            line-height: 36rpx;
            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;
            }
          }
        }

        .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;
              }
            }
          }
        }
      }
    }

    .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: 26rpx;
          color: #010b18;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;

          .required {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 28rpx;
            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;
            font-size: 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;
    }
  }

  .popupBox {
    width: 100%;
    height: 60vh;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);

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

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

        .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;
          }
        }
      }

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

        .radioItem {
          display: flex;
          align-items: center;
          padding: 8rpx;
          font-size: 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;
      }
    }
  }

  // .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;
  //         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>