<template>
  <div
    id="eventDetailBody"
    style="padding: 3px;"
    :style="{ 'height': testHeight + 'px', }"
    class="problem_detail_wrapper">
    <div style="height: 75%;width: 100%;">
      <div style="width:46%;float:left;border:1px solid #d5d5ff;margin-right:5px;height: 100%;">
        <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">基本信息</p>
        <a-form
          label-align="right"
          :model="problemDetail"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          style="overflow-y: auto;max-height:90%;margin:5px;">
          <a-form-item :label="this.objType == '6' ? '水闸名称:':'水库名称:'">
            <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{ problemDetail.nm }}</p>
          </a-form-item>
          <a-form-item label="问题类别">
            <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{ problemDetail.inspPblmsName }}
            </p>
          </a-form-item>
          <a-form-item label="检查项目">
            <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{ problemDetail.checkPoint }}</p>
          </a-form-item>
          <a-form-item label="问题描述">
            <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{ problemDetail.pblmDesc }}</p>
          </a-form-item>
          <a-form-item label="详细描述">
            <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{ problemDetail.inspPblmDesc }}
            </p>
          </a-form-item>
          <a-form-item label="是否为典型问题">
            <span v-if="problemDetail.ifCasePblm == 1">典型</span>
            <span v-if="problemDetail.ifCasePblm == 0">非典型</span>
          </a-form-item>
          <a-form-item label="严重程度">
            <span
              style="padding: 3px 10px;background:#27C19F;border-radius:15px;color:rgba(255,255,255,1)"
              v-if="problemDetail.inspPblmCate == 0">一般</span>
            <span
              style="padding: 3px 10px;background:#E6A23C;border-radius:15px;color:rgba(255,255,255,1)"
              v-if="problemDetail.inspPblmCate == 1">较重</span>
            <span
              style="padding: 3px 10px;background:#F56C6C;border-radius:15px;color:rgba(255,255,255,1)"
              v-if="problemDetail.inspPblmCate == 2">严重</span>
            <span
              style="padding: 3px 10px;background:#F56C6C;border-radius:15px;color:rgba(255,255,255,1)"
              v-if="problemDetail.inspPblmCate == 3">特别严重</span>
          </a-form-item>
          <a-form-item label="处理状态">
            <span v-if="problemDetail.pblmStat == 1">已上报</span>
            <span v-else-if="problemDetail.pblmStat == 0">未上报</span>
          </a-form-item>
          <a-form-item label="备注">
            <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">{{ problemDetail.note }}</p>
          </a-form-item>
          <a-form-item label="上报人">
            <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">{{ problemDetail.persName }}</p>
          </a-form-item>
          <a-form-item label="是否已立行立改" v-if="isAll" class="model_item">
            <a-checkbox v-if="activeTab == 'IQLTab'" :checked="offlineCancellation == 1" @change="onChangeOffline"></a-checkbox>
            <a-checkbox v-else :checked="offlineCancellation == 1"></a-checkbox><p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">{{ problemDetail.lxlgxx }}</p>
          </a-form-item>
          <a-form-item label="整改时限" v-if="isAll">
            <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">{{ formatD(zgDate) }}</p>
            <!-- <a-date-picker v-model:value="zgDate" @change="onChangeZgData" format="YYYY-MM-DD" value-format="YYYY-MM-DD" allow-clear /> -->
          </a-form-item>
          <a-form-item label="整改要求" v-if="isAll">
            <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">{{ pblmSggtn }}</p>
            <!-- <a-input v-model:value="pblmSggtn" @pressEnter="getPblmSggtn" @blur="getPblmSggtn" allow-clear /> -->
          </a-form-item>
        </a-form>
      </div>
      <div style="width:52%;float:left;border:1px solid #d5d5ff;height: 100%;overflow-y: auto;">
        <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">多媒体信息</p>
        <a-tabs style="margin:0 5px;">
          <a-tab-pane :tab="picturetabName" key="1">
            <div style="overflow-y:auto;overflow-x:hidden;max-height:150px;padding:10px;">
              <div class="upload-container" id="imgView2">
                <div v-for="(item, index) in pictureArray" :key="index" class="image-preview image-app-preview">
                  <div class="image-preview-wrapper">
<!--                    <a :href="`${hostUrl}/${item.filePath}`" target="_blank">-->
                      <img :src="`${hostUrl}/${item.filePath}`" />
<!--                    </a>-->
                  </div>
                </div>
                <div v-if="pictureArray.length == 0">
                  <p>暂无图片信息</p>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane :tab="audiotabName" key="2">
            <elaudio
              v-for="(audio, index) in audioArray"
              :key="index"
              style="margin-left:15%"
              :theUrl="`${hostUrl}/${audio.filePath}`"></elaudio>
            <p v-if="audioArray.length == 0">暂无音频信息</p>
          </a-tab-pane>
          <a-tab-pane :tab="videotabName" key="3">
            <a-carousel autoplay style="height:350px;">
              <div v-for="(item, index) in videoArray" :key="index">
                <video-player class="vjs-custom-skin" ref="videoPlayer" :options="item" :playsinline="true">
                </video-player>
              </div>
              <div v-if="videoArray.length == 0">
                <p>暂无视频信息</p>
              </div>
            </a-carousel>
          </a-tab-pane>
          <a-tab-pane :tab="filetabName" key="4">
            <a-table :columns="columns" bordered :data-source="fileArray" style="width: 100%;margin: 0 auto;">
              <span slot="action" slot-scope="text">
                <p>
                  <a :href="`${hostUrl}/${text.filePath}`" target="_blank" rel="noopener noreferrer">
                    {{ text.fileName }}
                  </a>
                </p>
              </span>
            </a-table>
          </a-tab-pane>
        </a-tabs>
        <p v-if="offlineCancellation == 1" style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">立行立改信息</p>
        <a-tabs v-if="offlineCancellation == 1" style="margin:0 5px;">
          <a-tab-pane :tab="picturetabName1" key="1">
            <div style="overflow-y:auto;overflow-x:hidden;max-height:150px;padding:10px;">
              <div class="upload-container" id="imgView3">
                <div v-for="(item, index) in pictureArray1" :key="index" class="image-preview image-app-preview">
                  <div class="image-preview-wrapper">
<!--                    <a :href="`${hostUrl}/${item.filePath}`" target="_blank">-->
                      <img :src="`${hostUrl}/${item.filePath}`" />
<!--                    </a>-->
                  </div>
                </div>
                <div v-if="pictureArray1.length == 0">
                  <p>暂无图片信息</p>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane :tab="audiotabName1" key="2">
            <elaudio
              v-for="(audio, index) in audioArray1"
              :key="index"
              style="margin-left:15%"
              :theUrl="`${hostUrl}/${audio.filePath}`"></elaudio>
            <p v-if="audioArray1.length == 0">暂无音频信息</p>
          </a-tab-pane>
          <a-tab-pane :tab="videotabName1" key="3">
            <a-carousel autoplay style="height:350px;">
              <div v-for="(item, index) in videoArray1" :key="index">
                <video-player class="vjs-custom-skin" ref="videoPlayer" :options="item" :playsinline="true">
                </video-player>
              </div>
              <div v-if="videoArray1.length == 0">
                <p>暂无视频信息</p>
              </div>
            </a-carousel>
          </a-tab-pane>
          <a-tab-pane :tab="filetabName1" key="4">
            <a-table :columns="columns2" bordered :data-source="fileArray1" style="width: 100%;margin: 0 auto;">
              <span slot="action" slot-scope="text">
                <p>
                  <a :href="`${hostUrl}/${text.filePath}`" target="_blank" rel="noopener noreferrer">
                    {{ text.fileName }}
                  </a>
                </p>
              </span>
            </a-table>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
    <div style="width: 100%;height: 23%; margin-top: 2%;">
      <p style="font-weight:bolder;padding:3px;background-color:#d5d5ff;">处置意见</p>
      <div style="overflow-y: auto; max-height:86%;">
        <a-table
          :columns="columns1"
          :data-source="ApprovalHistory"
          :pagination="false"
          row-key="id"
          style="width: 100%;">
          <span slot="workflowStat" slot-scope="text">
            {{ transferProcStatCodeToName(text.workflowStat) }}
          </span>
          <span slot="isag" slot-scope="text">
            <span
              style="padding: 3px 10px;background:#00ff00;border-radius:15px;color:rgba(0,0,0,1)"
              v-if="text.isag == 1">同意</span>
            <span
              style="padding: 3px 10px;background:#ffcc33;border-radius:15px;color:rgba(0,0,0,1)"
              v-if="text.isag == 0">退回</span>
          </span>
          <span slot="moddate" slot-scope="text">
            {{ text.moddate ? formatDateTime(text.moddate) : '' }}
          </span>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import Viewer from 'viewerjs';
import {
  deleteFileById,
  getFileByBiz,
  getSuperviseGroup,
  getsuperviseinspect,
  showDetailsXq,
} from '../../api/duChaAPI.js';
import { transferProcStatCodeToName } from '../../api/duChaProcAPI';
import { hostUrl } from '../../utils/global_variable';
import request from '../../utils/gw_ajax_request';
import { formatD, formatDateTime2 } from '../../utils/gw_date';
import elaudio from '../../widgets/elAudio.vue';
import 'viewerjs/dist/viewer.css';
export default {
  props: ['details', 'problemId', 'objType', 'isAll', 'activeTab'],
  components: {
    elaudio,
  },
  data() {
    return {
      testHeight: window.innerHeight * 0.6,
      activeName: '0',
      superviseinspect: {},
      fileList: [],
      groupingList: [],
      fileListloading: false,
      groupListloading: false,
      problemDetail: {
        checkPoint: '',
        collTime: '',
        commonFileIds: '',
        cwsCode: '',
        cwsName: '',
        dataStat: '',
        endTime: '',
        fileNo: '',
        fileNoNumber: '',
        gwComFiles: '',
        ifCasePblm: '',
        inspAddDesc: '',
        inspGroupId: '',
        inspPblmCate: '',
        inspPblmCode: '',
        inspPblmDesc: '',
        inspPblmName: '',
        inspPblmOrgName: '',
        inspPblmType: '',
        inspPblmsName: '',
        nm: '',
        note: '',
        objId: '',
        objNm: '',
        objType: '',
        pblmDesc: '',
        pblmId: '',
        pblmLat: '',
        pblmLong: '',
        pblmPersName: '',
        pblmStat: '',
        pblmsId: '',
        pblmsTypeId: '',
        persName: '',
        pguid: '',
        recPers: '',
        regid: '',
        reviConc: '',
        reviOpin: '',
        reviOrgGuid: '',
        srcDesc: '',
        startTime: '',
        state: '',
        villType: '',
        villageCode: '',
      },
      pictureArray: [],
      audioArray: [],
      videoArray: [],
      fileArray: [],
      ApprovalHistory: [],
      audiotabName: '',
      videotabName: '',
      picturetabName: '',
      filetabName: '',
      playerOptions: {
        height: '120',
        autoplay: true,
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        labelName: '',
        sources: [
          {
            type: 'video/mp4',
            // mp4
            src: 'http://vjs.zencdn.net/v/oceans.mp4',
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
          {
            type: 'video/mp4',
            // mp4
            src: 'http://vjs.zencdn.net/v/oceans.mp4',
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
          {
            type: 'video/mp4',
            // mp4
            src: 'http://vjs.zencdn.net/v/oceans.mp4',
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
          {
            type: 'video/mp4',
            // mp4
            src: 'http://vjs.zencdn.net/v/oceans.mp4',
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
        ],
      },
      columns: [
        {
          title: '文档',
          dataIndex: 'action',
          align: 'center',
          ellipsis: true,
        },
      ],
      columns1: [
        {
          title: '处理人',
          dataIndex: 'moduserid',
          width: 60,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '处理环节',
          dataIndex: 'workflowStat',
          width: 60,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '处理动作',
          dataIndex: 'isag',
          width: 60,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '处理意见',
          dataIndex: 'auditidea',
          width: 60,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '处理时间',
          dataIndex: 'moddate',
          width: 60,
          align: 'center',
          ellipsis: true,
        },
      ],
      columns2: [
        {
          title: '文档',
          dataIndex: 'action',
          align: 'center',
          ellipsis: true,
        },
      ],
      offlineCancellation: false,
      zgDate: null,
      pblmSggtn: '',
      pictureArray1: [],
      audioArray1: [],
      videoArray1: [],
      fileArray1: [],
      audiotabName1: '',
      videotabName1: '',
      picturetabName1: '',
      filetabName1: '',
    };
  },
  computed: {
    hostUrl() {
      return hostUrl;
    },
    formatDateTime() {
      return formatDateTime2;
    },
    formatD() {
      return formatD;
    },
  },
  watch: {
    problemId: function () {
      console.log(this.activeTab, 'activeTab');
      // this.problemDetail = {}
      // this.pictureArray = []
      // this.audioArray = []
      // this.videoArray = []
      // this.fileArray = []
      // this.ApprovalHistory = []
      // this.showDetails()
      // this.getApprovalHistory()
    },
  },
  mounted() {
    // this.problemDetail = {}
    // this.pictureArray = []
    // this.audioArray = []
    // this.videoArray = []
    // this.fileArray = []
    // this.ApprovalHistory = []
    // this.showDetails()
    // this.getApprovalHistory()
  },
  methods: {
    startData() {
      this.problemDetail = {};
      this.pictureArray = [];
      this.audioArray = [];
      this.videoArray = [];
      this.fileArray = [];
      this.ApprovalHistory = [];
      this.showDetails();
      this.getApprovalHistory();
    },
    getApprovalHistory() {
      request
        .get('/dc/insp/pblmAudit/queryList/' + this.problemId + '/1')
        .then((res) => {
          if (res.success) {
            this.ApprovalHistory = res.data;
          }
        });
    },
    transferProcStatCodeToName(ActCode) {
      return transferProcStatCodeToName(ActCode);
    },
    /*  checkProcStat() {
        this.isModifyAct = (parseInt(this.changeSupervision.workflowStat) == 11 ||
          parseInt(this.changeSupervision.workflowStat) == 12 ||
          parseInt(this.changeSupervision.workflowStat) == 15 ||
          parseInt(this.changeSupervision.workflowStat) == 18);
        //console.log("proc status : " + parseInt(this.changeSupervision.workflowStat) + " - " + this.isModifyAct);
        this.canGoBack = (parseInt(this.changeSupervision.workflowStat) == 11 ||
          parseInt(this.changeSupervision.workflowStat) == 12 ||
          parseInt(this.changeSupervision.workflowStat) == 13 ||
          parseInt(this.changeSupervision.workflowStat) == 15 ||
          parseInt(this.changeSupervision.workflowStat) == 18 ||
          parseInt(this.changeSupervision.workflowStat) == 14)
      }, */
    init() {
      this.activeName = '0';
    },
    showDetails() {
      this.problemDetail = {};
      this.pictureArray = [];
      this.audioArray = [];
      this.videoArray = [];
      this.fileArray = [];
      this.pictureArray1 = [];
      this.audioArray1 = [];
      this.videoArray1 = [];
      this.fileArray1 = [];
      showDetailsXq(this.problemId).then((res) => {
        this.problemDetail = res.data;
        this.offlineCancellation = res.data.offlineCancellation;
        this.zgDate = formatD(res.data.zgDate);

        this.pblmSggtn = res.data.pblmSggtn;
        if (JSON.stringify(res.data.gwComFiles) !== '{}') {
          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({
                height: '350',
                autoplay: false,
                muted: true,
                language: 'en',
                playbackRates: [0.7, 1.0, 1.5, 2.0],
                sources: [
                  {
                    type: 'video/mp4',
                    // mp4
                    src: `${this.hostUrl}/${item.filePath}`,
                    // src: "http://sv.goldenwater.com.cn/" + item.filePath,
                    // webm
                    // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                  },
                ],
              });
            } 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 + ')';
          this.$nextTick(() => {
            var ViewerDom = document.getElementById('imgView2');
            if (ViewerDom) {
              var viewer = new Viewer(ViewerDom, {});
            }
          });
          res.data.gwComFiles2.forEach((item) => {
            if (
              item.fileExt == 'mp3' ||
              item.fileExt == 'MP3' ||
              item.fileExt == 'm4a'
            ) {
              this.audioArray1.push(item);
            } else if (
              item.fileExt == 'jpg' ||
              item.fileExt == 'JPG' ||
              item.fileExt == 'png' ||
              item.fileExt == 'PNG' ||
              item.fileExt == 'jpeg' ||
              item.fileExt == 'JPEG'
            ) {
              this.pictureArray1.push(item);
            } else if (item.fileExt == 'mp4' || item.fileExt == 'MP4') {
              this.videoArray1.push({
                height: '350',
                autoplay: false,
                muted: true,
                language: 'en',
                playbackRates: [0.7, 1.0, 1.5, 2.0],
                sources: [
                  {
                    type: 'video/mp4',
                    // mp4
                    src: `${this.hostUrl}/${item.filePath}`,
                    // src: "http://sv.goldenwater.com.cn/" + item.filePath,
                    // webm
                    // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                  },
                ],
              });
            } else {
              this.fileArray1.push(item);
            }
          });
          this.$nextTick(() => {
            //debugger
            var ViewerDom = document.getElementById('imgView3');
            if (ViewerDom) {
              var viewer = new Viewer(ViewerDom, {});
            }
          });
          this.picturetabName1 = '图片资料(' + this.pictureArray1.length + ')';
          this.audiotabName1 = '音频资料(' + this.audioArray1.length + ')';
          this.videotabName1 = '视频资料(' + this.videoArray1.length + ')';
          this.filetabName1 = '文件资料(' + this.fileArray1.length + ')';
        }
      });
    },
    onChangeOffline(e) {
      if (e.target.checked) {
        this.offlineCancellation = 1;
      } else {
        this.offlineCancellation = 0;
      }
      this.updateOffline();
    },
    onChangeZgData(e) {
      this.zgDate = e;
      this.updateOffline();
    },
    getPblmSggtn(e) {
      this.pblmSggtn = e.target.value;
      this.updateOffline();
    },
    updateOffline() {
      const params = {
        offlineCancellation: this.offlineCancellation,
        zgDate: this.zgDate,
        pblmId: this.problemDetail.pblmId,
        pblmSggtn: this.pblmSggtn,
      };
      request.post('/dc/insp/pblm/page/update', params).then((res) => {
        if (res.success) {
          this.$message.success('修改成功!');
          this.showDetails();
          this.getApprovalHistory();
        } else {
          this.$message.error(res.success);
        }
      });
    },
  },
};
</script>

<style lang='less' scoped>
@import '../../assets/style/global.css';
.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%;
      }
    }

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

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

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

  .image-app-preview {
    margin-bottom: 10px;
    width: 260px;
    height: 130px;
    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;
    }
  }
}
</style>
