﻿<template>
  <a-modal
    v-model:visible="changeSupervisionVisible"
    width="60%"
    @cancel="closeModal"
    @after-close="closeModal"
    title="整改问题查看"
    class="outerDialog custom_dialog">
    <a-tabs v-model="currentTab" :animated="false">
      <a-tab-pane tab="问题详情" key="first">
        <div class="scroll_wrapper">
          <div style="width:49%;overflow-y:auto;max-height:58vh;float:left;border:1px solid #d5d5ff;margin-right:5px;">
            <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">基本信息</p>
            <a-form v-if="changeSupervisionVisible" ref="changeSupFrom" :model="changeSupervision" :label-col="{span: 10}" :wrapper-col="{span: 14}">
              <a-form-item label="问题编码:" prop="fileNoNumber" v-if="(isNew==1 && isProv) || isNew==undefined">
                <span>{{ changeSupervision.fileNoNumber }}</span>
              </a-form-item>
              <a-form-item label="工程名称:" prop="pblmSourceTm">
                <span>{{ changeSupervision.nm }}</span>
              </a-form-item>
              <a-form-item label="县（市、区）:" prop="adName">
                <span>{{ changeSupervision.adName }}</span>
              </a-form-item>
              <a-form-item label="问题归类:" prop="objType">
                <span>{{ changeSupervision.objType }}</span>
              </a-form-item>
              <a-form-item label="整改要求:" prop="pblmSggtn">
                <span>{{ changeSupervision.pblmSggtn }}</span>
              </a-form-item>
              <a-form-item label="详细描述" prop="inspPblmDesc" v-if="(isNew==1 && !isProv) || isNew==undefined">
                <span>{{ changeSupervision.inspPblmDesc }}</span>
              </a-form-item>
              <a-form-item label="问题:" prop="pblmSource" v-if="(isNew==1 && isProv) || isNew==undefined">
                <span>{{ changeSupervision.inspPblmDesc }}</span>
              </a-form-item>
              <a-form-item label="问题来源:" prop="pblmSource" v-if="(isNew==1 && isProv) || isNew==undefined">
                <span>{{ changeSupervision.pblmSource }}</span>
              </a-form-item>
              <a-form-item label="问题来源时间:" prop="pblmSourceTm" v-if="(isNew==1 && isProv) || isNew==undefined">
                <span>{{ changeSupervision.pblmSourceTm }}</span>
              </a-form-item>
              <a-form-item label="设区市/直管县:" prop="upAdName" v-if="(isNew==1 && isProv) || isNew==undefined">
                <span>{{ changeSupervision.upAdName }}</span>
              </a-form-item>
              <a-form-item label="问题印发文号:" prop="zgWjName" v-if="(isNew==1 && isProv) || isNew==undefined">
                <span>{{ changeSupervision.zgWjName }}</span>
              </a-form-item>
              <a-form-item label="问题印发文件名:" prop="zgMemo" v-if="(isNew==1 && isProv) || isNew==undefined">
                <span>{{ changeSupervision.zgMemo }}</span>
              </a-form-item>
              <a-form-item label="问题印发时间:" prop="issuedTm" v-if="(isNew==1 && isProv) || isNew==undefined">
                <span>{{ changeSupervision.issuedTm }}</span>
              </a-form-item>
              <a-form-item label="问题是否已销号:" prop="isPblmDel" v-if="(isNew==1 && isProv) || isNew==undefined">
                <span v-if="changeSupervision.isPblmDel=='1'">是</span>
                <span v-if="changeSupervision.isPblmDel=='0'">否</span>
                <!-- <span v-if="changeSupervision.isPblmDel == '2'">已立行立改</span> -->
              </a-form-item>
              <a-form-item label="销号时间:" prop="isPdTm" v-if="(isNew==1 && isProv) || isNew==undefined">
                <span>{{ changeSupervision.isPdTm }}</span>
              </a-form-item>
              <a-form-item label="调度年份:" prop="schdYear" v-if="(isNew==1 && isProv) || isNew==undefined">
                <span>{{ changeSupervision.schdYear }}</span>
              </a-form-item>
              <a-form-item label="年度初始整改时限:" prop="nlZgDate" v-if="(isNew==1 && isProv) || isNew==undefined">
                <span>{{ changeSupervision.nlZgDate }}</span>
              </a-form-item>
              <a-form-item label="当前要求整改完成时限:" prop="zgDate">
                <span>{{ changeSupervision.zgDate }}</span>
              </a-form-item>
              <a-form-item label="是否按期销号:" prop="isPdSche" v-if="(isNew==1 && isProv) || isNew==undefined">
                <span>{{ changeSupervision.isPdSche }}</span>
              </a-form-item>
              <a-form-item label="最新申请延期月份:" prop="isPdSche" v-if="(isNew==1 && isProv) || isNew==undefined">
                <span>{{ changeSupervision.psDlyTm }}</span>
              </a-form-item>
              <a-form-item label="是否申请销号:" prop="isApplyPd" v-if="(isNew==1 && isProv) || isNew==undefined">
                <span>{{ changeSupervision.isApplyPd }}</span>
              </a-form-item>
              <a-form-item label="责任处室（单位）是否同意销号:" prop="isDeptagePd" v-if="(isNew==1 && isProv) || isNew==undefined">
                <span>{{ changeSupervision.isDeptagePd }}</span>
              </a-form-item>
              <a-form-item label="整改描述:" prop="zgZgxx" v-if="(isNew==1 && isProv) || isNew==undefined">
                <span>{{ changeSupervision.zgZgxx }}</span>
              </a-form-item>
              <a-form-item label="责任处室:" prop="dutyDept">
                <span>{{ changeSupervision.dutyDept }}</span>
              </a-form-item>
            </a-form>
          </div>
          <div style="width: 49%;float: left;border: 1px solid rgb(213, 213, 255);margin-right: 5px;overflow-y: auto;max-height: 58vh;min-height: 57.5vh;">
            <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">多媒体信息</p>
            <a-tabs v-model="active1" style="margin:0px 5px;">
              <a-tab-pane :tab="picturetabName" key="1">
                <a-row style="text-align:right;"></a-row>
                <!-- 用v-show判断显示和隐藏 避免上传组件调用方法报错 关闭对话框要在上传接口走完之后，否则会报submit方法找不到的错误 record by wby-->
                <a-row>
                  <upload v-show="addPicPanel" ref="uploadFile" :url="`/pdcApi/file/insert?bizId=`" @uploadOver="removeNewSupervision" />
                </a-row>
                <a-row>
                  <div style="overflow-y:auto;overflow-x:hidden;max-height:30vh;padding:10px;">
                    <div class="upload-container">
                      <div v-for="(item, index) in pictureArray" :key="index" class="image-preview image-app-preview">
                        <viewer class="image-preview-wrapper">
                          <a-icon style="position: absolute;right: 0;bottom: 0;cursor: pointer;" type="download" @click="downloadFiles(item.id,item.fileName)"/>
                          <span style="position: absolute;left: 0;bottom: 0; color: #c9c9c9">{{ item.createDate }}</span>
                          <img title="点击查看大图" :src="`${hostUrl}${item.filePath}`">
                        </viewer>
                      </div>
                    </div>
                  </div>
                </a-row>
              </a-tab-pane>
              <a-tab-pane :tab="audiotabName" key="2">
                <a-table
                  border
                  :data-source="audioArray"
                  :columns="audioArrayColumns"
                  :pagination="false"
                  row-key="id"
                  style="width: 100%;margin: 0 auto;">
                  <span slot="filePath" slot-scope="text">
                    <elaudio style="margin-left:15%;width:100px;height:30px;" :theUrl="`${hostUrl}/${text.filePath}`" />
                  </span>
                  <span slot="action" slot-scope="text">
                    <a-button size="small" @click="downloadFiles(text.id,text.fileName)">下载</a-button>
                  </span>
          <template #bodyCell="{ column, text }">
            <template v-if="column.slots?.customRender === 'tooltipCell'">
              <a-tooltip placement="topLeft" :title="text">
                <span>{{ text }}</span>
              </a-tooltip>
            </template>
            <template v-else>
              {{ text }}
            </template>
          </template>
                </a-table>
              </a-tab-pane>
              <a-tab-pane :tab="videotabName" key="3">
                <a-table
                  border
                  :data-source="videoArray"
                  :columns="videoArrayColumns"
                  :pagination="false"
                  row-key="id"
                  style="width: 100%;margin: 0 auto;">
                  <span slot="playsinline" slot-scope="text">
                    <video-player class="vjs-custom-skin" ref="videoPlayer" :options="text" :playsinline="true" />
                  </span>
                  <span slot="action" slot-scope="text">
                    <a-button size="small" @click="downloadFiles(text.id,text.fileName)">下载</a-button>
                  </span>
                </a-table>
              </a-tab-pane>
              <a-tab-pane :tab="filetabName" key="4">
                <a-table
                  border
                  :data-source="fileArray"
                  :columns="fileArrayColumns"
                  :pagination="false"
                  row-key="id"
                  style="width: 100%;margin: 0 auto;">
                  <span slot="fileName" slot-scope="text">
                    <p>
                      <a :href="`${hostUrl}/${text.filePath}`" target="_blank" rel="noopener noreferrer">
                        {{ text.fileName }}
                      </a>
                    </p>
                  </span>
                  <span slot="action" slot-scope="text">
                    <a-button size="small" @click="downloadFiles(text.id,text.fileName)">下载</a-button>
                  </span>
                </a-table>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane tab="整改反馈" key="second">
        <div class="scroll_wrapper">
          <div style="width:49%;overflow-y:auto;max-height:158vh;float:left;border:1px solid #d5d5ff;margin-right:5px;min-height:57.5vh;">
            <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">整改流程(截止日期：{{ changeSupervision.zgDate }})</p>
            <pblm-rectify-time-line :pblmId="this.pblmId" :pType="this.pType" :pblmCurrentWorkflowStat="this.pblmCurrentWorkflowStat" @changeBtn="changeBtn" />
          </div>
          <div style="width: 49%;float: left;border: 1px solid rgb(213, 213, 255);margin-right: 5px;overflow-y: auto;max-height: 58vh;min-height: 57.5vh;">
            <div style="">
              <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">{{ changeSupervision.isDlyFlow=='1'?'延期说明':'整改描述' }}</p>
              <a-textarea :value="changeSupervision.isDlyFlow=='1'?changeSupervision.zgDelayEln:changeSupervision.zgZgxx" disabled />
            </div>
            <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;" class="dataChange">多媒体信息<span :class="{'current': current=='3'}" @click="changeType('3')">延期材料</span><span :class="{'current': current=='2'}" @click="changeType('2')">整改材料</span></p>
            <a-tabs v-model="active2" style="margin:0px 5px;">
              <a-tab-pane :tab="current=='2'?zgPictureTabName:dyPictureTabName" key="1">
                <a-row style="text-align:right;"></a-row>
                <a-row>
                  <upload v-show="addPicPanel" ref="uploadFile" :url="`/pdcApi/file/insert?bizId=`" @uploadOver="removeNewSupervision" />
                </a-row>
                <a-row v-if="current=='2'">
                  <div style="overflow-y:auto;overflow-x:hidden;max-height:30vh;padding:10px;">
                    <div class="upload-container">
                      <div v-for="(item, index) in zgPictureArray" :key="index" class="image-preview image-app-preview">
                        <viewer class="image-preview-wrapper">
                          <a-icon type="close-circle" style="position: absolute;right: 0;top: 0;cursor: pointer;" @click="removeFile(item.id,index)" v-if="workflowStat === '22'"/>
                          <a-icon type="download" style="position: absolute;right: 0;bottom: 0;cursor: pointer;" @click="downloadFiles(item.id,item.fileName)"/>
                          <span style="position: absolute;left: 0;bottom: 0; color: #c9c9c9">{{ item.createDate }}</span>
                          <img :src="`${hostUrl}${item.filePath}`" title="点击查看大图">
                        </viewer>
                      </div>
                    </div>
                  </div>
                </a-row>
                <a-row v-if="current=='3'">
                  <div style="overflow-y:auto;overflow-x:hidden;max-height:30vh;padding:10px;">
                    <div class="upload-container">
                      <div v-for="(item, index) in dyPictureArray" :key="index" class="image-preview image-app-preview">
                        <viewer class="image-preview-wrapper">
                          <a-icon type="close-circle" style="position: absolute;right: 0;top: 0;cursor: pointer;" @click="removeFile(item.id,index)" v-if="workflowStat === '22'" />
                          <a-icon type="download" style="position: absolute;right: 0;bottom: 0;cursor: pointer;" @click="downloadFiles(item.id,item.fileName)" />
                          <span style="position: absolute;left: 0;bottom: 0; color: #c9c9c9">{{ item.createDate }}</span>
                          <img :src="`${hostUrl}${item.filePath}`" title="点击查看大图">
                        </viewer>
                      </div>
                    </div>
                  </div>
                </a-row>
              </a-tab-pane>
              <a-tab-pane :tab="current=='2'?zgAudioTabName:dyAudioTabName" key="2">
                <a-table
                  border
                  :data-source="zgAudioArray"
                  :columns="zgAudioArrayColumns"
                  :pagination="false"
                  row-key="id"
                  style="width: 100%;margin: 0 auto;"
                  v-if="current=='2'">
                  <span slot="filePath" slot-scope="text">
                    <elaudio style="margin-left:15%;width:100px;height:30px;" :theUrl="`${hostUrl}/${text.filePath}`" />
                  </span>
                  <span v-if="workflowStat === '22'" slot="action" slot-scope="text, record, index">
                    <a-button size="small" @click="downloadFiles(text.id,text.fileName)">下载</a-button>
                    <a-button size="small" type="danger" @click="removeFile(text.id, index)">删除</a-button>
                  </span>
                </a-table>
                <a-table
                  border
                  :data-source="dyAudioArray"
                  :columns="dyAudioArrayColumns"
                  :pagination="false"
                  row-key="id"
                  style="width: 100%;margin: 0 auto;"
                  v-if="current=='3'">
                  <span slot="filePath" slot-scope="text">
                    <elaudio style="margin-left:15%;width:100px;height:30px;" :theUrl="`${hostUrl}/${text.filePath}`" />
                  </span>
                  <span v-if="workflowStat === '22'" slot="action" slot-scope="text, record, index">
                    <a-button size="small" @click="downloadFiles(text.id,text.fileName)">下载</a-button>
                    <a-button type="danger" size="small" @click="removeFile(text.id, index)">删除</a-button>
                  </span>
                </a-table>
              </a-tab-pane>
              <a-tab-pane :tab="current=='2'?zgVideoTabName:dyVideoTabName" key="3">
                <a-table
                  border
                  :data-source="zgVideoArray"
                  :columns="zgVideoArrayColumns"
                  :pagination="false"
                  row-key="id"
                  style="width: 100%;margin: 0 auto;"
                  v-if="current=='2'">
                  <span slot="playsinline" slot-scope="text">
                    <video-player class="vjs-custom-skin" ref="videoPlayer" :options="text" :playsinline="true" />
                  </span>
                  <span v-if="workflowStat === '22'" slot="action" slot-scope="text, record, index">
                    <a-button size="small" @click="downloadFiles(text.id,text.fileName)">下载</a-button>
                    <a-button size="small" type="danger" @click="removeFile(text.id, index)">删除</a-button>
                  </span>
                </a-table>
                <a-table
                  border
                  :data-source="dyVideoArray"
                  :columns="dyVideoArrayColumns"
                  :pagination="false"
                  row-key="id"
                  style="width: 100%;margin: 0 auto;"
                  v-if="current=='3'">
                  <span slot="playsinline" slot-scope="text">
                    <video-player class="vjs-custom-skin" ref="videoPlayer" :options="text" :playsinline="true" />
                  </span>
                  <span v-if="workflowStat === '22'" slot="action" slot-scope="text, record, index">
                    <a-button size="small" @click="downloadFiles(text.id,text.fileName)">下载</a-button>
                    <a-button size="small" type="danger" @click="removeFile(text.id, index)">删除</a-button>
                  </span>
                </a-table>
              </a-tab-pane>
              <a-tab-pane :tab="current=='2'?zgFileTabName:dyFileTabName" key="4">
                <a-table
                  border
                  row-key="id"
                  :data-source="zgFileArray"
                  :columns="zgFileArrayColumns"
                  :pagination="false"
                  style="width: 100%;margin: 0 auto;"
                  v-if="current=='2'">
                  <span slot="fileName" slot-scope="text">
                    <p>
                      <a :href="`${hostUrl}/${text.filePath}`" target="_blank" rel="noopener noreferrer"> {{ text.fileName }}</a>
                    </p>
                  </span>
                  <span slot="action" slot-scope="text, record, index">
                    <a-button size="small" @click="downloadFiles(text.id,text.fileName)">下载</a-button>
                    <a-button size="small" type="danger" @click="removeFile(text.id, index)">删除</a-button>
                  </span>
          <template #bodyCell="{ column, text }">
            <template v-if="column.slots?.customRender === 'tooltipCell'">
              <a-tooltip placement="topLeft" :title="text">
                <span>{{ text }}</span>
              </a-tooltip>
            </template>
            <template v-else>
              {{ text }}
            </template>
          </template>
                </a-table>
                <a-table
                  border
                  :data-source="dyFileArray"
                  :columns="dyFileArrayColumns"
                  row-key="id"
                  style="width: 100%;margin: 0 auto;"
                  :pagination="false"
                  v-if="current=='3'">
                  <span slot="fileName" slot-scope="text">
                    <p>
                      <a :href="`${hostUrl}/${text.filePath}`" target="_blank" rel="noopener noreferrer"> {{ text.fileName }}</a>
                    </p>
                  </span>
                  <span slot="action" slot-scope="text, record, index">
                    <a-button size="small" @click="downloadFiles(text.id,text.fileName)">下载</a-button>
                    <a-button size="small" type="danger" @click="removeFile(text.id, index)">删除</a-button>
                  </span>
          <template #bodyCell="{ column, text }">
            <template v-if="column.slots?.customRender === 'tooltipCell'">
              <a-tooltip placement="topLeft" :title="text">
                <span>{{ text }}</span>
              </a-tooltip>
            </template>
            <template v-else>
              {{ text }}
            </template>
          </template>
                </a-table>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
      </a-tab-pane>
      <!-- <a-tab-pane tab="整改进度月报" key="third">
        <pblm-monthly-report-history :currentPblmFileNoNumber="currentPblmFileNoNumber" :pblmId="this.pblmId" :pType="this.pType" />
      </a-tab-pane> -->
      <a-tab-pane tab="问题超期整改记录" key="fore">
        <div style="height:400px;overflow: auto;border: 1px solid rgb(213, 213, 255);">
          <pblmRectifyTimeLineOver :pblmId="this.pblmId" :pType="this.pType" :pblmCurrentWorkflowStat="this.pblmCurrentWorkflowStat" />
        </div>
      </a-tab-pane>
    </a-tabs>
    <template slot="footer">
      <span v-if="row && row.isDlyHeavy=='1'">
        <a-button type="success" @click="openActivityCommentDialog(1,$event)" v-if="isYwcs" style="background-color: #67c23a;">重新明确整改时限</a-button>
      </span>
      <span v-else>
        <a-button @click="openActivityCommentDialog(1,$event)" v-if="isYwcs || isJc" style="background-color: #67c23a;">{{ row.isDlyFlow=='1'?'同意延期':'同意销号' }}</a-button>
        <a-button type="danger" @click="openActivityCommentDialog(0,$event)" v-if="isYwcs || isJc">{{ row.isDlyFlow=='1'?'不同意延期':'不同意销号' }}</a-button>
      </span>
      <a-button @click="changeSupervisionVisiblefalse">关闭</a-button>
    </template>
  </a-modal>
</template>

<script>
import { h } from 'vue';
import {
  deleteFileById,
  downloadFile,
  showPblmDetails,
  updatelist,
} from '../../../api/duChaAPI.js';
import { hostUrl } from '../../../utils/global_variable';
import request from '../../../utils/gw_ajax_request.js';
import { formatDateTime2 } from '../../../utils/gw_date';
import elAudio from '../../../widgets/elAudioShort.vue';
import upload from '../../../widgets/uploadFile.vue';
import pblmMonthlyReportHistory from '../../PblmRectifyMonthlyReport/Components/pblmMonthlyReportHistory.vue';
import { formatWorkflowStat } from '../Common/rectify_api';
import { formatDeadLineDate } from '../Common/rectify_date';
import pblmRectifyTimeLine from './pblmRectifyTimeLine.vue';
import pblmRectifyTimeLineOver from './pblmRectifyTimeLineOver.vue';
export default {
  props: [
    'pblmId',
    'pType',
    'pblmCurrentWorkflowStat',
    'currentPblmFileNoNumber',
    'isNew',
    'isProv',
    'isYwcs',
    'row',
    'isJc',
  ],
  data() {
    return {
      currentModuserId: '',
      current: '2',
      changeSupervisionVisible: true,
      changeSupervisionLoading: false,
      changeSupervision: {},
      rectifyDes: '', // 整改信息
      srcList: [], // 大图src
      workflowStat: '', // 督查问题整改流程状态
      showViewer: false, // 是否显示大图
      rules1: {
        inspPblmName: [
          {
            required: true,
            message: '请输入问题名称',
            trigger: 'blur',
          },
          {
            min: 1,
            max: 999,
            message: '不超过100字符',
            trigger: 'blur',
          },
        ],
        inspPblmDesc: [
          {
            required: true,
            message: '请输入问题描述',
            trigger: 'blur',
          },
        ],
        recPers: [
          {
            required: true,
            message: '请输入记录人',
            trigger: 'blur',
          },
          {
            min: 1,
            max: 999,
            message: '不超过100字符',
            trigger: 'blur',
          },
        ],
        objType: [
          {
            required: true,
            message: '请选择督查对象类型',
            trigger: 'change',
          },
        ],
        objId: [
          {
            required: true,
            message: '请选择督查对象类型',
            trigger: 'change',
          },
        ],
        inspPblmType: [
          {
            required: true,
            message: '请选择督查问题类型',
            trigger: 'change',
          },
        ],
        dataStat: [
          {
            required: true,
            message: '请选择数据状态',
            trigger: 'change',
          },
        ],
        collTime: [
          {
            required: true,
            message: '请选择采集时间',
            trigger: 'change',
          },
        ],
        ifCasePblm: [
          {
            required: true,
            message: '请选择是否典型',
            trigger: 'change',
          },
        ],
        pblmStat: [
          {
            required: true,
            message: '请选择问题类型',
            trigger: 'change',
          },
        ],
        inspPblmCate: [
          {
            required: true,
            message: '请选择问题程度',
            trigger: 'change',
          },
          {
            trigger: 'change',
          },
        ],
      },
      supervisionState: [
        {
          value: '0',
          label: '一般',
        },
        {
          value: '1',
          label: '较重',
        },
        {
          value: '2',
          label: '严重',
        },
        {
          value: '3',
          label: '特别严重',
        },
      ],
      supervision: [
        {
          value: '1',
          label: '是',
        },
        {
          value: '0',
          label: '否',
        },
      ],
      addPicPanel: false,
      gwComFiles: [],
      gwComFiles1: [],
      picturetabName: '',
      audiotabName: '',
      videotabName: '',
      filetabName: '',
      pictureArray: [],
      audioArray: [],
      videoArray: [],
      fileArray: [],
      zgPictureArray: [],
      zgAudioArray: [],
      zgVideoArray: [],
      zgFileArray: [],
      zgPictureTabName: '',
      zgAudioTabName: '',
      zgVideoTabName: '',
      zgFileTabName: '',
      dyPictureArray: [],
      dyAudioArray: [],
      dyVideoArray: [],
      dyFileArray: [],
      dyPictureTabName: '',
      dyAudioTabName: '',
      dyVideoTabName: '',
      dyFileTabName: '',
      updateIdXiuGai: '',
      /* pblmId: "", */
      t1: {},
      t2: {},
      t3: {},
      problemList: [],
      currentCheckPointList: [],
      currentProblemDescList: [],
      xiangqingmiaoshu: '',
      wenTiLeiBie: '',
      jianChaXiangMu: '',
      currentTab: 'second',
      active1: '1',
      active2: '1',
      audioArrayColumns: [
        {
          title: '音频',
          dataIndex: 'filePath',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      videoArrayColumns: [
        {
          title: '视频',
          dataIndex: 'playsinline',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      fileArrayColumns: [
        {
          title: '材料编号',
          dataIndex: 'id',
          width: 100,
          align: 'center',
          slots: { customRender: 'tooltipCell' },
          customCell: () => {
            return {
              style: {
                maxWidth: '100px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
              },
            };
          },
        },
        {
          title: '文档',
          dataIndex: 'fileName',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      zgAudioArrayColumns: [
        {
          title: '音频',
          dataIndex: 'filePath',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      dyAudioArrayColumns: [
        {
          title: '音频',
          dataIndex: 'filePath',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      zgVideoArrayColumns: [
        {
          title: '视频',
          dataIndex: 'playsinline',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      dyVideoArrayColumns: [
        {
          title: '视频',
          dataIndex: 'playsinline',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      zgFileArrayColumns: [
        {
          title: '材料编号',
          dataIndex: 'id',
          width: 100,
          align: 'center',
          slots: { customRender: 'tooltipCell' },
          customCell: () => {
            return {
              style: {
                maxWidth: '100px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
              },
            };
          },
        },
        {
          title: '文档',
          dataIndex: 'fileName',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      dyFileArrayColumns: [
        {
          title: '材料编号',
          dataIndex: 'id',
          width: 100,
          align: 'center',
          slots: { customRender: 'tooltipCell' },
          customCell: () => {
            return {
              style: {
                maxWidth: '100px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
              },
            };
          },
        },
        {
          title: '文档',
          dataIndex: 'fileName',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
    };
  },
  components: {
    upload,
    elAudio,
    pblmRectifyTimeLine,
    pblmMonthlyReportHistory,
    pblmRectifyTimeLineOver,
  },
  computed: {
    hostUrl() {
      return hostUrl;
    },
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '1098101939614724096';
    },
    formatDateTime() {
      return formatDateTime2;
    },
    formatDeadLineDate() {
      return formatDeadLineDate;
    },
    formatWorkflowStat() {
      return formatWorkflowStat;
    },
  },
  mounted() {
    this.getproblemSmallType();
  },
  methods: {
    changeBtn(val) {
      this.currentModuserId = val;
    },
    openActivityCommentDialog(isAg, e) {
      this.$emit('submitYwcs', { isAg: isAg, e: e });
    },
    changeType(val) {
      this.current = val;
    },
    dateFormats(v) {
      return v ? v.substring(0, 10) : '';
    },
    inspPblmCate(v) {
      if (v == '0') {
        return '一般';
      }
      if (v == '1') {
        return '较重';
      }
      if (v == '2') {
        return '严重';
      }
      if (v == '3') {
        return '特别严重';
      }
    },
    zgOrgId(v) {
      var name = v || '';
      if (!name) {
        return '';
      }
      name = name.replace(/00/g, '');
      if (name.length == 2) {
        return '省级';
      }
      if (name.length == 4) {
        return '市级';
      }
      if (name.length == 6) {
        return '县级';
      }
    },
    closeViewer() {
      this.showViewer = false;
      this.srcList = [];
    }, // 查看大图
    preview(picture) {
      this.showViewer = true;
      picture.forEach((item) => {
        this.srcList.push(this.hostUrl + item.filePath);
      });
      // this.srcList[0]='../../../assets/images/login_bj1.png';
      // console.log(this.srcList[0]);
    },
    // 修改弹窗显示
    changeSup(id, deleteUpdate) {
      this.pictureArray = [];
      this.audioArray = [];
      this.videoArray = [];
      this.fileArray = [];
      this.zgPictureArray = [];
      this.zgAudioArray = [];
      this.zgVideoArray = [];
      this.zgFileArray = [];
      this.updateIdXiuGai = id;
      showPblmDetails(this.updateIdXiuGai).then((res) => {
        // 整改描述
        this.changeSupervision = res.data;
        if (this.changeSupervision.isDlyFlow == '1') {
        }
        this.workflowStat = res.data.workflowStat;
        // 当删掉最后一个多媒体文件后，更新一下提交信息（解决删掉多媒体文件后台没有更改状态的问题  record by wby）
        if (deleteUpdate && !res.data.gwComFiles.length) {
          this.changeSupervisionInfo();
        }
        res.data.gwComFiles.forEach((item) => {
          if (
            item.fileExt === 'mp3' ||
            item.fileExt == 'MP3' ||
            item.fileExt == 'm4a'
          ) {
            this.audioArray.push(item);
          } else if (
            item.fileExt == 'jpg' ||
            item.fileExt == 'JPG' ||
            item.fileExt == 'png' ||
            item.fileExt == 'PNG' ||
            item.fileExt == 'JPEG' ||
            item.fileExt == 'jpeg'
          ) {
            this.pictureArray.push(item);
          } else if (item.fileExt == 'mp4' || item.fileExt == 'MP4') {
            this.videoArray.push({
              id: item.id,
              bizId: item.bizId,
              width: '130',
              height: '130',
              autoplay: false,
              muted: true,
              language: 'en',
              playbackRates: [0.7, 1.0, 1.5, 2.0],
              sources: [
                {
                  type: 'video/mp4',
                  src: this.hostUrl + item.filePath,
                },
              ],
            });
          } else {
            this.fileArray.push(item);
          }
        });

        this.picturetabName = '图片资料(' + this.pictureArray.length + ')';
        this.audiotabName = '音频资料(' + this.audioArray.length + ')';
        this.videotabName = '视频资料(' + this.videoArray.length + ')';
        this.filetabName = '其它资料(' + this.fileArray.length + ')';

        res.data.gwComFiles1.forEach((item) => {
          if (
            item.fileExt === 'mp3' ||
            item.fileExt === 'MP3' ||
            item.fileExt === 'm4a'
          ) {
            this.zgAudioArray.push(item);
          } else if (
            item.fileExt === 'jpg' ||
            item.fileExt === 'JPG' ||
            item.fileExt === 'png' ||
            item.fileExt === 'PNG' ||
            item.fileExt === 'JPEG' ||
            item.fileExt === 'jpeg'
          ) {
            this.zgPictureArray.push(item);
          } else if (item.fileExt === 'mp4' || item.fileExt === 'MP4') {
            this.zgVideoArray.push({
              id: item.id,
              bizId: item.bizId,
              width: '130',
              height: '130',
              autoplay: false,
              muted: true,
              language: 'en',
              playbackRates: [0.7, 1.0, 1.5, 2.0],
              sources: [
                {
                  type: 'video/mp4',
                  src: this.hostUrl + item.filePath,
                },
              ],
            });
          } else {
            this.zgFileArray.push(item);
          }
        });

        this.zgPictureTabName = '图片资料(' + this.zgPictureArray.length + ')';
        this.zgAudioTabName = '音频资料(' + this.zgAudioArray.length + ')';
        this.zgVideoTabName = '视频资料(' + this.zgVideoArray.length + ')';
        this.zgFileTabName = '其它资料(' + this.zgFileArray.length + ')';

        res.data.gwComFiles2.forEach((item) => {
          if (
            item.fileExt === 'mp3' ||
            item.fileExt === 'MP3' ||
            item.fileExt === 'm4a'
          ) {
            this.dyAudioArray.push(item);
          } else if (
            item.fileExt === 'jpg' ||
            item.fileExt === 'JPG' ||
            item.fileExt === 'png' ||
            item.fileExt === 'PNG' ||
            item.fileExt === 'JPEG' ||
            item.fileExt === 'jpeg'
          ) {
            this.dyPictureArray.push(item);
          } else if (item.fileExt === 'mp4' || item.fileExt === 'MP4') {
            this.dyVideoArray.push({
              id: item.id,
              bizId: item.bizId,
              width: '130',
              height: '130',
              autoplay: false,
              muted: true,
              language: 'en',
              playbackRates: [0.7, 1.0, 1.5, 2.0],
              sources: [
                {
                  type: 'video/mp4',
                  src: this.hostUrl + item.filePath,
                },
              ],
            });
          } else {
            this.dyFileArray.push(item);
          }
        });

        this.dyPictureTabName = '图片资料(' + this.dyPictureArray.length + ')';
        this.dyAudioTabName = '音频资料(' + this.dyAudioArray.length + ')';
        this.dyVideoTabName = '视频资料(' + this.dyVideoArray.length + ')';
        this.dyFileTabName = '其它资料(' + this.dyFileArray.length + ')';

        console.log(
          this.filetabName,
          this.zgFileTabName,
          this.dyFileTabName,
          'xxxxx',
        );
      });
    }, // 提交修改信息
    changeSupervisionInfo() {
      // this.$refs.changeSupFrom.validate(valid => {
      //   if (valid) {
      this.changeSupervisionLoading = true;
      this.changeSupervision.pblmDesc = this.xiangqingmiaoshu;
      this.changeSupervision.checkPoint = this.jianChaXiangMu;
      this.changeSupervision.inspPblmName = this.wenTiLeiBie;
      this.changeSupervision.inspPlbmType = this.t2.sort2;
      this.changeSupervision.inspPblmCode = this.t3.sn;
      this.changeSupervision.pblmsTypeId = this.t3.guid;
      const data = this.changeSupervision;
      updatelist(data).then((res) => {
        this.pblmId = res.data.pblmId;
        this.gwComFiles = res.data.gwComFiles;
        if (res.success) {
          if (this.$refs.uploadFile.submitUpload(data.pblmId)) {
            this.removeNewSupervision();
            this.successInfo();
            this.addPicPanel = false;
            this.changeSupervisionLoading = false;
          }
        } else {
          this.failInfo();
          this.$emit('closePblmDetailDialog');
        }
      });
      // }
      // })
    },
    removeNewSupervision(arg) {
      if (arg) {
        var args = this.gwComFiles.concat(arg);
      }
      this.changeSup(this.pblmId);
      this.gwComFiles = [];
      this.$emit('closePblmDetailDialog', 'success');
    },
    changeSupervisionVisiblefalse() {
      this.$emit('closePblmDetailDialog');
      this.$refs.uploadFile.init();
      this.addPicPanel = false;
    },
    addPic() {
      this.addPicPanel = !this.addPicPanel;
    },
    downloadFiles(downloadFiles, fileName) {
      request
        .get(`file/downFile/` + downloadFiles, { responseType: 'arraybuffer' })
        .then((res) => {
          const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
          const objectUrl = URL.createObjectURL(blob);
          // window.location.href = objectUrl;
          const link = document.createElement('a');
          link.href = objectUrl;
          link.download = fileName; // 文件名
          link.click(); // 下载文件
          URL.revokeObjectURL(objectUrl); // 释放内存
        });
    },
    // 删除图片文件
    removeFile(id, index) {
      console.log(id, 'xxxxxxxxx');

      this.$confirm({
        title: '提示',
        content: '此操作将永久删除该文件, 是否继续?',
        okType: 'warning',
        onOk: () => {
          deleteFileById(id, this.persId).then((res) => {
            if (res.success) {
              this.changeSupervision.gwComFiles.forEach((item) => {
                if (
                  item.fileExt == 'mp3' ||
                  item.fileExt == 'MP3' ||
                  item.fileExt == 'm4a'
                ) {
                  // this.audioArray.splice(index, 1);
                  this.zgAudioArray.splice(index, 1);
                } else if (
                  item.fileExt == 'jpg' ||
                  item.fileExt == 'JPG' ||
                  item.fileExt == 'png' ||
                  item.fileExt == 'PNG' ||
                  item.fileExt == 'JPEG' ||
                  item.fileExt == 'jpeg'
                ) {
                  // this.pictureArray.splice(index, 1);
                  this.zgPictureArray.splice(index, 1);
                } else if (item.fileExt == 'mp4' || item.fileExt == 'MP4') {
                  // this.videoArray.splice(index, 1);
                  this.zgVideoArray.splice(index, 1);
                }
              });
              this.$message.success('删除成功！');
              this.changeSup(this.updateIdXiuGai, 'deleteUpdate');
            } else {
              this.failInfo();
            }
          });
        },
      });
    },
    // 操作成功反馈
    successInfo() {
      this.$message.success('操作成功!');
    },
    // 操作失败反馈
    failInfo(val) {
      this.$message.error(val);
    },
    // 文件上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    closeModal() {
      this.$emit('closePblmDetailDialog');
    },
    getproblemSmallType() {
      const result = [];
      request
        .get('/dc/insp/pblms/getPblmType', {
          params: {
            type: this.pType,
          },
        })
        .then((res) => {
          if (res.success) {
            res.data.forEach((ele) => {
              let haveinspPblmsName = false;
              result.forEach((inspPblm) => {
                if (inspPblm['inspPblmsName'] == ele.inspPblmsName) {
                  //
                  let havechekPoint = false;
                  inspPblm['checkPoints'].forEach((chekPoint) => {
                    if (chekPoint['checkPointName'] == ele.checkPoint) {
                      //
                      chekPoint['pblmDescs'].push({
                        pblmDesc: ele.pblmDesc,
                        sn: ele.sn,
                        guid: ele.guid,
                      });
                      havechekPoint = true;
                    }
                  });
                  if (!havechekPoint) {
                    const newCheckPoint = {};
                    newCheckPoint['checkPointName'] = ele.checkPoint;
                    newCheckPoint['sort2'] = ele.sort2;
                    newCheckPoint['pblmDescs'] = [
                      {
                        pblmDesc: ele.pblmDesc,
                        sn: ele.sn,
                        guid: ele.guid,
                      },
                    ];
                    inspPblm['checkPoints'].push(newCheckPoint);
                  }
                  haveinspPblmsName = true;
                }
              });
              if (!haveinspPblmsName) {
                const haveinspPblmsObj = {};
                haveinspPblmsObj['inspPblmsName'] = ele.inspPblmsName;
                haveinspPblmsObj['sort1'] = ele.sort1;
                haveinspPblmsObj['checkPoints'] = [
                  {
                    checkPointName: ele.checkPoint,
                    sort2: ele.sort2,
                    pblmDescs: [
                      {
                        pblmDesc: ele.pblmDesc,
                        sn: ele.sn,
                        guid: ele.guid,
                      },
                    ],
                  },
                ];
                result.push(haveinspPblmsObj);
              }
            });

            this.problemList = result;
            this.changeSup(this.pblmId);
          }
        });
    },
    getYanZhongChengDu() {
      request
        .post('/dc/insp/pblms/getByPblms', {
          inspPblmsName: this.wenTiLeiBie,
          checkPoint: this.jianChaXiangMu,
          pblmDesc: this.xiangqingmiaoshu,
        })
        .then((res) => {
          if (res.success) {
            this.changeSupervision.inspPblmCate = res.data.inspPblmCate;
          }
        });
    },
    problemListChange: function (item) {
      this.t1 = item;
      this.wenTiLeiBie = item.inspPblmsName;
      this.currentCheckPointList = item.checkPoints;
    },
    currentCheckPointListChange: function (item) {
      this.jianChaXiangMu = item.checkPointName;
      this.currentProblemDescList = item.pblmDescs;
    },
    currentProblemDescListChange: function (item) {
      this.xiangqingmiaoshu = item.pblmDesc;
      console.log(item);
    },
  },
  watch: {
    pblmId(val) {
      this.changeSup(val);
    },
    t3: {
      handler: function (val, oldVal) {
        this.getYanZhongChengDu();
      },
      deep: true,
    },
  },
};
</script>

<style lang='less' scoped>
.scroll_wrapper {
  overflow: hidden;
}

.scroll_wrapper .el-form {
  padding-top: 5px;
  padding-right: 5px;
}

.upload-container {
  width: 100%;
  position: relative;

  .image-uploader {
    width: 35%;
    float: left;
  }

  .image-preview {
    width: 200px;
    height: 200px;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;

    // margin-left: 50px;
    .image-preview-wrapper {
      position: relative;
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }

    .image-preview-action {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      transition: opacity 0.3s;
      cursor: pointer;
      text-align: center;
      line-height: 200px;

      .el-icon-delete {
        font-size: 36px;
      }
    }

    &:hover {
      .image-preview-action {
        opacity: 1;
      }
    }
  }

  .image-app-preview {
    margin-bottom: 10px;
    width: 100%;
    height: 180px;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;

    // margin-left: 50px;
    .app-fake-conver {
      height: 44px;
      position: absolute;
      width: 100%; // background: rgba(0, 0, 0, .1);
      text-align: center;
      line-height: 64px;
      color: #fff;
    }
  }
}

.zgDateExpired {
  color: #FF0000;
}

.zgDateExpiring {
  color: #E6A23C;
}

.zgDateNormal {
  color: #000;
}

.zgDateUndefined {
  /*background: #F56C6C;
    padding: 2px 10px;
    border-radius: 10px;
    color: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;*/
  color: #FF0000;
}

.dataChange span {
  float: right;
  color: grey;
  padding-left: 10px;
  font-weight: normal;
  text-decoration: underline;
  cursor: pointer;
}

.current {
  color: dodgerblue !important;
}
:deep(.ant-modal-body) {
  padding: 10px 24px;
}

:deep(.ant-form-item) {
  margin-bottom: 4px;
}
</style>
