<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;height:92%;margin:5px;">
          <a-form-item label="对象名称">
            <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="严重程度" v-if="objType=='109'">
            <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">
            <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">{{ formatD(problemDetail.zgDate) }}</p>
          </a-form-item>
          <a-form-item label="整改要求" v-if="isAll">
            <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">{{ problemDetail.pblmSggtn }}</p>
          </a-form-item>
        </a-form>
      </div>
      <div style="width:52%;float:left;border:1px solid #d5d5ff;height: 100%;">
        <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">多媒体信息</p>
        <a-tabs style="overflow-y: auto;margin:5px;" :style="{ 'max-height': testHeight - 40 + 'px', }">
          <a-tab-pane :tab="picturetabName" key="1" style="height: 350px;">
            <a-carousel autoplay style="height:350px;">
              <div v-for="(item, index) in pictureArray" :key="index">
                <a :href="`${hostUrl}/${item.filePath}`" target="_blank">
                  <img style="height:100%;" :src="`${hostUrl}/${item.filePath}`" alt>
                </a>
              </div>
              <div v-if="pictureArray.length == 0">
                <p>暂无图片信息</p>
              </div>
            </a-carousel>
          </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>
      </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 {
  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';

export default {
  props: ['details', 'problemId', 'objType', 'isAll'],
  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,
        },
      ],
    };
  },
  computed: {
    hostUrl() {
      return hostUrl;
    },
    formatDateTime() {
      return formatDateTime2;
    },
    formatD() {
      return formatD;
    },
  },
  watch: {
    problemId: function () {
      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: {
    getApprovalHistory() {
      // console.log("问题ID" + this.bisInspPblmAudit.pblmId);
      request
        .get('/dc/insp/pblmAudit/queryList/' + this.problemId + '/1')
        .then((res) => {
          if (res.success) {
            // this.checkProcStat();
            // console.log(res.data);
            this.ApprovalHistory = res.data;
            console.log(this.ApprovalHistory, 98989);
          }
        });
    },
    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() {
      showDetailsXq(this.problemId).then((res) => {
        this.problemDetail = res.data;
        console.log(this.hostUrl);
        if (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'
            ) {
              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 + ')';
        }
      });
    },
  },
};
</script>

<style lang='less' scoped>
@import '../../assets/style/global.css';
</style>
