<template>
  <div class="notice_page">
    <headNav :title="'责令改正通知'" class="headNav" :id="$route.params.id" :backRouter="{
        path: `/otherListDetail/${$route.params.id}`
      }"></headNav>
    <div class="notice_content" v-if="jobDetail">
      <div v-if="showNotice" class="pdfImg">
        <!-- <iframe :src="pdfSrc" frameborder="0"></iframe> -->
        <pdfPreview :url="pdfSrc"></pdfPreview>
      </div>
      <div v-else>
        <van-cell>
          <template #title>
            <div class="">部分检查情况异常，责令立即改正</div>
            <div class="notice_name">《责令立即改正通知》</div>
          </template>
          <template>
            <div class="opt_notice_file" @click.stop="gotoList('IMMEDIATELY')">
              <span class="fb" :class="[
                hasIMMEDIATELY && jobDetail.immediately_file_id ? '' : 'FontColorError',
                jobDetail.immediately_file_id ? 'FontColorSuccess' : (hasIMMEDIATELY ? '' : 'FontColorSuccess')
              ]">{{jobDetail.immediately_file_id ? "已" : (hasIMMEDIATELY ? "未" : '无需') }}下发</span
              ><van-icon name="arrow"/>
            </div>
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <div class="">部分检查情况异常，责令限期改正</div>
            <div class="notice_name">《责令限期改正通知》</div>
          </template>
          <template>
            <div class="opt_notice_file" style="height: auto;" @click.stop="gotoList('DEADLINE')">
              <span class="fb" :class="[
              jobDetail.notification_audit_status,
                jobDetail && 
                  (!jobDetail.notification_audit_status || jobDetail.notification_audit_status === 'NOT') 
                  ? (hasDEADLINE ? 'FontColorError' : 'FontColorSuccess') : 'FontColorSuccess'
              ]">{{
                jobDetail &&
                  (
                    jobDetail.notification_audit_status ? 
                      (DEADLINEJobStatus[jobDetail.notification_audit_status] ||(hasDEADLINE ? '未下发' : '无需下发')):
                      (hasDEADLINE ? '未下发' : '无需下发')
                  )
              }}</span
              ><van-icon name="arrow"/>
            </div>
            <div class="notice_name" v-if="jobDetail">
              {{ jobDetail.deadline_job_reason }}
            </div>
          </template>
        </van-cell>
        <div class="code_area">
          <div class="left" v-if="IMMEDIATELYCodeUrl">
            <p>责令立即改正通知书</p>
            <div>
              <img class="qcCode" :src="IMMEDIATELYCodeUrl" width="100%" alt="">
            </div>
          </div>
          <div class="right" v-if="DEADLINECodeUrl">
            <p>责令限期改正通知书</p>
            <div>
              <img class="qcCode" :src="DEADLINECodeUrl" width="100%" alt="">
            </div>
          </div>
        </div>
        <van-button v-if="showFinishBtn" @click="finishTask" type="info" class="block-btn" block>完成任务</van-button>
      </div>
    </div>
    <van-popup
      v-model="showDetailState"
      position="bottom"
      @click-overlay="closeOverLay"
      :style="{ height: '100vh', overflow: 'hidden' }"
    >
      <div class="correctImmediately">
        <div class="headNav">
          <van-nav-bar
            :title="title"
            @click-left="closeOverLay"
            :left-arrow="true"
          >
          </van-nav-bar>
        </div>
        <div class="content-check notice_page_content">
          <div class="content">
            <div v-if="jobDetail">
              <!-- pdf内容 -->
              <div class="pdf_container" id="pdfContainer">
                <!-- pdf标题 -->
                <div class="pdf_top_title">
                  <div class="top_title" style="padding-top: 30px;">{{pageData.enforce_org_name}}</div>
                  <div class="theme">{{title}}</div>
                  <!-- <div class="sub_title">编号：{{jobDetail.job_no}}</div> -->
                  <div class="sub_title">编号：{{ checkType == 'IMMEDIATELY' ? immediateNumber : deadlineNumber }}</div>
                </div>
                <!-- pdf单位信息 -->
                <div class="pdf_content_utilInfo scale8">
                  <div class="util">
                    <span>{{ pageData.enforce_obj_name }}:</span>
                  </div>
                  <div class="tips" v-if="pageData">
                    根据《中华人民共和国消防法》第五十三条的规定， 我
                    <span>
                      <span>{{
                        pageData.enforce_org_name
                      }}</span>
                    </span>
                    于
                    <span>
                      <span>{{
                        pageData.start_time_year
                      }}</span>
                    </span>
                    年
                    <span>
                      <span>{{
                        pageData.start_time_month
                      }}</span>
                    </span>
                    月
                    <span>
                      <span>{{
                        pageData.start_time_date
                      }}</span>
                    </span>
                    日 对你单位（场所）进行消防监督检查， 发现存在下列第
                    <span>{{ itemGroup.join("，") }}</span>
                    项消防安全违法行为,现责令立即改正：
                  </div>
                </div>

                <!-- pdf问题选项 -->
                <div class="pdf_content_issue scale8" :class="[checkType === 'DEADLINE'? 'DEADLINE' : '']">
                  <div class="checkTotal" v-if="checkType === 'IMMEDIATELY'">
                    <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
                            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-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-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-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
                            name="g14"
                            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>

                        <van-checkbox-group
                          v-model="group7"
                          @change="checkChange(7, $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="8"
                            shape="square"
                            icon-size="0.4rem"
                          >
                            8.
                          </van-checkbox>
                        </div>
                        <van-checkbox-group
                          @change="checkChange(8, $event)"
                          v-model="group8"
                        >
                          <van-checkbox
                            name="g11"
                            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
                          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)"
                        >
                          <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="11"
                            shape="square"
                            icon-size="0.4rem"
                          >
                            11.
                          </van-checkbox>
                          <van-checkbox-group
                            @change="checkChange(11, $event)"
                            v-model="group11"
                          >
                            <van-checkbox
                              name="g11"
                              shape="square"
                              icon-size="0.4rem"
                            >
                              人员密集场所外墙门窗上设置影响逃生、灭火救援的障碍物
                            </van-checkbox>
                          </van-checkbox-group>
                        </div>
                      </div>

                      <div class="item" style="flex-direction: column;">
                        <div class="df">
                          <van-checkbox
                            name="12"
                            shape="square"
                            icon-size="0.4rem"
                          >
                            12.
                          </van-checkbox>
                          <van-checkbox-group
                            @change="checkChange(12, $event)"
                            v-model="group12"
                          >
                            <van-checkbox
                              name="g11"
                              shape="square"
                              icon-size="0.4rem"
                            >
                              其他消防安全违法行为和火灾隐患：
                            </van-checkbox>
                          </van-checkbox-group>
                        </div>

                        <div class="underLine">
                          <van-field
                            v-if="editable"
                            v-model="otherInfo"
                            :disabled="hasData"
                            type="textarea"
                            autosize
                            rows="2"
                          />
                          <div class="uneditable_underLine" v-else>
                              {{otherInfo}}
                          </div>
                        </div>
                      </div>
                    </van-checkbox-group>
                  </div>
                  <div class="checkTotal" v-else-if="checkType === 'DEADLINE'">
                    <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" style="display:block;">
                        <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>
                        <van-checkbox-group
                          v-model="group7"
                          @change="checkChange(7, $event)"
                        >
                          <van-checkbox
                            name="g11"
                            shape="square"
                            icon-size="0.4rem"
                          >
                            人员密集场所外墙门窗上设置影响逃生、灭火救援的障碍物；
                          </van-checkbox>
                        </van-checkbox-group>
                      </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
                          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" style="display: block;">
                        <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>
                          <van-checkbox-group
                            v-model="group11"
                            @change="checkChange(11, $event)"
                          >
                            <van-checkbox
                              name="g14"
                              shape="square"
                              icon-size="0.4rem"
                            >
                              其他消防安全违法行为和火灾隐患：
                            </van-checkbox>
                          </van-checkbox-group>
                        </div>
                        <div class="underLine">
                          <van-field
                            v-if="editable"
                            v-model="otherInfo"
                            :disabled="hasData"
                            type="textarea"
                            autosize
                            rows="2"
                          />
                          <div class="uneditable_underLine" v-else>
                              {{otherInfo}}
                          </div>
                        </div>
                      </div>
                    </van-checkbox-group>
                  </div>
                </div>
                <!-- 填写修改信息 -->
                <div class="filed scale8 alert_msg" v-if="checkType === 'IMMEDIATELY'">
                  <div class="tips">
                    你单位（场所）应当采取措施，确保消防安全。对消防安全违法行为，
                    将依法予以处罚。
                  </div>
                </div>
                <div class="filed scale8 edit_opt_date" v-else>
                  <div class="tips">
                    对上述第
                    <span>{{ itemGroup.join("，") }}</span>
                    项，责令你单位(场所)于
                    <span @click="selectDeadlineTime">
                      <span class="date_time_span">{{
                        pageData.optimize_time_year
                      }}</span>
                    </span>
                    年
                    <span @click="selectDeadlineTime">
                      <span class="date_time_span">{{
                        pageData.optimize_time_month
                      }}</span>
                    </span>
                    月
                    <span @click="selectDeadlineTime">
                      <span class="date_time_span">{{
                        pageData.optimize_time_date
                      }}</span>
                    </span>
                    日 前改正。
                  </div>
                  <div class="tips">
                    改正期间，你单位(场所)应当采取措施，确保消防安全。对消防安全违法行为，将依法予以处罚。
                  </div>
                </div>
                <!-- 被检查单位签收 -->
                <div class="pdf_content_signup scale8">
                  <!-- @click="showCheckerSignPannel=true;" -->
                  <div class="img sign_img_container">
                    <span>被检查单位(场所)签收：</span>
                    <img class="sign_img" :src="checkerSignVal" alt="">
                  </div>
                  <div class="date">
                    <span @click="selectSignTime">
                      <span>{{
                        pageData.sign_time_year
                      }}</span>
                    </span>
                    年
                    <span @click="selectSignTime">
                      <span>{{
                        pageData.sign_time_month
                      }}</span>
                    </span>
                    月
                    <span @click="selectSignTime">
                      <span>{{
                        pageData.sign_time_date
                      }}</span>
                    </span>
                    日
                  </div>
                </div>

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

              <!-- 具体问题弹窗 -->
              <van-popup
                v-model="showQesPop"
                position="bottom"
                :style="{ height: '40%' }"
              >
                <div class="popContent">
                  <van-checkbox-group v-model="checkedIssue">
                    <van-cell-group>
                      <van-cell
                        v-for="(item, index) in issueList"
                        clickable
                        :key="item.id"
                        :label="item.checkSite"
                        @click="toggle(index)"
                      >
                        <template #right-icon>
                          <van-checkbox
                            :name="item.id"
                            ref="checkboxes"
                            icon-size="18px"
                            shape="square"
                          />
                        </template>
                        <template #title>
                          <div>{{ item.examineNoteCont }}</div>
                          <div class="issueDetail">{{ item.issueDetail }}</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>
          </div>
          <van-button type="info" v-if="!showNotice" class="submitBtn" @click="submit" block
            >下发改正通知书</van-button
          >
          <div style="height:30px;"></div>
        </div>
      </div>
    </van-popup>
    <van-popup overlay-class="sign_popup" v-model="showCheckerSignPannel" position="bottom">
        <sign ref="sign" @save="saveCheckerSign" v-model="checkerSignVal"></sign>
    </van-popup>
    <!-- 开始时间弹窗 -->
				<van-popup v-model="show_select_start_time" position="bottom">
					<van-datetime-picker
						v-model="startTime"
						title="选择年月日"
						type="date"
						@cancel="show_select_start_time = false"
						@confirm="chooseStartTime"
					/>
				</van-popup>
        <!-- 签收时间弹窗 -->
				<van-popup v-model="show_select_sign_time" position="bottom">
					<van-datetime-picker
						v-model="signTime"
						title="选择年月日"
						type="date"
            :min-date="minDate"
						@cancel="show_select_sign_time = false"
						@confirm="chooseSignTime"
					/>
				</van-popup>
        <!-- 责令限改时间弹窗 -->
				<van-popup v-model="show_select_deadline_time" position="bottom">
					<van-datetime-picker
						v-model="deadlineTime"
						title="选择年月日"
						type="date"
            :min-date="minDate"
						@cancel="show_select_deadline_time = false"
						@confirm="chooseDeadlineTime"
					/>
				</van-popup>
    <!-- 遮罩层 -->
    <v-mask
      :showOverLay="showOverLay"
      :tipMsg="tipMsg"
      class="showOverLay"
    ></v-mask>
  </div>
</template>

<script>
import headNav from "@/components/headNav.vue";
import moment from 'moment'
import mask_overLay from "@/components/overLay_xy.vue";
import { get, post, put, postImg, imgBaseUrl } from "@/utils/http.js";
import { DEADLINEJobStatus } from "@/utils/variables.js";
import dayjs from "dayjs";
import _ from "lodash";
import commonFun from "../../mixins/commonFun.js";
import QRCode from "qrcode";
import { handleProblemImgs, sealFile, convert, downloadSignedFile, dataURLtoBlob, signSetToken, initSign } from "@/utils/index.js";
import { getOnePdf } from "@/utils/htmlToPDF";
import pdfPreview from '@/components/pdf.vue'
import sign from "@/components/sign.vue";
import Vue from 'vue'
import config from '@/config';
import reportAndOtherPdfNumber from '@/mixins/reportAndOtherPdfNumber';
import { dateFormat } from '@/utils/tool';

export default {
  name: "optimizeNotice",
  mixins: [commonFun, reportAndOtherPdfNumber],
  components: {
    sign,
    headNav,
    pdfPreview,
    "v-mask": mask_overLay,
  },
  data() {
    return {
      DEADLINEJobStatus,
      editable: true,
      checkList: [],
      showDetailState: false,
      checkType: "",
      title: "",
      checkGroupList: [],
      companyName: "",
      companyInfo: "",
      itemGroup: [],
      group1: [],
      group2: [],
      group3: [],
      group4: [],
      group5: [],
      group6: [],
      group7: [],
      group8: [],
      group9: [],
      group10: [],
      group11: [],
      group12: [],
      concreteProblems: [],
      otherInfo: "",
      showSignPop: false,
      showQesPop: false,
      signValue: "",
      options: {
        isSign: true,
        isShowBorder: false,
        canvasWidth: 350,
        canvasHeight: 245,
        bgColor: "#fff",
      },
      showOverLay: true,
      tipMsg: "加载中",
      checkedIssue: [],
      issueList: [],
      issueDetailList: [],
      sureDetailIssue: [],
      hasData: false,
      existData: "",
      isReportCheck: false,
      detailProblem: "",
      nowDate: "",
      codeNum: "",
      contAndAnswer: "",
      jobDetail: null,
      pageData: {},
      pdfSrc: null,
      IMMEDIATELYCodeUrl: null,
      DEADLINECodeUrl: null,
      // 下发文件的数量
      resultFileCount: 0,
      showCheckerSignPannel: false,
      checkerSignVal: null,
      show_select_start_time: false,
      show_select_sign_time: false,
      show_select_deadline_time: false,
      startTime: new Date(),
      signTime: new Date(),
      minDate: new Date(),
      deadlineTime: new Date()
    };
  },
  computed: {
    getSrc() {
      return imgBaseUrl + this.existData[0].amendImg;
    },
    checkJudgeData() {
      const checkJudgeData = this.$route.query.checkJudgeData;
      if (!checkJudgeData) return [];
      const res = checkJudgeData.split(",");
      return res;
    },
    checkTypeStr() {
      return this.checkType === "IMMEDIATELY" ? `，现责令立即改正：` : "：";
    },
    showNotice() {
      return this.$route.query.showNotice === "true";
    },
    showNoticeType() {
      return this.$route.query.type;
    },
    showFinishBtn() {
      const len = this.checkJudgeData.length
      return this.resultFileCount >= len && (len > 0 || this.resultFileCount > 0);
    },
    iseditDeadlineNotice() {
      return this.$route.query.editDeadlineNotice === 'true'
    },
    hasIMMEDIATELY() {
      return this.checkJudgeData.includes('IMMEDIATELY')
    },
    hasDEADLINE() {
      return this.checkJudgeData.includes('DEADLINE')
    },
  },
  created() {
    this.getJobDetailInfoApi();
    signSetToken(this.$signAos)
    // 限改被驳回，可以立即进入这个页面下发限改通知书
    if (this.iseditDeadlineNotice) {
      this.checkType = 'DEADLINE';
      this.showDetailState = true;
      this.title = "责令限期改正通知书";
    }
  },
  mounted () {
    this.chooseSignTime();
  },
  methods: {
    selectStartTime() {
      if (!this.editable) return
      this.show_select_start_time = true
    },
    selectSignTime() {
       if (!this.editable) return
      this.show_select_sign_time = true
    },
    selectDeadlineTime() {
       if (!this.editable) return
      this.show_select_deadline_time = true
    },
    chooseStartTime() {
      const date = dayjs(this.startTime)
      this.pageData.start_time_year = date.year();
      this.pageData.start_time_month = date.month() + 1;
      this.pageData.start_time_date = date.date();
      this.show_select_start_time = false
    },
    chooseSignTime() {
      const date = dayjs(this.signTime)
      this.pageData.sign_time_year = date.year();
      this.pageData.sign_time_month = date.month() + 1;
      this.pageData.sign_time_date = date.date();
      this.show_select_sign_time = false
    },
    chooseDeadlineTime() {
      const date = dayjs(this.deadlineTime)
      this.pageData.optimize_time_year = date.year();
      this.pageData.optimize_time_month = date.month() + 1;
      this.pageData.optimize_time_date = date.date();
      this.show_select_deadline_time = false
    },
    saveCheckerSign() {
      this.showCheckerSignPannel = false
    },
    async finishTask() {
      // 如果通知书下发数量超过或者等于需要下发的数量
      // 则将任务状态修改为已归档
      this.showOverLay = true;
      this.tipMsg = '提交中...';
      await this.$http.put(
        `/v2/api/enforce-job/${this.jobDetail.id}`,
        {
          job_status: 'ARCHIVED',
        }
      );
      this.showOverLay = false;
      this.$router.replace('/otherList')
    },
    async makeCode(url) {
      return await QRCode.toDataURL(url)
      },
    addAosEvent() {
      if (!this.$signAos) return
      this.$signAos.event.once('onSubmitSuccess', this.onSignSubmitSuccess)
      this.$signAos.event.once('onSignComplete', this.onSignComplete)
      this.$signAos.event.once('onCloseFrame', this.onCloseFrame)
    },
    async onSignSubmitSuccess(options) {
      const { signId, thirdBizId, files, sourceFileList, fileMd5List } = options;
      this.signId = signId
      this.$signAos.startView(signId)
      try {
        this.showOverLay = true;
        // 获取签字后的 pdf 文件流
        const signFile = await downloadSignedFile(files[0])
        // 将 pdf流 转为 base64 的文件
        // const signFileBase64 = await convert(signFile.data)
        // // 上传 base64 图片盖章
        // const y = this.checkType === 'IMMEDIATELY' ? '200.00' : '240.00'
        // const sealFileData = await sealFile(signFileBase64, {
        //     "x": "150.00",
        //     y,
        // })
        // 将 pdf 的文件转换为 image
        // const imgBase64 = await converPdfToImage(new Blob([sealFileData.data], {type: 'application/pdf'}))
        // // 将盖章后的 pdf 文件流 转为 base64 的文件
        await this.uploadPngAndPdf(
          // dataURLtoBlob(imgBase64),
          new Blob([signFile.data], {type: 'application/pdf'})
        )
      }catch(_) {
        this.showOverLay = false
        this.editable = true
      }
    },
    async uploadPngAndPdf(pdfblob) {
      const fileName =
          this.checkType === "IMMEDIATELY"
            ? "责令立即改正通知书"
            : "责令限期改正通知书";
      // 保存图片
      // var imgFd = new FormData(document.forms[0]);
      // imgFd.append("fileBinary", imgblob);
      // imgFd.append("fileName", `${fileName}-${Date.now()}.png`);
      // const imgUploadRes = await this.$http.post("/v2/api/file", imgFd);
      // 保存pdf
      var pdfFd = new FormData(document.forms[0]);
      pdfFd.append("fileBinary", pdfblob);
      pdfFd.append("fileName", `${fileName}-${Date.now()}.pdf`);
      // 上传 pdf
      const pdfUploadRes = await this.$http.post(
        "/v2/api/file",
        pdfFd
      );
      // 更新任务字段
      let limitDate = '';
      if (this.checkType === "DEADLINE" && this.deadlineTime) {
        limitDate = dayjs(this.deadlineTime).format("YYYY-MM-DD");
      }
      const signDate = dayjs(this.signTime).format("YYYY-MM-DD");
      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.checkType == 'DEADLINE' ? this.otherInfo : this.group11,
          group12: this.checkType == 'IMMEDIATELY' ? this.otherInfo : '',
        },
        limitDate: limitDate,
        signDate: signDate,
        type: this.checkType,
      };
      const noticeType = this.checkType == 'DEADLINE' ? 'deadline' : 'immediately';
      const json = this.setupStaticNoticeResult(this.jobDetail, noticeType, noticeResult);
      const param = {
        static_notice_result: json,
      };
      if (this.checkType === "IMMEDIATELY") {
        // 限改通知书png文件ID
        // 限改通知书文件ID
        param.immediately_file_id = pdfUploadRes.data.id;
        // 限改通知书勾选结果
        param.immediately_file_result = JSON.stringify(this.pageData);
      } else if (this.checkType === "DEADLINE") {
        // 限改通知书png文件ID
        // 限改通知书文件ID
        param.deadline_file_id = pdfUploadRes.data.id;
        // 限改通知书勾选结果
        param.deadline_file_result = JSON.stringify(this.pageData);
        // 直接将限改流程状态改为待审批
        param.notification_audit_status = "AUDIT";
      }
      await this.$http.put(
        `/v2/api/enforce-job/${this.jobDetail.id}`,
        param
      );
      if (this.checkType === "IMMEDIATELY") {
        await this.immediatelyOptSendSMS(pdfUploadRes.data.id)
      }
      this.resultFileCount += 1
      this.showOverLay = false;
      this.$router.push({
        path: `/otherMissionOptimizeNoticeQrcode`,
        query: {
          url: handleProblemImgs(pdfUploadRes.data.id),
          title: fileName,
        },
      });
    },
    async immediatelyOptSendSMS(fileId) {
      let url = handleProblemImgs(fileId);
      const date = dateFormat('YYYY年mm月dd日', new Date(this.jobDetail.start_time));
      // const time = new Date(`${this.pageData.start_time_year}-${this.pageData.start_time_month}-${this.pageData.start_time_date}`)
      let content = `根据《中华人民共和国消防法》第五十三条的规定，我${this.pageData && this.pageData.enforce_org_name||''}于${date}对你单位（场所）进行消防监督检查，即刻查看检查结果：`
      this.$http.post(`/v2/api/enforce-job/${this.jobDetail.id}/enforce-message`, {
        id: this.jobDetail.id,
        obj_id:this.jobDetail.enforce_obj_id,
        message_type:'RECTIFY',
        receiver_type: 'SMS',
        message_content:content+ url,
        send_time:new Date()
      }).then((res) => {
        this.$toast.success('保存成功');
        this.showOverLay = false;
        // this.$router.back();
      }).catch(() => {
        this.showOverLay = false;
        this.$toast.fail("保存失败");
      });
    },
    onSignComplete() {
    },
    onCloseFrame() {
      this.showOverLay = false
      this.editable = true
    },
    initNotice() {
      if (!this.showNotice) return;
      this.checkType = this.showNoticeType;
      this.showDetailState = true;
      this.editable = false
      if (this.showNoticeType === "IMMEDIATELY") {
        this.title = "责令立即改正通知书";
      } else {
        this.title = "责令限期改正通知书";
      }
    },
    async gotoList(type) {
      // if (!this.checkJudgeData.includes(type)) return;
      // this.$refs.sign && this.$refs.sign.clearCanvas()
      // this.jobDetail = this.getjobDetail(this.jobDetail);
      // this.checkType = type;
      // this.showDetailState = true;
      if (type === "IMMEDIATELY") {
        // this.title = "责令立即改正通知书";
        if (this.jobDetail.immediately_file_id > 0) {
          const url = handleProblemImgs(this.jobDetail.immediately_file_id);
          this.$router.push({
              name: 'pdf',
              params: {
                  url,
                  title: '责令立即改正通知'
              }
          })
        }
        else {
          this.$router.push(`/correctImmediately/${this.jobDetail.id}`)
        }
      } else {
        // this.title = "责令限期改正通知书";
        if (this.jobDetail.deadline_file_id > 0) {
          const url = handleProblemImgs(this.jobDetail.deadline_file_id);
          this.$router.push({
              name: 'pdf',
              params: {
                  url,
                  title: '责令限期改正通知'
              }
          })
        }
        else {
          this.$router.push(`/correctDeadline/${this.jobDetail.id}`);
        }
      }
    },
    // 初始化
    async init() {
      this.showOverLay = true;
      await this.getExistDataApi();

      if (this.existData.length > 0) this.hasData = true;

      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(",");
        }
      }
      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);
            }
          });
        }
      }
    },

    // 获取编号
    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) {
          if (res.data.length > 0) {
            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.id === j) {
            this.sureDetailIssue.push({
              content: i.issueDetail + " " + i.checkResult + " " + i.checkSite,
            });
          }
        });
      });
    },

    // 子项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());
        this.itemGroup = [...new Set(this.itemGroup)].sort((a, b) => a - b); // 数组去重排序
      }
    },

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

    // 保存画布
    saveCanvas() {
      this.showSignPop = false;
    },
    getjobDetail(res) {
      this.companyInfo = res.enforce_obj;
      const dayjsEntity = this.companyInfo && dayjs(res.enforce_obj.start_time);
      this.startTime = dayjsEntity.$d
      this.$set(res, "start_time_year", dayjsEntity && dayjsEntity.year());
      this.$set(res, "start_time_month", dayjsEntity ? dayjsEntity.month() + 1 : undefined);
      this.$set(res, "start_time_date", dayjsEntity && dayjsEntity.date());

      const {
        enforce_obj_name,
        enforce_org_name,
        start_time_year,
        start_time_month,
        start_time_date,
      } = res;
      this.pageData.enforce_obj_name = enforce_obj_name;
      this.pageData.enforce_org_name = enforce_org_name;
      this.pageData.start_time_year = start_time_year;
      this.pageData.start_time_month = start_time_month;
      this.pageData.start_time_date = start_time_date;
      return res;
    },
    // 获取任务详情信息
    async getJobDetailInfoApi() {
      this.showOverLay = true;
      this.tipMsg = "数据获取中";
      const id = this.$route.params.id;
      await this.$http
        .get(`/v2/api/enforce-job/${id}`, {
          id,
        })
        .then(async (res) => {
          this.jobDetail = res.data;
          if (this.showNoticeType === 'IMMEDIATELY') {
            this.pdfSrc = handleProblemImgs(res.data.immediately_file_id)
          }else if (this.showNoticeType === 'DEADLINE') {
            this.pdfSrc = handleProblemImgs(res.data.deadline_file_id)
          }
          if (res.data.immediately_file_id) {
            this.resultFileCount += 1
            this.IMMEDIATELYCodeUrl = await this.makeCode(handleProblemImgs(res.data.immediately_file_id))
          }
          if (res.data.deadline_file_id) {
            this.DEADLINECodeUrl = await this.makeCode(handleProblemImgs(res.data.deadline_file_id))
            if (res.data.notification_audit_status === "SENDED") {
              this.resultFileCount += 1
            }
          }
          this.getjobDetail(res.data);
        })
        .catch((err) => {
          console.log(err);
          this.$toast.fail("获取任务信息失败");
        })
        .finally(() => {
          this.showOverLay = 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,
      });
    },
    closeOverLay() {
      Object.keys(this.pageData).forEach((key) => {
          this.pageData[key] = null;
        });
      if (this.showNotice) {
        this.$router.back()
      } else {
        this.editable = true
        this.showDetailState = false;
        
      }
    },
    // 提交
    async submit() {
      // if (!this.checkerSignVal) {
      //   this.$toast.fail('请被检查单位签名');
      //   return
      // }
      // 立改 如果文件 id为空 则表示 未下发 可以下发，否则不能下发
      if (this.checkType === "IMMEDIATELY") {
        if (this.jobDetail.immediately_file_id) {
          this.$toast.fail("责令立即改正通知书已下发");
          return;
        }
      } else {
        // 限改提交过文件并且 不是驳回状态 则不能再下发
        if (
          this.jobDetail.deadline_file_id &&
          this.jobDetail.notification_audit_status !== "REJECT"
        ) {
          this.$toast.fail("责令限期改正通知书已下发");
          return;
        }
      }
      if (!this.pageData.sign_time_year || !this.pageData.sign_time_month || !this.pageData.sign_time_date) {
        // 请填写完整的时间
         this.$toast.fail("请输入正确的签收时间");
         return
      }
      this.editable = false;

      this.$nextTick(async () => {
        this.tipMsg = "下发中...";
        const fileName =
          this.checkType === "IMMEDIATELY"
            ? "责令立即改正通知书"
            : "责令限期改正通知书";

        let subData = "";
        try {
          subData = await getOnePdf(
            document.querySelector("#pdfContainer"),
            fileName
          );
          // await this.jumpSignAndSeal(subData, fileName)
          // return
          this.addAosEvent()
          // 发起签署
          if (this.$signAos) {
              this.$signAos.startSign({
                  signId: '',
                  socialCreditCode: config.socialCreditCode,
                  files: [
                    {
                      file: subData,
                      sign: [{
                            x: 150,
                            y: 10,
                            width: 80,
                            height: 30,
                            page: 1,
                            required: true,
                            name: '签名',
                            tipText: '被检查单位(场所)签名',
                      }]
                    }
                  ],
                  signType: 'TOUCH',
                  isFree: false,
                  thirdBizId: 'xxx',
              });
          }
          else {
              this.$toast.fail('签署还未就绪，请过会再试');
              this.showOverLay = false;
              initSign().then(res => {
                  Vue.prototype.$signAos = res
              }).catch(_ => {})
          }
        }catch(err) {
          console.log(err);
        }
      });
    },
    async jumpSignAndSeal(subData, fileName) {
      // 保存图片
      var imgFd = new FormData(document.forms[0]);
      var blob = this.dataURItoBlob(subData.turnImgData);
      imgFd.append("fileBinary", blob);
      imgFd.append("fileName", `${fileName}-${Date.now()}.png`);
      const imgUploadRes = await this.$http.post("/v2/api/file", imgFd);
      // 保存pdf
      subData.pdfFile.append("fileBinary", subData.pdfFile.get("file"));
      subData.pdfFile.append("fileName", `${fileName}-${Date.now()}.pdf`);
      // 上传 pdf
      const pdfUploadRes = await this.$http.post(
        "/v2/api/file",
        subData.pdfFile
      );
      // 更新任务字段
      const param = {};
      if (this.checkType === "IMMEDIATELY") {
        // 限改通知书png文件ID
        param.immediately_png_file_id = imgUploadRes.data.id;
        // 限改通知书文件ID
        param.immediately_file_id = pdfUploadRes.data.id;
        // 限改通知书勾选结果
        param.immediately_file_result = JSON.stringify(this.pageData);
      } else if (this.checkType === "DEADLINE") {
        // 限改通知书png文件ID
        param.deadline_png_file_id = imgUploadRes.data.id;
        // 限改通知书文件ID
        param.deadline_file_id = pdfUploadRes.data.id;
        // 限改通知书勾选结果
        param.deadline_file_result = JSON.stringify(this.pageData);
        // 直接将限改流程状态改为待审批
        param.notification_audit_status = "AUDIT";
      }
      await this.$http.put(
        `/v2/api/enforce-job/${this.jobDetail.id}`,
        param
      );
      if (this.checkType === "IMMEDIATELY") {
        await this.immediatelyOptSendSMS(pdfUploadRes.data.id)
      }
      this.$router.push({
        path: `/reportJobOptimizeNoticeQrcode`,
        query: {
          url: handleProblemImgs(pdfUploadRes.data.id),
          title: fileName,
        },
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.code_area {
  display: flex;
  .left,
  .right{
    flex: 1;
  }
  p {
    text-align: center;
  }
}
.pdfImg {
  iframe {
    width: 100vw;
    height: 100vh;
  }
}
.alert_msg {
  margin-top: -30px;
}
.correctImmediately {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  .headNav {
    flex: 0 0 50px;
  }
  .notice_content {
    flex: 1;
  }
  .scale8 {
    transform: scale(0.8);
  }

  .pdf_container {
    padding: 0 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-left: -10px;
      margin-top: -10px;

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

      .tips {
        text-indent: 2em;
        font-size: 13px;
        input {
          width: 30px;
          border: none;
          border-bottom: 1px solid;
          text-align: right;

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

          &:last-child {
            // width: 20px;
          }
        }
        span {
          text-decoration: underline;
        }
      }
    }

    .pdf_content_issue {
      margin-top: -30px;
      &.DEADLINE {
        margin-top: -38px;
      }
      .checkTotal {
        // padding: 10px 15px;
        padding-top: 0;
        width: 110%;
        margin-left: -10px;

        .item {
          color: #424242;
          display: flex;
          justify-content: flex-start;
          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;
      width: 110%;
      margin-left: -10px;

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

      .date {
        flex: 2;
        display: flex;
        align-items: flex-end;
        justify-content: right;
        span {
          display: inline-block;
          min-width: 15px;
          text-align: right;
          text-decoration: underline;
          &:first-child {
            min-width: 20px;
          }
        }
        input {
          width: 30px;
          border: none;
          border-bottom: 1px solid;
          text-align: right;

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

          &:last-child {
            width: 20px;
          }
        }
      }
    }
    .edit_opt_date {
      margin-top: -40px;
      .tips {
        text-indent: 2em;
        input {
          width: 30px;
          border: none;
          border-bottom: 1px solid;
          text-align: right;

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

          &:last-child {
            width: 20px;
          }
        }
      }
    }
    .pdf_content_tips {
      font-size: 12px;
      color: #323233;
      margin-left: -27px;
      transform: scale(0.7);
    }

    .underLine {
      font-size: 12px;
      margin-top: -8px;
      margin-left: -5px;
      min-height: 30px;
      @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;
      }
    }
  }
  .uneditable_underLine {
    padding-top: 5px;
    line-height: 21px;
    word-break: break-all;
  }
  .ml30 {
    margin-left: 35px;
  }

  .mr5 {
    margin-right: 5px;
  }

  .filed {
    background-color: #fff;
    font-size: 12px;
  }

  .specificQs {
    background-color: #fff;
    padding: 10px 15px;

    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;

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

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

      &:last-child {
        margin-right: 30px;
      }
    }
  }
}
.notice_page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  font-size: 14px;
  .headNav {
    position: static;
    flex: 0 0 50px;
  }
  .notice_content {
    flex: 1;
  }
  /deep/ {
    .van-cell__title {
      flex: 2;
    }
  }
  .opt_notice_file {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: right;
    span.red {
      color: red;
    }
    span.green {
      color: green;
    }
    /deep/ {
      span,
      i {
        vertical-align: middle;
      }
    }
  }
  .notice_name {
    color: #cccccc;
    font-size: 12px;
  }
}
.notice_page_content {
  overflow: auto;
  .top_title {
    font-size: 12px;
    color: #666;
    margin: 10px 0;
    text-align: center;
  }
  .title {
    font-size: 16px;
    color: #333;
    text-align: center;

    margin-bottom: 15px;
  }
  .sub_title {
    display: block;
    width: 100%;
    font-size: 12px;
    color: #666;
    text-align: right;
    text-align: right;
  }
}
.submitBtn {
  width: 90%;
  margin-left: 5%;
  margin-top: 30px;
}
.showOverLay {
  /deep/ {
    .van-overlay {
      z-index: 10000 !important;
    }
  }
}
.sign_img_container {
  position: relative;
}
.sign_img {
  position: absolute;
  height: 40px;
  top: 50%;
  left: 135px;
  transform: translateY(-50%);
}
/deep/ {
  .sign_popup {
  z-index: 200003 !important;
  + .van-popup  {
    z-index: 200005 !important;
  }
}
}
.date_time_span {
  display: inline-block;
  min-width: 10px;
  text-align: right;
  text-decoration: underline;
  text-indent: 0;
}
</style>
<style lang="scss">
.correctImmediately {
  .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;
    }

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

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