<template>
  <div class="inspedtionDetail">
    <template v-if="baseInfo.online !== true">
    <div class="label">巡检信息</div>
    <div class="head">
      <p>
        <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
        巡检单号
        <span class="num">{{ baseInfo.sign }}</span>
        <span class="btn zhixingzhong">{{ baseInfo.stateName }}</span>
      </p>
    </div>
    <div class="info">
      <p>
        <span class="fl">巡检范围</span>
        <span class="fr">{{ baseInfo.inspectionType.type }}</span>
      </p>
      <p>
        <span class="fl">计划主题</span>
        <span class="fr">{{ baseInfo.inspection.title }}</span>
      </p>
      <p>
        <span class="fl">计划内容</span>
        <span class="fr showwrap">{{ baseInfo.inspection.content }}</span>
      </p>
      <p>
        <span class="fl">巡检状态</span>
        <span class="fr">{{ baseInfo.stateName }}</span>
      </p>
      <p>
        <span class="fl">巡检策略</span>
        <span class="fr">{{ baseInfo.inspection.planStrategy.name }}</span>
      </p>
      <p>
        <span class="fl">执行时长</span>
        <span class="fr">{{ baseInfo.inspection.executionTime }}分钟</span>
      </p>
      <p>
        <span class="fl">开始时间</span>
        <span class="fr">{{
          baseInfo.inspection.planStartTime.slice(
            0,
            baseInfo.inspection.planStartTime.length - 2
          )
        }}</span>
      </p>
      <p>
        <span class="fl">逾期时间</span>
        <span class="fr">{{ baseInfo.overdueTime }}</span>
      </p>
    </div>
    <div class="label">巡检结果</div>
    <div class="form">
      <p v-for="(item, index) in forms" :key="index">
        <span>{{ item.name }}：</span>
        <span class="colorGray" v-if="item.key=='sdCheckEnable7'||item.key=='sdCheckEnable11'||item.key=='sdCheckEnable12'">{{
          param[item.key] === "true" ? "是" : "否"
        }}</span>
        <span class="colorGray" v-else>{{
          param[item.key] === "true" ? "正常" : "异常"
        }}</span>
      </p>
    </div>
    </template>
    <div class="label">{{ xj_beizhu.name }}</div>
    <div class="textarea_div">
      <cube-textarea
        class="textarea"
        v-model="param[xj_beizhu.key]"
        disabled
      ></cube-textarea>
    </div>
    <div class="label">图片列表</div>
    <div class="imgs-c">
      <div class="imgs-container" v-if="imgs.length">
        <div class="imgs-cont" @click="showImgs(imgs)">
          <img
            v-if="
              img.suffix == 'jpeg' ||
                img.suffix == 'jpg' ||
                img.suffix == 'gif' ||
                img.suffix == 'png' ||
                img.suffix == 'svg' ||
                img.suffix == 'pdf'
            "
            :src="img.previewUrl"
            v-for="(img, index) in imgs"
            class="imgs"
          />
          <p v-else>
            <a :href="[img.previewUrl]">{{ img.name }}</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      toast:null,
      imgs: [], //图片
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
      baseInfo: {}, //巡检基础信息
      items: [], //巡检项目
      xj_arr: [], //巡检项目数组key和name
      xj_beizhu: {}, //巡检-整改意见（备注）
      forms: [], //巡检结果
      abnormal: "", //异常项
      param: {
        sdCheckEnable1: false,
        sdCheckEnable2: false,
        sdCheckEnable3: false,
        sdCheckEnable4: false,
        sdCheckEnable5: false,
        sdCheckEnable6: false,
        sdCheckEnable7: false,
        sdCheckEnable8: false,
        sdCheckEnable9: false,
        sdCheckEnable10: false,
        sdCheckEnable11: false,
        sdCheckEnable12: false,
        descriptionTextarea: "",
        inspectionProcessActual: {}
      },
      model: {}
    };
  },
  methods: {
    // 获取项目异常状态
    getItems() {
      var that = this;
      that.toast = that.$createToast({
        time: 0,
        mask: true,
        txt: "正在加载中",
      });
      that.toast.show();
      that.$http
        .get(
          "/service/form/renderForm/inspection_LinHu_detail/" +
            that.baseInfo.processInstanceId +
            "/" +
            that.loginUser.id +
            "/" +
            that.baseInfo.id,
          {}
        )
        .then(function(res) {
          that.toast.hide();
          console.log(res.data);
          that.model = res.data.model;
          var fields = res.data.fields;
          console.log(fields);
          fields.forEach(v => {
            v.key = (v.key || "").toString();
            if (v.key.indexOf("sdCheckEnable") > -1) {
              that.xj_arr.push(v);
            }
            if (v.key.indexOf("descriptionTextarea") > -1) {
              that.xj_beizhu = {
                key: v.key,
                name: v.templateOptions.label
              };
            }
          });
          console.log(that.xj_beizhu);
          that.forms = that.xj_arr.map(v => ({
            key: v.key,
            name: v.templateOptions.label
          }));
          console.log(that.forms);
          that.forms.forEach(v => {
            that.param[v.key] = that.model[v.key];
          });
          that.param.descriptionTextarea = that.model.descriptionTextarea;
          window.localStorage.setItem("forms", JSON.stringify(that.forms));
        });
    },
    // 提交
    submit() {
      this.param.loginUser = this.loginUser;
      this.param.save = this.model.save;
      this.param.close = this.model.close;
      this.param.submit = this.model.submit;
      this.param.toIncident = this.model.toIncident;
      this.param.handler_code = "resolve";
      this.param.inspectionProcessActual = this.baseInfo;
      console.log(this.param);
      var that = this;
      that.$http
        .post(
          "/service/bpm/bpm/completeTask/" +
            that.baseInfo.processInstanceId +
            "/" +
            that.loginUser.id +
            "/" +
            that.baseInfo.id,
          that.param
        )
        .then(function(res) {
          console.log(res.data);
          if (res.data.status == 200) {
            $("#fade").fadeIn();
            that.promptingConent = "恭喜您,提交成功!";
            that.promptingStatus = true;
            that.dialog = that
              .$createDialog({
                type: "alert",
                title: "提交成功",
                content: "点击返回列表",
                icon: "cubeic-right",
                onConfirm: (e, promptValue) => {
                  that.$router.push({ path: "/main/inspection" });
                }
              })
              .show();
            setTimeout(function() {
              $("#fade").fadeOut();
            }, 2000);
          }
        });
    },
    // 取消
    cancle() {
      var that = this;
      that.$router.go(-1);
    },
    // 生成事件
    createIncident() {
      for (var i = 0; i < $(".cube-switch.abnormal").length; i++) {
        this.abnormal += $(".cube-switch.abnormal")[i].dataset.label + ",";
      }
      this.$router.push({
        name: "NewIncident",
        params: { data: this.baseInfo, abnormal: this.abnormal }
      });
    },
    //展示图片
    showImgs(imgs) {
      this.$createImagePreview({
        imgs: imgs.map(v => v.previewUrl)
      }).show();
    },
    // 获取图片
    getImgs() {
      var that = this;
      that.$http
        .get(
          "service/common/common/listAttachment/inspection/" +
            that.baseInfo.processInstanceId,
          {}
        )
        .then(function(res) {
          that.imgs = res.data.data.splice(0, 3);
        });
    }
  },
  created() {
    this.baseInfo =
      this.$route.params.data ||
      JSON.parse(window.localStorage.getItem("insDetailInfo"));
    this.forms = JSON.parse(window.localStorage.getItem("forms")) || [];
    this.title = this.baseInfo.inspectionType.type;
    this.getItems();
    this.getImgs(); //获取图片
  }
};
</script>
<style lang="less" scoped>
.inspedtionDetail {
  .textarea_div {
    margin: 0.4rem;
    .textarea {
      height: 2rem;
    }
  }
  .imgs-c {
    padding: 0.28rem;
  }
  .imgs-container {
    a {
      color: #03c !important;
      &:visited {
        color: #551a8b !important;
      }
    }
    .imgs-cont {
      display: flex;
    }
    img {
      width: 1.5rem;
      height: 1.5rem;
      margin-right: 0.5rem;
    }
  }
  .colorGray {
    color: #999;
  }
  .label {
    background-color: #eee;
    height: 0.6rem;
    line-height: 0.6rem;
    padding-left: 0.2rem;
    font-size: 0.24rem;
    color: #666;
  }

  .head {
    font-size: 0.34rem;
    line-height: 0.45rem;
    border-bottom: 0.01rem solid #e6e6e6;
    p {
      padding: 0.24rem 0.48rem;
      i {
        color: #00559d;
      }
      .num {
        margin-left: 1rem;
      }
      .btn {
        float: right;
      }
    }
  }

  .info {
    color: #999;
    font-size: 0.28rem;
    overflow: hidden;
    p {
      line-height: 0.4rem;
      padding: 0.1rem 0.24rem;
      overflow: hidden;
      .overflowEllipsis2 {
        margin-left: 1.96rem;
      }
    }
  }

  .form {
    font-size: 0.32rem;
    color: #333;
    line-height: 0.86rem;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    p {
      line-height: 0.4rem;
      padding: 0.2rem 0.24rem;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .btns {
    font-size: 0.32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.24rem;
    .btn {
      border: 0.01rem solid #005395;
      color: #005395;
      background-color: #fff;
      width: 1.8rem;
      height: 0.88rem;
      line-height: 0.88rem;
      text-align: center;
      border-radius: 0.1rem;
      &.submit {
        width: 3.06rem;
        background-color: #005395;
        color: #fff;
      }
      &.cancel {
        border-color: #ccc;
        color: #333;
      }
    }
  }
  .showwrap {
    width: 75%;
    text-align: right;
  }
}
</style>
