<template>
  <div class="inspedtionDetail">
    <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">
        <span v-if="index%2==0">{{item.templateOptions.placeholder}}</span>
        <span v-if="index%2==1" class="colorGray">{{param[item.key]?'不正常':'正常'}}</span>
      </p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
      baseInfo: {}, //巡检基础信息
      items: [], //巡检项目
      labels: [], //巡检项目label
      status: [], //巡检项目的状态
      forms: [], //巡检结果
      abnormal: "", //异常项
      param: {
        inspectionProcessActual: {}
      },
      model: {}
    };
  },
  methods: {
    // 获取项目异常状态
    getItems() {
      var that = this;
      that.$http
        .get(
          "/service/form/renderForm/inspection_confirm/" +
            that.baseInfo.processInstanceId +
            "/" +
            that.loginUser.id,
          {}
        )
        .then(function(res) {
          console.log(res.data);
          that.model = res.data.model;
          var fields = res.data.fields;
          console.log(fields);
          fields.forEach(v => {
            if (v.templateOptions.label == "检查项目") {
              that.labels.push(v);
            }
            if (v.templateOptions.label == "状态") {
              that.status.push(v);
            }
          });
          console.log(that.labels);
          console.log(that.status);
          let labels = that.labels;
          let status = that.status;
          let j = 0,
            newArr = new Array();
          for (let i = 0; i < that.labels.length; i++) {
            j = i * 2;
            newArr[j] = that.labels[i];
            newArr[j + 1] = that.status[i];
          }
          console.log(newArr);
          that.forms = newArr;
          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 }
      });
    }
  },
  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();
  }
};
</script>
<style lang="less" scoped>
.inspedtionDetail {
    .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;
      // border-bottom: 0.01rem solid #ccc;
      width: 35%;
      &:nth-child(2n){
          text-align: right;
      }
    }
  }

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