<template>
  <div class="correctDeadline">
    <headNav :title="'责令限期改正'"></headNav>

    <div v-if="pdfUrl" style="margin-top: 47px;">
      <van-image :src="pdfUrl"></van-image>
    </div>

    <div v-if="!hasData">
      <!-- pdf内容 -->
      <div class="pdf_container" id="pdfContainer">
        <!-- pdf标题 -->
        <div class="pdf_top_title">
          <div class="lawUtil">
            <span class="fz12">{{ formData && formData.enforce_org_name }}</span>
          </div>
          <div class="theme mt10">责令限期改正通知书</div>
          <div class="number mt10">
            <!-- <span class="fz12">编号：{{ formData.job_no }}</span> -->
            <span class="fz12">{{ pdfNumberRes }}</span>
          </div>
        </div>

        <!-- pdf单位信息 -->
        <div class="pdf_content_utilInfo scale8">
          <div class="util">{{ formData && formData.enforce_obj_name }}:</div>
          <div class="tips" v-if="formData && formData.enforce_obj">
            根据《中华人民共和国消防法》第五十三条的规定， 我
            <span>{{formData && formData.enforce_org_name}}</span>于
            <span>{{ year }}</span>年
            <span>{{ month }}</span>月
            <span>{{ day }}</span>日 对你单位（场所）进行消防监督检查， 发现存在下列第
            <span>{{ itemGroup.join("，") }}</span>
            项消防安全违法行为,现责令立即改正：
          </div>
        </div>

        <!-- pdf问题选项 -->
        <div class="pdf_content_issue scale8">
          <div class="checkTotal">
            <van-checkbox-group
              v-model="itemGroup"
              @change="groupChange"
              :disabled="hasData"
            >
              <div class="item">
                <div class="df">
                  <van-checkbox name="1" shape="square" icon-size="0.4rem">
                    1. 未依法进行
                  </van-checkbox>
                </div>

                <van-checkbox-group
                  @change="checkChange(1, $event)"
                  v-model="group1"
                >
                  <van-checkbox name="g11" shape="square" icon-size="0.4rem">
                    消防设计备案/
                  </van-checkbox>
                  <van-checkbox name="g12" shape="square" icon-size="0.4rem">
                    竣工验收消防备案;
                  </van-checkbox>
                </van-checkbox-group>
              </div>

              <div class="item">
                <div class="df">
                  <van-checkbox name="2" shape="square" icon-size="0.4rem">
                    2. 消防设施、器材、消防安全标志
                  </van-checkbox>
                </div>

                <van-checkbox-group
                  @change="checkChange(2, $event)"
                  v-model="group2"
                >
                  <van-checkbox
                    style="margin-left: 35px;"
                    name="g11"
                    shape="square"
                    icon-size="0.4rem"
                  >
                    配置、设置不符合标准，
                  </van-checkbox>
                  <van-checkbox name="g12" shape="square" icon-size="0.4rem">
                    未保持完好有效;
                  </van-checkbox>
                </van-checkbox-group>
              </div>

              <div class="item">
                <div class="df">
                  <van-checkbox name="3" shape="square" icon-size="0.4rem">
                    3.
                  </van-checkbox>
                </div>

                <van-checkbox-group
                  v-model="group3"
                  @change="checkChange(3, $event)"
                >
                  <van-checkbox name="g11" shape="square" icon-size="0.4rem">
                    损坏/
                  </van-checkbox>
                  <van-checkbox name="g12" shape="square" icon-size="0.4rem">
                    挪用/
                  </van-checkbox>
                  <van-checkbox name="g13" shape="square" icon-size="0.4rem">
                    擅自拆除消防设施、器材;
                  </van-checkbox>
                </van-checkbox-group>
              </div>

              <div class="item">
                <div class="df">
                  <van-checkbox name="4" shape="square" icon-size="0.4rem">
                    4.
                  </van-checkbox>
                </div>

                <van-checkbox-group
                  v-model="group4"
                  @change="checkChange(4, $event)"
                >
                  <van-checkbox name="g11" shape="square" icon-size="0.4rem">
                    占用/
                  </van-checkbox>
                  <van-checkbox name="g12" shape="square" icon-size="0.4rem">
                    堵塞/
                  </van-checkbox>
                  <van-checkbox name="g13" shape="square" icon-size="0.4rem">
                    封闭疏散通道、安全出口;
                  </van-checkbox>
                </van-checkbox-group>
              </div>

              <div class="item">
                <div class="df">
                  <van-checkbox name="5" shape="square" icon-size="0.4rem">
                    5.
                  </van-checkbox>
                </div>

                <van-checkbox-group
                  v-model="group5"
                  @change="checkChange(5, $event)"
                >
                  <van-checkbox name="g11" shape="square" icon-size="0.4rem">
                    埋压/
                  </van-checkbox>
                  <van-checkbox name="g12" shape="square" icon-size="0.4rem">
                    圈占/
                  </van-checkbox>
                  <van-checkbox name="g13" shape="square" icon-size="0.4rem">
                    遮挡消火栓,
                  </van-checkbox>
                  <van-checkbox name="g14" shape="square" icon-size="0.4rem">
                    占用防火间距;
                  </van-checkbox>
                </van-checkbox-group>
              </div>

              <div class="item">
                <div class="df">
                  <van-checkbox name="6" shape="square" icon-size="0.4rem">
                    6.
                  </van-checkbox>
                </div>

                <van-checkbox-group
                  v-model="group6"
                  @change="checkChange(6, $event)"
                >
                  <van-checkbox name="g11" shape="square" icon-size="0.4rem">
                    占用/
                  </van-checkbox>
                  <van-checkbox name="g12" shape="square" icon-size="0.4rem">
                    堵塞/
                  </van-checkbox>
                  <van-checkbox name="g13" shape="square" icon-size="0.4rem">
                    封闭消防车通道，妨碍消防车通行;
                  </van-checkbox>
                </van-checkbox-group>
              </div>

              <div class="item">
                <div class="df">
                  <van-checkbox name="7" shape="square" icon-size="0.4rem">
                    7. 人员密集场所外墙门窗上设置影响逃生、灭火救援的障碍物;
                  </van-checkbox>
                </div>
              </div>

              <div class="item">
                <div class="df">
                  <van-checkbox name="8" shape="square" icon-size="0.4rem">
                    8. 使用
                  </van-checkbox>
                </div>

                <van-checkbox-group
                  v-model="group8"
                  @change="checkChange(8, $event)"
                >
                  <van-checkbox name="g11" shape="square" icon-size="0.4rem">
                    不符合市场准入/
                  </van-checkbox>
                  <van-checkbox name="g12" shape="square" icon-size="0.4rem">
                    不合格/
                  </van-checkbox>
                  <van-checkbox name="g13" shape="square" icon-size="0.4rem">
                    国家明令淘汰的消防产品;
                  </van-checkbox>
                </van-checkbox-group>
              </div>

              <div class="item">
                <div class="df">
                  <van-checkbox name="9" shape="square" icon-size="0.4rem">
                    9.
                  </van-checkbox>
                </div>

                <van-checkbox-group
                  style="margin-left: 35px; margin-top: -22px;"
                  v-model="group9"
                  @change="checkChange(9, $event)"
                >
                  <van-checkbox name="g11" shape="square" icon-size="0.4rem">
                    电器产品/
                  </van-checkbox>
                  <van-checkbox name="g12" shape="square" icon-size="0.4rem">
                    燃气用具的安装、使用及其线路、管路的设计、敷设、维护保养、检测不符合消防技术标准和管理规定;
                  </van-checkbox>
                </van-checkbox-group>
              </div>

              <div class="item">
                <div class="df">
                  <van-checkbox name="10" shape="square" icon-size="0.4rem">
                    10. 不履行《中华人民共和国消防法》
                  </van-checkbox>
                </div>

                <van-checkbox-group
                  v-model="group10"
                  @change="checkChange(10, $event)"
                  style="margin-left: 35px;"
                >
                  <van-checkbox name="g11" shape="square" icon-size="0.4rem">
                    第十六条/
                  </van-checkbox>
                  <van-checkbox name="g12" shape="square" icon-size="0.4rem">
                    第十七条/
                  </van-checkbox>
                  <van-checkbox name="g13" shape="square" icon-size="0.4rem">
                    第十八条/
                  </van-checkbox>
                  <van-checkbox name="g14" shape="square" icon-size="0.4rem">
                    第二十一条第二款规定的其他消防安全职责;
                  </van-checkbox>
                </van-checkbox-group>
              </div>

              <div class="item" style="flex-direction: column;">
                <div class="df">
                  <van-checkbox name="11" shape="square" icon-size="0.4rem">
                    11. 其他消防安全违法行为和火灾隐患：
                  </van-checkbox>
                </div>

                <!-- <div :class="showProblems?'remark':'underLine'">
                    <span v-if="showProblems">{{otherInfo}}</span>
                    <van-field v-else v-model="otherInfo" :disabled="hasData" type="textarea" autosize rows="2"/>
                </div> -->
                <div :class="showSubmitBtn?'underLine':'underLine-show'">
                    <van-field v-if="showSubmitBtn" v-model="otherInfo" type="textarea" autosize rows="2"/>
                    <span style="line-height: 22px; text-decoration: underline;" v-else>{{otherInfo}}</span>
                </div>

                <!-- <div class="underLine">
                  <van-field
                    v-model="otherInfo"
                    :disabled="hasData"
                    type="textarea"
                    autosize
                    rows="2"
                  />
                </div> -->
              </div>
            </van-checkbox-group>
          </div>
        </div>

        <!-- 具体问题 -->
        <div class="specificQs scale8" v-if="showProblems">
          <div class="df jfsb aic">
            <div class="FontColorNormal">具体问题：</div>
            <!-- <van-icon name="arrow"></van-icon> -->
          </div>

          <div class="problems" :class="showSubmitBtn?'border':''">
            <van-field v-if="showSubmitBtn" v-model="problemInfo" type="textarea" autosize rows="1"/>
            <div class="problem" v-else-if="problemInfo" v-html="problemInfoStr"></div>
            <!-- <template v-if="isSpecialEasy">
              <div class="problem">{{formData.job_result_content}}</div>
            </template>
            <template v-else-if="problemList">
              <div class="problem" v-for="item in problemList" :key="item.id">
                {{ item.name }}-{{ item.result }}：{{item.checkInfo}}
              </div>
            </template> -->
          </div>
        </div>
        <!-- <div class="pdf_content_issueD scale8">
          <div class="FontColorNormal" v-if="sureDetailIssue.length > 0">
            具体问题：
          </div>
          <div class="content">
            <div
              v-for="(item, index) in sureDetailIssue"
              :key="index"
              class="df"
            >
              <span>{{ index + 1 }}.</span>
              <span class="ml10 FontColorNormal">{{ item.content }}</span>
            </div>
          </div>
        </div> -->

        <!-- 填写修改信息 -->
        <div class="filed scale8" :style="isReportOrOther ? 'margin-top: -45px;':''">
          <div class="tips" @click="showFixPicker=true;">
            对上述第
            <span>{{ itemGroup.join("，") }}</span>
            项，责令你单位(场所)于
            <!-- <span class="date"> -->
              <span class="date10">{{ fixDateObj.year }}</span>年
              <span class="date10">{{ fixDateObj.month }}</span>月
              <span class="date10">{{ fixDateObj.day }}</span>日
            <!-- </span> -->
             前改正。改正期间，你单位(场所)应当采取措施，确保消防安全。对消防安全违法行为，将依法予以处罚。
          </div>
        </div>

        <!-- 日期 -->
        <!-- <div class="pdf_content_date scale8">
          <span>{{ this.nowDate }}</span>
        </div> -->

        <!-- 被检查单位签收 -->
        <div class="pdf_content_signup scale8">
           <!-- @click="showSignPop = true" -->
          <div class="img">
            <span>被检查单位(场所)签收：</span>
            <van-image width="60" height="40" v-if="signValue" :src="signValue"></van-image>
          </div>
          <div class="date" @click="showSignDatePicker=true;">
            <span>{{ signDateObj.year }}</span>年
            <span>{{ signDateObj.month }}</span>月
            <span>{{ signDateObj.day }}</span>日
          </div>
          <!-- <div class="date">
            <input type="text" />
            年
            <input type="text" />
            月
            <input type="text" />
            日
          </div> -->
        </div>

        <!-- 提示信息 -->
        <div class="pdf_content_tips">
          一式两份，一份交被检查单位(场所)，一份存档。
        </div>
      </div>

      <!-- v-if="!isReportCheck" -->

      <!-- <div class="specificQs" v-else>
        <div class="FontColorNormal">具体问题</div>
        <div class="content">{{ detailProblem }}</div>
      </div> -->

      <!-- <div class="signCard">
        被检查单位（场所）签收：
        <span class="FontColorInfo" @click="showSignPop = true" v-if="!hasData">
          打开签字板
        </span>
      </div> -->

      <!-- 具体问题弹窗 -->
      <van-popup
        v-model="showQesPop"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <div class="popContent">
          <van-checkbox-group v-model="checkedIssue" disabled>
            <van-cell-group>
              <van-cell
                v-for="item in problemList"
                clickable
                :key="item.id"
                :label="item.name"
              >
                <!-- @click="toggle(index)" -->
                <template #right-icon>
                  <van-checkbox
                    :name="item.id"
                    ref="checkboxes"
                    icon-size="18px"
                    shape="square"
                  />
                </template>
                <template #title>
                  <div>{{ item.enforce_class }}</div>
                  <!-- <div class="issueDetail">{{ item.recordsNames }}</div> -->
                </template>
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
          <!-- <div class="popBtn">
            <div class="flex1" @click="showQesPop = false">取消</div>
            <div class="FontColorSuccess flex1" @click="sureChooseIssue">确定</div>
          </div> -->
        </div>
      </van-popup>

      <!-- 签字坂弹窗 -->
      <van-popup v-model="showSignPop" position="bottom">
        <div class="signPop">
          <div class="signContent">
            <sign-canvas
              class="sign-canvas"
              ref="SignCanvas"
              :options="options"
              v-model="signValue"
            />
          </div>
          <div class="signPopbtn">
            <van-button type="info" plain @click="clearCanvas">清除</van-button>
            <van-button type="info" @click="saveCanvas">保存</van-button>
          </div>
        </div>
      </van-popup>

      <div class="btn" v-if="showSubmitBtn">
        <van-button type="info" @click="submit">下发改正通知书</van-button>
      </div>
    </div>
    <div v-else style="margin-top: 47px;">
      <van-image :src="getSrc"></van-image>
    </div>

    <van-popup v-model="showFixPicker" position="bottom">
      <van-datetime-picker
        v-model="fixDate"
        type="date"
        title="选择日期"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="showFixPicker=false"
        @confirm="confirmFixDate"
      />
    </van-popup>

    <van-popup v-model="showSignDatePicker" position="bottom">
      <van-datetime-picker
        v-model="signDate"
        type="date"
        title="选择日期"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="showSignDatePicker=false"
        @confirm="confirmSignDate"
      />
    </van-popup>
    <!-- 遮罩层 -->
    <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, postImg, imgBaseUrl } from "@/utils/http.js";
import commonFun from "../../mixins/commonFun.js";
import { getOnePdf } from "@/utils/htmlToPDF.js";
import moment from "moment";
import { isEmpty, dateFormat, isSpecialSimple, notEmpty } from '@/utils/tool';
import { handleProblemImgs } from '@/utils/index';
import aosSign from '@/mixins/aosSign';
import pdfNumber from '@/mixins/pdfNumber';

export default {
  name: "correctDeadline",
  mixins: [commonFun, aosSign, pdfNumber],
  components: {
    headNav,
    "v-mask": mask_overLay,
  },
  data() {
    return {
      pdfUrl: null,
      companyName: "",
      companyInfo: "",
      itemGroup: [],
      group1: [],
      group2: [],
      group3: [],
      group4: [],
      group5: [],
      group6: [],
      group7: [],
      group8: [],
      group9: [],
      group10: [],
      group11: [],
      showFixPicker: false,
      fixDate: null,
      showSignDatePicker: false,
      signDate: new Date(),
      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      concreteProblems: [],
      showProblems: true,
      otherInfo: "",
      showSignPop: false,
      showQesPop: false,
      signValue: "",
      options: {
        isSign: true,
        isShowBorder: false,
        canvasWidth: 350,
        canvasHeight: 245,
        bgColor: "#fff",
      },
      showOverLay: false,
      tipMsg: "加载中",
      checkedIssue: [],
      // issueList: [],
      issueDetailList: [],
      sureDetailIssue: [],
      hasData: false,
      existData: "",
      isReportCheck: false,
      showSubmitBtn: true,
      detailProblem: "",
      nowDate: "",
      codeNum: "",
      contAndAnswer: "",
      problemList: [],
      formData: {},
      year: '',
      month: '',
      day: '',
      signDateObj: {
        year: '',
        month: '',
        day: ''
      },
      fixDateObj: {
        year: '',
        month: '',
        day: ''
      },
      problemInfo: '',
    };
  },
  computed: {
    getSrc() {
      return handleProblemImgs(this.formData.deadline_png_file_id);
    },
    dailyId() {
      return this.$route.params.currentID;
    },
    issueList() {
      return (
        (this.formData &&
          this.formData.check_nodes &&
          this.formData.check_nodes) ||
        []
      )
        .map((item) => [...item.checkResultList])
        .flat();
    },
    isSpecialEasy() {
      if (this.formData.check_type) {
        return isSpecialSimple(this.formData);
      }
      return false;
    },
    isReportOrOther() {
      if (this.formData) {
        const type = this.formData.job_type;
        return type == 'REPORT' || type == 'OTHER';
      }
      return false;
    },
    problemInfoStr() {
      return this.problemInfo.replace(/\n/g, '<br>');
    },
  },
  mounted() {
    // if (
    //   this.$route.params.status != undefined &&
    //   this.$route.params.status === "1"
    // ) {
    //   this.isReportCheck = true;
    // }

    this.init();

    this.nowDate = this.CNDateString(new Date());
    this.confirmSignDate();
  },
  methods: {
    confirmSignDate() {
      if (this.signDate) {
        let date = dateFormat('YYYY-mm-dd', this.signDate);
        date = date.split('-');
        this.signDateObj.year = date[0];
        this.signDateObj.month = date[1];
        this.signDateObj.day = date[2];
      }
      this.showSignDatePicker = false;
    },
    confirmFixDate() {
      if (this.fixDate) {
        let date = dateFormat('YYYY-mm-dd', this.fixDate);
        date = date.split('-');
        this.fixDateObj.year = date[0];
        this.fixDateObj.month = date[1];
        this.fixDateObj.day = date[2];
      }
      this.showFixPicker = false;
    },
    // 初始化
    async init() {
      this.showOverLay = true;
      // await this.getExistDataApi();
      this.loadPdfNumber('deadline');
      // if (this.existData.length > 0) this.hasData = true;

      await this.$http
        .get(`/v2/api/enforce-job/${this.dailyId}`)
        .then(async (res) => {
          if (res && res.data && res.data.check_nodes) {
            const obj = res.data;
            const users = [];
            if (obj.executors) {
              obj.executors.map((item) => {
                users.push(item.user_name);
              });
              obj.executorNames = users.join(", ");
            }
            if (obj.start_time) {
              const date = dateFormat('YYYY-mm-dd', new Date(obj.start_time));
              this.year = date.split('-')[0];
              this.month = date.split('-')[1]
              this.day = date.split('-')[2]
            }
            if (res.data.finish_time)
              res.data.finish_time = moment(res.data.finish_time).format(
                "YYYY-MM-DD-HH-mm"
              );
            // res.data.enforce_obj_name = (res.data.enforce_obj_name || '') + ':'
            this.hasData = !!res.data.deadline_png_file_id;
            this.formData = res.data;
            let checkNodes = this.isSpecialEasy ? [] : res.data.check_nodes;
            for (let i = 0; i < checkNodes.length; i++) {
              let tmpCheckNodes = this.formData.check_nodes;
              if ((checkNodes[i].items || []).length > 0) {
                checkNodes[i].enforce_obj_class =
                  (checkNodes[i].items[0] || {}).enforce_obj_class || "";
                checkNodes[i].checkResultList = [];
                for (
                  let itemsIndex = 0;
                  itemsIndex < checkNodes[i].items.length;
                  itemsIndex++
                ) {
                  const nodeItem = checkNodes[i].items[itemsIndex];
                  if (
                    nodeItem.check_result == 2 &&
                    nodeItem.correct_type === "DEADLINE"
                  ) {
                    const obj = {
                      ...nodeItem,
                      checkResultName:
                        nodeItem.check_result == 1 ? "合格" : "不合格",
                      recordsNames: (nodeItem.records || [])
                        .map((item) => item.check_desc)
                        .filter(Boolean)
                        .join(","),
                    };
                    checkNodes[i].checkResultList.push(obj);
                    // console.log(obj, obj.item_content, obj.item_name, obj.records);
                    const checkInfo = this.getCheckItemRecord(obj);
                    this.problemList.push({
                        id: obj.id,
                        itemId: obj.item_id,
                        name: obj.item_name || obj.item_content,
                        result: obj.checkResultName,
                        enforce_class: obj.enforce_obj_class || '',
                        checkInfo: checkInfo,
                    });
                    this.checkedIssue.push(obj.id);

                    // if (nodeItem.item_id) {
                    //   try {
                    //     const tmpResult = await get(`/v2/api/enforce-job/item?page=1&size=1&sort=create_time desc&query=id==${checkNodes[i].items[itemsIndex].id}`).catch(() => null)
                    //     if (tmpResult && tmpResult.data && tmpResult.data.length > 0) {
                    //       const tmpRes = tmpResult.data[0];

                    //       this.problemList.push({
                    //         id: obj.id,
                    //         itemId: obj.item_id,
                    //         enforce_class: tmpRes.enforce_obj_class,
                    //         name: tmpRes.item_content,
                    //         result: obj.checkResultName,
                    //       });
                    //       this.checkedIssue.push(obj.id);
                    //     }
                    //   } catch (error) {
                    //     continue;
                    //   }
                    // }
                    // else {
                    //       this.problemList.push({
                    //           id: obj.id,
                    //           itemId: obj.item_id,
                    //           name: obj.item_content,
                    //           result: obj.checkResultName
                    //       });
                    //       this.checkedIssue.push(obj.id);
                    // }
                  }
                }
              }
              this.formData = {
                ...this.formData,
                check_nodes: [...tmpCheckNodes],
              };

              if (this.isSpecialEasy) {
                this.problemInfo = this.formData.job_result_content;
              }
              else if (this.problemList && this.problemList.length > 0) {
                let infoList = [];
                this.problemList.map(item => {
                  infoList.push(`${item.name }-${item.result}：${item.checkInfo}`);
                });
                this.problemInfo = infoList.join('\n');
              }
            }
          }
        });
      // if (!this.hasData) {
        // await this.getCode();
        /*
                if (this.isReportCheck) {
                  await this.getDetailInfoApi();
                  await this.getReportContApi();
                } else {
                  await this.getPageListApi();
                  this.getCompanyInfoApi();
                }

                for (var i = 0; i < this.issueList.length; i++) {
                  const res = await this.getIssueListApi(this.issueList[i].id);
                  this.issueList[i].issueDetail = res.question.examineProname;
                  this.issueList[i].checkResult =
                    res.answer.checkResult == '2' ? '不合格' : '合格';
                  this.issueList[i].checkSite = res.answer.checkCaseConts.split('@').join(',');
                }*/
      // }

      if (this.isReportOrOther) {
        this.showProblems = false;
      }

      this.showOverLay = false;
    },

    // 获取列表 信息
    async getPageListApi() {
      this.resultList = [];
      const res = await post("/cdsupervisionAnswer/checkAllCont", {
        pageSize: 999,
        taskId: this.$route.params.ID,
      });
      if (res) {
        this.issueList = [];
        this.issueDetailList = [];
        if (res.success === true) {
          res.data.list.forEach((item) => {
            if (item.checkStatus === "2") {
              this.issueList.push(item);
            }
          });
        }
      }
    },

    getCheckItemRecord(item) {
        let arr = [];
        if (item && item.records && item.records.length > 0) {
            item.records.map(obj => {
                if (notEmpty(obj.check_desc)) {
                    arr.push(obj.check_desc);
                }
            });
        }
        return arr.join(' / ');
    },

    // 获取编号
    async getCode() {
      // await get('/cdsupervisionAmend/getAmendNum').then(res => {
      //   if (res.success) {
      //     this.codeNum = res.data;
      //   } else {
      //     this.$toast.fail(`${res.msg}`);
      //   }
      // });
    },

    // 获取列表 信息
    async getReportContApi() {
      await get("/cdsupervisionCheckRecord/listByCondition", {
        taskId: this.$route.params.ID,
      }).then((res) => {
        if (res.success === true) {
          this.detailProblem = res.data[0].checkCont;
        }
      });
    },

    // 如果已有数据
    async getExistDataApi() {
      await get("/cdsupervisionAmend/listByCondition", {
        taskId: this.$route.params.ID,
      }).then((res) => {
        this.existData = res.data;
      });
    },

    // 获取公司信息
    getCompanyInfoApi() {
      get(`/cdsupervisionTask/get/${this.$route.params.currentID}`).then(
        (res) => {
          this.companyInfo = res.data;
          this.companyName = res.data.byCheckUnit + " ：";
        }
      );
    },

    // 获取任务详情信息
    async getDetailInfoApi() {
      await get(`/cdsupervisionOthertask/get/${this.$route.params.currentID}`)
        .then((res) => {
          if (res.success === true) {
            this.companyInfo = res.data;
            this.companyName = res.data.checkObjName + " ：";
          }
        })
        .catch((err) => {
          this.$toast.fail("获取任务信息失败");
          this.showOverLay = false;
        });
    },

    // 获取问题列表
    async getIssueListApi(id) {
      const res = await get(`/cdsupervisionStylecont/contAndAnswer/${id}`);
      if (res.success === true) {
        this.contAndAnswer = res.data;
        return res.data;
      }
    },

    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },

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

    sureChooseIssue() {
      this.showQesPop = false;
      this.sureDetailIssue = [];

      this.issueList.forEach((i, index) => {
        this.checkedIssue.forEach((j) => {
          if (i.item_id === j) {
            this.sureDetailIssue.push({
              content:
                i.item_name + " " + i.checkResultName + " " + i.recordsNames,
            });
          }
        });
      });
    },

    // 子项checkBox改变
    checkChange(index, checked) {
      if (checked.length == 0) {
        // 无选中父项清空
        this.itemGroup.map((item, index_) => {
          item == index && this.itemGroup.splice(index_, 1);
        });
      } else {
        this.itemGroup.push(index.toString());

        console.warn(this.itemGroup);

        this.itemGroup = [...new Set(this.itemGroup)].sort((a, b) => a - b); // 数组去重排序
      }
    },

    // 清除画布
    clearCanvas() {
      this.$refs.SignCanvas.canvasClear();
    },

    // 保存画布
    saveCanvas() {
      this.showSignPop = false;
    },

    groupChange(name) {},

    // base64转blob
    dataURItoBlob(base64Data) {
      var byteString;

      if (base64Data.split(",")[0].indexOf("base64") >= 0)
        byteString = atob(base64Data.split(",")[1]);
      else byteString = unescape(base64Data.split(",")[1]);

      var mimeString = base64Data
        .split(",")[0]
        .split(":")[1]
        .split(";")[0];

      var ia = new Uint8Array(byteString.length);

      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }

      return new Blob([ia], {
        type: mimeString,
      });
    },

    async upImage(imageValue) {
      var blob = this.dataURItoBlob(imageValue); // 上一步中的函数

      var canvas = document.createElement("canvas");
      var dataURL = canvas.toDataURL("image/jpeg", 0.5);
      var fd = new FormData(document.forms[0]);
      fd.append("file", blob, "pdf.png");

      const res = await postImg("/upload/moreUploadImg", fd);

      let imgSrc = "";

      if (res.success === true) {
        return res.data;
      }
    },

    // 提交
    updateTaskNoticeFile() {
        const fixDate = dateFormat('YYYY-mm-dd', this.fixDate);
        const signDate = dateFormat('YYYY-mm-dd', this.signDate);
        const noticeResult = {
          group: this.itemGroup,
          check: {
            group1: this.group1,
            group2: this.group2,
            group3: this.group3,
            group4: this.group4,
            group5: this.group5,
            group6: this.group6,
            group7: this.group7,
            group8: this.group8,
            group9: this.group9,
            group10: this.group10,
            group11: this.otherInfo || '',
          },
          limitDate: fixDate,
          signDate: signDate,
          type: 'DEADLINE',
        };
        let problemInfoRes = this.problemInfo;
        if (this.isReportOrOther) {
          problemInfoRes = '';
        }
        const json = this.setupStaticNoticeResult(this.formData, 'deadline', noticeResult, problemInfoRes);
        put(`/v2/api/enforce-job/${this.dailyId}`, {
            deadline_file_id: this.formData.deadline_file_id,
            notification_audit_status: "AUDIT",
            static_notice_result: json,
        })
        .then((res) => {
            this.$toast.success("提交成功，请等待审批通过");
            this.$router.back();
        })
        .catch(() => {
            this.$toast.fail("上传失败");
        });
    },
    async submit() {
        // this.showSubmitBtn = false;
        // return;
      if (this.formData.deadline_file_id && this.formData.deadline_png_file_id) {
          this.updateTaskNoticeFile();
          return;
      }

      // let submitData;

      // if (!this.formData && this.formData.enforce_obj && this.formData.enforce_obj.enforce_org_name) {
      //   this.$toast.fail("请填写单位名");
      //   return;
      // } 
      if (this.itemGroup.length === 0) {
        this.$toast.fail("请选择违法行为");
        return;
      }

      if (isEmpty(this.fixDateObj.year) || isEmpty(this.fixDateObj.month) || isEmpty(this.fixDateObj.day)) {
        this.$toast.fail('请输入整改日期');
        return;
      }

      if (this.checkedIssue.length === 0 && !this.isSpecialEasy && !this.isReportOrOther) {
        this.$toast.fail("请选择具体问题");
        return;
      }
      // if (!this.signValue) {
      //   this.$toast.fail("请被检查单位签名");
      //   return;
      // } 

      if (isEmpty(this.signDateObj.year) || isEmpty(this.signDateObj.month) || isEmpty(this.signDateObj.day)) {
        this.$toast.fail('请输入签收日期');
        return;
      }

      // this.updateTaskNoticeFile();
      // return;

        this.showOverLay = true;
        this.tipMsg = "上传pdf中";
        if (!this.isReportOrOther) {
          this.showProblems = true;
        }
        this.showSubmitBtn = false;
        // console.log('1: ', Date.now());
        setTimeout(() => {
          this.commitDeadlineNotice();
        }, 1000);
    },
    async commitDeadlineNotice() {
      // console.log('2: ', Date.now());
      let subData = "";
      subData = await getOnePdf(
        document.querySelector("#pdfContainer"),
        "责令限期改正通知书"
      );
      this.noticeType = 2;
      this.startToSign(subData);
        // this.pdfUrl = subData.turnImgData;
        // return

        // var blob = this.dataURItoBlob(subData.turnImgData); // 上一步中的函数

        // var canvas = document.createElement("canvas");
        // var dataURL = canvas.toDataURL("image/jpeg", 0.5);
        // var fd1 = new FormData(document.forms[0]);
        // fd1.append("fileBinary", blob, "责令限期改正通知书.png");
        // fd1.append("fileName", "责令限期改正通知书.png");
        // let pngSrc = await post("/v2/api/file", fd1);
        // if (!(pngSrc && pngSrc.id)) {
        //   this.$toast.fail("上传失败");
        //   this.showOverLay = false;
        //   return;
        // }
        // this.formData.deadline_png_file_id = pngSrc.id;

        // document.forms[0]
        // var fd = new FormData();
        // fd.append("fileBinary", subData.myfile);
        // fd.append("fileName", "责令限期改正通知书.pdf");

        // this.tipMsg = "上传pdf中";
        // let result = await post("/v2/api/file", fd);
        // if (result && result.id) {
        //     this.formData.deadline_file_id = result.id;
        //     this.updateTaskNoticeFile();
        // } else {
        //   this.$toast.fail("上传失败");
        // }

        // this.showOverLay = false;
    }
  },
};
</script>

<style lang="scss" scoped>
.correctDeadline {
  font-size: 14px;
  height: calc(100vh);
  overflow: auto;

  .scale8 {
    transform: scale(0.8);
  }

  .pdf_container {
    margin-top: 47px;
    padding: 15px;
    background-color: #fff;
    color: #565c5c;

    .pdf_top_title {
      @extend .scale8;
      display: flex;
      width: 110%;
      margin-left: -10px;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .number {
        margin-left: 180px;
      }

      .theme {
        font-size: 18px;
      }
    }

    .pdf_content_utilInfo {
      width: 110%;
      margin-top: -10px;
      margin-left: -10px;

      input {
        border: none;
        text-decoration: underline;
      }

      .tips {
        text-indent: 2em;
        font-size: 13px;

        span {
          text-decoration: underline;
        }
      }
    }

    .pdf_content_issue {
      margin-top: -36px;

      .checkTotal {
        // padding: 10px 15px;
        padding-top: 0;
        width: 110%;
        margin-left: -10px;

        .item {
          color: #424242;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          font-size: 12px;

          // .nullItem {
          // 	position: absolute;
          // }
        }
      }
    }

    .pdf_content_issueD {
      width: 100%;
      font-size: 12px;
      margin-top: -30px;
      display: flex;
      margin-right: 5px;

      .content {
        flex: 1;
      }
    }

    .pdf_content_date {
      font-size: 12px;
      margin-top: 50px;
      display: flex;
      justify-content: flex-end;
    }

    .pdf_content_signup {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      // margin-top: 0;
      width: 110%;
      margin-left: -10px;

      .img {
        flex: 4;
        display: flex;
        align-items: flex-end;
      }

      .date {
        flex: 2;
        display: flex;
        align-items: flex-end;

        input,span {
          width: 30px;
          border: none;
          border-bottom: 1px solid;
          text-align: center;

          &:nth-child(2) {
            width: 20px;
          }

          &:last-child {
            width: 20px;
          }
        }
      }
    }

    .pdf_content_tips {
      font-size: 12px;
      color: #323233;
      margin-top: 10px;
      margin-left: -27px;
      transform: scale(0.7);
    }

    .underLine {
      font-size: 12px;
      // margin-top: -8px;
      margin-left: -5px;
      @extend .scale8;
      position: relative;

      &::after {
        position: absolute;
        display: block;
        content: "";
        width: 100%;
        height: 0;
        border: 1px solid #afafaf;
        top: 20px;
      }

      &::before {
        position: absolute;
        display: block;
        content: "";
        width: 100%;
        height: 0;
        z-index: 2;
        border: 1px solid #afafaf;
        top: 42px;
      }
    }
  }
  .underLine-show {
    font-size: 12px;
    margin-left: -5px;
    @extend .scale8;
    position: relative;
  }

  .border {
    margin-top: 4px;
    padding: 4px;
    font-size: 8px;
    border: 1px solid #afafaf;
  }

  .ml30 {
    margin-left: 35px;
  }

  .mr5 {
    margin-right: 5px;
  }

  .filed {
    background-color: #fff;
    // margin-top: -20px;
    font-size: 12px;

    .tips {
      text-indent: 2em;

      input {
        width: 30px;
        border: none;
        border-bottom: 1px solid;
        text-align: center;

        &:last-child {
          width: 20px;
        }

        &:nth-child(3) {
          width: 20px;
        }
      }
    }

    span {
      text-decoration: underline;
      padding: 0 5px;
    }
  }

  .specificQs {
    background-color: #fff;
    margin: -40px -10px 0;

    button {
      width: 100px;
      height: 25px;
    }

    .content {
      overflow: hidden;
      overflow-y: auto;
      padding: 10px 15px;
    }
  }

  .signCard {
    background-color: #fff;
    padding: 10px 15px;
    color: #7f7f7f;

    span {
      text-decoration: underline;
    }
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    // width: 100%;

    button {
      height: 36px;
      // width: 100px;
      flex: 1;
      margin: 0 15px;
    }
  }

  .popContent {
    padding: 10px 15px;
    padding-top: 0;
    height: 92%;
    position: relative;

    .itemContent {
      height: calc(100% - 42px);
      overflow: hidden;
      overflow-y: auto;
    }

    .popBtn {
      position: absolute;
      width: 92%;
      bottom: 10px;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;

      div {
        height: 40px;
        text-align: center;
        line-height: 40px;
        flex: 1;

        &:first-child {
          background-color: #d5d5d5;
          color: #fff;
          margin-right: 10px;

          &:active {
            background: #e2e2e2;
          }
        }

        &:last-child {
          background-color: #169bd5;
          color: #fff;

          &:active {
            background: #17a8e6;
          }
        }
      }
    }
  }

  .imageContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #a3a3a3;
    background-color: #d4ffff;
    border-radius: 5px;
    margin-top: 10px;
  }

  .signContent {
    width: 100%;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .signPopbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    // width: 100%;

    button {
      height: 36px;
      // width: 100px;
      flex: 1;
      margin: 0 10px;
      margin-bottom: 10px;

      &:first-child {
        margin-left: 25px;
      }

      &:last-child {
        margin-right: 30px;
      }
    }
  }
}
.date10 {
  border-bottom: 1px solid;
  text-align: center;
  &:first-child {
    width: 30px;
  }
  &:not(:first-child) {
    width: 20px;
  }
}
.FontColorNormal {
  font-size: 12px;
}
.problems {
  padding: 0 16px;
  font-size: 10px;
  color: #565656;
  .problem {
    word-break: break-all;
    word-wrap: normal;
    white-space: normal;
  }
}
.remark {
    margin-top: 8px !important;
    font-size: 10px;
    color: #565c5c;
    line-height: 20px;
    text-decoration: underline;
}
</style>

<style lang="scss">
.correctDeadline {
  .van-cell__title.van-field__label {
    width: auto;
  }

  .van-field__control {
    // background-color: #e5e5e5;
    padding-left: 5px;
  }

  .van-checkbox__label {
    color: #666666;
    font-size: 12px;
    margin-top: 1px;
    margin-left: 10px;
  }

  .van-checkbox {
    align-items: flex-start;
  }

  .van-checkbox__icon.van-checkbox__icon--square {
    margin-top: 3px;
  }

  .itemSpec {
    .van-checkbox-group {
      display: flex;
    }
  }

  .inputStyle {
    margin-left: 18px;

    .van-cell.van-field {
      padding: 0;
      margin-top: 5px;
    }
  }

  .popContent {
    .van-checkbox-group {
      height: calc(100% - 54px);
      overflow: hidden;
      overflow-y: scroll;
    }

    .van-checkbox {
      display: flex;
      align-items: flex-start;
      margin-right: 10px;
    }

    .van-cell__title {
      flex: 5;
    }

    .issueDetail {
      font-size: 12px;
      color: #8f8f8f;
      flex: 1;
    }
  }

  .van-cell.van-cell--clickable {
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    justify-content: flex-start;
  }

  .item {
    .van-checkbox-group {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }

    .van-checkbox__label {
      margin-left: 2px;
      margin-right: 5px;
      margin-top: 0;
    }

    .van-checkbox__icon--checked {
      i {
        background-color: transparent;
        border-color: transparent;
        color: #000;
      }
    }
  }

  .van-cell.van-field {
    padding: 0;

    .van-field__body {
      color: #555 !important;
    }
  }

  .img {
    .van-image {
      width: 60px;
      height: 60px;
    }
  }

  .van-cell.van-cell--clickable {
    border-bottom: none;
  }

  .app-sign-canvas.sign-canvas {
    border: 1px solid #f0f0f0;
    border-bottom: 1px solid #d3d3d3;
    border-radius: 5px;
    box-shadow: 0 5px 5px rgba($color: #666, $alpha: 0.2);
  }
}
</style>