<template>
  <div>
    <div id="printTest" class="app-container">
      <div class="print-break">
        <div class="level-title">
          <h1>隐患信息</h1>
        </div>
        <div>
          <table class="table-ui">
            <tr v-if="pd.SOURCE=='2'">
              <td class="tbg">检查内容</td>
              <td>{{ pd.CHECK_CONTENT }}</td>
            </tr>
            <tr>
              <td class="tbg">隐患来源</td>
              <template v-if="pd.SOURCE=='1'">
                <td>隐患快报</td>
              </template>
              <template v-else-if="pd.SOURCE=='2'">
                <td>清单排查</td>
              </template>
              <template v-else-if="pd.SOURCE=='3'">
                <td>清单排查</td>
              </template>
              <template v-else-if="pd.SOURCE=='6'">
                <td>消防检查</td>
              </template>
              <template v-else-if="pd.SOURCE=='8'">
                <td>点检隐患</td>
              </template>
            </tr>
            <tr>
              <td class="tbg">隐患描述</td>
              <td>{{ pd.HIDDENDESCR }}</td>
            </tr>
            <tr v-if="pd.SOURCE=='2'">
              <td class="tbg">风险点（单元）</td>
              <td>{{ pd.RISK_UNIT }}</td>
            </tr>
            <tr v-if="pd.SOURCE=='2'">
              <td class="tbg">辨识部位</td>
              <td>{{ pd.IDENTIFICATION }}</td>
            </tr>
            <tr v-if="pd.SOURCE=='2'">
              <td class="tbg">存在风险</td>
              <td>{{ pd.RISK_DESCR }}</td>
            </tr>
            <tr v-if="pd.SOURCE=='2'">
              <td class="tbg">风险分级</td>
              <td>{{ pd.LEVEL }}</td>
            </tr>
            <tr>
              <td class="tbg">隐患级别</td>
              <td>{{ pd.HIDDENLEVELNAME }}</td>
            </tr>
            <tr>
              <td class="tbg">隐患类型</td>
              <td>{{ pd.HIDDENTYPENAME }}</td>
            </tr>
            <!--<tr>
              <td class="tbg">隐患类型2</td>
              <td>{{ pd.HIDDENTYPENAME2 }}</td>
            </tr>-->
            <tr>
              <td class="tbg">隐患部位</td>
              <td>{{ pd.hregionName }}</td>
            </tr>
            <tr>
              <td class="tbg">隐患上报位置</td>
              <td>经度:{{ pd.LONGITUDE }} , 纬度:{{ pd.LATITUDE }}</td>
            </tr>
            <tr>
              <td class="tbg">隐患图片</td>
              <td class="img-select">
                <viewer :images="hImgs">
                  <img v-for="item in hImgs" :src="config.fileUrl + item.FILEPATH" :key="item.IMGFILES_ID" width="100" height="100">
                </viewer>
              </td>
            </tr>
            <tr>
              <td class="tbg">是否相关方</td>
              <td>
                <span v-if="pd.ISRELEVANT == '1'">是</span>
                <span v-if="pd.ISRELEVANT == '2'">否</span>
              </td>
            </tr>
            <tr v-if="playerOptions.sources[0].src">
              <td class="tbg">隐患视频</td>
              <td>
                <span style="color: #4395ff;cursor: pointer" @click="dialogVideoVisible = true">隐患视频</span>
              </td>
            </tr>
            <tr>
              <td class="tbg">隐患发现人</td>
              <td>{{ pd.CREATORNAME }}</td>
            </tr>
            <tr>
              <td class="tbg">隐患发现时间</td>
              <td>{{ pd.DISCOVERYTIME }}</td>
            </tr>
            <tr>
              <td class="tbg">隐患位置描述</td>
              <td>{{ pd.POSITIONDESC }}</td>
            </tr>
            <tr>
              <td class="tbg">隐患状态</td>
              <td>
                <template v-if="pd.STATE=='-2'">
                  待确认
                </template>
                <template v-if="pd.STATE=='1'">
                  未整改
                </template>
                <template v-else-if="pd.STATE=='3'">
                  已整改
                </template>
                <template v-else-if="pd.STATE=='4'">
                  已验收
                </template>
                <template v-else-if="pd.STATE=='5'">
                  忽略隐患
                </template>
                <template v-else-if="pd.STATE=='6'">
                  重大隐患
                </template>
                <template v-else-if="pd.STATE=='7'">
                  待处理的特殊隐患
                </template>
                <template v-else-if="pd.STATE=='8'">
                  处理的特殊隐患
                </template>
                <template v-else-if="pd.STATE=='-1'">
                  已超期
                </template>
                <template v-else-if="pd.STATE=='11'">
                  待核定
                </template>
                <template v-else-if="pd.STATE=='12'">
                  待核实
                </template>
                <template v-else-if="pd.STATE=='13'">
                  待整改
                </template>
                <template v-else-if="pd.STATE=='14'">
                  待归档
                </template>
                <template v-else-if="pd.STATE=='15'">
                  已归档
                </template>
              </td>
            </tr>
            <!--<tr>
              <td class="tbg">隐患类型2</td>
              <td>{{ pd.HIDDENTYPENAME2 }}</td>
            </tr>-->
            <tr>
              <td class="tbg">隐患发现部门</td>
              <td>{{ pd.HIDDENFINDDEPTNAME }}</td>
            </tr>
          </table>
        </div>
      </div>

      <div class="mt-20 print-break">
        <div class="level-title">
          <h1>发现隐患部门负责人确认</h1>
        </div>
        <table class="table-ui">
          <tr>
            <td class="tbg">隐患级别</td>
            <td>{{ pd.HIDDENLEVELNAME }}</td>
          </tr>
          <tr v-if="majorinforPdf">
            <td class="tbg">临时处置信息</td>
            <td><a style="color: #1e9fff" @click="goViewPdf(majorinforPdf.FILEPATH)">[预览]</a> </td>
          </tr>
          <tr v-if="supplementPdf">
            <td class="tbg">补充重大隐患信息</td>
            <td><a style="color: #1e9fff" @click="goViewPdf(supplementPdf.FILEPATH)">[预览]</a> </td>
          </tr>
          <tr>
            <td class="tbg">隐患确认人</td>
            <td>{{ pd.conUserName }}</td>
          </tr>
          <tr>
            <td class="tbg">隐患确认时间</td>
            <td>{{ pd.CONFIRM_TIME }}</td>
          </tr>
        </table>
      </div>

      <div class="mt-20 print-break">
        <div class="level-title">
          <h1>分公司安委会办公室副主任核实</h1>
        </div>
        <table class="table-ui">
          <tr>
            <td class="tbg">隐患级别</td>
            <td>{{ pd.HIDDENLEVELNAME }}</td>
          </tr>
          <tr v-if="safetyofficePdf">
            <td class="tbg">安委会办公室会议记录</td>
            <td><a style="color: #1e9fff" @click="goViewPdf(safetyofficePdf.FILEPATH)">[预览]</a> </td>
          </tr>
          <tr v-if="majorapprovedPdf">
            <td class="tbg">临时处置信息</td>
            <td><a style="color: #1e9fff" @click="goViewPdf(majorapprovedPdf.FILEPATH)">[预览]</a> </td>
          </tr>
          <tr>
            <td class="tbg">核对结果</td>
            <td>
              <template v-if="resultslist.CHECKRESULTS == 2">
                核对确定
              </template>
            </td>
          </tr>
          <tr>
            <td class="tbg">核实人</td>
            <td>{{ resultslist.CHECKER }}</td>
          </tr>
          <tr>
            <td class="tbg">核实时间</td>
            <td>{{ resultslist.CHECK_TIME }}</td>
          </tr>
        </table>
      </div>

      <div class="mt-20 print-break">
        <div class="level-title">
          <h1>港股分公司安委会办公室副主任核定</h1>
        </div>
        <table class="table-ui">
          <tr>
            <td class="tbg">隐患级别</td>
            <td>
              {{ pd.HIDDENLEVELNAME }}
            </td>
          </tr>
          <tr>
            <td class="tbg">核定人</td>
            <td>{{ resultslist.APPROVED }}</td>
          </tr>
          <tr>
            <td class="tbg">核定时间</td>
            <td>
              {{ resultslist.APPROVED_TIME }}
            </td>
          </tr>
          <tr v-if="reportPdf">
            <td class="tbg">隐患调查报告</td>
            <td><a style="color: #1e9fff" @click="goViewPdf(reportPdf.FILEPATH)">[预览]</a> </td>
          </tr>
          <tr v-if="resolutionPdf">
            <td class="tbg">安委会或党委会决议记录</td>
            <td><a style="color: #1e9fff" @click="goViewPdf(resolutionPdf.FILEPATH)">[预览]</a> </td>
          </tr>
          <tr v-if="HIDDENLEVEL =='jdyh001'">
            <td class="tbg">隐患整改部门</td>
            <td >
              <el-col :span="12">
                <SelectTree
                  ref="deptTree_Select5"
                  :clearable="false"
                  :options="treeData"
                  :props="defaultProps"
                  v-model="pd.RECTIFICATIONDEPT"
                  style="width: 100%;"
                  placeholder="请选择隐患整改部门"
                />
              </el-col>
              <el-col :span="12">
                <el-select v-model="pd.RECTIFICATIONOR" style="width: 100%;" clearable placeholder="请选择整改人" @visible-change="$forceUpdate()">
                  <el-option v-for="item in confirmUserList" :key="item.USER_ID" :label="item.NAME" :value="item.USER_ID" />
                </el-select>
              </el-col>
            </td>
          </tr>

        </table>
      </div>

      <div v-if="pd.RECTIFICATIONORNAME" class="mt-20 print-break">
        <div class="level-title">
          <h1>较大隐患整改</h1>
        </div>
        <table class="table-ui">
          <tr>
            <td class="tbg">整改部门</td>
            <td>{{ pd.RECTIFICATIONDEPTNAME }}</td>
          </tr>
          <tr>
            <td class="tbg">整改人</td>
            <td>{{ pd.RECTIFICATIONORNAME }}</td>
          </tr>
          <tr v-if="rectificationPdf">
            <td class="tbg">临时处置措施与隐患整改方案</td>
            <td><a style="color: #1e9fff" @click="goViewPdf(rectificationPdf.FILEPATH)">[预览]</a> </td>
          </tr>
          <tr v-if="processPdf">
            <td class="tbg">隐患整改过程记录</td>
            <td><a style="color: #1e9fff" @click="goViewPdf(processPdf.FILEPATH)">[预览]</a> </td>
          </tr>
        </table>
      </div>

      <div v-if="pd.STATE =='15'" class="mt-20 print-break">
        <div class="level-title">
          <h1>验收信息</h1>
        </div>
        <table class="table-ui">
          <tr>
            <td class="tbg">验收人</td>
            <td>{{ pd.acceptName }}</td>
          </tr>
          <tr>
            <td class="tbg">验收时间</td>
            <td>{{ pd.CHECKTIME }}</td>
          </tr>
          <tr>
            <td class="tbg">验收结果</td>
            <td>验收通过</td>
          </tr>
        </table>
      </div>

    </div>
    <div class="ui-height" />
    <div class="ui-foot">
      <el-button v-print="'#printTest'" type="primary">打 印</el-button>
      <el-button v-if="$parent.activeType === 'edit'" type="primary" @click="save">确 认</el-button>
      <el-button plain type="info" @click="back">返 回</el-button>
    </div>
    <el-dialog :visible.sync="dialogVideoVisible" title="隐患视频">
      <div>
        <video-player
          v-if="dialogVideoVisible"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions"
          style="width: 100%;"
          class="video-player vjs-custom-skin"/>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVideoVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogViewPdf" title="文档" width="600px">
      <div>
        <iframe :src="pdfUrl" width="500px" height="500px" frameborder="1" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import SelectTree from '@/components/SelectTree'
import dateformat from '@/utils/dateformat'
import { upload } from '@/utils/upload'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import moment from 'moment'
export default {
  components: { Pagination, SelectTree, videoPlayer, moment },
  data() {
    return {
      HIDDEN_ID: '',	// 主键ID
      pd: [],						// 存放字段参数
      hs: [],
      checkList: [],
      treeData: [],
      confirmUserList: [], // 隐患确认人
      rectifyUserList: [],
      fileList: [],
      filepdfList: [],
      isClearConfirmUser: true,
      dialogViewPdf: false,
      pdfUrl: '',
      msg: 'add',
      pageType: '',
      config: config,
      hImgs: [],
      rImgs: [],
      sImgs: [],
      majorinforPdf: [],
      majorapprovedPdf: [],
      resolutionPdf: [],
      reportPdf: [],
      rectificationPdf: [],
      processPdf: [],
      supplementPdf: [],
      safetyofficePdf: [],
      HIDDENLEVEL: '',
      resultslist: {},
      APPROVED_TIME: moment().format('YYYY-MM-DD HH:mm:SS'),
      myUserInfo: {},
      hiddenlevelList: [],
      hiddenlevel: [
        {
          value: 'jdyh001',
          label: '较大隐患'
        }, {
          value: 'hiddenLevel2002',
          label: '重大隐患'
        }
      ],
      defaultProps: {
        value: 'id',
        children: 'nodes',
        label: 'name',
        checkStrictly: true
      },
      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: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      dialogVideoVisible: false,
      rectificationDeptList: [],
      rectificationUserList: [],
      pickerTime: {
        disabledDate: time => {
          return this.updatedPickerOptions(time)
        }
      },
      hiddenFindPeople: []
    }
  },
  watch: {
    'pd.RECTIFICATIONDEPT'(newVal, oldVal) {
      if (this.isClearConfirmUser) {
        this.pd.CONFIRM_USER = ''
        this.pd.RECTIFICATIONOR = ''
      }
      this.isClearConfirmUser = true
    },
    'pd.DEPARTMENT_ID': {
      handler: function(newVal, oldVal) {
        if (this.isClearRectificationor) {
          this.pd.RECTIFICATIONOR = ''
        }
        this.getReUserList(newVal)
        this.isClearRectificationor = true
      }
    }
  },
  created() {
    if (this.$parent.hiddenId) {
      this.getData(this.$parent.hiddenId)
    }
    this.getDict()
    this.getDept()
    this.LISTMANAGER_ID = this.$parent.LISTMANAGER_ID
    this.DEPARTMENT_ID = JSON.parse(sessionStorage.getItem('user')).DEPARTMENT_ID
    if (JSON.parse(sessionStorage.getItem('user')).ISMAIN != '1') {
      this.pd.USER_ID = JSON.parse(sessionStorage.getItem('user')).USER_ID
    }
    const node = {}
    node.id = this.DEPARTMENT_ID
    this.newHiddenForm = JSON.parse(JSON.stringify(this.hiddenForm))
    this.$refs.deptTree.clearHandle()
    this.$nextTick(() => { // 此处使用这个可以等节点渲染后再获取节点
      this.$refs.deptTree.handleNodeClick(node)
    })
  },
  methods: {
    updatedPickerOptions(time) {
      return time.getTime() > this.endTime || time.getTime() < this.startTime
    },
    getData(hiddenId) {
      this.listLoading = true
      this.getEditMyInfo()
      requestFN(
        '/hidden/goEdit',
        {
          HIDDEN_ID: hiddenId,
          tm: new Date().getTime()
        }
      ).then((data) => {
        this.pd = data.pd						// 参数map
        this.resultslist = data.resultslist
        this.majorinforPdf = data.majorinforPdf[0]
        this.majorapprovedPdf = data.majorapprovedPdf[0]
        this.resolutionPdf = data.resolutionPdf[0]
        this.reportPdf = data.reportPdf[0]
        this.rectificationPdf = data.rectificationPdf[0]
        this.processPdf = data.processPdf[0]
        this.supplementPdf = data.supplementPdf[0]
        this.safetyofficePdf = data.safetyofficePdf[0]
        this.pd.CONFIRM_USER = ''
        this.hImgs = data.hImgs
        if (data.hiddenVideo.length > 0) {
          this.playerOptions.sources[0].src = config.fileUrl + data.hiddenVideo[0].FILEPATH
        }
        if (data.pd.RECTIFICATIONDEPT) {
          this.updateOtherDep(data.pd.RECTIFICATIONDEPT)
        }
        if (data.hiddenFindPeople) {
          this.hiddenFindPeople = data.hiddenFindPeople
        }
        if (data.hiddenExa.length > 0) {
          data.hiddenExa.forEach(item => {
            if (item.TYPE === 0) {
              this.pd.oldUserName = item.editUserName
              this.pd.oldDeptName = item.editDeptName
              this.pd.oldLevelName = item.editLevelName
              this.pd.oldRectificationDeadline = item.spare3
            }
          })
        }
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getEditMyInfo() { // 获取登录人信息
      requestFN(
        '/user/goEditMyInfo',
        {}
      ).then((data) => {
        // var o = { 'DEPARTMENT_ID': data.pd.DEPARTMENT_ID, 'USER_ID': data.pd.USER_ID }
        this.myUserInfo.DEPARTMENT_ID = data.depname
        this.myUserInfo.DEPARTMENTName = data.pd.deptName

        this.myUserInfo.USERNAME = data.pd.NAME
        console.log(this.myUserInfo.USERNAME)
        this.$forceUpdate()
      }).catch((e) => {

      })
    },
    back() {
      this.$parent.activeName = 'List'
    },
    // 获取数据字典数据
    getDict() {
      requestFN(
        '/dictionaries/listSelectTree',
        {
          DICTIONARIES_ID: '5e7cf8620ba54ad89719d0be62133c7a'
        }
      ).then((data) => {
        this.hiddenlevelList = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
      })
    },
    // 获取整改人列表
    getReUserList(DEPARTMENT_ID) {
      if (DEPARTMENT_ID) {
        requestFN(
          '/user/listAll',
          { DEPARTMENT_ID: DEPARTMENT_ID }
        ).then((data) => {
          this.rectifyUserList = data.userList
        }).catch((e) => {
        })
      }
    },
    getDept() {
      requestFN(
        '/department/listTree',
        {}
      ).then((data) => {
        this.rectificationDeptList = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
      })
    },
    beforeFileUpload(file) {
      const suffix = file.name.substring(file.name.lastIndexOf('.'), file.name.length)
      if (suffix === '.pdf') {
        this.fileList.push(file)
      } else {
        this.$message.warning('请上传pdf文件')
      }
      return false
    },
    beforeFilepdfUpload(file) {
      const suffix = file.name.substring(file.name.lastIndexOf('.'), file.name.length)
      if (suffix === '.pdf') {
        this.filepdfList.push(file)
      } else {
        this.$message.warning('请上传pdf文件')
      }
      return false
    },
    // 修改其他检查人部门
    updateOtherDep(DEPARTMENT_ID) {
      this.listLoading = true
      requestFN(
        '/user/listAll',
        {
          DEPARTMENT_ID: DEPARTMENT_ID,
          tm: new Date().getTime()
        }
      ).then((data) => {
        this.rectificationUserList = data.userList
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getUserList(DEPARTMENT_ID, index) {
      this.listLoading = true
      requestFN(
        '/user/listAll',
        {
          DEPARTMENT_ID: DEPARTMENT_ID,
          tm: new Date().getTime()
        }
      ).then((data) => {
        if (index > -1) {
          this.$set(this.otherUserList, index, data.userList)
        }
      }).catch((e) => {
        this.listLoading = false
      })
    },
    formatDate(date) {
      if (date) {
        return dateformat(date, 'YYYY-MM-DD')
      } else {
        return ''
      }
    },
    goViewPdf(filePath) {
      this.pageNum = 1
      this.pdfUrl = this.config.fileUrl + filePath
      // this.pdfUrl = 'http://192.168.50.60:8082/file/' + filePath
      console.info(this.pdfUrl)
      this.dialogViewPdf = true
    },
    save() {
      this.listLoading = true
      const formData = new FormData()
      formData.append('HIDDEN_ID', this.pd.HIDDEN_ID)
      formData.append('APPROVED_TIME', this.APPROVED_TIME)
      formData.append('RECTIFICATIONDEPT', this.pd.RECTIFICATIONDEPT)
      formData.append('RECTIFICATIONOR', this.pd.RECTIFICATIONOR)
      formData.append('HIDDENLEVEL', this.HIDDENLEVEL)
      formData.append('CORPINFO_ID', this.pd.CORPINFO_ID)
      formData.append('STATE', '1')
      formData.append('FFILE', this.fileList[0])
      formData.append('FFILEPDF', this.filepdfList[0])
      formData.append('HIDDENMAJOR_ID', this.resultslist.HIDDENMAJOR_ID)
      upload(
        '/hidden/approved',
        formData
      ).then((data) => {
        this.$message({
          message: '确认成功',
          type: 'success'
        })
        this.$parent.activeName = 'List'
      }).catch((e) => {
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="sass" scoped>
  .table-ui
    .tbg
      width: 150px
    .img-flex
      display: flex
      .img-ui
        width: 240px
        height: 240px
        margin-right: 20px
        & img
          width: 100%
          height: 100%
</style>
