<template>
  <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" :append-to-body="appendToBody" title="隐患详细信息" fullscreen>
    <div class="app-container">
      <div id="printi" >
        <div class="mb-20">
          <div class="level-title">
            <h1>{{ pd.INSPECTION_SUBJECT }}现场安全检查记录</h1>
          </div>
          <div class="mb-20">
            <table class="table-ui">
              <tr>
                <td class="tbg" width="12%">被检查单位</td>
                <td width="38%">{{ pd.INSPECTED_CORPINFO_ID_NAME }}</td>
                <td class="tbg" width="15%">被检查单位现场负责人</td>
                <td width="35%">{{ pd.INSPECTED_SITEUSER_NAME }}</td>
              </tr>
              <tr>
                <td class="tbg">检查场所</td>
                <td colspan="3">{{ pd.INSPECTION_PLACE }}</td>
              </tr>
              <tr>
                <td class="tbg">牵头检查部门</td>
                <td>{{ pd.INSPECTION_LEADDEPARTMENT_NAME }}</td>
                <td class="tbg">检查人员</td>
                <td>{{ pd.INSPECTION_USER_NAME }}</td>
              </tr>
              <tr>
                <td class="tbg">检查类型</td>
                <td>{{ pd.INSPECTION_TYPE_NAME }}</td>
                <td class="tbg">检查时间</td>
                <td>{{ formatTime(pd.INSPECTION_TIME_START) }} 至 {{ formatTime(pd.INSPECTION_TIME_END) }}</td>
              </tr>

              <tr>
                <td class="tbg">记录填写时间</td>
                <td colspan="3">{{ pd.CREATTIME }}</td>
              </tr>

              <tr v-if="pd.situationList">
                <td colspan="4" style="padding: 0;">
                  <table class="table-vi">
                    <tr>
                      <th>检查情况</th>
                    </tr>
                    <tr v-for="(item,index) in pd.situationList" :key="'situation'+index">
                      <td>{{ index + 1 }}. {{ item.SITUATION }}</td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr v-if="false">
                <td colspan="4" style="padding: 0;">
                  <table class="table-vi">
                    <tr>
                      <th colspan="5">发现问题</th>
                    </tr>
                    <tbody v-for="(item, index) in pd.hiddenList" :key="'hidden'+index">
                      <tr>
                        <td rowspan="7" align="center" style="font-size: larger;font-weight: bolder">{{ index+1 }}</td>
                        <td class="tbg">隐患发现人</td>
                        <td v-if="item.CREATOR_NAMES">{{ item.CREATOR_NAMES }}</td>
                        <td v-else>{{ item.CREATOR_NAME }}</td>
                        <td class="tbg">隐患级别</td>
                        <td>{{ item.HIDDENLEVEL_NAME }}</td>
                      </tr>
                      <tr>
                        <td class="tbg">隐患描述</td>
                        <td colspan="3">{{ item.HIDDENDESCR }}</td>
                      </tr>
                      <tr>
                        <td class="tbg">隐患发现时间</td>
                        <td>{{ item.DISCOVERYTIME }}</td>
                        <td class="tbg">隐患部位</td>
                        <td>{{ item.HIDDENPART_NAME?item.HIDDENPART_NAME: item.HIDDENPART }}</td>
                      </tr>
                      <tr>
                        <td class="tbg">隐患位置描述</td>
                        <td>{{ item.POSITIONDESC }}</td>
                        <td class="tbg">是否是相关方</td>
                        <td>{{ item.ISRELEVANT ==='1'?'是':'否' }}</td>
                      </tr>
                      <tr>
                        <td class="tbg">隐患类型</td>
                        <td>{{ item.HIDDENTYPE_NAME }}</td>
                      <!--<td class="tbg">隐患类型2</td>
                      <td>{{ item.HIDDENTYPE2_NAME }}</td>-->
                      </tr>
                      <tr>
                        <td class="tbg">隐患位置</td>
                        <td colspan="3">
                          <el-button icon="el-icon-place" circle @click="showMap(item)" />
                          <span>
                            经度:{{ item.LONGITUDE }} , 纬度:{{ item.LATITUDE }}
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td class="tbg">隐患图片</td>
                        <td colspan="3">
                          <div v-for="(data, indexImg) in item.hiddenImgs" :key="'hd'+index+'Img'+indexImg" class="demo-image__preview" style="float: left; margin-right: 5px">
                            <el-image
                              :src="config.fileUrl + data.FILEPATH"
                              :preview-src-list="new Array(config.fileUrl + data.FILEPATH)"
                              style="width: 100px; height: 100px"/>
                          </div>
                        </td>
                      </tr>
                      <tr v-if="item.hiddenVideos">
                        <td class="tbg">隐患视频</td>
                        <td colspan="3">

                          <div v-for="(data, indexV) in item.hiddenVideos" :key="'hd'+index+'Img'+indexV" class="demo-image__preview" style="float: left; margin-right: 5px">
                            <el-button icon="el-icon-video-camera" circle @click="goViewVideo(data)"/>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
              <tr v-if="pd.hiddenList">
                <td colspan="4" style="padding: 0;">
                  <table class="table-vi">
                    <tr>
                      <th colspan="5">发现问题</th>
                    </tr>
                    <tbody v-for="(item) in pd.hiddenList" :key="item.HIDDEN_ID" class="no-print">
                      <tr>
                        <td class="tbg">隐患描述</td>
                        <td>{{ item.HIDDENDESCR }}</td>
                        <td class="tbg">隐患部位</td>
                        <td>{{ item.HIDDENPART_NAME?item.HIDDENPART_NAME:item.HIDDENPART }}</td>
                        <td class="tbg">
                          <el-button type="success" icon="el-icon-check" size="mini" @click="goView(item.HIDDEN_ID)">查看</el-button>
                        </td>
                      </tr>
                    </tbody>
                    <tr v-for="(item,index) in pd.hiddenList" :key="'hidden'+index" class="no-tr-show">
                      <td>{{ index + 1 }}. {{ item.HIDDENDESCR }}</td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </div>

          <div v-if="pd.inspectorList && pd.inspectorList.length > 0" class="level-title">
            <h1>检查人员核实情况</h1>
          </div>
          <div v-if="pd.inspectorList && pd.inspectorList.length > 0" class="mb-20">
            <table class="table-ui">
              <tr>
                <th>序号</th>
                <th>核实人员</th>
                <th>核实时间</th>
                <th>核实意见</th>
                <th>签字</th>
              </tr>
              <tr v-for="(item, index) in pd.inspectorList" :key="'inspector'+index">
                <td>{{ index+1 }}</td>
                <td>{{ item.INSPECTION_USER_NAME }}</td>
                <td>{{ item.INSPECTION_USER_SIGN_TIME }}</td>
                <td>{{ item.INSPECTION_USER_OPINION }}</td>
                <td>
                  <el-image
                    :src="config.fileUrl + item.INSPECTION_USER_SIGN_IMG"
                    :preview-src-list="new Array(config.fileUrl + item.INSPECTION_USER_SIGN_IMG)"
                    style="width: 100px; height: 100px"/>
                </td>
              </tr>
            </table>
          </div>

          <div v-if="pd.INSPECTED_SITEUSER_SIGN_TIME" class="level-title">
            <h1>被检查单位现场负责人确认情况</h1>
          </div>
          <div v-if="pd.INSPECTED_SITEUSER_SIGN_TIME" class="mb-20">
            <table class="table-ui">
              <tr>
                <td class="tbg">被检查单位现场负责人（签字）：</td>
                <td>
                  <el-image
                    :src="config.fileUrl + pd.INSPECTED_SITEUSER_SIGN_IMG"
                    :preview-src-list="new Array(config.fileUrl + pd.INSPECTED_SITEUSER_SIGN_IMG)"
                    style="width: 100px; height: 100px"/>
                </td>
              </tr>
            </table>
          </div>

        </div>

        <el-dialog :visible.sync="dialogMap" :title="'隐患位置'" width="80%">
          <div>
            <iframe id="iframe" ref="iframe" :src="iframeSrc" frameborder="0" allowtransparency="true" width="100%" height="600"/>
          </div>
        </el-dialog>

        <el-dialog :visible.sync="dialogViewVideo" title="视频" width="800px" @close="closePlay">
          <div>
            <video-player
              ref="hdVideoPlayer"
              :playsinline="true"
              :options="playerOptions"
              class="video-player vjs-custom-skin"/>
          </div>
        </el-dialog>

        <video id="videoPlayer" controls="controls" crossOrigin="anonymous" style="display: none">
          <source id="videoSource" src="" type="video/mp4">
        </video>
        <canvas id="canvasVideo" style="display: none"/>
      </div>
    </div>
    <div class="ui-height" />
    <div class="ui-foot" style="width:100%;z-index: 2019;left: 0%">
      <el-button v-print="'#printi'" type="primary">打 印</el-button>
      <el-button plain type="info" @click="goBack">返 回</el-button>
    </div>
    <information ref="information"/>
  </el-dialog>
</template>

<script>
import { requestFN } from '@/utils/request'
import dateformat from '@/utils/dateformat'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import information from '../../../hiddenUtil/information'

export default {
  components: { information, videoPlayer },
  data() {
    return {
      dialogVisible: false,
      appendToBody: true,
      listLoading: true,
      config: config,
      iframeSrc: '',
      dialogMap: false,
      pd: {
        INSPECTION_SUBJECT: '', // 检查标题
        INSPECTION_SOURCE: '4', // 检查来源（4-监管端 5-企业端）
        inspectorList: [], // 检查人员
        INSPECTION_ORIGINATOR_NAME: '', // 检查发起人
        INSPECTED_DEPARTMENT_NAME: '', // 被检查单位
        INSPECTED_SITEUSER_NAME: '', // 被检查单位现场负责人
        INSPECTED_EXPLAIN: '', // 申辩内容
        INSPECTED_SITEUSER_SIGN_IMG: '', // 被检查单位现场负责人签字
        INSPECTED_SITEUSER_SIGN_TIME: '', // 被检查单位现场负责人签字时间
        INSPECTION_TYPE_NAME: '', // 检查类型
        INSPECTION_PLACE: '', // 检查场所
        INSPECTION_TIME_START: '', // 检查开始时间
        INSPECTION_TIME_END: '', // 检查结束时间
        INSPECTION_STATUS: '', // 状态(0.暂存 1.检查人待确认、2.被检查人待确认、3.归档 -1.检查人异议打回 -2被检查人申辩)
        situationList: [''], // 检查情况
        hiddenList: [] // 隐患信息集合
      },
      dialogViewVideo: false,
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4', // 类型
          src: '' // url地址
        }],
        poster: '', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: true, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      }
    }
  },
  created() {
    this.iframeSrc = this.config.weburl + 'static/mapshow.html?t=' + Math.random()
  },
  methods: {
    init(id) {
      this.dialogVisible = true
      this.getData(id)
    },
    formatTime(date, column) {
      if (date) {
        return dateformat(date, 'YYYY年MM月DD日HH时mm分')
      } else {
        return ''
      }
    },
    getData(id) {
      return new Promise((resolve) => {
        requestFN(
          '/safetyenvironmental/goShow',
          {
            INSPECTION_ID: id
          }
        ).then((data) => {
          this.pd = Object.assign({}, data.pd) // copy obj
          this.pd.hiddenList.forEach(item => {
            if (item.hiddenVideos.length > 0) {
              this.$set(item.hiddenVideos[0], 'IMGFILEPATH', this.findvideocover(item.hiddenVideos[0]))
            }
          })
          this.listLoading = false
          console.info(this.pd)
          resolve()
        }).catch((e) => {
          this.listLoading = false
        })
      })
    },
    findvideocover(item) {
      const source = document.getElementById('videoSource') // 获取视频对象
      source.src = this.config.fileUrl + item.FILEPATH
      const video = document.getElementById('videoPlayer')
      video.currentTime = 1 // 第一帧
      video.load()
      var canvas = document.getElementById('canvasVideo') // 获取 canvas 对象
      video.oncanplay = () => {
        // 利用canvas对象方法绘图
        canvas.getContext('2d').drawImage(video, 0, 0, video.clientWidth, video.clientHeight)
        // 转换成base64形式
        item.IMGFILEPATH = canvas.toDataURL('image/png') // 截取后的视频封面
      }
    },
    goViewVideo(row) {
      const type = row.FILEPATH.slice(row.FILEPATH.lastIndexOf('.') + 1)
      this.playerOptions.sources[0].src = this.config.fileUrl + row.FILEPATH
      this.playerOptions.poster = this.config.fileUrl + row.IMGFILEPATH
      this.playerOptions.sources[0].type = 'video/' + type
      this.dialogViewVideo = true
    },
    closePlay() {
      this.$refs.hdVideoPlayer.player.pause()
    },
    showMap(obj) {
      this.dialogMap = true
      this.iframeSrc = this.config.weburl + 'static/mapshow.html?t=' + Math.random()
      this.$nextTick(() => {
        const iframe = document.querySelector('#iframe')
        // 处理兼容行问题
        if (iframe.attachEvent) {
          iframe.attachEvent('onload', function() {
            this.contentWindow.postMessage(
              {
                'name': obj.HIDDENDESCR,
                'longitude': Number(obj.LONGITUDE),
                'latitude': Number(obj.LATITUDE)
              }, '*')
          })
        } else {
          iframe.onload = function() {
            this.contentWindow.postMessage(
              {
                'name': obj.HIDDENDESCR,
                'longitude': Number(obj.LONGITUDE),
                'latitude': Number(obj.LATITUDE)
              }, '*')
          }
        }
      })
    },
    goBack() {
      this.dialogVisible = false
    },
    goView(id) {
      this.$refs.information.init(id, this.appendToBody)
    }
  }
}
</script>

<style scoped>
</style>
