<template>
  <view class="main">
    <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.template.title || "-" }}</p>
          <div>
            <span>巡查时间：</span><span>{{ detailObj.createdAt }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="formBox">
      <ul>
        <li>
          <span
            :class="
              inputfocus
                ? 'circle circleActive circle-first '
                : 'circle circleActive 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="请输入巡查内容"
                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 ? 'circleActive' : 'circleActive'"></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" @tap="showImg2(index)" mode="aspectFill" />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </view>
</template>
  
  <script>
import { mapGetters } from "vuex";
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: "2",
        },
      ],
      value: "0",
      current: 0,
      selectAnwersList: [], // 选择的答案列表
      selectAnwersObj: {}, // 已经选择答案的实际对象格式  问题的id: [选项1，选项2]
      detailObj: {}, //点位详情
      imgsList: [],
      submit: false, // 是否提交成功了
      requiredList: [], // 必填项的数组
    };
  },
  computed: {
    ...mapGetters({
      user: "getUser",
    }),
  },
  onLoad(query) {
    console.log("query", query);
    this.handleGetDetail(query.id);
  },
  methods: {
    async handleGetDetail(id) {
      const data = await this.$request.$webNodeGet(
        `questionnaire-responses/${id}`
      );
      let obj = data.data;
      console.log("obj", obj);
      this.detailObj = obj;
      this.tagList = obj.questionResponses;
      console.log("this.tagList", this.tagList);
      if (obj.extend) {
        let extend = JSON.parse(obj.extend);
        this.uploadResult = extend.uploadResult;
        this.imgsList = extend.imgsList;
      }
    },
  },
};
</script>
  
  <style lang="less" scoped>
.main {
  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>