<template>
  <a-layout>
    <div style="min-width: 79%; height: 100%;background-color: #ffffff">
      <div class="search-wrapper">
        <span>督查批次：{{currentRow.pnm}}</span>
        <span>督查组：{{currentRow.znm}}</span>
        <span>工程名称：{{currentRow.nm}}</span>
        <span>行政区划：{{currentRow.adFullName}}</span>
        <span>督查事项：{{currentRow.objTypeName}}</span>
        <a-button @click="handleIgnore" type="primary" style="float: right;margin-left:10px;">忽略待办</a-button>
        <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>
      </div>
      <div class="content" :style="{ height: dxdcAsideHeight + 'px' }">
        <div class="content-item">
          <div class="item-h">问题详情</div>
          <div class="item-c">
            <p><span>工程名称：</span><span>{{ currentRow.nm }}</span></p>
            <p><span>问题类别：</span><span>{{ currentRow.inspPblmsName }}</span></p>
            <p><span>检查项目：</span><span>{{ currentRow.checkPoint }}</span></p>
            <p><span>问题描述：</span><span>{{ currentRow.pblmDesc }}</span></p>
            <p><span>详细描述：</span><span>{{ currentRow.inspPblmDesc }}</span></p>
            <p><span>上报人：</span><span>{{ currentRow.persName}}</span></p>
            <p><span>是否立行立改：</span><span>{{ currentRow.offlineCancellation==1?'是':'否'}}</span></p>
            <p><span>业务处室：</span><span>{{ currentRow.dutyDept}}</span></p>
            <p><span>建议整改时限：</span><span>{{currentRow.proposeZgDate ? moment(currentRow.proposeZgDate).format('YYYY-MM-DD') : '' }}</span></p>
            <p><span>建议整改要求：</span><span>{{ currentRow.proposeZgZgxx}}</span></p>
          </div>
        </div>
        <div class="content-item">
          <div class="item-h">多媒体信息</div>
          <div class="item-c">
            <a-tabs style="margin:5px;overflow: auto" :style="{'max-height':tableHeight +'px',}">
              <a-tab-pane :tab="picturetabName" key="1" style="height: 350px;">
                <div class="upload-container">
                  <div class="image-preview image-app-preview">
                    <viewer class="image-preview-wrapper" :images="pictureArray">
                      <img title="点击查看大图" v-for="item in pictureArray" :key="item.id" :src="`${hostUrl}${item.filePath}`" >
                    </viewer>
                  </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 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="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 class="content-item">
          <div class="item-h">处置意见</div>
          <div class="item-c">
            <a-table
                    :columns="columns5"
                    :data-source="tableData"
                    :loading="loading"
                    :pagination="false"
                    row-key="id"
                    style="width: 100%;"
                    bordered>
                    <span slot="workflowStat" slot-scope="text" :title="transferProcStatCodeToName(text.workflowStat)">
                      {{ 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" :title="text.moddate ? formatDateTime(text.moddate):''">
                      {{ text.moddate ? formatDateTime(text.moddate) : '' }}
                    </span>
            </a-table>
          </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.auditidea" 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 moment from 'moment';
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 { AddDays, AddMonths, FormatDate } from '../../utils/tm';
import elaudio from '../../widgets/elAudio.vue';
import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';
export default {
  components: {
    elaudio,
    VideoPlayer,
  },
  data() {
    return {
      moment,
      tableHeight: window.innerHeight - 240,
      dxdcMainHeight: window.innerHeight - 197,
      dxdcAsideHeight: window.innerHeight - 140,
      globalNo: this.$route.query.globalNo,
      msgNo: this.$route.query.msgNo?.endsWith(localStorage.getItem('persId'))
        ? this.$route.query.msgNo.slice(
            0,
            -localStorage.getItem('persId').length,
          )
        : this.$route.query.msgNo,
      nextMonth: '',
      pictureArray: [],
      audioArray: [],
      videoArray: [],
      fileArray: [],
      audiotabName: '音频(0)',
      videotabName: '视频(0)',
      picturetabName: '图片(0)',
      filetabName: '文件(0)',
      loading: false,
      open: false,
      tableData: [],
      form: {
        auditidea: '',
        isag: '',
        pblmId: '',
        moduserid: '',
      },
      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',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '处理环节',
          dataIndex: 'workflowStat',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '处理动作',
          dataIndex: 'isag',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '处理意见',
          dataIndex: 'auditidea',
          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() {
      if (this.form.isag === 1) {
        this.form.auditidea = !this.form.auditidea
          ? '无意见'
          : this.form.auditidea;
      } else {
        if (!this.form.auditidea) {
          this.$message.warning('请输入审核意见！');
          return false;
        }
      }
      request.post(`/dc/insp/pblm/submit`, this.form).then((res) => {
        if (res.success) {
          this.$message.success(this.form.isag == 1 ? '提交成功' : '退回成功');
          this.$eventBus.emit('affairs-center', {
            type: 'closeModal',
            data: {},
          });
          this.open = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleSubmit(t) {
      this.form.isag = t;
      this.form.auditidea = '';
      this.form.pblmId = this.$route.query.msgNo?.endsWith(
        localStorage.getItem('persId'),
      )
        ? this.$route.query.msgNo.slice(
            0,
            -localStorage.getItem('persId').length,
          )
        : this.$route.query.msgNo;
      this.form.moduserid = this.persId;
      this.open = true;
    },
    handleIgnore() {
      this.$confirm({
        title: '提示',
        content: '确定要忽略该待办, 是否继续?',
        okType: 'warning',
        onOk: () => {
          const params = {
            globalNo: this.globalNo,
            msgNo: this.$route.query.msgNo,
          };
          request
            .post(`/bis/insp/BisInspFlowToDo/ignore`, params)
            .then((res) => {
              if (res.success) {
                this.$message.success('忽略成功');
                this.$eventBus.emit('affairs-center', {
                  type: 'closeModal',
                  data: {},
                });
              } else {
                this.$message.warning(res.message);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        },
      });
    },
    handleDelete() {
      this.$confirm({
        title: '提示',
        content: '确定要删除该待办, 是否继续?',
        okType: 'warning',
        onOk: () => {
          const msgNo = this.$route.query.msgNo?.endsWith(
            localStorage.getItem('persId'),
          )
            ? this.$route.query.msgNo.slice(
                0,
                -localStorage.getItem('persId').length,
              )
            : this.$route.query.msgNo;
          request
            .get(`/dc/insp/pblm/delete/${msgNo}/${this.persId}`)
            .then((res) => {
              if (res.success) {
                this.$message.success('删除成功');
                this.$eventBus.emit('affairs-center', {
                  type: 'closeModal',
                  data: {},
                });
              } else {
                this.$message.warning(res.message);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        },
      });
    },
    getDealList() {
      this.loading = true;
      const msgNo = this.$route.query.msgNo?.endsWith(
        localStorage.getItem('persId'),
      )
        ? this.$route.query.msgNo.slice(
            0,
            -localStorage.getItem('persId').length,
          )
        : this.$route.query.msgNo;
      request.get(`/dc/insp/pblmAudit/queryList/${msgNo}/1`).then((res) => {
        if (res.success) {
          this.tableData = res.data;
          this.loading = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    getPblmDetail() {
      this.loading = true;
      const msgNo = this.$route.query.msgNo?.endsWith(
        localStorage.getItem('persId'),
      )
        ? this.$route.query.msgNo.slice(
            0,
            -localStorage.getItem('persId').length,
          )
        : this.$route.query.msgNo;
      request.get(`/dc/insp/pblm/${msgNo}`).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);
        }
      });
    },
    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{
      width: calc(33.33% - 5px);
      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);
        padding:10px;
        p{
          span:first-child{
            color: rgba(0, 0, 0, 0.85);
            font-weight: bold;
          }
        }
      }
    }
  }
  .upload-container {
    width: 100%;
    max-height: 100%;
    overflow: auto;
    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;
      }
    }
  }
  video{
    width: 100%;
    height:200px;
  }
</style>
