<template>
  <div class="reportListDetail">
    <headNav
      title="检查记录"
    ></headNav>
    <!-- 单位信息 -->
    <div class="companyInfo">
      <div class="missionInfo_cardInfo">
        <div class="missionInfo_cardInfo_contentCard">
          <van-cell
            title="单位名称"
            :value="dataList && dataList.enforce_obj_name"
          ></van-cell>
          <van-cell
            title="单位地址"
            :value="
              dataList &&
                dataList.enforce_obj &&
                dataList.enforce_obj.enforce_obj_address
            "
          />
          <van-cell
            title="单位法人"
            :value="
              dataList &&
                dataList.enforce_obj &&
                dataList.enforce_obj.legal_person
            "
          />
          <van-cell
            title="联系方式"
            :value="
              dataList &&
                dataList.enforce_obj &&
                dataList.enforce_obj.legal_person_phone
            "
          />
          <van-cell
            title="下发单位"
            :value="dataList && dataList.enforce_org_name"
          />
            <van-cell
            title="编号"
            :value="dataList && dataList.job_no"
          />
          <van-cell
            title="检查时间"
            :value="dataList && dayjs(dataList.start_time).format('YYYY/MM/DD HH:mm:ss')"
          />
          <van-cell
            title="检查类型"
            :value="dataList && jobTypeMap[dataList.job_type]"
          />
          <van-cell
            title="检查内容和情况"
            :value="dataList && dataList.job_result_content"
          />
          <van-cell
            title="现场图片"
            class="image_list"
          >
            <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>
          </van-cell>
          <van-cell
            title="备注"
            class="remark"
            :value="dataList && dataList.job_result_remark"
          />
          <van-cell
            title="检查结论"
            :value="
              dataList && dataList.enforce_result === 'PASS' ? '合格' : '不合格'
                
            "
          />
        </div>
      </div>
    </div>
    <!-- 弹出地图展示 -->
    <van-popup v-model="showMap" position="bottom" :style="{ height: '450px' }">
      <div><baiduMap :center="center" :zoom="zoom"></baiduMap></div>
    </van-popup>
    <!-- 遮罩层 -->
    <v-mask :showOverLay="showOverLay" tipMsg="数据获取中..."></v-mask>
  </div>
</template>

<script>
import { Dialog, ImagePreview } from "vant";
import headNav from "@/components/headNav.vue";
import { get, post, put, Get } from "@/utils/http.js";
import dayjs from "dayjs";
import { enfoceJobStatus, enfoceJobSource, jobTypeMap } from "@/utils/variables.js";
import { handleProblemImgs } from "@/utils/index.js";
import baiduMap from "@/components/baiduMap.vue";
import mask_overLay from "@/components/overLay_xy.vue";

export default {
  name: "reportListDetail",
  components: {
    headNav,
    baiduMap,
    "v-mask": mask_overLay,
  },
  props: {},
  data() {
    return {
      jobTypeMap,
      dayjs,
      enfoceJobStatus,
      enfoceJobSource,
      docIist: [],
      dataList: null,
      companyInfo: "",
      showMap: false,
      showOverLay: false,
      zoom: 14,
      center: "重庆市",
      contNum: "",
      isShowCheckResult: false,
      startCheckBtn: false,
      isReportCheck: false,
      hasJudge: false,
      resultValue: "改正通知书",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    imageClick(_, index) {
      ImagePreview({
				images: this.dataList ? this.dataList.job_result_pictures : [],
				startPosition: index,
				closeable: true
			})
    },
    startCheck() {
      // 如果立改和限改都下发后，并且限改不是驳回状态 则直接跳转责令改正通知界面
      if (
        this.dataList.immediately_file_id &&
        this.dataList.deadline_file_id &&
        this.dataList.notification_audit_status !== "REJECT"
      ) {
        this.$router.push({
          path: `/reportJobOptimizeNotice/${this.dataList.id}`,
        });
        return;
      }
      Dialog.confirm({
        title: "请确认",
        message: "开始检查前请确保执法记录仪已处于开启状态!",
      })
        .then(() => {
          this.dataList.start_time = new Date();
          if (this.dataList.job_status === "TODO") {
            this.$http
              .put(`/v2/api/enforce-job/${this.dataList.id}`, {
                job_status: "DOING",
                start_time: this.dataList.start_time,
              })
              .then((res) => {
                this.$router.push({
                  name: "executeReportJob",
                  query: {
                    jobDetail: JSON.stringify(this.dataList),
                  },
                });
              });
          } else {
            this.$router.push({
              name: "executeReportJob",
              query: {
                jobDetail: JSON.stringify(this.dataList),
              },
            });
          }
        })
        .catch(() => {});
    },
    // 初始化
    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;
        })
    },

    // 获取单位信息
    async getCompanyInfoApi() {
      // await get(`/cdSuperObjE/get/${this.dataList.checkObjId}`)
      // 	.then((res) => {
      // 		if (res.success == true) {
      // 			this.companyInfo = res.data;
      // 		}
      // 	})
      // 	.catch((err) => {
      // 		this.$toast.fail("获取公司信息失败");
      // 		this.showOverLay = false;
      // 	});
    },

    async getCheckJudgeApi() {
      // await get("/cdsupervisionCheckRecord/listByCondition", {
      // 	taskId: this.dataList.taskId,
      // }).then((res) => {
      // 	if (res.data.length > 0) {
      // 		this.hasJudge = true;
      // 	} else {
      // 		this.resultValue = "检查合格";
      // 	}
      // });
    },

    // 后退一个页面
    backPage() {
      this.$router.push("/");
    },

    goBack() {
      this.$router.push("/");
    },

    // 跳转单位信息
    turnToCompany(id) {
      this.$router.push(`/companyInfo/${id}`);
    },

    // 获取地图中心位置
    getCenter(location) {
      this.showMap = true;
      this.center = location;
    },

    // 跳转消防监督检查记录
    turnToRecord() {
      this.$router.push(
        `/reviewRecord/${this.$route.params.ID}/${this.dataList.taskId}/1`
      );
    },

    turnToResult() {
      if (this.hasJudge) {
        this.$router.push(
          `/checkResultDetail/${this.$route.params.ID}/${this.dataList.taskId}/1`
        );
      } else {
        return;
      }
    },

    // // 开始检查
    // startCheck(id) {
    // 	if (this.dataList.excuteStatus === "1") {
    // 		if (this.dataList.excuteTime) {
    // 			put("/cdsupervisionOthertask/edit", {
    // 				id: this.$route.params.ID,
    // 				excuteStatus: "3",
    // 			}).then((res) => {
    // 				if (res.success === true) {
    // 					this.$router.push(
    // 						`/reviewRecord/${this.$route.params.ID}/${this.dataList.taskId}/1`
    // 					);
    // 				}
    // 			});
    // 		} else {
    // 			this.$toast.fail("暂无检查时间");
    // 		}
    // 	} else {
    // 		this.$router.push(
    // 			`/reviewRecord/${this.$route.params.ID}/${this.dataList.taskId}/1`
    // 		);
    // 	}
    // },

    // 复查
    review() {
      this.$router.push("/review");
    },
  },
};
</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;
  }
}
.remark {
  /deep/ {
    .van-cell__value {
      white-space: normal;
    }
  }
}
.image_list {
  /deep/ {
    .van-cell__value {
      white-space: normal;
    }
  }
}
</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>
