<template>
  <div class="plan-form" :class="{ dark: styleType == 2 }">
    <div style="height: 100%">
      <vue-scroll>
        <div class="wrap">
          <div class="left">
            <div class="info">
              <div class="box-title-danger">
                <span>基本信息</span>
                <div class="item-status" v-if="isSuperDanger">
                  <img src="@/assets/images/yu.png" alt="" />
                  <span>超危</span>
                </div>
              </div>
              <!-- <div v-permission="{ key: 'wdgc_end', menuPath: '/project/dangerousBigProject/parameter' }"
                class="close-task">
                <el-button
                  type="primary"
                  size="medium"
                  v-if="detailData.isEnd == 0"
                  @click="endDanger"
                  >结束危大工程</el-button
                >
                <el-button
                  v-else
                  type="primary"
                  size="medium"
                  disabled
                  >危大工程已结束</el-button
                >
                <span v-else>危大工程已结束</span>
              </div> -->
              <slot name="basicinfo"></slot>
            </div>
            <div class="control-point">
              <div class="box-title" v-if="$slots.gasanalysis">
                {{tableName ? tableName : '气体分析'}} 
              </div>
              <slot name="gasanalysis"></slot>
              <!-- <div class="gasanalysis-table">
                <el-row>
                  <el-col :span="3">气体取样分析时间</el-col>
                  <el-col :span="3">12-03 12:00</el-col>
                  <el-col :span="3">12-03 12:00</el-col>
                  <el-col :span="3">12-03 12:00</el-col>
                </el-row>
                <el-row>
                  <el-col :span="3">代表性气体</el-col>
                  <el-col :span="3">一氧化氢</el-col>
                  <el-col :span="3">一氧化氢</el-col>
                  <el-col :span="3">一氧化氢</el-col>
                </el-row>
                <el-row>
                  <el-col :span="3">分析结果/%</el-col>
                  <el-col :span="3">50%</el-col>
                  <el-col :span="3">50%</el-col>
                  <el-col :span="3">50%</el-col>
                </el-row>
              </div> -->
            </div>
            <!-- v-if="COMPANY != 'longguang'" -->
            <div  class="others-info">
              <div class="top">
                <div class="info-item">
                  <div class="box-title">
                    施工进度
                  </div>
                  <div class="plan-detail flex">
                    <div class="plan-content">
                      当前进度：{{
                        progressData.length > 0
                          ? progressData[0].progressDescribe
                          : "- -"
                      }}
                      <!-- <div v-if="progressData.length>0 && progressData[0].imageUrl"
                                        style="margin-left: 48px;">
                                        <el-image
                                            v-for="(item,index) in progressData[0].imageUrl.split(',')"
                                            :key="index"
                                            style="width: 80px; height: 80px;margin-left: 20px;margin-top: 10px"
                                            :src="fileUrl + item"
                                            :preview-src-list="[fileUrl + item]">
                                        </el-image>
                                    </div> -->
                    </div>
                    <el-button size="medium" class="print-btn" @click="dialogVisible = true">历史进度记录</el-button>
                  </div>
                  <div class="plan-detail flex">
                    <span>现场照片：</span>
                    <div v-if="progressData.length > 0 && progressData[0].imageUrl">
                      <el-image v-for="(item, index) in progressData[0].imageUrl.split(
                        ','
                      )" :key="index" style="width: 80px; height: 80px;" :src="fileUrl + item"
                        :preview-src-list="[fileUrl + item]">
                      </el-image>
                    </div>
                  </div>
                </div>
                <div class="line"></div>
                <div class="info-item">
                  <div class="box-title">
                    安全检查
                  </div>
                  <div class="safe-detail flex">
                    <div class="safe-content">
                      问题隐患：当前存在{{
                        workDetail.hiddenDangerNum
                      }}个未销隐患
                    </div>
                    <el-button size="medium" class="print-btn" @click="dialogVisible4 = true">历史隐患记录</el-button>
                  </div>
                  <div class="safe-detail flex">
                    <div class="safe-content">
                      排查记录：{{ inspectRecordData.length }}
                    </div>
                    <el-button size="medium" class="print-btn" @click="dialogVisible5 = true">历史排查记录</el-button>
                  </div>
                </div>
              </div>
              <div class="bottom">
                <div class="info-item">
                  <div class="box-title">
                    旁站记录
                  </div>
                  <div class="plan-detail flex">
                    <div class="plan-content">
                      <div>
                        施工部位：{{
                          sideStationData.length > 0
                            ? sideStationData[0].sideStationAddr
                            : "- -"
                        }}
                      </div>
                      <div>
                        旁站记录: {{
                          sideStationData.length > 0
                            ? sideStationData[0].buildSituation
                            : "- -"
                        }}
                      </div>

                      <div v-if="
                        sideStationData.length > 0 &&
                        sideStationData[0].imageUrl
                      " style="margin-left: 48px;">
                        <el-image v-for="(item,
                          index) in sideStationData[0].imageUrl.split(',')" :key="index"
                          style="width: 80px; height: 80px;margin-left: 20px;margin-top: 10px" :src="fileUrl + item"
                          :preview-src-list="[fileUrl + item]">
                        </el-image>
                      </div>
                    </div>
                    <el-button size="medium" class="print-btn" @click="dialogVisible2 = true">历史旁站记录</el-button>
                  </div>
                </div>
                <div class="line"></div>
                <div class="info-item">
                  <div class="box-title">
                    <!-- 一般验收 -->
                    最终验收
                  </div>
                  <div class="plan-detail flex">
                    <div class="plan-content2">
                      验收结果：{{
                        checkData.length > 0
                          ? checkData[0].acceptanceResult == undefined || checkData[0].acceptanceResult == null ||
                            checkData[0].acceptanceResult == ''
                            ? "待确认"
                            : checkData[0].acceptanceResult == 1 ? '合格' : checkData[0].acceptanceResult == 2 ? '不合格' : "- -"
                          : ''
                      }}
                    </div>
                    <div class="plan-content2">
                      验收类型：{{
                        checkData.length > 0
                          ? checkData[0].acceptanceType == 1
                            ? "施工条件验收"
                            : "危大工程验收"
                          : "- -"
                      }}
                    </div>
                    <el-button size="medium" class="print-btn" @click="dialogVisible3 = true">历史验收记录</el-button>
                  </div>
                  <div class="plan-detail">
                    <div class="plan-content">
                      验收描述：{{
                        checkData.length > 0
                          ? checkData[0].acceptanceDesc
                          : "- -"
                      }}
                      <div v-if="
                        checkData.length > 0 &&
                        checkData[0].photo
                      " style="margin-left: 48px;">
                        <!-- v-for="(item, index) in checkData" :key="index" -->
                        <el-image style="width: 80px; height: 80px;margin-left: 20px;margin-top: 10px"
                          :src="fileUrl + checkData[0].photo" :preview-src-list="[fileUrl + checkData[0].photo]">
                        </el-image>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="box-title">
              安全措施
            </div>
            <div class="safety-table">
              <el-row>
                <el-col :span="22">&nbsp;</el-col>
                <el-col :span="2">是否涉及</el-col>
                <!-- <el-col :span="2">确认人</el-col> -->
              </el-row>
              <el-row v-for="(item, index) in workDetail.safeMeasure && JSON.parse(workDetail.safeMeasure) instanceof Array && JSON.parse(workDetail.safeMeasure)" :key="index">
                <el-col :span="22">{{index + 1}}.{{item.name}}</el-col>
                <el-col :span="2" :class="{'green':item.flag == '是','red':item.flag == '否'}">{{item.flag}}</el-col>
                <!-- <el-col :span="2">丁曼容</el-col> -->
              </el-row>
              <!-- <el-row>
                <el-col :span="22">2.盛装过有毒、可燃物料的受限空间,设备已经过置换、吹扫或蒸煮</el-col>
                <el-col :span="2">是</el-col>
              </el-row>
              <el-row>
                <el-col :span="22">3.设备通风孔已打开进行自然通风,温度适宜人员作业;必要时采用强制通风或佩戴隔绝式呼吸防护装备,不应采用直接通入氧气或富氧空气的方法补充氧</el-col>
                <el-col :span="2" class="red">否</el-col>
              </el-row> -->
            </div>
            <div class="info border-top_1">
              <div class="box-title-danger">
                <span>其它安全措施</span>
              </div>
              <div class="info-content">
                <el-form class="form-box" :model="workDetail">
                  <el-form-item label="其它安全措施内容：" :label-width="formLabelWidth">
                    {{workDetail.otherSafeMeasure&& JSON.parse(workDetail.otherSafeMeasure) instanceof Array && JSON.parse(workDetail.otherSafeMeasure).map(item => item.content).join('，')}}
                  </el-form-item>
                  <!-- <el-form-item label="是否涉及：" :label-width="formLabelWidth">
                    {{workDetail.acceptTheInformantName}}
                  </el-form-item> -->
                  <el-form-item label="编制人：" :label-width="formLabelWidth">
                    {{workDetail.otherSafeMeasure&& JSON.parse(workDetail.otherSafeMeasure) instanceof Array && JSON.parse(workDetail.otherSafeMeasure).map(item => item.person).join('、')}}
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div class="info border-top_1">
              <div class="box-title-danger">
                <span>安全交底人</span>
              </div>
              <div class="info-content">
                <el-form class="form-box" :model="workDetail">
                  <el-form-item label="安全交底人：" :label-width="formLabelWidth">
                    {{workDetail.safetyInformantName}}
                  </el-form-item>
                  <el-form-item label="接受交底人：" :label-width="formLabelWidth">
                    {{workDetail.acceptTheInformantName}}
                  </el-form-item>
                  <el-form-item label="监护人：" v-if="COMPANY != 'longguang'" :label-width="formLabelWidth">
                    {{workDetail.guardianName}}
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="button-box">
            <el-button class="cancle-btn" icon="el-icon-circle-close" size="small" @click="cancle">取消</el-button>
            <el-button type="primary" icon="el-icon-circle-check" size="small" @click="submit">保存</el-button>
        </div> -->
      </vue-scroll>
    </div>
    <el-dialog title="历史进度记录" :visible.sync="dialogVisible" width="880px" :modal-append-to-body="false">
      <el-table class="tables" :data="progressData" height="500" style="width: 100%;">
        <el-table-column prop="progressDescribe" label="进度描述">
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <el-image v-if="scope.row.imageUrl" style="width: 50px; height: 50px;"
              :src="fileUrl + scope.row.imageUrl.split(',')[0]" :preview-src-list="scope.row.fileList">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="createUserName" label="记录人">
        </el-table-column>
        <el-table-column prop="createTime" label="记录时间"> </el-table-column>
        <el-table-column label="操作" width="80" v-if="$store.state.userInfo.accountType != 6 || ($store.state.userInfo.userId == workDetail.assignmentPersonInCharge)">
          <template slot-scope="scope">
            <div class="delete" @click="deleteDangerousEngineeringProgressRecord(scope.row.id)">
              <i class="el-icon-delete delete-btn"></i>
              <span>删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="历史旁站记录" :visible.sync="dialogVisible2" width="880px" :modal-append-to-body="false">
      <el-table class="tables" :data="sideStationData" height="500" style="width: 100%;">
        <el-table-column prop="sideStationAddr" label="施工部位">
        </el-table-column>
        <el-table-column prop="buildSituation" label="旁站记录">
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <el-image v-if="scope.row.imageUrl" style="width: 50px; height: 50px;"
              :src="fileUrl + scope.row.imageUrl.split(',')[0]" :preview-src-list="scope.row.fileList">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="createUserName" label="记录人">
        </el-table-column>
        <el-table-column prop="createTime" label="记录时间"> </el-table-column>
        <el-table-column label="操作" width="80" v-if="$store.state.userInfo.accountType != 6 || ($store.state.userInfo.userId == workDetail.assignmentPersonInCharge)">
          <template slot-scope="scope">
            <div class="delete" @click="deleteDangerousEngineeringSideStation(scope.row.id)">
              <i class="el-icon-delete delete-btn"></i>
              <span>删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="历史验收记录" :visible.sync="dialogVisible3" width="880px" :modal-append-to-body="false">
      <el-table class="tables" :data="checkData" height="500" style="width: 100%;">
        <el-table-column prop="acceptanceDesc" label="验收描述">
        </el-table-column>
        <el-table-column label="验收类型">
          <template slot-scope="scope">
            {{
              scope.row.acceptanceType == 1 ? "施工条件验收" : "危大工程验收"
            }}
          </template>
        </el-table-column>
        <el-table-column label="验收结果">
          <template slot-scope="scope">
            <p v-if="scope.row.acceptanceResult === undefined
              || scope.row.acceptanceResult === null || scope.row.acceptanceResult === ''">待确认</p>
            <p v-if="scope.row.acceptanceResult === 1">合格</p>
            <p v-if="scope.row.acceptanceResult === 2">不合格</p>
            <!-- {{ scope.row.acceptanceResult == 1 ? "合格" : "不合格" }} -->
          </template>
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <el-image v-if="scope.row.photo" style="width: 50px; height: 50px;"
              :src="fileUrl + scope.row.photo.split(',')[0]" :preview-src-list="scope.row.fileList">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="acceptanceUserName" label="记录人">
        </el-table-column>
        <el-table-column prop="createTime" label="记录时间"> </el-table-column>
        <el-table-column label="操作" width="80" v-if="$store.state.userInfo.accountType != 6 || ($store.state.userInfo.userId == workDetail.assignmentPersonInCharge)">
          <template slot-scope="scope">
            <div class="delete" @click="deleteDangerousEngineeringAcceptanceCheck(scope.row.id)">
              <i class="el-icon-delete delete-btn" ></i>
              <span>删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="历史隐患记录" :visible.sync="dialogVisible4" width="1280px" :modal-append-to-body="false">
      <el-table class="tables" :data="hiddenDangerData" height="500" style="width: 100%;">

        <el-table-column align="center" width="200" prop="changeLimitTime" :label="$t('message.quality.inspectionResult') +
          '/' +
          $t('message.quality.rectificationLimit')
          ">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.status != 6">
              {{
                scope.row.status == 1
                  ? $t("message.quality.noRectification")
                  : scope.row.status == 2
                    ? $t("message.quality.afterRectification")
                    : scope.row.status == 3
                      ? $t("message.quality.toReview")
                      : scope.row.status == 4
                        ? $t("message.quality.toCheck")
                        : scope.row.status == 5
                          ? $t("message.quality.qualified")
                          : scope.row.status == 6
                            ? $t("message.quality.disqualification")
                            : scope.row.status == ""
                              ? $t("message.quality.qualified")
                              : ""
              }}
            </el-button>
            <span style="color: #94979E;" v-else>已撤回</span>
            <span class="tableStatus" v-show="scope.row.overTime == true && scope.row.status != 6">超期</span>
            <div>{{ scope.row.changeLimitTime }}</div>
          </template>
        </el-table-column>


        <el-table-column align="center" prop="inspectManName" :label="$t('message.quality.rummager') +
          '/' +
          $t('message.quality.inspectionTime')
          " width="180">
          <template slot-scope="scope">
            <div>{{ scope.row.inspectManName }}</div>
            <!-- <div>{{ scope.row.createEnterpriseName }}</div> -->
            <div>{{ scope.row.inspectTime }}</div>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="dangerItemContent" label="安全问题信息">
        </el-table-column>
        <el-table-column align="center" prop="changeName" :label="$t('message.quality.rectificationPeople')">
        </el-table-column>
        <el-table-column align="center" prop="reviewName" :label="$t('message.quality.reviewOfThePeople')">
        </el-table-column>
        <el-table-column align="center" prop="verifyManName" :label="$t('message.quality.checkOne')">
        </el-table-column>

        <!-- 隐患信息 -->
        <!-- <el-table-column label="隐患信息" width="300">
          <template slot-scope="scope">
            <p v-if="scope.row.status != 1">
              <el-tag
                style="margin-right: 10px"
                :type="scope.row.urgentLevel == '1' ? 'primary' : scope.row.urgentLevel == '2' ? 'waring' : scope.row.urgentLevel == '3' ? 'danger' : ''"
                effect="dark"
                size="mini"
                >{{ scope.row.urgentLevel == '1' ? "一般" : scope.row.urgentLevel == '2' ? "严重" : scope.row.urgentLevel == '3' ? "紧要" : "" }}</el-tag
              >{{ scope.row.dangerItemContent }}
            </p>
            <p v-else>该区域排查无隐患</p>
            <p class="table_bottom_txt">
              <span style="margin-right: 10px"
                ><i
                  class="el-icon-location-information"
                  style="margin-right: 6px"
                ></i
                >{{ scope.row.regionName }}</span
              >
              <el-tag
                class="hiddenDangerLevel"
                type="info"
                effect="dark"
                size="mini"
                v-if="scope.row.status != 1"
                >{{ scope.row.level }}</el-tag
              >
            </p>
          </template>
        </el-table-column> -->
        <!-- 隐患信息 -->

        <!-- <el-table-column
                    label="图片"

                    >
                    <template slot-scope="scope">
                        <el-image
                            v-if="scope.row.imageUrl"
                            style="width: 50px; height: 50px;"
                            :src="fileUrl + scope.row.imageUrl.split(',')[0]"
                            :preview-src-list="scope.row.fileList">
                        </el-image>
                    </template>
                </el-table-column> -->

        <el-table-column label="隐患详情">
          <template slot-scope="scope">
            <a style="cursor: pointer;color: #409EFF" @click="previewDetail(scope.row)">查看详情</a>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80" v-if="$store.state.userInfo.accountType != 6 || ($store.state.userInfo.userId == workDetail.assignmentPersonInCharge)">
          <template slot-scope="scope">
            <div class="delete" @click="deletehiddenDangerInspectRecord(scope.row.id, 1)">
              <i class="el-icon-delete delete-btn"></i>
              <span>删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="历史排查记录" :visible.sync="dialogVisible5" width="1280px" :modal-append-to-body="false">
      <el-table class="tables" :data="inspectRecordData" height="500" style="width: 100%;">
        <el-table-column label="检查部位">
          <template slot-scope="scope">
            <!-- <p v-if="scope.row.dangerDesc">{{ scope.row.dangerDesc }}</p>
            <p v-else>该区域排查无隐患</p>
            <p class="table_bottom_txt">
              <el-tag
                class="hiddenDangerLevel"
                type="info"
                effect="dark"
                size="mini"
              >
                <i class="el-icon-location-information"></i>
                {{ scope.row.dutyRegion }}
              </el-tag>
            </p> -->
            <p>{{ scope.row.regionName }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="dangerItemContent" label="排查分类"> </el-table-column>
        <el-table-column prop="addedDescription" label="事件描述"> </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <el-image v-if="scope.row.imageUrl" style="width: 50px; height: 50px;" :src="fileUrl + scope.row.imageUrl"
              :preview-src-list="scope.row.fileList">
              <!-- :src="fileUrl + scope.row.imageUrl.split(',')[0]" -->
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="inspectManName" label="检查人">
        </el-table-column>
        <el-table-column prop="createTime" width="180" label="检查时间"> </el-table-column>
        <el-table-column prop="enterpriseName" label="分包单位"> </el-table-column>
        <el-table-column label="操作" width="80" v-if="$store.state.userInfo.accountType != 6 || ($store.state.userInfo.userId == workDetail.assignmentPersonInCharge)">
          <template slot-scope="scope">
            <div class="delete" @click="deletehiddenDangerInspectRecord(scope.row.id, 2)">
              <i class="el-icon-delete delete-btn"></i>
              <span>删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog :modal-append-to-body="false" title="查看详情" :visible.sync="dialogVisible6" width="870px"
      :close-on-click-modal="false">
      <div style="height: 600px">
        <vue-scroll>
          <div style="width: 800px">
            <div class="headerLeft">隐患记录</div>
            <div class="back-btn" v-if="
              historyDetail.status == 2 &&
              rectifyRecordList.length == 0 &&
              historyDetail.inspectManId == $store.state.userInfo.userId
            " @click="backQuestion(historyDetail)">
              <!-- <i class="el-icon-refresh-right"></i>
              <span>撤回</span> -->
            </div>
            <span v-else-if="historyDetail.overTime == true" style="
                color: red;
                font-weight: 500;
                position: absolute;
                left: 89%;
                top: 1%;
              ">超期整改</span>
            <div class="detailBox">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="grid-content">
                    <span class="label">检查类型：</span>
                    <span class="value" style="font-weight: 500; color: #5181f6; cursor: pointer">{{
                      historyDetail.recordType == 1 ? "安全问题" : "排查记录"
                    }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content">
                    <span class="label">分包单位：</span>
                    <span class="value" :title="historyDetail.enterpriseName">{{ historyDetail.enterpriseName }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="grid-content">
                    <span class="label">整改结果：</span>

                    <span class="value" :style="{
                      'font-weight': 500,
                      cursor: 'pointer',
                      color:
                        historyDetail.status == 2
                          ? '#5181f6'
                          : historyDetail.status == 3
                            ? '#ff8c00'
                            : historyDetail.status == 4
                              ? '#a020f0'
                              : historyDetail.status == 5
                                ? '#21c28e'
                                : historyDetail.status == 6
                                  ? '#262D47'
                                  : '',
                    }">
                      <span class="radiusD" :style="{
                        background:
                          historyDetail.status == 2
                            ? '#5181f6'
                            : historyDetail.status == 3
                              ? '#ff8c00'
                              : historyDetail.status == 4
                                ? '#a020f0'
                                : historyDetail.status == 5
                                  ? '#21c28e'
                                  : historyDetail.status == 6
                                    ? '#262D47'
                                    : '',
                      }"></span>
                      <span>
                        {{
                          historyDetail.status == 2
                            ? "待整改"
                            : historyDetail.status == 3
                              ? "待复查"
                              : historyDetail.status == 4
                                ? "待核验"
                                : historyDetail.status == 5
                                  ? "合格"
                                  : historyDetail.status == 6
                                    ? "已撤回"
                                    : ""
                        }}</span>
                    </span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content">
                    <span class="label">检查时间：</span>
                    <span class="value">{{ historyDetail.inspectTime }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="grid-content">
                    <span class="label" style="margin-left: -14px">检查人：</span>
                    <span class="value" style="margin-left: 25px">{{
                      historyDetail.inspectManName
                    }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content">
                    <span class="label">补充说明：</span>
                    <span class="value">
                      {{ historyDetail.dangerDesc }}
                    </span>
                  </div>
                </el-col>
              </el-row>
              <div>
                <el-row :gutter="20" v-show="historyDetail.recordType == 1">
                  <el-col :span="12">
                    <div class="grid-content">
                      <span class="label" style="margin-left: -14px">核验人：</span>
                      <span class="value" style="margin-left: 25px">{{
                        historyDetail.verifyManName
                      }}</span>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content">
                      <span class="label">问题等级：</span>
                      <span class="value">{{
                        historyDetail.level == 1
                          ? "一级"
                          : historyDetail.level == 2
                            ? "二级"
                            : historyDetail.level == 3
                              ? "三级"
                              : "四级"
                      }}</span>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <div class="grid-content">
                      <span class="label">检查部位：</span>
                      <span class="value" :title="historyDetail.regionName">{{
                        historyDetail.regionName
                      }}</span>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content">
                      <span class="label">事件描述：</span>
                      <span class="value">
                        {{ historyDetail.addedDescription }}
                      </span>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12" v-show="historyDetail.recordType == 1">
                    <div class="grid-content">
                      <span class="label">现场整改：</span>
                      <span class="value" :style="{
                        color:
                          historyDetail.status == 1 || historyDetail.status == 5
                            ? '#21c28e'
                            : '#ff8c00',
                      }">{{
                        historyDetail.status == 1 || historyDetail.status == 5
                          ? "已完成"
                          : "未完成"
                      }}</span>
                    </div>
                  </el-col>
                  <el-col :span="12" v-show="historyDetail.recordType == 1">
                    <div class="grid-content">
                      <span class="label">紧急程度：</span>
                      <span class="value">{{
                        historyDetail.urgentLevel == 1
                          ? "一般"
                          : historyDetail.urgentLevel == 2
                            ? "严重"
                            : historyDetail.urgentLevel == 3
                              ? "紧要"
                              : ""
                      }}</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <el-row :gutter="20">
                <el-col :span="12" v-show="historyDetail.recordType == 1">
                  <div class="grid-content">
                    <span class="label">问题分类：</span>
                    <span class="value" :title="historyDetail.dangerItemContent">
                      {{ historyDetail.dangerItemContent }}
                    </span>
                  </div>
                </el-col>
                <el-col :span="12" v-show="historyDetail.recordType == 1">
                  <div class="grid-content">
                    <span class="label" style="margin-left: -14px">责任人：</span>
                    <span class="value" style="margin-left: 25px">{{
                      historyDetail.changeName
                    }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12" v-show="historyDetail.recordType == 1">
                  <div class="grid-content">
                    <span class="label">整改要求：</span>
                    <span class="value" :title="historyDetail.remark">
                      {{ historyDetail.remark }}
                    </span>
                  </div>
                </el-col>
                <el-col :span="12" v-show="historyDetail.recordType == 1">
                  <div class="grid-content">
                    <span class="label">整改时限：</span>
                    <span class="value">{{ historyDetail.changeLimitTime }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12" v-show="historyDetail.recordType == 1">
                  <div class="grid-content">
                    <span class="label">问题描述：</span>
                    <span class="value">
                      {{ historyDetail.problemDescription }}
                    </span>
                  </div>
                </el-col>
                <el-col :span="12" v-show="historyDetail.recordType == 1">
                  <div class="grid-content">
                    <span class="label" style="margin-left: -14px">复查人：</span>
                    <span class="value" style="margin-left: 25px">{{
                      historyDetail.reviewName
                    }}</span>
                  </div>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="grid-content">
                    <span class="label" style="line-height: 25px">现场视频：</span>
                    <span style="color: #5181f6; cursor: pointer; margin-top: 3px" class="value"
                      @click.stop="playerVideo(historyDetail.fileUrl)">
                      {{ videoName }}
                    </span>
                  </div>
                </el-col>

                <el-col :span="12">
                  <div class="grid-content">
                    <span class="label">现场照片：</span>
                    <span class="value" style="cursor: pointer;">
                      <!-- <el-image
                        v-for="(item, index) in parseImage2(
                          historyDetail.imageUrl
                        )"
                        :key="index"
                        style="width: 100px; height: 100px; margin-right: 10px"
                        :src="item"
                        :preview-src-list="parseImage2(item.fileUrl)"
                        @click="openImg(item)"
                      > -->
                      <el-image style="width: 100px; height: 100px; margin-right: 10px"
                        :src="fileUrl + historyDetail.imageUrl" :preview-src-list="parseImage2(historyDetail.fileUrl)"
                        @click="openImg(fileUrl + historyDetail.imageUrl)">
                      </el-image>
                    </span>
                  </div>
                </el-col>
              </el-row>
              <!-- <el-row :gutter="20">
                <el-col :span="12" v-show="historyDetail.recordType == 2">
                  <div class="grid-content">
                    <span class="label">排查分类：</span>
                    <span class="value" :title="historyDetail.dangerItemContent">{{
                      historyDetail.dangerItemContent
                    }}</span>
                  </div>
                </el-col>
              </el-row> -->

              <div class="headerLeft" v-if="rectifyRecordList.length > 0">
                整改&复核记录
              </div>
              <el-timeline class="detailBox" :reverse="true">
                <el-timeline-item :timestamp="item.rectifyTime" placement="top"
                  v-for="(item, index) in rectifyRecordList" :key="index">
                  <el-card>
                    <p class="grid-content">
                      <span class="label">{{
                        item.type == 1
                          ? "责任人："
                          : item.type == 2
                            ? "复查人："
                            : item.type == 3
                              ? "核验人："
                              : "无"
                      }}</span><span class="value">{{ item.createUserName }}</span>
                    </p>
                    <p class="grid-content" v-if="item.type == 1">
                      <span class="label">整改状态：</span><span class="value">{{
                        item.status == 2 ? "已整改" : "未整改"
                      }}</span>
                    </p>
                    <p class="grid-content" v-else-if="item.type == 2">
                      <span class="label">复查状态：</span><span class="value">{{
                        item.status == 2 ? "合格" : "不合格"
                      }}</span>
                    </p>
                    <p class="grid-content" v-else>
                      <span class="label">核验状态：</span><span class="value">{{
                        item.status == 2 ? "合格" : "不合格"
                      }}</span>
                    </p>
                    <p class="grid-content" v-if="item.status == 1">
                      <span class="label">驳回说明：</span><span class="value">{{ item.additionalRemarks }}</span>
                    </p>
                    <p class="grid-content" v-if="item.status == 2">
                      <span class="label">补充说明：</span><span class="value">{{ item.additionalRemarks }}</span>
                    </p>
                    <div class="grid-content">
                      <span class="label">{{
                        item.type == 1
                          ? "整改照片："
                          : item.type == 2
                            ? "复查照片："
                            : "核验照片："
                      }}</span>
                      <span class="value" style="cursor: pointer;">
                        <el-image v-for="(item2, index) in item.fileUrl" :key="index" style="
                            width: 100px;
                            height: 100px;
                            margin-right: 10px;
                          " :src="item2" :preview-src-list="item2.fileUrl" @click="openImg(item2)">
                        </el-image>
                      </span>
                    </div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </vue-scroll>
      </div>
    </el-dialog>
    <!-- 视频播放 -->
    <el-dialog class="video" :modal-append-to-body="false" :visible.sync="isShow" @close="closeBtn">
      <video v-if="isShow || player" width="100%" height="550" controls autoplay style="margin-left: 10px">
        <source :src="player" type="video/mp4" />
        <source :src="player" type="video/mp4" />
        <source :src="player" type="video/mp4" />
        您的浏览器不支持 video 标签。
      </video>
    </el-dialog>
  </div>
</template>

<script>
// import QRCode from "qrcodejs2";
import { getselectHiddenDangerRectifyRecordListApi } from "@/assets/js/api/safeManage.js";
import {
  selectDangerousEngineeringRecordApi,
  selectControlContentListApi,
  queryDangerousEngineeringRecordByIdApi,
  queryDangerousEngineeringOverApi,
  editDangerousEngineeringRecordApi,
  selectClassControlContentListApi,
  selectDangerousEngineeringProgressRecordApi,
  selectDangerousEngineeringSideStationApi,
  selectDangerousEngineeringAcceptanceCheckApi,
  selectFinalDangerousEngineeringAcceptanceCheckApi,
  selectHiddenDangerInspectRecordApi,
  selectFinalHiddenDangerInspectRecordApi,
  deleteDangerousEngineeringProgressRecordApi,
  deleteDangerousEngineeringSideStationApi,
  deleteDangerousEngineeringAcceptanceCheckApi,
  deletehiddenDangerInspectRecordApi,
  deleteFinlahiddenDangerInspectRecordApi,

  deleteFinalDangerousEngineeringAcceptanceCheckApi,
} from "@/assets/js/api/dangerousBigProject";
import {
  selectSafeRectifyRecordListApi,
} from "@/assets/js/api/quality.js";
import { getCooperatorListApi } from "@/assets/js/api/cooperationUnit";
import {
  getEnterpriseInfoList
} from "@/assets/js/api/laborPerson";

import {
  getFireSafetyQueryByIdApi
} from "@/assets/js/api/specialWork";

import moment from "moment";
export default {
  props: ["id", "isSuperDanger", "COMPANY_Type","workDetail","workType","tableName"],
  data() {
    return {
      responsibilityList: [],
      ops: {
        scrollPanel: {
          scrollingX: false,
        },
      },
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dialogVisible5: false,
      dialogVisible6: false,
      styleType: 1,
      buildDate: "",
      planDate: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      options2: [],
      checkList: [],
      formLabelWidth: "180px",
      isDisabled: true,
      value: false,
      headquartersSn: "",
      typeOptions: [],
      contentList: [],
      describeOptions: [],
      enterpriseTypeId: 1,
      pageSize: 1000,
      pageNo: 1,
      projectSn: "",
      options: [],
      props: {
        multiple: true,
      },
      props2: {
        multiple: true,
        value: "id",
        label: "describeName",
      },
      cooperatorList: [],
      fileList: [],
      fileList2: [],
      fileList3: [],
      fileUrl: "",
      detailData: {},
      progressData: [],
      sideStationData: [],
      checkData: [],
      hiddenDangerData: [],
      inspectRecordData: [],
      detailData: {},
      rectifyRecordList: [],
      statusArr: ["无需整改", "待整改", "待复查", "合格", "不合格"],
      COMPANY: "",
      historyDetail: {},
      isShow: false,
      player: '',
      videoName: '',
      replyData: {
        rectifyTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
        fileUrl: "",
        additionalRemarks: "",
        qualityId: "",
      },
      fileListRectification: [],
      imgList: [],
    };
  },
  created() {
    this.COMPANY = this.COMPANY_Type;
    this.headquartersSn = this.$store.state.userInfo.headquartersSn;
    this.projectSn = this.$store.state.projectSn;
    this.fileUrl = this.$store.state.FILEURL;
    // this.queryDetail();
    // this.selectClassControlContentList();
    // this.getCooperatorList();
    this.selectDangerousEngineeringAcceptanceCheck();
    this.selectDangerousEngineeringSideStation();
    this.selectDangerousEngineeringProgressRecord();
    this.selectHiddenDangerInspectRecord(1);
    this.selectHiddenDangerInspectRecord(2);
    // this.$nextTick(() => {
    //   this.bindQRCode();
    // });
    this.getProjectList();
  },
  methods: {
    //整改记录
    selectRectifyRecordList(id) {
      selectSafeRectifyRecordListApi({
        qualityId: id,
      }).then((res) => {
        this.rectifyRecordList = res.result;
        this.rectifyRecordList.forEach((item) => {
          if (item.fileUrl) {
            this.imgList = [];
            if (item.fileUrl.startsWith("[") && item.fileUrl.endsWith("]")) {
              let fileListI = JSON.parse(item.fileUrl);
              fileListI.forEach((file) => {
                let url = file.url;
                if (!url.startsWith("http://")) {
                  url = this.fileUrl + url;
                }
                this.imgList.push(url);
              });
            } else {
              let fileListI = item.fileUrl.split(",");
              fileListI.forEach((url) => {
                if (!url.startsWith("http://")) {
                  url = this.fileUrl + url;
                }
                this.imgList.push(url);
              });
            }
            item.fileUrl = this.imgList;
          } else {
            item.fileUrl = [];
          }
        });
        console.log("整改记录-处理后--", this.rectifyRecordList);
      });
    },
    openImg(src) {
      window.open(src);
    },

    //暂时保留
    parseImage22() {
      let arr = [];
      if (urls) {
        arr = urls.split(",");
      }
      arr.forEach((element, index) => {
        arr[index] = this.$store.state.FILEURL + element;
        let result = arr[index].substring(0, arr[index].indexOf("*"));
        arr[index] = result;
      });
      return arr;
    },
    //关闭视频
    closeBtn() {
      this.isShow = false;
      this.player = "";
    },
    //视频播放
    playerVideo(item) {
      if (item) {
        let index = item.indexOf("*");
        let videoUrl = item.substring(index + 1);
        console.log("点击", videoUrl);
        this.isShow = false;
        this.$nextTick(() => {
          this.player = videoUrl;
          this.isShow = true;
        });
      } else {
        this.$message.error("暂无视频");
      }
    },
    previewDetail(item) {
      this.getRectifyRecordList(item.id);
      // this.detailData = item;
      this.historyDetail = item;
      console.log("historyDetailhistoryDetail", this.historyDetail)
      console.log("historyDetailhistoryDetail", this.historyDetail)
      console.log("historyDetailhistoryDetail", this.historyDetail)
      this.dialogVisible6 = true;

      this.videoName = item.fileUrl.split("*")[0];
      console.log("新版查看详情", item);
      this.selectRectifyRecordList(item.id);
      this.replyData = {
        rectifyTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
        fileUrl: "",
        additionalRemarks: "",
      };
      this.fileListRectification = [];
    },
    parseImage2(urls) {
      let arr = [];
      if (urls) {
        arr = urls.split(",");
      }
      arr.forEach((element, index) => {
        // arr[index] = this.$store.state.FILEURL + element;

        arr[index] = this.$store.state.FILEURL + element;
        let result = arr[index].substring(0, arr[index].indexOf("*"));
        arr[index] = result;
      });
      return arr;
    },

    //获取企业 || 劳务公司 列表
    getProjectList() {
      let data = {
        projectSn: this.projectSn,
        // enterpriseTypeId: this.enterpriseTypeId,
      };
      getEnterpriseInfoList(data).then((res) => {
        this.responsibilityList = res.result;
      });
    },
    // 打印
    printBtn() {
      // setTimeout(() => {
      //     console.log(this.$refs["qrCodeDiv"].innerHTML)
      // },100)
      // qrCode
      setTimeout(() => {
        let printDemo = this.$refs["qrCodeDiv"].innerHTML;
        console.log(printDemo);
        window.document.body.innerHTML = printDemo;
        //没有图片直接打印
        window.print();
        window.location.reload();
      }, 100);
    },
    // 查询是否结束
    endDanger() {
      let data = {
        id: this.id,
      };
      queryDangerousEngineeringOverApi(data).then((res) => {
        console.log(res.result, "----是否结束");
        if (res.code == 200) {
          this.queryDetail();
        }
      });
    },
    // 查询详情
    queryDetail() {
      let data = {
        id: this.id,
        type:this.workType,
      };
      queryDangerousEngineeringRecordByIdApi(data).then((res) => {
        console.log(res.result, "----详情");
        if (res.code == 200 && res.result) {
          this.detailData = res.result;
          this.buildDate = [];
          this.buildDate.push(this.detailData.buildStartTime);
          this.buildDate.push(this.detailData.buildEndTime);
          if (this.detailData.planStartTime && this.detailData.planEndTime) {
            this.planDate = [];
            this.planDate.push(this.detailData.planStartTime);
            this.planDate.push(this.detailData.planEndTime);
          }
        }
      });
    },
    // 层级查询管控要点
    selectClassControlContentList() {
      selectClassControlContentListApi({ engineeringId: this.id }).then(
        (res) => {
          console.log(res.result, "------管控要点");
          if (res.code == 200 && res.result) {
            this.contentList = res.result;
          }
        }
      );
    },
    //生成 二维码
    bindQRCode: function () {
      document.getElementById("qrCode").innerHTML = "";
      let httpUrl = window.location.host.split(":")[0];
      // console.log(window.location)
      let userId = this.$store.state.userInfo.userId;
      let projectSn = this.$store.state.projectSn;
      let data = {
        id: this.id,
        type: "wdgc",
      };
      new QRCode(this.$refs.qrCodeDiv, {
        text: JSON.stringify(data),
        width: 144,
        height: 144,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
      });
    },
    // 查询进度
    selectDangerousEngineeringProgressRecord() {
      console.log(this.$store.state);
      selectDangerousEngineeringProgressRecordApi({
        engineeringId: this.id,
        type:this.workType,
        assignmentPersonInCharge: this.$store.state.userInfo.accountType == 6 ? this.$store.state.userInfo.userId : '',
      }).then((res) => {
        console.log(res.result, "----进度");
        if (res.code == 200 && res.result) {
          res.result.forEach((item) => {
            item.fileList = [];
            if (item.imageUrl && item.imageUrl.split(",").length > 0) {
              item.imageUrl.split(",").forEach((itm) => {
                item.fileList.push(this.fileUrl + itm);
              });
            }
          });
          this.progressData = res.result;
        }
      });
    },
    // 查询一般验收记录
    selectDangerousEngineeringAcceptanceCheck() {
      // selectDangerousEngineeringAcceptanceCheckApi({
      selectFinalDangerousEngineeringAcceptanceCheckApi({
        engineeringId: this.id,
        type:this.workType,
        assignmentPersonInCharge: this.$store.state.userInfo.accountType == 6 ? this.$store.state.userInfo.userId : '',
      }).then((res) => {
        console.log(res.result, "-----最终验收");
        console.log(res.result, "-----最终验收");
        console.log(res.result, "-----最终验收");
        console.log(res.result, "-----最终验收");
        if (res.code == 200 && res.result) {
          res.result.forEach((item) => {
            item.fileList = [];
            if (item.imageUrl && item.imageUrl.split(",").length > 0) {
              item.imageUrl.split(",").forEach((itm) => {
                item.fileList.push(this.fileUrl + itm);
              });
            }
          });
          this.checkData = res.result;
          console.log('最终验收列表checkData', this.checkData)
          console.log('最终验收列表checkData', this.checkData)
          console.log('最终验收列表checkData', this.checkData)
        }
      });
    },
    //查询旁站记录
    selectDangerousEngineeringSideStation() {
      selectDangerousEngineeringSideStationApi({
        engineeringId: this.id,
        type:this.workType,
        assignmentPersonInCharge: this.$store.state.userInfo.accountType == 6 ? this.$store.state.userInfo.userId : '',
       }).then(
        (res) => {
          console.log(res.result, "-----旁站记录");
          if (res.code == 200 && res.result) {
            res.result.forEach((item) => {
              item.fileList = [];
              if (item.imageUrl && item.imageUrl.split(",").length > 0) {
                item.imageUrl.split(",").forEach((itm) => {
                  item.fileList.push(this.fileUrl + itm);
                });
              }
            });
            this.sideStationData = res.result;
          }
        }
      );
    },
    // 查询隐患记录
    async selectHiddenDangerInspectRecord(type) {
      //  type  1.隐患记录 2.排查记录
      let data = {
        recordType: type,
        projectSn: this.projectSn,
        pageNo: 1,
        pageSize: 1000,
        engineeringId: this.id,
        type:this.workType,
        assignmentPersonInCharge: this.$store.state.userInfo.accountType == 6 ? this.$store.state.userInfo.userId : '',
      };
      // selectHiddenDangerInspectRecordApi(data).then((res) => {
      await selectFinalHiddenDangerInspectRecordApi(data).then((res) => {
        console.log(res, type);
        if (res.code == 200 && res.result) {
          res.result.page.records.forEach((item) => {
            // item.fileList = [];
            // if (item.imageUrl && item.imageUrl.split(",").length > 0) {
            //   item.imageUrl.split(",").forEach((itm) => {
            //     item.fileList.push(this.fileUrl + itm);
            //   });
            // }
            if (item.imageUrl) {
              let index = item.imageUrl.indexOf("*")
              if (index !== -1) {
                item.imageUrl = item.imageUrl.substring(0, index);
              }
            }
          });
          if (type == 1) {
            this.hiddenDangerData = res.result.page.records;
            console.log("================hiddenDangerData===================")
            console.log(this.hiddenDangerData)
            console.log("================hiddenDangerData===================")
          } else if (type == 2) {
            this.inspectRecordData = res.result.page.records;
          }
        }
      });
    },
    //获取整改和复查记录
    getRectifyRecordList(inspectId) {
      getselectHiddenDangerRectifyRecordListApi({ inspectId: inspectId }).then(
        (res) => {
          // this.rectifyRecordList = res.result;
        }
      );
    },

    // 删除进度记录
    deleteDangerousEngineeringProgressRecord(val) {
      if (this.workDetail.finalAcceptanceStatus === 2) {
        this.$message.warning('该项特种作业已闭合，请勿操作')
        return
      }
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteDangerousEngineeringProgressRecordApi({ id: val, type:this.workType, }).then(
            (res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.selectDangerousEngineeringProgressRecord();
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 删除旁站记录
    deleteDangerousEngineeringSideStation(val) {
      if (this.workDetail.finalAcceptanceStatus === 2) {
        this.$message.warning('该项特种作业已闭合，请勿操作')
        return
      }
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteDangerousEngineeringSideStationApi({ id: val, type:this.workType, }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.selectDangerousEngineeringSideStation();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 删除验收记录
    deleteDangerousEngineeringAcceptanceCheck(val) {
      if (this.workDetail.finalAcceptanceStatus === 2) {
        this.$message.warning('该项特种作业已闭合，请勿操作')
        return
      }
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // deleteDangerousEngineeringAcceptanceCheckApi({ id: val }).then(
          deleteFinalDangerousEngineeringAcceptanceCheckApi({ id: val, type:this.workType, }).then(
            (res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.selectDangerousEngineeringAcceptanceCheck();
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 删除隐患排查记录
    deletehiddenDangerInspectRecord(val, type) {
      if (this.workDetail.finalAcceptanceStatus === 2) {
        this.$message.warning('该项特种作业已闭合，请勿操作')
        return
      }
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // deletehiddenDangerInspectRecordApi({ id: val }).then((res) => {
          deleteFinlahiddenDangerInspectRecordApi({ id: val, type:this.workType, }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.selectHiddenDangerInspectRecord(type);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取责任分包单位
    getCooperatorList() {
      let data = {
        projectSn: this.projectSn,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        enterpriseTypeId: this.enterpriseTypeId,
        enterpriseName: "",
      };
      getCooperatorListApi(data).then((res) => {
        if (res.code == 200) {
          if (res.result.records.length > 0) {
            this.cooperatorList = JSON.parse(
              JSON.stringify(res.result.records)
            );
            this.cooperatorList.forEach((item) => {
              item.value = item.enterpriseName;
              item.label = item.enterpriseName;
            });
            this.options = this.cooperatorList;
            // console.log(res.result.records)
          }
        }
      });
    },
    handleUploadSuccess(res, file) {
      console.log(res, file);
      this.fileList.push({
        name: file.name,
        url: file.response.data[0].imageUrl,
        iconType: this.getFileType(file.name),
      });
      // this.addProjectForm.layoutImage = this.$store.state.FILEURL + res.data[0].imageUrl;
    },
    handleUploadSuccess2(res, file) {
      console.log(res, file);
      this.fileList2.push({
        name: file.name,
        url: file.response.data[0].imageUrl,
        iconType: this.getFileType(file.name),
      });
    },
    handleUploadSuccess3(res, file) {
      console.log(res, file);
      this.fileList3.push({
        name: file.name,
        url: file.response.data[0].imageUrl,
        iconType: this.getFileType(file.name),
      });
    },
    downLoadFile(url) {
      window.open(this.fileUrl + url);
    },
    removeFile(index, type) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (type == 1) {
            this.fileList.splice(index, 1);
          } else if (type == 2) {
            this.fileList2.splice(index, 1);
          } else if (type == 3) {
            this.fileList3.splice(index, 1);
          }
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 判断文件类型
    getFileType(fileName) {
      // 后缀获取
      let suffix = "";
      // 获取类型结果
      let result = "";
      try {
        const flieArr = fileName.split(".");
        suffix = flieArr[flieArr.length - 1];
      } catch (err) {
        suffix = "";
      }
      // fileName无后缀返回 false
      if (!suffix) {
        return false;
      }
      suffix = suffix.toLocaleLowerCase();
      // 图片格式
      const imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
      // 进行图片匹配
      result = imglist.find((item) => item === suffix);
      if (result) {
        return "image";
      }
      // 匹配txt
      const txtlist = ["txt"];
      result = txtlist.find((item) => item === suffix);
      if (result) {
        return "txt";
      }
      // 匹配 excel
      const excelist = ["xls", "xlsx"];
      result = excelist.find((item) => item === suffix);
      if (result) {
        return "excel";
      }
      // 匹配 word
      const wordlist = ["doc", "docx"];
      result = wordlist.find((item) => item === suffix);
      if (result) {
        return "word";
      }
      // 匹配 pdf
      const pdflist = ["pdf"];
      result = pdflist.find((item) => item === suffix);
      if (result) {
        return "pdf";
      }
      // 匹配 ppt
      const pptlist = ["ppt", "pptx"];
      result = pptlist.find((item) => item === suffix);
      if (result) {
        return "ppt";
      }
      // 匹配 视频
      const videolist = [
        "mp4",
        "m2v",
        "mkv",
        "rmvb",
        "wmv",
        "avi",
        "flv",
        "mov",
        "m4v",
      ];
      result = videolist.find((item) => item === suffix);
      if (result) {
        return "video";
      }
      // 匹配 音频
      const radiolist = ["mp3", "wav", "wmv"];
      result = radiolist.find((item) => item === suffix);
      if (result) {
        return "radio";
      }
      // 其他 文件类型
      return "other";
    },
    cancle() {
      this.$emit("cancleSave");
    },
    submit() {
      // editDangerousEngineeringRecordApi({
      //     id: this.detailData.id,
      //     projectSn: this.projectSn
      // }).then(res=>{
      //     console.log(res)
      //     if(res.code == 200){
      //         this.$message.success("添加成功！")
      //         // this.$emit('cancleSave')
      //     }
      // })
    },
  },
};
</script>

<style lang="less" scoped>
.border-top_1 {
  border-top: 1px solid #eee;
}

.safety-table {
  padding: 0 20px 10px 20px;

  .el-row:first-child {
    color: #868490;
    padding-bottom: 8px;
  }
  .el-row:not(:first-child ){
    padding: 8px 0;
  }
  .el-row {
    font-size: 14px;

    .green {
      color: green;
    }

    .red {
      color: red;
    }

    .el-col:not(:first-child) {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.tableStatus {
  width: 55px;
  height: 25px;
  display: inline-block;
  background: red;
  color: #fff;
  line-height: 25px;
  border-radius: 5px;
  position: absolute;
  top: 18%;
  left: 65%;
}

.detailBox {
  .grid-content {
    overflow: hidden;
    margin-bottom: 10px;

    .label {
      float: left;
      width: 80px;
      text-align: right;
    }

    .value {
      float: left;
      width: calc(80% - 80px);
      margin-left: 10px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}

.headerLeft {
  height: 30px;
  background: #ededed;
  font-size: 14px;
  color: #616266;
  line-height: 30px;
  padding: 0 10px;
  margin-bottom: 20px;
}

.plan-form {
  height: calc(100% - 56px);
  width: 100%;
  box-sizing: border-box;
  // border-top: 1px solid #12294F;
  border-top: 1px solid #eee;
  background: #fff;

  .flex {
    display: flex;
  }

  .box-title-danger {
    height: 30px;
    position: relative;
    padding-left: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    >span {
      margin-right: 10px;
    }

    .item-status {
      display: flex;
      align-items: center;

      img {
        width: 15px;
        height: 15px;
        margin-right: 5px;
      }

      span {
        margin-right: 5px;
        font-size: 14px;
        color: #ea3941;
      }
    }
  }

  .box-title-danger::before {
    content: "";
    background: #4181fe;
    // height: 30px;
    // width: 2px;
    position: absolute;
    left: 0;
    // top: 0px;
    height: 20px;
    width: 4px;
    top: 50%;
    transform: translateY(-50%);
  }

  .box-title {
    height: 30px;
    padding-top: 10px;
    line-height: 30px;
    position: relative;
    padding-left: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }

  .box-title::before {
    content: "";
    background: #4181fe;
    // height: 30px;
    // width: 2px;
    position: absolute;
    left: 0;
    // top: 10px;
    width: 4px;
    height: 20px;
    top: 50%;
  }

  .wrap {
    display: flex;
    width: 100%;
    // height: 100%;
    // border-bottom: 1px solid #12294F;
    // border-bottom: 1px solid #ccc
  }

  .print-btn {
    margin-top: 20px;
    width: 144px;
    padding: 0;
    height: 32px;
    line-height: 32px;
  }

  .left {
    height: 100%;
    width: 100%;

    .info {
      // border-bottom: 1px solid #12294F;
      border-bottom: 1px solid #eee;
      padding-bottom: 8px;
      position: relative;

      .close-task {
        position: absolute;
        right: 10px;
        top: 0;
      }

      .form-box {
        width: 70%;
        display: flex;
        flex-wrap: wrap;

        /deep/.el-form-item {
          width: 50%;
          padding-right: 10px;
          box-sizing: border-box;
        }

        // /deep/.el-col-12{
        //     padding-left: 20px;
        // }
        /deep/.el-input__inner {
          width: 100%;
        }

        /deep/.el-select {
          width: 100%;
        }

        /deep/.el-cascader {
          width: 100%;
        }
      }

      .qr-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .info-content {
        display: flex;
      }
    }

    .control-point {
      // height: 350px;
      // min-height: 330px;
      overflow: hidden;

      .checkbox-list {
        display: flex;
        flex-wrap: wrap;

        .status {
          white-space: nowrap;
          margin-left: 10px;
        }

        .status1 {
          color: #67c23a;
        }

        .checkbox-item {
          width: 50%;
          padding-left: 24px;
          box-sizing: border-box;
          line-height: 24px;
          margin-bottom: 10px;

          .checkbox-children {
            padding-left: 24px;
            justify-content: space-between;
            // font-size: 14px;
          }
        }
      }

      .nodata {
        text-align: center;
        margin-top: 110px;
      }
    }
  }

  .right {
    width: 100%;
    // border-top: 1px solid #12294F;
    border-top: 1px solid #eee;

    .file-form {
      padding-left: 20px;
      display: flex;
      flex-wrap: wrap;

      // height: 658px;
      .form-item {
        width: 50%;
        font-size: 14px;
        display: flex;
        // align-items: center;
        // color: rgba(#fff,0.55);
        padding-bottom: 30px;

        .switch-lable {
          width: 40%;
          text-align: right;
          line-height: 20px;
          margin-right: 20px;
          // color: rgba(#fff,0.85);
        }

        .el-switch {
          margin-right: 12px;
          transform: scale(0.9);
        }

        .form-right {
          flex: 1;
          padding-right: 12px;

          .switch-box {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
          }
        }
      }
    }

    .upload-btn {
      display: block;
      width: 86px;
      height: 26px;
      border: 1px solid #0080f3;
      background: #0080f3;
      border-radius: 3px;
      text-align: center;
      line-height: 26px;
      margin-bottom: 20px;
      cursor: pointer;
    }

    .file-list {
      // border: 1px solid #0080F3;
      border: 1px solid #eee;
      width: 100%;

      /*background: #0A1429;*/
      .list-head {
        height: 32px;
        line-height: 32px;
        /*background: #1F283B;*/
        background: #eee;
        padding-left: 10px;
      }

      .item-box {

        // height: 300px;
        .list-item {
          display: flex;
          width: 100%;
          align-items: center;
          padding: 8px 0;
          padding-left: 20px;
          box-sizing: border-box;
          margin: 10px 0;

          .file-icon {
            margin-right: 10px;

            img {
              width: 32px;
              height: 38px;
            }
          }

          .file-name {
            flex: 1;
            font-size: 12px;
            display: flex;
            flex-direction: column;

            span {
              display: inherit;
              margin-top: 6px;
              color: #7cd3de;
              cursor: pointer;
            }
          }

          .el-icon-close {
            color: #fe6565;
            width: 20px;
            cursor: pointer;
          }
        }

        .list-item:hover {
          // background: #132C55;
          background: #eee;
        }

        // .active{
        //     background: #132C55;
        // }
      }
    }
  }

  .others-info {
    font-size: 14px;

    .top {
      display: flex;
      // border-bottom: 1px solid #12294F;
      border-bottom: 1px solid #eee;
    }

    .plan-detail {
      padding: 0 20px;
      // align-items: center;
    }

    .plan-content {
      // width: calc(100% - 200px);
      flex: 1;
      // align-items: center;
      line-height: 32px;
      // padding-left: 20px;
      box-sizing: border-box;
      display: flex;
      padding-bottom: 20px;
      flex-direction: column;
    }

    .plan-content2 {
      flex: 1;
      // padding-left: 20px;
      line-height: 32px;
      // width:30%
    }

    .safe-detail {
      align-items: center;
      margin-bottom: 20px;
      padding: 0 20px;
      box-sizing: border-box;
      justify-content: space-between;
    }

    .print-btn {
      margin-top: 0;
      margin-left: 20px;
    }

    .bottom {
      display: flex;
      // border-bottom: 1px solid #12294F;
      border-bottom: 1px solid #eee;
    }

    .info-item {
      width: 50%;
    }

    .line {
      // border-left: 1px solid #12294F;
      border-left: 1px solid #eee;
    }
  }

  .button-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    // padding-top: 8px;
    height: 60px;
    padding-right: 20px;

    .cancle-btn {
      margin-right: 30px;
    }
  }
}

.dark {
  .print-btn {
    background: #0d1a34;
    border-color: #0080f3;
    color: #fff;
    font-size: 14px;
  }

  .box-title {
    color: #88e7f0;
  }

  .box-title::before {
    background: linear-gradient(to bottom, #88e7f0, #15315f);
  }

  .button-box {
    .cancle-btn {
      background: transparent;
      color: #fff;
    }
  }

  .right {
    /deep/.el-switch__core:after {
      background: #0d1a34;
    }

    .upload-btn {
      border: 1px solid #0080f3;
      background: #0d1a34;
      // color: rgba(#fff,0.85);
    }
  }

  .delete-btn {
    cursor: pointer;
    font-size: 18px;
  }

  .delete-btn:hover {
    color: #fe6565;
  }
}

.delete {
  color: #fe6565;
}
</style>
