<template>
  <div class="reportListDetail">
    <headNav
      title="隐患详情"
    ></headNav>
    <!-- 单位信息 -->
    <div class="companyInfo">
      <div class="missionInfo_cardInfo">
        <div class="missionInfo_cardInfo_contentCard">
             <van-cell
            title="检查时间"
            :value="dataList && dayjs(dataList.start_time).format('YYYY-MM-DD HH:mm:ss')"
          />
           <van-cell
            title="检查结果"
            class="check_result"
            value="异常"
          />
            <van-cell
            title="检查情况"
            class="visible_cell__value"
            :value="dataList && dataList.job_result_content"
          />
          <van-cell
            title="现场图片"
            class="wrap_cell__value"
          >
            <template>
                <van-image v-for="(item, index) in (dataList ? dataList.job_result_pictures : [])" :key="item"
                    width="60px"
                    height="60px"
                    fit="contain"
                    :src="item"
                    @click="imageClick(item, index)"
                >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                </van-image>
            </template>
          </van-cell>
        </div>
      </div>
    </div>
    <!-- 遮罩层 -->
    <v-mask :showOverLay="showOverLay" tipMsg="数据获取中..."></v-mask>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import headNav from "@/components/headNav.vue";
import dayjs from "dayjs";
import { handleProblemImgs } from "@/utils/index.js";
import mask_overLay from "@/components/overLay_xy.vue";

export default {
  name: "historyNotPassDetail",
  components: {
    headNav,
    "v-mask": mask_overLay,
  },
  props: {},
  data() {
    return {
      dayjs,
      docIist: [],
      dataList: null,
      companyInfo: "",
      showOverLay: false,
      center: "重庆市",
      contNum: "",
      isShowCheckResult: false,
      startCheckBtn: false,
      isReportCheck: false,
      hasJudge: false,
      resultValue: "改正通知书",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    imageClick(_, index) {
      ImagePreview({
				images: this.dataList.job_result_pictures,
				startPosition: index,
				closeable: true
			})
    },
    // 初始化
    async init() {
      await this.getDetailInfoApi();
    },
    // 获取任务详情信息
    async getDetailInfoApi() {
      const id = this.$route.params.id;
      this.showOverLay = true;
      await this.$http
        .get(`/v2/api/enforce-job/${id}`, {
          id,
        })
        .then((res) => {
            if (res.data.job_result_pictures) {
                res.data.job_result_pictures = res.data.job_result_pictures.split(',').map(el => handleProblemImgs(el)) 
            }
          this.dataList = res.data;
        })
        .catch((err) => {
          this.$toast.fail("获取任务信息失败");
        })
        .finally(() => {
            this.showOverLay = false;
        })
    },
  },
};
</script>

<style lang="scss" scoped>
.reportListDetail {
  font-size: 14px;
  height: 100vh;
  overflow-y: auto;
  .mt2 {
    margin-top: 3px;
  }

  .headTip {
    padding: 5px 0;
  }

  .missionInfo {
    margin-top: 57px;

    .missionInfo_cardInfo {
      padding: 0 15px;
      background-color: #fff;

      .missionInfo_cardInfo_headCard {
        padding-top: 10px;
        padding-bottom: 5px;
        font-weight: bold;
      }
    }

    .missionInfo_cardInfo_more {
    }
  }

  .companyInfo {
    @extend .missionInfo;
    position: relative;
  }

  .noticeDoc {
    margin-top: 10px;

    .noticeDoc_docItem {
      padding: 10px 0;
      background-color: #fff;
      color: #616161;
      border-bottom: 1px solid #eaeaea;

      &:last-child {
        border-bottom: none;
      }

      .noticeDoc_noticeName {
        padding: 5px 0;
      }

      .noticeDoc_status {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #787878;
        font-size: 12px;
        margin-top: 5px;
        // padding: ;
      }
    }
  }

  .inspectContent {
    margin-top: 10px;

    .inspectContent_content {
      padding: 5px 15px;
      background-color: #fff;
    }
  }

  .checkResult {
    margin-top: 10px;

    .unChecked,
    .Checked {
      padding: 5px 15px;
      background-color: #fff;

      .checkedItem {
        color: #616161;
        border-bottom: 1px solid #e8e8e8;

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }

  .reCheckResult {
    margin-top: 10px;

    .unChecked,
    .Checked {
      padding: 5px 15px;
      background-color: #fff;
    }

    .unChecked {
      padding-bottom: 10px;
    }
  }

  .lawRecord {
    margin-top: 10px;

    .unChecked,
    .Checked {
      padding: 8px 15px;
      background-color: #fff;

      .checkedItem {
        padding: 8px 0;
        align-items: center;
      }
    }
  }
}
.check_result_label {
  position: absolute;
  font-size: 40px;
  font-weight: bold;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  padding: 5px;
  border: 5px solid red;
  border-radius: 50%;
  bottom: -60px;
  right: 80px;
  transform: rotate(-30deg);
  &.NOT_PASS {
    color: red;
  }
}
.check_result {
    /deep/ {
        .van-cell__value {
            color: #f00;
        }
    }
}
</style>

<style lang="scss">
.reportListDetail {
  .van-cell {
    padding: 8px 0;
    // border-bottom: 1px solid #cfcfcf;
    font-size: 12px;

    &:last-child {
      border-bottom: none;
    }

    .van-cell__title {
      color: #565656;
    }
  }

  .missionInfo {
    .missionInfo_cardInfo {
      .search-icon.van-icon.van-icon-location {
        display: flex;
        align-items: center;
        color: #00f;
        margin-left: 10px;
      }

      .van-icon.van-icon-arrow.van-cell__right-icon {
        margin-left: 10px;
      }
    }
  }

  .missionInfo_cardInfo_more {
    .van-button.van-button--info.van-button--small {
      padding: 5px 20px;
      height: auto;
      margin-bottom: 5px;
      background-color: transparent;
      border: none;
      color: #448fff;
      font-size: 13px;
      font-weight: bold;
    }
  }

  .inspectContent_content {
    .van-cell__value {
      color: #02a7f0;

      span {
        font-size: 9px;
      }
    }

    .van-icon.van-icon-arrow.van-cell__right-icon {
      color: #02a7f0;
      font-size: 12px;
    }
  }

  .van-empty {
    padding: 0;
    padding-bottom: 10px;
  }

  .van-empty__description {
    color: #878787;
    font-weight: bold;
  }

  .checkResult,
  .reCheckResult {
    .unChecked,
    .Checked {
      .checkedItem {
        .van-cell,
        .van-cell.van-cell--clickable {
          border: none;

          &::after {
            border: none;
          }
        }

        .van-cell__value {
          color: #02a7f0;

          span {
            font-size: 9px;
          }
        }

        .van-icon.van-icon-arrow.van-cell__right-icon {
          color: #02a7f0;
          font-size: 12px;
        }
      }
    }
  }

  .van-empty__image {
    width: 140px;
    height: 130px;
  }

  .van-empty__bottom {
    margin-top: 5px;

    .van-button.van-button--info.van-button--normal {
      width: 120px;
      height: 40px;
      border-radius: 5px;
    }
  }
}

.block-btn {
  width: 90%;
  margin: 35px 5%;
  border-radius: 3px;
}
</style>
<style lang="scss" scoped>
.job_status {
  /deep/ {
    .van-cell__value {
      color: #fe9400;
    }
  }
}
</style>
