<template>
  <div class="content-main" id="protectedItems">
    <div id="pdfId">
      <div class="ywborderS">
        <div style="text-align: center; font-size: 22px; font-weight: 600">
          设备离线(故障)情况备案表
        </div>
        <div style="margin-left: auto; display: table">
          编号:{{ formData.gdbh }}
        </div>
      </div>
      <el-form
        ref="formData"
        :rules="rules"
        :model="formData"
        inline
        class="demo-ruleForm"
      >
        <el-row>
          <table class="table-b table-el-form">
            <tr>
              <td class="songFont" colspan="2">
                <span style="color: red">*</span>申请单位
              </td>
              <td class="songFont">
                <el-form-item prop="sqdwmc">
                  <span class="songFont">{{ formData.sqdwmc }}</span>
                </el-form-item>
              </td>
              <td><span style="color: red">*</span>申请日期</td>
              <td>
                <el-form-item prop="sqrq">
                  <el-date-picker
                    :disabled="true"
                    clearable
                    v-model="formData.sqrq"
                    type="date"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td colspan="2"><span style="color: red">*</span>申请人</td>
              <td>
                <el-form-item prop="sqr">
                  <el-input
                    :disabled="disabled"
                    clearable
                    v-model="formData.sqr"
                  ></el-input>
                </el-form-item>
              </td>
              <td><span style="color: red">*</span>申请人联系方式</td>
              <td>
                <el-form-item prop="sqrlxfs">
                  <el-input
                    :disabled="disabled"
                    clearable
                    v-model="formData.sqrlxfs"
                  ></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <span style="color: red">*</span>申请离线时间段
              </td>
              <td>
                <el-form-item prop="offLineDate">
                  <el-date-picker
                    :disabled="disabled"
                    v-model="formData.offLineDate"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd HH:mm"
                    value-format="yyyy-MM-dd HH:mm"
                  >
                  </el-date-picker>
                </el-form-item>
              </td>
              <td><span style="color: red">*</span>摄像头是否故障</td>
              <td>
                <el-form-item prop="cameraMal">
                  <el-radio-group
                    v-model="formData.cameraMal"
                    :disabled="disabled"
                  >
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <span style="color: red">*</span>设备离线(故障)情况描述
              </td>
              <td colspan="3">
                <el-form-item prop="offLineDesc">
                  <el-input
                    :disabled="disabled"
                    type="textarea"
                    clearable
                    :autosize="{ minRows: 2, maxRows: 20 }"
                    maxlength="300"
                    v-model="formData.offLineDesc"
                    show-word-limit
                  ></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <span style="color: red">*</span>申请离线(故障)摄像头
              </td>
              <td colspan="3">
                <el-form-item style="text-align: left">
                  <el-button
                    v-show="!disabled"
                    type="primary"
                    size="medium"
                    plain
                    @click="seeSxtList"
                    >选择摄像头</el-button
                  >
                  <span style="margin-left: 20px; color: #409eff"
                    >离线设备数量：共计&nbsp;&nbsp;{{
                      cameraList.length
                    }}&nbsp;&nbsp;个摄像头</span
                  >
                  <div
                    style="
                      border: 1px solid;
                      min-height: 55px;
                      padding: 0 15px;
                      overflow: hidden;
                      cursor: pointer;
                    "
                  >
                    <span
                      v-for="item in cameraList"
                      style="
                        display: inline-block;
                        margin-right: 10px;
                        margin-bottom: 10px;
                      "
                    >
                      <el-tag>{{ item.stdname }}</el-tag>
                    </span>
                  </div>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <span style="color: red">*</span
                >申请离线摄像头范围内是否有储粮作业
              </td>

              <td colspan="3">
                <el-form-item prop="jobStatus">
                  <el-radio-group
                    v-model="formData.jobStatus"
                    :disabled="disabled"
                  >
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr v-show="formData.jobStatus">
              <td colspan="2">
                <span style="color: red">*</span>作业内容和位置
              </td>
              <td colspan="3">
                <el-form-item>
                  <el-input
                    :disabled="disabled"
                    type="textarea"
                    clearable
                    :autosize="{ minRows: 2, maxRows: 20 }"
                    maxlength="300"
                    v-model="formData.jobContentAndLocal"
                    show-word-limit
                  ></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td colspan="2">附件</td>
              <td colspan="3" style="text-align: left">
                <el-form-item prop="" label-width="0px">
                  <!-- <el-upload
                  disabled
                  :on-success="handleSuccess"
                  class="upload-demo"
                  :action="fileUrl"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :file-list="fileList"
                >
                </el-upload> -->
                  <div v-for="item in fileList" :key="item.id">
                    <span>{{ item.name }}</span>
                    <el-button
                      v-if="
                        ['png', 'jpg', 'jpeg', 'bmp', 'pdf'].includes(
                          item.link.split('.')[item.link.split('.').length - 1]
                        )
                      "
                      type="text"
                      size="small"
                      @click="YlPic(item.link)"
                      >预览</el-button
                    >
                    <el-button type="text" size="small" @click="XzPic(item.id)"
                      >下载</el-button
                    >
                  </div>
                </el-form-item>
              </td>
            </tr>
            <!-- <tr>
           <td>申请人</td>
           <td>
             <el-form-item prop="sqr">
               <el-input
                 :disabled='disabled'
                 clearable
                 v-model="formData.sqr"
               ></el-input>
             </el-form-item>
           </td>
           <td>申请日期</td>
           <td>
             <el-form-item prop="sqrq">
               <el-date-picker
                :disabled="true"
                 clearable
                 v-model="formData.sqrq"
                 type="date"
                 value-format="yy-MM-dd"
               ></el-date-picker>
             </el-form-item>
           </td>
         </tr> -->
            <div v-if="formData.verifyDesc != null" style="display: contents">
              <!-- 审核开始 -->
              <!-- 盖章信息 -->
              <tr>
                <td colspan="2">
                  <span style="color: red">*</span>主管领导意见
                </td>
                <el-form-item prop="verifyDesc">
                  <el-radio-group
                    v-model="formData.verifyDesc"
                    :disabled="SHdisabled"
                  >
                    <el-radio label="1">同意</el-radio>
                    <el-radio label="0">不同意</el-radio>
                  </el-radio-group>
                </el-form-item>
              </tr>
              <tr>
                <td colspan="2"><span style="color: red">*</span>审核人</td>
                <td>
                  <el-form-item prop="verifyPerson">
                    <el-input
                      :disabled="SHdisabled"
                      clearable
                      v-model="formData.verifyPerson"
                    ></el-input>
                  </el-form-item>
                </td>
                <td rowspan="2" colspan="2">
                  <div style="text-align: left; align-items: center">盖章</div>
                  <div style="margin: 0 100px" id="offlineFiling"></div>
                </td>
              </tr>
              <tr>
                <td colspan="2"><span style="color: red">*</span>审核日期</td>
                <td>
                  <el-form-item prop="verifyDate">
                    <el-date-picker
                      clearable
                      :disabled="true"
                      v-model="formData.verifyDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </td>
              </tr>
              <!-- 审核结束 -->
            </div>

            <!-- 第一步 区 -->
            <template v-if="formData.dgoVerifyRes != null">
              <tr>
                <td colspan="5" style="font-weight: bold">备案意见</td>
              </tr>
              <tr>
                <td rowspan="3" style="font-weight: bold">
                  第一步:{{
                    formData.parentAccount == "LS001017"
                      ? "利达粮油"
                      : formData.parentAccount == "LS001074"
                      ? "中粮利金"
                      : formData.parentAccount == "LS001019"
                      ? "储备公司"
                      : "区粮办"
                  }}
                </td>
                <td><span style="color: red">*</span>备案意见</td>
                <td colspan="3">
                  <el-form-item prop="dgoVerifyRes">
                    <el-radio-group
                      v-model="formData.dgoVerifyRes"
                      :disabled="$route.query.type != 'qlbsh'"
                    >
                      <el-radio label="1">同意</el-radio>
                      <el-radio label="0">不同意</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td><span style="color: red">*</span>备案意见说明</td>
                <td colspan="3">
                  <el-form-item prop="dgoVerifyDesc">
                    <el-input
                      :disabled="$route.query.type != 'qlbsh'"
                      type="textarea"
                      clearable
                      :autosize="{ minRows: 2, maxRows: 20 }"
                      maxlength="300"
                      v-model="formData.dgoVerifyDesc"
                      show-word-limit
                    ></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td><span style="color: red">*</span>备案人</td>
                <td>
                  <el-form-item prop="dgoVerifier">
                    <el-input
                      :disabled="true"
                      clearable
                      v-model="formData.dgoVerifier"
                    ></el-input>
                  </el-form-item>
                </td>
                <td><span style="color: red">*</span>备案日期</td>
                <td>
                  <el-form-item prop="dgoVerifyDate">
                    <el-date-picker
                      :disabled="true"
                      clearable
                      v-model="formData.dgoVerifyDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </td>
              </tr>
            </template>

            <!-- 第er步 市储备处 -->
            <template v-if="formData.urbanVerifyRes != null">
              <tr>
                <td rowspan="3" style="font-weight: bold">
                  第二步:市局储备处备案
                </td>
                <td><span style="color: red">*</span>备案意见</td>
                <td colspan="3">
                  <el-form-item prop="urbanVerifyRes">
                    <el-radio-group
                      v-model="formData.urbanVerifyRes"
                      :disabled="$route.query.type != 'scbcba'"
                    >
                      <el-radio label="1">同意</el-radio>
                      <el-radio label="0">不同意</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td><span style="color: red">*</span>备案意见说明</td>
                <td colspan="3">
                  <el-form-item prop="urbanVerifyDesc">
                    <el-input
                      :disabled="$route.query.type != 'scbcba'"
                      type="textarea"
                      clearable
                      :autosize="{ minRows: 2, maxRows: 20 }"
                      maxlength="300"
                      v-model="formData.urbanVerifyDesc"
                      show-word-limit
                    ></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td><span style="color: red">*</span>备案人</td>
                <td>
                  <el-form-item prop="urbanVerifier">
                    <el-input
                      :disabled="true"
                      clearable
                      v-model="formData.urbanVerifier"
                    ></el-input>
                  </el-form-item>
                </td>
                <td><span style="color: red">*</span>备案日期</td>
                <td>
                  <el-form-item prop="urbanVerifyDate">
                    <el-date-picker
                      :disabled="true"
                      clearable
                      v-model="formData.urbanVerifyDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </td>
              </tr>
            </template>
            <!-- 第san步 信息中心 -->
            <template v-if="formData.icVerifyRes != null">
              <tr>
                <td rowspan="3" style="font-weight: bold">
                  第三步:信息中心备案
                </td>
                <td><span style="color: red">*</span>备案意见</td>
                <td colspan="3">
                  <el-form-item prop="icVerifyRes">
                    <el-radio-group
                      v-model="formData.icVerifyRes"
                      :disabled="$route.query.type != 'xxzxba'"
                    >
                      <el-radio label="1">同意</el-radio>
                      <el-radio label="0">不同意</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td><span style="color: red">*</span>备案意见说明</td>
                <td colspan="3">
                  <el-form-item prop="icVerifyDesc">
                    <el-input
                      :disabled="$route.query.type != 'xxzxba'"
                      type="textarea"
                      clearable
                      :autosize="{ minRows: 2, maxRows: 20 }"
                      maxlength="300"
                      v-model="formData.icVerifyDesc"
                      show-word-limit
                    ></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td><span style="color: red">*</span>备案人</td>
                <td>
                  <el-form-item prop="icVerifier">
                    <el-input
                      :disabled="true"
                      clearable
                      v-model="formData.icVerifier"
                    ></el-input>
                  </el-form-item>
                </td>
                <td><span style="color: red">*</span>备案日期</td>
                <td>
                  <el-form-item prop="icVerifyDate">
                    <el-date-picker
                      :disabled="true"
                      clearable
                      v-model="formData.icVerifyDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </td>
              </tr>
            </template>
          </table>
        </el-row>
      </el-form>
    </div>
    <span class="detail-footer">
      <el-button
        type="primary"
        class="iconfont iconchakan"
        :loading="stateLoading"
        v-show="formData.workOrderFid "
        @click="toWorkOrder"
        >查看关联运维表</el-button
      >
      <!-- <el-button
        v-if="
          ($route.query.shzt == '91000030' ||
            $route.query.shzt == '91000040' ||
            $route.query.shzt == '91000042') &&
          $route.query.type != 'CK'
        "
        @click="AddProblem"
        type="primary"
        class="iconfont iconadd"
        >追加问题描述</el-button
      > -->
      <el-button
        v-if="$route.query.type != 'CK' && $route.query.type != 'dc'"
        @click="saveSubmit()"
        type="primary"
        class="iconfont icontijiao"
      >
        提交</el-button
      >
      <el-button
        v-if="$route.query.type == 'dc'"
        type="primary"
        class="iconfont icondaochu11"
        @click="exportPdf"
        >导出</el-button
      >
      <el-button @click="returnList" type="primary" class="iconfont iconfanhui"
        >返回</el-button
      >
    </span>
    <!-- 摄像头弹窗 -->
    <el-dialog
      title="选择摄像头"
      :visible.sync="dialogVisible"
      width="70%"
      ref="domPrint"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <tree-transfer
        ref="insideChooseProject"
        :datas="sxtListData"
        :defaultProps="defaultProps"
        :checkedList="treeChecked"
      ></tree-transfer>

      <div slot="footer" class="dialog-footer no-print">
        <el-button
          type="primary"
          size="small"
          @click="getTree"
          class="iconfont iconqueren"
          >确定</el-button
        >
        <el-button
          type="primary"
          size="small"
          class="iconfont iconquxiao"
          @click="dialogVisible = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <!-- //签章弹窗组件 -->
    <sealDialog
      ref="sealDialog"
      sealId="offlineFiling"
      @sealTodo="sealTodo"
      @sealError="sealError"
    ></sealDialog>
  </div>
</template>

<script>
import {
  findYWRYPDictCode,
  addProblem,
  GetlistProblem,
  GetlistSolve,
  findByIds,
} from "@/api/operationServices/operationOrder/index.js";
import {
  insertEntitySelective,
  selectById,
  updateByEntitySelective,
  spSelectListNew,
  // findYWRYPDictCode,
  // addProblem,
  // GetlistProblem,
  // GetlistSolve,
} from "@/api/operationServices/offlineFiling/index.js";

// import upload from "@/components/upload";
import { FileApi, files } from "@/api/index";
import sealDialog from "@/components/sealDialog/index.vue";
import treeTransfer from "./treeTransfer.vue";
import htmlToPdf from "@/utils/htmlToPdf";

function checkPhone(rule, value, callback) {
  var val = value && value.trim();
  if (/^1\d{10}$/.test(val)) {
    callback();
  } else {
    callback(new Error("请按正确手机号码格式填写"));
  }
}
export default {
  components: {
    sealDialog,
    treeTransfer,
  },
  data() {
    return {
      // 穿梭框默认
      defaultProps: {
        id: "stdcode",
        children: "children",
        label: "stdname",

        // pCode:"pid"
      },
      // 穿梭框选中数据
      treeChecked: [],
      // 穿梭框数据
      sxtListData: [],
      cameraList: [],

      state: "",
      stateLoading: false,
      disabled: false, //申请人填写信息是否禁用
      SHdisabled: false, //审核盖章
      SQRdisabled: false, //申请人确认
      fileUrl: `${FileApi}/file/upload`,
      fileList: [],
      fileList1: [],
      fileListBL: [],
      dialogVisible: false, //摄像头添加
      systemNameOptions: [
        {
          code: "1",
          name: "天津智能出入库系统",
        },
        {
          code: "2",
          name: "天津市企业服务平台",
        },
        {
          code: "3",
          name: "天津智能粮库业务平台",
        },
        {
          code: "4",
          name: "市级综合粮食管理和服务平台",
        },
      ], //系统名称list
      solvePersonOptions: [],
      //处理方式
      solveTypeOptions: [
        {
          code: "1",
          name: "现场处理",
        },
        {
          code: "2",
          name: "远程处理",
        },
        {
          code: "3",
          name: "第三方介入处理",
        },
        {
          code: "4",
          name: "研发人员处理",
        },
        {
          code: "5",
          name: "其他",
        },
      ],
      //问题类型
      problemTypeOptions: [
        {
          code: "1",
          name: "测温问题",
        },
        {
          code: "2",
          name: "硬件问题",
        },
        {
          code: "3",
          name: "网路问题",
        },
        {
          code: "4",
          name: "供电问题",
        },
        {
          code: "5",
          name: "数据问题",
        },
        {
          code: "6",
          name: "配置问题",
        },
        {
          code: "7",
          name: "操作问题",
        },
        {
          code: "8",
          name: "系统服务问题",
        },
        {
          code: "9",
          name: "其他",
        },
      ],
      tableData: [],
      formData: {
        // fid: "",
        gdbh: "",
        sqdwmc: sessionStorage.getItem("orgName"),
        sqdwdm: sessionStorage.getItem("orgCode"),
        webSysName: "",
        sqrlxfs: "",
        offLineDate: [],
        cameraMal: 1,
        jobStatus: 1,
        jobContentAndLocal: "",
        offLineDesc: "", //问题情况描述
        orderAttachment: "", //问题附件
        workOrderTypeName: "",
        workOrderType: "",
        // sqrq:'',
        sqrq: this.dateFormat(new Date()),
        sqr: sessionStorage.getItem("userName"),

        // verifyDesc: "",
        // verifyPerson: "",
        // // verifyDate:'',
        // verifyDate: "",
        // acceptPerson: "",
        // acceptDate: "",
        // problemType: "", //问题类型
        // solveType: "", //解决方式
        // solveRes: "", //处理结果
        // solveFile: "", //解决附件,
        // solveRemark: "", //解决备注
        // solvePerson: "",
        // solveDate: "",
        // applicantVerifyRes: "",
        // applicantVerify: "",
        // applicantVerifyDate: "",
        // icVerifyRes: "",
        // icVerify: "",
        // icVerifyDate: "",
        shzt: "91000010", //默认审核状态
        shztmc: "待审核",
      },

      rules: {
        sqdw: [
          {
            required: true,
            message: "请输入申请单位",
            trigger: ["blur", "change"],
          },
        ],
        sqrlxfs: [
          {
            validator: checkPhone,
          },
        ],
        offLineDate: [
          {
            required: true,
            message: "请选择时间",
            trigger: ["blur", "change"],
          },
        ],
        cameraMal: [
          {
            required: true,
            message: "请选择是否故障",
            trigger: ["blur", "change"],
          },
        ],
        offLineDesc: [
          {
            required: true,
            message: "请输入问题描述",
            trigger: ["blur", "change"],
          },
        ],
        sqrq: [
          {
            required: true,
            message: "请输入申请日期",
            trigger: ["blur", "change"],
          },
        ],
        sqr: [
          {
            required: true,
            message: "请输入申请人",
            trigger: ["blur", "change"],
          },
        ],
        jobStatus: [
          {
            required: true,
            message: "请选择",
            trigger: ["blur", "change"],
          },
        ],
        // jobContentAndLocal: [
        //   {
        //     required: true,
        //     message: "请输入内容",
        //     trigger: ["blur", "change"],
        //   },
        // ],
        verifyDesc: [
          {
            required: true,
            message: "请选择主管领导意见",
            trigger: ["blur", "change"],
          },
        ],
        verifyPerson: [
          {
            required: true,
            message: "请输入审核人",
            trigger: ["blur", "change"],
          },
        ],
        verifyDate: [
          {
            required: true,
            message: "请输入审核日期",
            trigger: ["blur", "change"],
          },
        ],
        applicantVerifyRes: [
          {
            required: true,
            message: "请选择申请人确认",
            trigger: ["blur", "change"],
          },
        ],
        applicantVerify: [
          {
            required: true,
            message: "请输入申请人",
            trigger: ["blur", "change"],
          },
        ],
        applicantVerifyDate: [
          {
            required: true,
            message: "请选择确认日期",
            trigger: ["blur", "change"],
          },
        ],

        //区凉拌审核
        dgoVerifier: [
          {
            required: true,
            message: "请选择备案人",
            trigger: ["blur", "change"],
          },
        ],
        dgoVerifyDate: [
          {
            required: true,
            message: "请选择备案日期",
            trigger: ["blur", "change"],
          },
        ],
        dgoVerifyDesc: [
          {
            required: true,
            message: "请选择备案意见说明",
            trigger: ["blur", "change"],
          },
        ],
        dgoVerifyRes: [
          {
            required: true,
            message: "请选择备案意见",
            trigger: ["blur", "change"],
          },
        ],

        urbanVerifier: [
          {
            required: true,
            message: "请选择备案人",
            trigger: ["blur", "change"],
          },
        ],
        urbanVerifyDate: [
          {
            required: true,
            message: "请选择备案日期",
            trigger: ["blur", "change"],
          },
        ],
        // urbanVerifyDesc: [
        //   {
        //     required: true,
        //     message: "请选择备案意见说明",
        //     trigger: ["blur", "change"],
        //   },
        // ],
        urbanVerifyRes: [
          {
            required: true,
            message: "请选择备案意见",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  computed: {
    downloadExcelUrl(link) {
      return "http://101.36.160.140:8097/file/" + link;
      //Api.linkUrl.baseUrl+Api.linkUrl.downloadExcel = http://base地址/下载的地址
    },
  },
  created() {
    if (this.$route.query.type == "CK" || this.$route.query.type == "dc") {
      this.SQRdisabled = true;
      this.SHdisabled = true;
      this.disabled = true;
    } else if (
      this.$route.query.shzt == "add" ||
      this.$route.query.shzt == "91000001"
    ) {
      this.disabled = false;
      this.SHdisabled = true;
      this.SQRdisabled = true;
    } else if (
      this.$route.query.shzt == "91000010" ||
      this.$route.query.shzt == "91000011"
    ) {
      this.SHdisabled = false;
      this.disabled = true;
      this.SQRdisabled = true;
    } else if (
      this.$route.query.shzt == "91000050" ||
      this.$route.query.shzt == "91000052"
    ) {
      this.SQRdisabled = false;
      this.SHdisabled = true;
      this.disabled = true;
    } else {
      this.SQRdisabled = true;
      this.SHdisabled = true;
      this.disabled = true;
    }
    findYWRYPDictCode("YWRY").then((res) => {
      this.solvePersonOptions = res.data;
    });
    this.$nextTick(() => {
      this.selectByInfo();
    });
  },
  methods: {
    //导出pdf
    exportPdf() {
      let _this = this;
      setTimeout(function () {
        htmlToPdf.downloadPDF(
          document.querySelector("#pdfId"),
          "设备离线故障备案申请表" + _this.formData.gdbh + ".pdf"
        );
      }, 100);
    },
    getTree() {
      console.log(this.$refs["insideChooseProject"].getVal());
      this.cameraList = this.$refs["insideChooseProject"].getVal();
      this.dialogVisible = false;
      // console.log(arr, "arr");
    },
    seeSxtList() {
      spSelectListNew(`${sessionStorage.getItem("tyshxydm")}001`).then(
        (res) => {
          // if (res.infoCode == "1") {
          this.sxtListData = res.data;
          this.dialogVisible = true;
          // }
        }
      );
    },
    //详情信息
    selectByInfo() {
      if (this.$route.query.fid) {
        // let data = {
        //   fid: this.$route.query.fid,
        // };
        selectById(this.$route.query.fid).then((res) => {
          if (res.infoCode == 200) {
            // this.formData.verifyDesc=1
            this.formData = res.data;
            this.formData.offLineDate = [
              this.formData.offLineDateBegin,
              this.formData.offLineDateEnd,
            ];
            this.cameraList = res.data.cameraList;
            if (this.formData.orderAttachment) {
              findByIds(this.formData.orderAttachment).then((res) => {
                this.fileList = res.data;
              });
            }
            if (this.formData.solveFile) {
              findByIds(this.formData.solveFile).then((res) => {
                this.fileListBL = res.data;
              });
            }
            if (this.formData.applicantVerify) {
              this.formData.applicantVerify = this.formData.applicantVerify;
            } else {
              this.formData.applicantVerify =
                sessionStorage.getItem("userName");
            }
            if (this.formData.applicantVerifyDate) {
              this.formData.applicantVerifyDate =
                this.formData.applicantVerifyDate;
            } else {
              this.formData.applicantVerifyDate = this.dateFormat(new Date());
            }
            this.formData.problemType = this.formData.problemType
              ? this.formData.problemType.split(",")
              : this.formData.problemType;
            this.formData.solveType = this.formData.solveType
              ? this.formData.solveType.split(",")
              : this.formData.solveType;
            this.formData.webSysName = this.formData.webSysName
              ? this.formData.webSysName.split(",")
              : this.formData.webSysName;
            this.formData.solvePerson = this.formData.solvePerson
              ? this.formData.solvePerson.split(",")
              : this.formData.solvePerson;
            if (this.formData.verifySeal) {
              if (this.formData.verifySeal.indexOf("newSeal") == -1) {
                this.$nextTick(() => {
                  this.$ShowSeal("offlineFiling", 1);
                  this.$SetSealData(this.formData.verifySeal, 0, "lingdao", 1);
                });
              } else {
                this.$nextTick(() => {
                  this.$signatureOnload(
                    "offlineFiling",
                    this.formData.verifySeal.substring(7)
                  );
                });
              }
            }
            if (this.$route.query.type == "qlbsh") {
              this.formData.dgoVerifyRes = "1";
              this.formData.dgoVerifyDesc = "";
              this.formData.dgoVerifier = sessionStorage.getItem("userName");
              this.formData.dgoVerifyDate = this.dateFormat(new Date());
            }
            if (this.$route.query.type == "xxzxba") {
              this.formData.icVerifyRes = "1";
              this.formData.icVerifyDesc = "";
              this.formData.icVerifier = sessionStorage.getItem("userName");
              this.formData.icVerifyDate = this.dateFormat(new Date());
            }
            if (this.$route.query.type == "scbcba") {
              this.formData.urbanVerifyRes = "1";
              this.formData.urbanVerifyDesc = "";
              this.formData.urbanVerifier = sessionStorage.getItem("userName");
              this.formData.urbanVerifyDate = this.dateFormat(new Date());
            }
          }
        });
      }
    },
    toWorkOrder(){
      this.$router.push({
        name: "operationManagementDetail",
        query: {
           shzt: this.formData.tzshzt,
          fid: this.formData.workOrderFid,
          type: "CK",
        },
      });
    },
    //提交信息
    saveSubmit(susInfo, errInfo) {
      this.stateLoading = false;
      let validateFieldList = [];
      let arrList = [];
      // this.formData.shzt=this.$route.query.shzt ? this.$route.query.shzt : '91000010'
      // if (
      //   this.$route.query.shzt == "add" ||
      //   this.$route.query.shzt == "91000001"
      // ) {
      //   this.formData.shzt = "91000010";
      //   arrList = ["offLineDesc", "sqrq", "sqr", "sqrlxfs"];
      // } else if (
      //   this.$route.query.shzt == "91000010" ||
      //   this.$route.query.shzt == "91000011"
      // ) {
      //   if (this.formData.verifyDesc == "1") {
      //     this.formData.shzt = "91000020";
      //   } else {
      //     this.formData.shzt = "91000001";
      //   }
      //   arrList = [
      //     "offLineDesc",
      //     "sqrq",
      //     "sqr",
      //     "verifyDesc",
      //     "verifyPerson",
      //     "verifyDate",
      //   ];
      // } else if (this.$route.query.shzt == "91000020") {
      //   arrList = [
      //     "offLineDesc",
      //     "sqrq",
      //     "sqr",
      //     "verifyDesc",
      //     "verifyPerson",
      //     "verifyDate",
      //   ];
      // } else if (
      //   this.$route.query.shzt == "91000050" ||
      //   this.$route.query.shzt == "91000052"
      // ) {
      //   if (this.formData.applicantVerifyRes == "1") {
      //     this.formData.shzt = "91000060";
      //   } else {
      //     this.formData.shzt = "91000042";
      //   }
      //   arrList = [
      //     "applicantVerifyRes",
      //     "applicantVerify",
      //     "applicantVerifyDate",
      //   ];
      // }
      console.log(arrList, "8888888888888");

      this.$refs["formData"].validate((valid) => {
        if (valid) {
          if (this.cameraList.length > 0) {
            let arr = [];
            let arrBL = [];
            console.log(this.fileList, "ppppppp000000");
            this.fileList.map((item) => {
              arr.push(item.response ? item.response.data.id : item.id);
            });
            this.formData.orderAttachment = arr.join();
            this.fileListBL.map((item) => {
              arrBL.push(item.response ? item.response.data.id : item.id);
            });
            this.formData.solveFile = arrBL.join();
            console.log(this.offLineDate, "this.offLineDate");
            this.formData.offLineDateBegin =
              this.formData.offLineDate.length > 0
                ? this.formData.offLineDate[0]
                : "";
            this.formData.offLineDateEnd =
              this.formData.offLineDate.length > 0
                ? this.formData.offLineDate[1]
                : "";

            //校验通过走这里,每通过一次,会往这个数组里加一个""
            // validateFieldList.push(valid);
            //因为我这里总共校验了三个字段,所有最终三个字段都校验成功之后,数组中会有三个""
            // if (
            //   validateFieldList.length == arrList.length &&
            //   validateFieldList.every((item) => item === "")
            // ) {
            //这里写校验通过的业务逻辑
            console.log("通过");
            if (this.$route.query.shzt == "add") {
              this.formData.workOrderTypeName = "离线";
              this.formData.workOrderType = "3";
            }
            if (this.$route.query.shzt == "add") {
              insertEntitySelective({
                ...this.formData,
                cameraList: this.cameraList,
              }).then((res) => {
                console.log(res, "kkkkkkkkkk4444444444");
                if (res.infoCode == 200) {
                  this.$message({
                    message: "保存成功",
                    type: "success",
                  });
                  this.$router.go(-1);
                } else {
                  this.$message.error(res.msg);
                }
              });
            } else {
              this.formData.problemType = this.formData.problemType
                ? this.formData.problemType.join()
                : this.formData.problemType;
              this.formData.solveType = this.formData.solveType
                ? this.formData.solveType.join()
                : this.formData.solveType;
              this.formData.webSysName = this.formData.webSysName
                ? this.formData.webSysName.join()
                : this.formData.webSysName;
              this.formData.solvePerson = this.formData.solvePerson
                ? this.formData.solvePerson.join()
                : this.formData.solvePerson;
              this.formData.fid = this.$route.query.fid;
              console.log(this.formData, "this.formData------------");
              updateByEntitySelective({
                ...this.formData,
                cameraList: this.cameraList,
              }).then((res) => {
                // console.log(res,susInfo,'kkkkkkkkkk4444444444')
                if (res.infoCode == 200) {
                  this.$message({
                    message: susInfo ? susInfo : "提交成功",
                    type: "success",
                  });
                  this.$router.go(-1);
                } else {
                  this.$message({
                    type: "error",
                    message: errInfo ? errInfo : res.msg,
                  });
                  // this.$message.error(res.msg);
                }
              });
            }
          } else {
            this.$message({
              type: "warning",
              message: "请选择摄像头！",
            });
          }
        } else {
          this.$message({
            type: "warning",
            message: "请填写正确得必填信息！",
          });
        }
        // }
      });
    },
    //盖章
    stamp() {
      this.$confirm("是否确认盖章？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.stateLoading = true;
          this.$refs.sealDialog.getData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消盖章",
          });
        });
    },
    sealTodo(sealData) {
      // new签章
      var sh = `newSeal${sealData}`;
      this.formData.verifySeal = sh;
      // this.formData.shzt = "91000030";
      this.saveSubmit("盖章成功！", "盖章失败！");
    },
    sealError() {
      this.stateLoading = false;
    },
    //驳回
    signNotDo() {
      this.$confirm("是否确认驳回？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // this.formData.shzt = "91000011";
          this.saveSubmit("签章驳回成功！", "签章驳回失败！");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消驳回",
          });
        });
    },
    //返回
    returnList() {
      this.$router.go(-1);
    },
    //上传
    handleSuccess(res, file, fileList) {
      this.fileList = fileList;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handlePreview(file) {
      // console.log(file);
      let fileLink = file.response ? file.response.data.uri : file.link;
      if (
        ["png", "jpg", "jpeg", "bmp", "pdf"].includes(
          fileLink.split(".")[fileLink.split(".").length - 1]
        )
      ) {
        // console.log(`${window.location.origin}/file/${fileLink}`);
        window.open(`${window.location.origin}/file/${fileLink}`);
      } else {
        window.location.href = `${FileApi}/file/download?id=${
          file.response ? file.response.data.id : file.id
        }`;
      }
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //追加附件上传
    handleSuccessZJ(res, file, fileList) {
      this.fileList1 = fileList;
    },
    handleRemoveZJ(file, fileList) {
      this.fileList1 = fileList;
    },
    handlePreviewZJ(file) {
      // console.log(file);
      let fileLink = file.response ? file.response.data.uri : file.link;
      if (
        ["png", "jpg", "jpeg", "bmp", "pdf"].includes(
          fileLink.split(".")[fileLink.split(".").length - 1]
        )
      ) {
        // console.log(`${window.location.origin}/file/${fileLink}`);
        window.open(`${window.location.origin}/file/${fileLink}`);
      } else {
        window.location.href = `${FileApi}/file/download?id=${
          file.response ? file.response.data.id : file.id
        }`;
      }
    },
    beforeRemoveZJ(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //预览
    YlPic(link) {
      // window.open(`http://101.36.160.140:8097/file/${link}`)
      window.open(`${window.location.origin}/file/${link}`);
      // window.open(`${FileApi}/${link}`)
      // <a target='_black'  href='http://mczaiyun.top/ht/4.pdf'>预览PDF文件</a>
      // window.open(`https://view.officeapps.live.com/op/view.aspx?src=https://physics.nankai.edu.cn/_upload/article/6b/7c/8fe84466415a8e5d48a29c5e08a6/1ea96f13-3367-4ea7-a77f-85b0ec15e121.doc`);
    },
    //下载
    XzPic(id) {
      window.location.href = `${FileApi}/file/download?id=${id}`;
    },
    dateFormat(date) {
      // let date = new Date();
      let year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return year + "-" + month + "-" + day;
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.ywborderS {
  // border: 1px solid #000000;
  padding: 15px;
}
.table-b {
  width: 100%;
  border-collapse: collapse;
  //   height: 100px;
  text-align: center;
  // background-color: #000;
  // border-right: 1px solid #000;
  // border-bottom: 1px solid #000;
  border: 1px solid #000;
  td {
    // width: 320px;
    // height: 50px;
    padding: 10px 40px;
    border: 1px solid #000;
    // border-left: 1px solid #000;
    // border-top: 1px solid #000;
  }
  .inputwidth {
    width: 100%;
  }
}
.table-b td:nth-child(odd) {
  // text-align: justify;
  // text-align-last: justify;
}
.table-el-form /deep/ .el-form-item {
  width: 100%;
}
.table-el-form /deep/ .el-form-item__content {
  width: 100%;
}
.table-el-form /deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: inherit;
}
.box-pro {
  border: 1px solid #cfcfcf;
  padding: 10px;
  margin-bottom: 20px;
}
.el-data-width /deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: auto;
}
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-thumb {
  background: #99a9bf;
  border-radius: 20px;
}
</style>
<style>
#offlineFiling {
  position: relative;
}

#offlineFiling > div {
  top: -23px !important;
  align-items: center;
  /* left: -25px !important; */
}
</style>
