<template>
  <div>
    <div id="printTest" class="app-container">
      <div class="level-title">
        <h1>隐患信息</h1>
      </div>
      <div class="mb-20">
        <table class="table-ui">
          <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=='4'">
              <td>安全环保检查（监管端）</td>
            </template>
            <template v-else-if="pd.SOURCE=='5'">
              <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 v-if="pd.SOURCE=='2'">
            <td class="tbg">检查内容</td>
            <td>{{ pd.CHECK_CONTENT }}</td>
          </tr>
          <tr>
            <td class="tbg">隐患级别</td>
            <td >{{ pd.editLevelName?pd.editLevelName:'' }}</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?pd.hregionName:pd.HIDDENPART }}</td>
          </tr>
          <tr>
            <td class="tbg">隐患上报位置</td>
            <td>经度:{{ pd.LONGITUDE }} , 纬度:{{ pd.LATITUDE }}</td>
          </tr>
          <tr>
            <td class="tbg">隐患位置描述</td>
            <td>{{ pd.POSITIONDESC }}</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 v-if="playerOptions.sources[0].src">
            <td class="tbg">隐患视频</td>
            <td>
              <span style="color: #4395ff;cursor: pointer" @click="dialogVisible = true">隐患视频</span>
            </td>
          </tr>
          <tr v-for="(item, index) in hiddenFindPeople" :key="index">
            <td class="tbg">隐患发现人</td>
            <td>{{ item.NAME }}</td>
          </tr>
          <tr>
            <td class="tbg">隐患发现时间</td>
            <td>{{ pd.DISCOVERYTIME }}</td>
          </tr>
          <tr>
            <td class="tbg">整改类型</td>
            <td>
              <template v-if="pd.RECTIFICATIONTYPE=='1'">
                立即整改
              </template>
              <template v-else-if="pd.RECTIFICATIONTYPE=='2'">
                限期整改
              </template>
            </td>
          </tr>
          <tr v-if="pd.RECTIFICATIONTYPE=='1'">
            <td class="tbg">整改描述</td>
            <td>{{ pd.RECTIFYDESCR }}</td>
          </tr>
          <tr>
            <td class="tbg">整改负责部门</td>
            <td >{{ pd.editDeptName ?pd.editDeptName :pd.RECTIFICATIONDEPTNAME }}</td>
          </tr>
          <tr>
            <td class="tbg">整改负责人</td>
            <td >{{ pd.editUserName ?pd.editUserName :pd.RECTIFICATIONORNAME }}</td>
          </tr>
          <tr v-if="pd.oldRectificationDeadline || pd.RECTIFICATIONDEADLINE"/><tr v-if="pd.RECTIFICATIONTYPE=='1'">
            <td class="tbg">整改后图片</td>
            <td class="img-select">
              <viewer :images="rImgs">
                <img v-for="item in rImgs" :src="config.fileUrl + item.FILEPATH" :key="item.IMGFILES_ID" width="100" height="100">
              </viewer>
            </td>
          </tr>
          <tr >
            <td class="tbg">整改完成期限</td>
            <td >{{ pd.editRectificationDeadline ?pd.editRectificationDeadline :'' }}</td>
          </tr>
          <tr>
            <td class="tbg">是否相关方</td>
            <td>{{ pd.ISRELEVANT=='1'?'是':'否' }}</td>
          </tr>
        </table>
      </div>

      <div v-if = "$parent.activeType === 'confirm'" >
        <div class="level-title">
          <h1>确认信息</h1>
        </div>
        <table class="table-ui">
          <tr>
            <td class="tbg">隐患级别</td>
            <td v-if="pd.STATE == '-2' && $parent.activeType === 'confirm' && pd.SOURCE !== '4' && pd.SOURCE !== '5'">
              <SelectTree
                ref="hiddenLevenlTree_Select"
                :clearable="false"
                :options="hiddenlevelList"
                :props="defaultProps"
                v-model="pd.HIDDENLEVEL"
                :canparent="false"
                children-name="nodes"
                placeholder="请选择" />
            </td>
            <td v-else>{{ pd.HIDDENLEVELNAME }}</td>
          </tr>
          <tr v-if="pd.RECTIFICATIONTYPE=='1'">
            <td class="tbg">是否整改完成</td>
            <td>
              <el-radio v-model="isTrue" label="1" value="1" >是</el-radio>
              <el-radio v-model="isTrue" label="2" value="2" >否</el-radio>
            </td>
          </tr>
          <tr v-if="showStatus && pd.RECTIFICATIONTYPE=='2' || isTrue =='2'">
            <td class="tbg">整改负责人</td>
            <td v-if="pd.STATE == '-2' && $parent.activeType === 'confirm'">
              <SelectTree
                v-if="rectificationDeptList.length !== 0"
                ref="deptTree"
                :clearable="false"
                :options="rectificationDeptList"
                :props="defaultProps"
                v-model="pd.RECTIFICATIONDEPT"
                placeholder="请选择整改负责人"
                @change="updateOtherDep(pd.RECTIFICATIONDEPT)"
              />
              <el-select v-model="pd.RECTIFICATIONOR" placeholder="请选择">
                <el-option v-for="item in rectificationUserList" :key="item.USER_ID" :label="item.NAME" :value="item.USER_ID" />
              </el-select>
            </td>
            <td v-else>{{ pd.RECTIFICATIONORNAME }}</td>
          </tr>
          <tr v-if="showStatus && pd.RECTIFICATIONTYPE=='2' || isTrue =='2'">
            <td class="tbg">整改完成期限</td>
            <td v-if="pd.STATE == '-2' && $parent.activeType === 'confirm'">
              <el-date-picker v-model="pd.RECTIFICATIONDEADLINE" value-format="yyyy-MM-dd" type="date" placeholder="这里输入整改完成期限" />
            </td>
            <td v-else>{{ pd.RECTIFICATIONDEADLINE }}</td>
          </tr>
          <tr v-if="pd.STATE != '-2' && $parent.activeType === 'view'">
            <td class="tbg">隐患确认人</td>
            <td>{{ pd.conUserName }}</td>
          </tr>
          <tr v-if="pd.STATE != '-2' && $parent.activeType === 'view'">
            <td class="tbg">隐患确认时间</td>
            <td>{{ pd.CONFIRM_TIME }}</td>
          </tr>
        </table>
      </div>
      <div v-if="pd.STATE !='-2'" >
        <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 >{{ pd.RECTIFICATIONDEPTNAME }}</td>
          </tr>
          <tr >
            <td class="tbg">整改负责人</td>
            <td >{{ pd.RECTIFICATIONORNAME }}</td>
          </tr>
          <tr >
            <td class="tbg">整改完成期限</td>
            <td >{{ pd.RECTIFICATIONDEADLINE }}</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 v-if="pd.RECTIFICATIONOR || pd.RECTIFICATIONTYPE=='1' ">
        <div class="level-title">
          <h1>整改信息</h1>
        </div>
        <table class="table-ui">
          <tr>
            <td class="tbg">整改描述</td>
            <td>{{ pd.RECTIFYDESCR }}</td>
          </tr>

          <tr>
            <td class="tbg">整改部门</td>
            <td>{{ pd.RECTIFICATIONDEPTNAME }}</td>
          </tr>
          <tr>
            <td class="tbg">整改人</td>
            <td>{{ pd.RECTIFICATIONORNAME }}</td>
          </tr>
          <tr>
            <td class="tbg">整改时间</td>
            <td>{{ pd.RECTIFICATIONTIME }}</td>
          </tr>
          <tr v-if="pd.INVESTMENT_FUNDS">
            <td class="tbg">投入资金</td>
            <td>{{ pd.INVESTMENT_FUNDS }}元</td>
          </tr>
          <tr>
            <td class="tbg">整改后图片</td>
            <td class="img-select">
              <viewer :images="rImgs">
                <img v-for="item in rImgs" :src="config.fileUrl + item.FILEPATH" :key="item.IMGFILES_ID" width="100" height="100">
              </viewer>
            </td>
          </tr>
          <tr v-if="pd.HAVESCHEME">
            <td class="tbg">整改方案</td>
            <td v-if="pd.HAVESCHEME==0">无</td>
            <td v-else-if="pd.HAVESCHEME==1">有</td>
            <td v-else/>
          </tr>
          <tr v-if="hs && pd.HAVESCHEME==1">
            <td class="tbg">排查日期</td>
            <td>{{ hs.SCREENINGDATE }}</td>
          </tr>
          <tr v-if="hs && pd.HAVESCHEME==1">
            <td class="tbg">隐患清单</td>
            <td>{{ hs.LISTNAME }}</td>
          </tr>
          <tr v-if="hs && pd.HAVESCHEME==1">
            <td class="tbg">治理标准要求</td>
            <td>{{ hs.GOVERNSTANDARDS }}</td>
          </tr>
          <tr v-if="hs && pd.HAVESCHEME==1">
            <td class="tbg">治理方法</td>
            <td>{{ hs.GOVERNMETHOD }}</td>
          </tr>
          <tr v-if="hs && pd.HAVESCHEME==1">
            <td class="tbg">经费和物资的落实</td>
            <td>{{ hs.EXPENDITURE }}</td>
          </tr>
          <tr v-if="hs && pd.HAVESCHEME==1">
            <td class="tbg">负责治理人员</td>
            <td>{{ hs.PRINCIPAL }}</td>
          </tr>
          <tr v-if="hs && pd.HAVESCHEME==1">
            <td class="tbg">工时安排</td>
            <td>{{ hs.PROGRAMMING }}</td>
          </tr>
          <tr v-if="hs && pd.HAVESCHEME==1">
            <td class="tbg">时限要求</td>
            <td>{{ hs.TIMELIMITFOR }}</td>
          </tr>
          <tr v-if="hs && pd.HAVESCHEME==1">
            <td class="tbg">工作要求</td>
            <td>{{ hs.JOBREQUIREMENT }}</td>
          </tr>
          <tr v-if="hs && pd.HAVESCHEME==1">
            <td class="tbg">其他事项</td>
            <td>{{ hs.OTHERBUSINESS }}</td>
          </tr>
          <tr v-if="hs && pd.HAVESCHEME==1">
            <td class="tbg">方案图片</td>
            <td class="img-select">
              <viewer :images="sImgs">
                <img v-for="item in sImgs" :src="config.fileUrl + item.FILEPATH" :key="item.IMGFILES_ID" width="100" height="100">
              </viewer>
            </td>
          </tr>
        </table>
      </div>

      <div v-show="pd.STATE ==4 || pd.RECTIFICATIONTYPE=='1'">
        <div class="level-line" />
        <div class="level-title">
          <h1>验收信息</h1>
        </div>
        <template v-if="pd.RECTIFICATIONTYPE!='1'">
          <table v-for="(data) in checkList" :key="data.value" class="table-ui">
            <tr>
              <td class="tbg">验收描述</td>
              <td>{{ data.CHECKDESCR }}</td>
            </tr>
            <tr>
              <td class="tbg">是否合格</td>
              <td>
                <template v-if="data.STATUS=='1'">
                  是
                </template>
                <template v-else-if="data.STATUS=='0'">
                  否
                </template>
              </td>
            </tr>
            <tr>
              <td class="tbg">验收部门</td>
              <td>{{ data.CHECKDEPTNAME }}</td>
            </tr>
            <tr>
              <td class="tbg">验收人</td>
              <td>{{ data.CHECKORNAME }}</td>
            </tr>

            <tr>
              <td class="tbg">验收时间</td>
              <td>{{ data.CHECK_TIME }}</td>
            </tr>
            <tr>
              <td class="tbg">验收图片</td>
              <td class="img-select">
                <viewer :images="data.cImgs">
                  <img v-for="item in data.cImgs" :src="config.fileUrl + item.FILEPATH" :key="item.IMGFILES_ID" width="100" height="100">
                </viewer>
              </td>
            </tr>
          </table>
        </template>
        <template v-if="pd.RECTIFICATIONTYPE=='1'">
          <table class="table-ui">
            <tr>
              <td class="tbg">验收人</td>
              <td>{{ pd.CHECKORNAME }}</td>
            </tr>
          </table>
        </template>
      </div>

      <div class="ui-height" />
      <div class="ui-foot">
        <el-button plain type="info" @click="back">返 回</el-button>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="隐患视频">
      <div>
        <video-player
          v-if="dialogVisible"
          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="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import SelectTree from '@/components/SelectTree'
import formatDate from '@/utils/dateformat'
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
export default {
  components: { Pagination, SelectTree, videoPlayer },
  data() {
    return {
      HIDDEN_ID: '',	// 主键ID
      pd: {},						// 存放字段参数
      config: config,
      hImgs: [],
      sImgs: [],
      hiddenlevelList: [],
      checkList: [],
      defaultProps: {
        value: 'id',
        children: 'nodes',
        label: 'name',
        checkStrictly: true
      },
      rectificationDeptList: [],
      rectificationUserList: [],
      dialogFormtoExamine: false,
      REJECTOPINION: '',
      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 // 是否显示全屏按钮
        }
      },
      dialogVisible: false,
      hiddenFindPeople: [],
      isTrue: '1',
      showStatus: true
    }
  },
  watch: {
    'pd.HIDDENLEVEL': {
      handler(newVal, oldVal) {
        if (newVal == 'hiddenLevel1001') {
          this.showStatus = false
        } else {
          this.showStatus = true
        }
        this.$forceUpdate()
      },
      immediate: false
    }
  },
  created() {
    console.log(this.$parent.HIDDEN_ID)
    if (this.$parent.HIDDEN_ID) {
      this.getData(this.$parent.HIDDEN_ID)
    }
    this.getDict()
    this.getDept()
  },
  methods: {
    getData(hiddenId) {
      this.listLoading = true
      requestFN(
        '/hidden/goEdit',
        {
          HIDDEN_ID: hiddenId
        }
      ).then((data) => {
        this.pd = data.pd							// 参数map
        this.hImgs = data.hImgs
        this.rImgs = data.rImgs
        this.sImgs = data.sImgs
        this.hs = data.hs
        this.checkList = data.checkList
        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.editUserName = item.editUserName
              this.pd.editDeptName = item.editDeptName
              this.pd.editLevelName = item.editLevelName
              this.pd.editRectificationDeadline = item.spare3
            }
          })
        }
      }).catch((e) => {
        this.listLoading = false
      })
    },
    back() {
      this.$parent.activeName = 'List'
    },
    // 获取数据字典数据
    getDict() {
      requestFN(
        '/dictionaries/listSelectTree',
        {
          DICTIONARIES_ID: '5e7cf8620ba54ad89719d0be62133c7a'
        }
      ).then((data) => {
        this.hiddenlevelList = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
      })
    },
    getDept() {
      requestFN(
        '/department/listTree',
        {}
      ).then((data) => {
        this.rectificationDeptList = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
      })
    },
    // 修改其他检查人部门
    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
      })
    },
    goConfirm() { // 确认隐患
      if (this.pd.STATE === '4' || this.pd.STATE === '5') {
        if (this.pd.HIDDENLEVEL === 'hiddenLevel2002' || this.pd.HIDDENLEVEL === 'hiddenLevel1002') {
          this.$message.error('此来源隐患不能选择重大、交重大隐患')
          return
        }
      }
      this.$confirm('是否确认隐患?', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/hidden/confirmHidden',
          {
            HIDDEN_ID: this.pd.HIDDEN_ID,
            HIDDENLEVEL: this.pd.HIDDENLEVEL,
            isTrue: this.isTrue,
            RECTIFICATIONDEPT: this.pd.RECTIFICATIONDEPT,
            RECTIFICATIONOR: this.pd.RECTIFICATIONOR,
            RECTIFICATIONDEADLINE: this.pd.RECTIFICATIONDEADLINE
          }
        ).then((data) => {
          this.$message({
            message: '确认成功',
            type: 'success'
          })
          this.back()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    goRepulse() {
      this.$confirm('是否确定打回此隐患?', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/hidden/repulseHidden',
          {
            HIDDEN_ID: this.pd.HIDDEN_ID,
            REPULSE_CAUSE: this.REJECTOPINION,
            TYPE: '6',
            STATE: '16'
          }
        ).then((data) => {
          this.$message({
            message: '打回成功',
            type: 'success'
          })
          this.back()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    // 驳回
    goreject(row) {
      this.dialogFormtoExamine = true
    },
    formatDate(date, format) {
      return formatDate(date, format)
    },
    info() {
      console.log(this.pd.HIDDENLEVEL)
    }
  }
}
</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>
