<template>
  <div class="checkResult">
    <headNav
      @backPage="backPage"
      :RText="Judeg"
      @addRoad="turnjudeg"
      :id="$route.params.id"
      :backRouter="{
        path: `/reportListDetail/${$route.params.id}`
      }"
      :title="'检查总结'"
    ></headNav>

    <!-- 检查结果 -->
    <div class="danger" v-if="jobDetail">
      <div class="headTip FontColorInfo">检查结果</div>
      <div class="noProblem" v-if="jobDetail.enforce_result === 'PASS'">
        检查项全部正常
      </div>
      <div class="noProblem colorRed" v-else>
        检查项部分异常
      </div>
    </div>
    <div class="checkJudge" v-if="jobDetail">
      <div class="headTip FontColorInfo">异常情况</div>
      <div class="radio">
        <div class="radioItem">{{ jobDetail.job_result_content }}</div>
      </div>
    </div>

    <!-- 检查判断 -->
    <div class="checkJudge" v-if="jobDetail && hasRes">
      <div class="headTip FontColorInfo">检查判断</div>
      <van-checkbox-group v-if="jobDetail.enforce_result === 'NOT_PASS'" v-model="checkJudgeData">
        <div class="radio">
          <div class="radioItem">
            <van-checkbox
              icon-size="0.4rem"
              name="IMMEDIATELY"
              shape="square"
              :disabled="!!jobDetail.immediately_file_id"
            >
              <div class="df jfsb aic">
                <div class="abnormal">
                  部分检查情况异常，责令立即改正
                </div>
              </div>
            </van-checkbox>
            <div class="mt10 ml20 fz12 FontColorInfo">
              《责令立即改正通知》
            </div>
          </div>
          <div class="radioItem">
            <van-checkbox
              icon-size="0.4rem"
              name="DEADLINE"
              shape="square"
              :disabled="!!(jobDetail.deadline_file_id && jobDetail.notification_audit_status !== 'REJECT')"
            >
              <div class="df jfsb aic">
                <div class="abnormal">
                  部分检查情况异常，责令限期改正
                </div>
              </div>
            </van-checkbox>
            <div class="mt10 ml20 fz12 FontColorInfo">
              《责令限期改正通知》
            </div>
          </div>
        </div>
      </van-checkbox-group>
      <van-checkbox-group v-else v-model="checkJudgeData">
        <div class="radio">
          <div class="radioItem">
            <van-checkbox
              icon-size="0.4rem"
              name="DEADLINE"
              shape="square"
              :disabled="!!(jobDetail.deadline_file_id && jobDetail.notification_audit_status !== 'REJECT')"
            >
              <div class="df jfsb aic">
                <div class="abnormal">
                  检查情况良好，未发现异常隐患情况
                </div>
              </div>
            </van-checkbox>
          </div>
        </div>
      </van-checkbox-group>
      <div class="btn">
        <van-button type="info" @click="sure">确定</van-button>
      </div>
    </div>
    <!-- 遮罩层 -->
    <v-mask :showOverLay="showOverLay" :tipMsg="tipMsg"></v-mask>
  </div>
</template>

<script>
import headNav from "@/components/headNav.vue";
import mask_overLay from "@/components/overLay_xy.vue";
import { get, post, put } from "@/utils/http.js";
import dayjs from "dayjs";
import _ from "lodash";

export default {
  name: "checkResult",
  components: {
    headNav,
    "v-mask": mask_overLay,
  },
  data() {
    return {
      showDetailState: false,
      showTimeReal: false,
      Judeg: "",
      resultList: "",
      checkCheck: "",
      checkCheckGroup: [],
      checkDisable: false,
      topDisabled: false,
      showOverLay: false,
      tipMsg: "加载中",
      allTime: 0,
      checkContent: "",
      commuteTime: "",
      hasRes: false,
      checkList: [],
      checkJudgeData: [],
      // checkGroupList:[],
      checkType: "",
      title: "",
      jobDetail: null
      // checkDeadline:false,
      // checkRightNow:false
    };
  },
  created() {
    this.getJobDetailInfoApi()
  },
  mounted() {
    this.init();
  },
  computed: {
    checkGroupList(val) {
      return (this.checkList || [])
        .filter((item) => item.correct_type === this.checkType)
        .map((item) => item.id);
    },
    checkRightNow(val) {
      // 立刻
      return (this.checkList || []).filter(
        (item) => item.correct_type === "IMMEDIATELY"
      );
    },
    checkDeadline(val) {
      // 限期
      return (this.checkList || []).filter(
        (item) => item.correct_type === "DEADLINE"
      );
    },
  },
  methods: {
    checkBoxChange(itemId) {
      let tmpList = this.checkList || [];
      let findItem = tmpList.find((item) => item.id === itemId);
      if (findItem) {
        if (findItem.correct_type) {
          findItem.correct_type =
            findItem.correct_type === "IMMEDIATELY"
              ? "DEADLINE"
              : "IMMEDIATELY";
        } else {
          findItem.correct_type = this.checkType;
        }
      }
      let noCheckType =
        this.checkType === "IMMEDIATELY" ? "DEADLINE" : "IMMEDIATELY";

      for (let i = 0; i < tmpList.length; i++) {
        let findItem = tmpList[i];

        if (findItem === itemId) {
          if (findItem.correct_type) {
            findItem.correct_type =
              findItem.correct_type === this.checkType
                ? noCheckType
                : this.checkType;
          } else {
            findItem.correct_type = this.checkType;
          }
        } else {
          findItem.correct_type =
            findItem.correct_type === this.checkType
              ? this.checkType
              : noCheckType;
        }
      }
      this.checkList = [...tmpList];
    },
    // 关闭详情
    closeOverLay() {
      this.showDetailState = false;
    },
    checkChang(b) {
      console.log(b);
      this.checkJudgeData = ['2', '3']
    },
    // 跳转至列表
    async gotoList(type) {
      this.checkType = type;
      this.showDetailState = true;
      if (type === "IMMEDIATELY") {
        this.title = "责令立即改正";
      } else {
        this.title = "责令限期改正";
      }
    },
    // 初始化
    async init() {
      await this.getPageListApi();
      if (this.$route.params.status === "normal") {
        this.hasRes = true;
      } else {
        this.hasRes = false;
      }
      const judgeTime = this.$store.state.taskInfo.taskInfo.checkTime;

      if (judgeTime !== null) {
        this.hasRes = true;
        this.Judeg = "判断";
      } else {
        this.hasRes = false;
      }

      if (this.resultList.length === 0) {
        this.checkCheck = true;
        this.topDisabled = true;
        this.Judeg = "";
      } else {
        this.topDisabled = true;
      }
    },

    // 获取列表 信息
    async getPageListApi() {
      this.tipMsg = "加载中";
      this.showOverLay = true;
      this.resultList = [];
      await get("/v2/api/enforce-job/item", {
        page: 1,
        size: 999,
        query: `job_id==${this.$route.params.ID};check_result==2`,
      }).then(async (res) => {
        this.showOverLay = false;
        if (res?.data) {
          for (let i = 0; i < res?.data.length; i++) {
            let item = res.data[i] || {};
            item.index = i + 1;
            if (item.item_id) {
              let tmpRes = await this.$http
                .get(`/v2/api/enforce-handbook/${item.item_id}`)
                .catch(() => null);
              item["enforce_content"] = tmpRes.data["enforce_content"];
              item["createdTime"] = dayjs(item["update_time"]).format(
                "YYYY-MM-DD hh:ss:mm"
              );
            }
            this.resultList.push(item);
            this.checkList.push(item);
          }
        }
      });
    },

    backPage() {
      this.$router.go(-1);
    },

    turnjudeg() {
      this.$router.push(
        `/checkResultDetail/${this.$route.params.ID}/${this.$route.params.currentID}`
      );
    },

    // 跳转检查详情页面
    gotoDangerDetail(item) {
      this.$router.push(`/dangerDetail/${item.item_id}`);
    },
    // 获取任务详情信息
		async getJobDetailInfoApi() {
      this.showOverLay = true;
      this.tipMsg = '数据获取中'
			const id = this.$route.params.id
			await this.$http.get(`/v2/api/enforce-job/${id}`, {
				params: {
          id
        }
			})
				.then((res) => {
					this.jobDetail = res.data;
				})
				.catch((err) => {
          console.log(11111,err);
					this.$toast.fail("获取任务信息失败");
				})
        .finally(() => {
					this.showOverLay = false;
        })
    },
    sure() {
      if (this.jobDetail.enforce_result === 'NOT_PASS') {
        this.$router.replace({
          path: `/reportJobOptimizeNotice/${this.jobDetail.id}`,
          query: {
              checkJudgeData: this.checkJudgeData.join(',')
          }
        })
      } else if (this.jobDetail.enforce_result === 'PASS') {
        // 将任务状态修改为已归档
        this.$http.put(`/v2/api/enforce-job/${this.jobDetail.id}`, {
          job_status: 'ARCHIVED'
        }).then(res => {
          // 跳转到列表界面
          // this.$router.replace({
          //   path: `/reportList`
          // })
          this.$router.back();
        })
      }
         
    //   this.showOverLay = true;
        // this.$http.put(`/v2/api/enforce-job/${this.jobDetail.id}`, {
        //         deadline_file_result: this.checkJudgeData.includes('3'),
        //         immediately_file_result: this.checkJudgeData.includes('2'),
        //     }).then(res => {
        //         this.$router.push({
        //             path: `/reportJobMonitorCheckRecord/${this.jobDetail.id}`,
        //             query: {
        //                 jobDetail: JSON.stringify(this.jobDetail)
        //             }
        //         })
        //     })
    },

    // 第一个checkBox改变
    firstCheckChange() {
      if (this.checkCheck == true) {
        this.checkDisable = true;
        this.checkCheckGroup = [];
      } else {
        this.checkDisable = false;
      }
    },

    // 限制输入框
    contentInputChange(value) {
      if (isNaN(value) || value.trim() === "") {
        this.checkContent = "";
      }
    },

    contentInputBlur() {
      this.allTime = 0;
      if (this.checkContent) {
        this.checkContent = parseFloat(this.checkContent).toFixed(1);
        if (this.commuteTime === "") {
          this.allTime = 0 + parseFloat(this.checkContent);
        } else {
          this.allTime =
            parseFloat(this.commuteTime) + parseFloat(this.checkContent);
        }
      }

      this.allTime = this.allTime.toFixed(1);
    },

    // 限制输入框
    commuteInputChange(value) {
      if (isNaN(value) || value.trim() === "") {
        this.commuteTime = "";
      }
    },

    commuteInputBlur() {
      this.allTime = 0;
      if (this.commuteTime) {
        this.commuteTime = parseFloat(this.commuteTime).toFixed(1);
        if (this.checkContent === "") {
          this.allTime = 0 + parseFloat(this.checkContent);
        } else {
          this.allTime =
            parseFloat(this.commuteTime) + parseFloat(this.checkContent);
        }
      }
      this.allTime = this.allTime.toFixed(1);
    },

    sureTimePlan() {
      if (this.checkContent === "" || this.commuteTime === "") {
        this.$toast.fail("检查时间不能为空");
      } else {
        this.showTimeReal = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.checkResult {
  .headNav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;

    .van-nav-bar__title {
      font-size: 15px;
    }

    .van-nav-bar__right {
      .van-nav-bar__text {
        color: #0066ff;
      }
    }

    .van-nav-bar__left {
      .van-icon.van-icon-arrow-left.van-nav-bar__arrow {
        color: #787878;
      }
    }

    .van-nav-bar__content {
      // border-bottom: 1px solid #b4b4b6;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .van-nav-bar__text {
      font-size: 14px;
    }

    .van-icon {
      font-size: 20px !important;
      color: #0073ac;
    }
  }
  .content-check {
    padding: 50px 10px 10px;
    .item {
      border-bottom: 1px solid #dfdfdf;
    }
    .content {
      height: calc(100vh - 105px);
      overflow-y: auto;
    }
    .submitBtn {
      width: 100%;
    }
  }
  .abnormal {
    white-space: nowrap; //强制不换行
    text-overflow: ellipsis; //省略号显示
  }
  font-size: 14px;
  .title {
    font-size: 16px;
  }
  .headTip {
    margin-bottom: 10px;
    padding: 0 15px;
  }

  .color1 {
    color: #02a7f0;
  }

  .color2 {
    color: #d9001b;
  }

  .color3 {
    color: #7f7f7f;
  }

  .danger {
    margin-top: 57px;
    padding: 0 10px;
  }

  .noProblem {
    padding: 30px 15px;
    background-color: #fff;
    border-bottom: 1px solid #c7c9cb;
    color: #3fbf83;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
  }
  .colorRed {
    color: red;
  }

  .dangerList {
    display: flex;
    background-color: #fff;
    justify-content: space-between;
    border-bottom: 1px solid #c7c9cb;

    .index {
      width: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
    }

    .dangerContent {
      display: flex;
      flex-direction: column;
      padding: 0px 15px;
      font-size: 12px;
      color: #8f9091;
      padding-left: 0;
    }
  }

  .checkJudge {
    margin-top: 10px;
    padding: 0 10px;

    .radio {
      .radioItem {
        margin: 0px 0;
        padding: 10px 15px;
        background-color: #fff;
        border-bottom: 1px solid #ddd;
      }

      .radioItem.itemFirst {
        margin-bottom: 15px;
      }
    }
  }

  .btn {
    margin-top: 30px;
    display: flex;
    justify-content: space-around;

    button {
      flex: 1;
      margin: 0 20px;
    }
  }

  .timeReal {
    background-color: #f5f5f5;
    margin-top: 10px;
    padding: 0 10px;

    .popContent {
      padding: 10px 20px;
      padding-bottom: 0;

      .topInfo {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 0;
        color: #323233;
      }

      .totalTime {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        color: #acacac;
        padding: 5px 0;
        margin-left: 5px;
      }

      .inputContent {
      }

      .popBtn {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        margin-bottom: 10px;

        div {
          height: 40px;
          text-align: center;
          line-height: 40px;
          margin: 0 5px;
          background-color: #dcdcdc;

          &:last-child {
            background-color: #0066ff;
            color: #ffffff;

            &:active {
              background: #0189ff;
            }
          }

          &:active {
            background: #e8e8e8;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.checkResult {
  height: 100vh;
  overflow: auto;
  .van-cell {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #5c5c5e;

    &::after {
      border-bottom: 1px solid #888888;
    }
  }

  .dangerList {
    .van-cell.van-cell--clickable {
      padding: 5px 15px 5px 0;
    }
  }

  .van-radio__label {
    color: #767676;
  }

  .van-button.van-button--default.van-button--normal {
    background-color: #d7d7d7;
    color: #fff;
  }

  .van-cell::after {
    border: none;
  }

  .timeReal {
    .van-cell.van-cell--clickable {
      border-bottom: 1px solid #c5c5c5;
    }
  }
}
</style>
