<template>
  <a-layout>
    <div style="min-width: 79%; height: 100%;background-color: #ffffff">
      <div class="content" :style="{ height: dxdcAsideHeight + 'px' }">
        <div class="content-item">
          <div class="content-item-box">
            <div class="item-h">问题详情</div>
            <div class="item-c">
              <p><span>问题编码：</span><span>{{ currentRow.nm }}</span></p>
              <p><span>工程名称：</span><span>{{ currentRow.nm }}</span></p>
              <p><span>行政区划：</span><span>{{ currentRow.adName }}</span></p>
              <p><span>问题归类：</span><span>{{ currentRow.objType }}</span></p>
              <p><span>整改要求：</span><span>{{ currentRow.pblmSggtn }}</span></p>
              <p><span>问题来源：</span><span>{{ currentRow.pblmSource}}</span></p>
              <p><span>是否稽察问题：</span><span>{{ currentRow.isJcFlow==1?'是':'否'}}</span></p>
              <p><span>业务处室：</span><span>{{ currentRow.dutyDept}}</span></p>
            </div>
          </div>
          <div class="content-item-box">
            <div class="item-h">问题多媒体信息</div>
            <div class="item-c">
              <a-tabs style="margin:5px;overflow: auto" :style="{'max-height':tabHeight +'px',}">
                <a-tab-pane :tab="picturetabName" key="1" style="height: 240px;">
                  <a-carousel autoplay style="height:240px;">
                    <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:240px;">
                    <div v-for="(item,index) in videoArray" :key="index">
<!--                      <video-player class="vjs-custom-skin" ref="videoPlayer" :options="item" :playsinline="true">-->
<!--                      </video-player>-->
                      <video ref="video" :src="item.sources[0].src" controls></video>
                    </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="fileArrayColumns" bordered :data-source="fileArray" style="width: 100%;margin: 0 auto;">
                  <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>
        </div>
        <div class="content-item">
          <div class="content-item-box" style="height:40%;">
            <div class="item-h">问题整改描述</div>
            <div class="item-c" style="height: calc(100% - 50px);">
               {{currentRow.zgZgxx}}
            </div>
            <p style="text-align: right;">
              <a-button @click="handleDelete" type="primary" style="float: right;margin-left:10px;">删除</a-button>
              <a-button @click="handleSubmit(1)" type="primary" style="float: right;margin-left:10px;">提交</a-button>
              <a-button @click="handleSubmit(0)" type="primary" style="float: right;margin-left:10px;">退回</a-button>
            </p>
          </div>
          <div class="content-item-box" style="height:60%;">
            <div class="item-h">整改多媒体信息</div>
            <div class="item-c">
              <a-tabs style="margin:5px;overflow: auto" :style="{'max-height':tabHeight +'px',}">
                <a-tab-pane :tab="zgPictureTabName" key="1" style="height: 300px;">
                  <a-carousel autoplay style="height:300px;">
                    <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="zgAudioTabName" 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="zgVideoTabName" key="3">
                  <a-carousel autoplay style="height:300px;">
                    <div v-for="(item,index) in videoArray" :key="index">
                      <video ref="video" :src="item.sources[0].src" controls></video>
<!--                      <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="zgFileTabName" key="4">
                  <a-table :columns="fileArrayColumns" bordered :data-source="fileArray" style="width: 100%;margin: 0 auto;">
                  <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>
        </div>
        <div class="content-item">
          <div class="item-h">问题整改流程</div>
          <div class="item-c">
            <pblmRectifyTimeLine :pblmId="currentRow.pblmId"  :pblmCurrentWorkflowStat="currentRow.pblmCurrentWorkflowStat"/>
          </div>
        </div>
      </div>
    </div>
    <a-modal
      title="审核意见"
      v-model="open"
      @cancel="open = false"
      width="500px">
      <div style="display: flex; align-items: center; justify-content: center;padding: 10px;">
        <span style="width: 80px;">审核意见:</span>
        <a-input v-model:value="form.common" type="textarea" placeholder="请输入审核意见" />
      </div>
      <span slot="footer">
        <a-button @click="submit" type="primary">确定</a-button>
        <a-button @click="open = false">取消</a-button>
      </span>
    </a-modal>
  </a-layout>
</template>

<script>
import VideoPlayer from 'vue-video-player';
import { transferProcStatCodeToName } from '../../api/duChaProcAPI.js';
import { hostUrl } from '../../utils/global_variable.js';
import request from '../../utils/gw_ajax_request.js';
import { dateFormat, formatDateTime2 } from '../../utils/gw_date';
import elaudio from '../../widgets/elAudio.vue';
import pblmRectifyTimeLine from '../PblmRectify/Components/pblmRectifyTimeLine.vue';
import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';
export default {
  components: {
    elaudio,
    pblmRectifyTimeLine,
    VideoPlayer,
  },
  data() {
    return {
      tabHeight: 350,
      dxdcMainHeight: window.innerHeight - 197,
      dxdcAsideHeight: window.innerHeight - 140,
      pictureArray: [],
      audioArray: [],
      videoArray: [],
      fileArray: [],
      audiotabName: '音频(0)',
      videotabName: '视频(0)',
      picturetabName: '图片(0)',
      filetabName: '文件(0)',
      zgPictureArray: [],
      zgAudioArray: [],
      zgVideoArray: [],
      zgFileArray: [],
      zgPictureTabName: '',
      zgAudioTabName: '',
      zgVideoTabName: '',
      zgFileTabName: '',
      loading: false,
      open: false,
      tableData: [],
      form: {
        common: '',
      },
      currentIsag: null,
      currentRow: {
        batch: '',
        pnm: '',
        nm: '',
        adName: '',
        objType: '',
      },
      total: 0,
      fileArrayColumns: [
        {
          title: '文档',
          dataIndex: 'fileName',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      columns5: [
        {
          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: 120,
          align: 'center',
          ellipsis: true,
        },
      ],
    };
  },
  computed: {
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '';
    },
    hasPriv() {
      return this.ownPriv('manage');
    },
    organCode() {
      return localStorage.getItem('currentRlcode')
        ? localStorage.getItem('currentRlcode')
        : '';
    },
    organNm() {
      return localStorage.getItem('currentOrgNm')
        ? localStorage.getItem('currentOrgNm')
        : '';
    },
    isNational() {
      return this.organCode.indexOf('00') == 0;
    },
    orgId() {
      return localStorage.getItem('currentOrgId')
        ? localStorage.getItem('currentOrgId')
        : '';
    },
    hostUrl() {
      return hostUrl;
    },
    formatDateTime() {
      return formatDateTime2;
    },
  },
  created() {},
  mounted() {
    setTimeout(() => {
      this.getPblmDetail();
      this.getDealList();
    }, 1000);
  },
  methods: {
    transferProcStatCodeToName(ActCode) {
      return transferProcStatCodeToName(ActCode);
    },
    submit() {
      request.post(`dc/insp/allObj/getList`, params).then((res) => {
        if (res.success) {
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleDelete() {
      this.$confirm({
        title: '提示',
        content: '确定要删除该数据, 是否继续?',
        okType: 'warning',
        onOk: () => {
          request
            .post(`/bis/insp/villjx/hshlds/delete/${row.id}`)
            .then((res) => {
              if (res.success) {
                this.$message.success('删除成功');
              } else {
                this.$message.warning(res.message);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        },
      });
    },
    handleSubmit(t) {
      this.currentIsag = t;
      this.form.common = '';
      this.open = true;
    },
    getDealList() {
      const id = '05ccbb43cc824fcaa72443273e3a8c16';
      this.loading = true;
      request.get(`/dc/insp/pblmAudit/queryList/${id}/1`).then((res) => {
        if (res.success) {
          this.tableData = res.data;
          this.loading = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    getPblmDetail() {
      const id = '05ccbb43cc824fcaa72443273e3a8c16';
      this.loading = true;
      request.get(`/dc/insp/pblm/${id}`).then((res) => {
        if (res.success) {
          this.currentRow = res.data;
          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 + ')';
            this.filetabName = '文件资料(' + this.videoArray.length + ')';
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    flowHasDo() {
      const params = {};
      request
        .post(`/bis/insp/BisInspFlowToDo/flowHasDo`, params)
        .then((res) => {
          if (res.success) {
            this.$message.success('成功');
          } else {
            this.$message.error(res.message);
          }
        });
    },
    formatDate(tm) {
      return dateFormat(tm, 'yyyy-MM-dd HH:mm:ss');
    },
    downloadFiles(id, fileName) {
      request
        .get(`file/downFile/` + id, { 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); // 释放内存
        });
    },
  },
};
</script>

<style lang='less' scoped>
  .search-wrapper {
    padding: 10px;
    font-weight: bold;
    font-size: 15px;
    span{
      margin-left: 50px;
    }
  }
  .content{
    width: 100%;
    height:calc(100% - 200px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:10px;
    .content-item-box{
       width: 100%;
       height:50%;
    }
    .content-item{
      width: calc(33.33% - 15px);
      border:1px solid #e9e9e9;
      height:100%;
      .item-h{
        width:100%;
        height:40px;
        background: #e9e9e9;
        display: flex;
        font-size:15px;
        align-items: center;
        text-indent: 10px;
        font-weight: bold;
      }
      .item-c{
        width:100%;
        height:calc(100% - 40px);
        overflow: auto;
        padding:10px;
        p{
          span:first-child{
            color: rgba(0, 0, 0, 0.85);
            font-weight: bold;
          }
        }
      }
    }
  }
  video{
    width: 100%;
    height:200px;
  }
</style>
