<template>
  <div class="app-container" :style="`height:${height}px`" id="parent">
    <el-row :gutter="10" class="mb8" style="z-index: 10;">
      <el-tooltip class="top-right-btn" effect="dark" :content="$t('tagsView.refresh')" placement="top">
        <el-button size="mini" circle icon="el-icon-refresh" @click="getList"/>
      </el-tooltip>
    </el-row>
    <vue-draggable-resizable v-drag
                             w="auto" h="auto" :draggable="dragMove" style="background-color:#fff;padding: 0px 20px">
      <div class="zoom" @wheel.prevent="handleTableWheel($event)" ref="branch">
        <table v-if="!loading&&data.length>0">
          <tr>
            <th colspan="5">
            </th>
            <th colspan="25">
              <span style="font-size: 40px">蒸汽裂解装置锁开&锁关摆放看板（SUB）</span><br/>
            </th>
            <th colspan="5">
              <el-tag type="success" style="font-size: 20px;margin: 0px 10px;background-color: #67C23A" size="medium"
                      effect="dark">已挂锁
              </el-tag>
              <el-tag type="danger" style="font-size: 20px;margin: 0px 10px;" size="medium" effect="dark">已拆锁
              </el-tag>
              <el-tag type="info" style="font-size: 20px;margin: 0px 10px;" size="medium" effect="dark">已删除</el-tag>
            </th>
          </tr>
          <tr v-for="(list) in data">
            <td v-for="(item) in list">
              <el-button type="text" @click="handleClick,openDialog(item.id,item.status,item.lockCode)"
                         style="color: #fff;padding: 5px;height: 100%;font-weight: bold"
                         :class="item.lockCode==null?'fff':( item.status===2? 'grey' : (item.status===1 ? 'red':'green'))">
                <svg-icon icon-class="key" style="font-size: 300%" v-if="item.status!==2"/>
                <i class="el-icon-circle-close" style="font-size: 300%" v-if="item.status===2"/>
                <br/>
                <br/>
                <div  v-if="item.lockCode!=null">
                  <span>{{ item.lockCode.substring(0, item.lockCode.indexOf('-')) }}</span>
                  <br><br>
                  <span>{{ item.lockCode.substring(item.lockCode.indexOf('-'), item.lockCode.length) }}</span></div>
              </el-button>
            </td>
          </tr>
        </table>
        <el-empty v-else-if="loading" description="数据加载中..."></el-empty>
        <el-empty v-else description=""></el-empty>
      </div>
    </vue-draggable-resizable>
    <el-dialog  :close-on-click-modal="false" :visible.sync="visible" title="锁详情">
      <el-descriptions class="margin-top" :column="3" size="medium" border>
        <el-descriptions-item label-style="width:200px">
          <template slot="label">
            删除原因
          </template>
          {{ this.lockData.remarks }}
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">返 回</el-button>
      </div>
    </el-dialog>

    <el-dialog  :close-on-click-modal="false" title="申请单详情" :visible.sync="detail.open1" width="50%" append-to-body>
      <el-descriptions :column="2" border size="medium">
        <el-descriptions-item label="安全阀位号" :label-style="labelStyle">{{ this.detail.data.devNo }}
        </el-descriptions-item>
        <el-descriptions-item label="单元" :label-style="labelStyle">{{ this.detail.data.unit }}</el-descriptions-item>
        <el-descriptions-item label="离线原因" :span="2">{{ this.detail.data.offlineReason }}</el-descriptions-item>
        <el-descriptions-item label="状态" :label-style="labelStyle">
          <el-tag size="small" :type="statusFlag">{{ applyStatus[this.detail.data.status] }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="申请状态">
          <el-tag size="small" :type="approveStatusFlag">{{ approveStatus[this.detail.data.approveStatus] }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="安全评估以及临时措施执行" :span="2" :label-style="labelStyle">
          {{ this.detail.data.safa }}
        </el-descriptions-item>
        <el-descriptions-item label="安全阀锁开是否拆解" :label-style="labelStyle">
          {{ this.detail.data.disassembly }}
        </el-descriptions-item>
        <el-descriptions-item label="破锁编号" :label-style="labelStyle">
          {{ this.detail.data.lockNo }}
        </el-descriptions-item>
        <el-descriptions-item label="临时措施执行人" :label-style="labelStyle">
          {{ this.detail.data.executorName }}
        </el-descriptions-item>
        <el-descriptions-item label="临时措施执行时间" :label-style="labelStyle">
          <template>
            <span>{{ parseTime(this.detail.data.executionTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="临时措施确认人" :label-style="labelStyle">
          {{ this.detail.data.confirmerName }}
        </el-descriptions-item>
        <el-descriptions-item label="临时措施确认时间" :label-style="labelStyle">
          <template>
            <span>{{ parseTime(this.detail.data.temporaryTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="申请人" :label-style="labelStyle">
          {{ this.detail.data.applicantName }}
        </el-descriptions-item>
        <el-descriptions-item label="申请时间" :label-style="labelStyle">
          <template>
            <span>{{ parseTime(this.detail.data.applicationTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="批准人" :label-style="labelStyle">
          {{ this.detail.data.approverName }}
        </el-descriptions-item>
        <el-descriptions-item label="批准时间" :label-style="labelStyle">
          <template>
            <span>{{ parseTime(this.detail.data.approveTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="离线安全阀是否已经复位" :label-style="labelStyle">
          {{ this.detail.data.resetConfirm }}
        </el-descriptions-item>
        <el-descriptions-item label="离线安全阀复位后现场是否存在泄漏" :label-style="labelStyle">
          {{ this.detail.data.leakConfirm }}
        </el-descriptions-item>
        <el-descriptions-item label="离线安全复位后，之前采取的安全措施是否已撤销" :label-style="labelStyle">
          {{ this.detail.data.revokeConfirm }}
        </el-descriptions-item>
        <el-descriptions-item label="离线安全复位后，是否已经重新上锁" :label-style="labelStyle">
          {{ this.detail.data.lockConfirm }}
        </el-descriptions-item>
        <el-descriptions-item label="确认上锁人员" :label-style="labelStyle" :span="2">
          {{ this.detail.data.lockConfirmer1Name }} {{ this.detail.data.lockConfirmer2Name }}
        </el-descriptions-item>
        <el-descriptions-item label="上述信息确认人" :label-style="labelStyle">
          {{ this.detail.data.infoConfirmerName }}
        </el-descriptions-item>
        <el-descriptions-item label="确认时间" :label-style="labelStyle">
          {{ this.detail.data.confirmTime }}
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2" :label-style="labelStyle">
          {{ this.detail.data.remarks }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-dialog  :close-on-click-modal="false" title="申请单详情" :visible.sync="detail.open2" width="50%" append-to-body>
      <el-descriptions :column="2" border size="medium">
        <el-descriptions-item label="组织保护措施变更播述" :span="2" :label-style="labelStyle">
          {{ this.detail.data.changeDescribe }}
        </el-descriptions-item>
        <el-descriptions-item label="状态变更的原因" span="2" :label-style="labelStyle">
          {{ this.detail.data.changeReason }}
        </el-descriptions-item>
        <el-descriptions-item label="申请人" :label-style="labelStyle">
          {{ this.detail.data.applicantName }}
        </el-descriptions-item>
        <el-descriptions-item label="申请时间" :label-style="labelStyle">
          <template>
            <span>{{ parseTime(this.detail.data.applicationTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="状态" :label-style="labelStyle">
          <el-tag size="small" :type="statusFlag">{{ applyStatus[this.detail.data.status] }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="申请状态">
          <el-tag size="small" :type="approveStatusFlag">{{ approveStatus[this.detail.data.approveStatus] }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="安全评估及临时的安全措施" :span="2" :label-style="labelStyle">
          {{ this.detail.data.safa }}
        </el-descriptions-item>
        <el-descriptions-item label="安全评估人" :label-style="labelStyle">
          {{ this.detail.data.safaerName }}
        </el-descriptions-item>
        <el-descriptions-item label="安全评估时间" :label-style="labelStyle">
          <template>
            <span>{{ parseTime(this.detail.data.safaTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="批准人" :label-style="labelStyle">
          {{ this.detail.data.approverName }}
        </el-descriptions-item>
        <el-descriptions-item label="批准时间" :label-style="labelStyle">
          <template>
            <span>{{ parseTime(this.detail.data.approveTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="临时措施执行人" :label-style="labelStyle">
          {{ this.detail.data.executorName }}
        </el-descriptions-item>
        <el-descriptions-item label="临时措施执行时间" :label-style="labelStyle">
          <template>
            <span>{{ parseTime(this.detail.data.executionTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="临时措施确认人" :label-style="labelStyle">
          {{ this.detail.data.confirmerName }}
        </el-descriptions-item>
        <el-descriptions-item label="临时措施确认时间" :label-style="labelStyle">
          <template>
            <span>{{ parseTime(this.detail.data.confirmTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="组织保护措施状态变更执行" :span="2" :label-style="labelStyle">
          {{ this.detail.data.changeExecution }}
        </el-descriptions-item>
        <el-descriptions-item label="执行人" :label-style="labelStyle">
          {{ this.detail.data.changeExecutorName }}
        </el-descriptions-item>
        <el-descriptions-item label="执行时间" :label-style="labelStyle">
          <template>
            <span>{{ parseTime(this.detail.data.changeExecutorTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="组织保护措施是否已经恢复至变更前的状态" :label-style="labelStyle">
          {{ this.detail.data.resetConfirm }}
        </el-descriptions-item>
        <el-descriptions-item label="破锁编号" :label-style="labelStyle">
          {{ this.detail.data.lockNo }}
        </el-descriptions-item>
        <el-descriptions-item label="状态恢复，确认人1" :label-style="labelStyle">
          {{ this.detail.data.resetConfirmerName1 }}
        </el-descriptions-item>
        <el-descriptions-item label="确认时间" :label-style="labelStyle">
          {{ this.detail.data.resetConfirmTime1 }}
        </el-descriptions-item>
        <el-descriptions-item label="状态恢复，确认人2" :label-style="labelStyle">
          {{ this.detail.data.resetConfirmerName2 }}
        </el-descriptions-item>
        <el-descriptions-item label="确认时间" :label-style="labelStyle">
          {{ this.detail.data.resetConfirmTime2 }}
        </el-descriptions-item>
        <el-descriptions-item label="状态恢复后，之前采取的安全措施是否已撤销" :span="2" :label-style="labelStyle">
          {{ this.detail.data.revokeConfirm }}
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2" :label-style="labelStyle">
          {{ this.detail.data.remarks }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-dialog  :close-on-click-modal="false" title="申请单详情" :visible.sync="detail.open3" width="50%" append-to-body>
      <el-empty description=""></el-empty>
    </el-dialog>
  </div>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'
import {getLock, listLockBranch, updateLock, getInfoByLock} from "@/api/apply/lock";
import OfflinevalveDetail from "@/views/approve/approveDetail/offlinevalve-detail";

export default {
  components: {OfflinevalveDetail, VueDraggableResizable},
  name: "lock-sub",
  directives: {
    drag(el) {
      const oDiv = el
      // 拖拽时间标识
      let firstTime = ''
      let lastTime = ''
      document.onselectstart = function () {
        return false
      }
      oDiv.onmousedown = function (e) {
        // 为了区分点击还是拖拽，使用时间差来判断，200毫秒内为点击，200毫秒外为拖拽，初始化为点击
        document.getElementById('parent').setAttribute('drag-flag', false)
        firstTime = new Date().getTime()
        // 判断下当前时间与初始时间差，大于200毫秒则判断状态为拖拽


        // 鼠标抬起时清除事件
        document.onmouseup = function (e) {
          lastTime = new Date().getTime()
          console.log("firstTime:::" + firstTime)
          console.log("lastTime:::" + lastTime)
          console.log("lastTime-firstTime:::" + (lastTime - firstTime))
          if (lastTime - firstTime > 150) {
            document.getElementById('parent').setAttribute('drag-flag', true)
          }
          document.onmousemove = null
          document.onmouseup = null
        }
        return false
      }
    }
  },
  data() {
    return {// 详情对象
      detail: {
        open1: false,
        open2: false,
        open3: false,
        data: {}
      },
      applyStatus: {0: "未完成", 1: "已完成"},
      approveStatus: {1: "申请中", 2: "已通过", 3: "已拒绝"},
      statusFlag: '',
      approveStatusFlag: '',
      //label样式
      labelStyle: {'width': '200px'},
      lockData: {},
      clientHeight: 300,
      dragMove: true,
      drawer: false,
      data: [],
      status: 0,
      id: null,
      loading: true,
      visible: false,
      height: document.body.clientHeight - 155,
      clickFlag: true,// 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        unit: null,
        lockPost: 'SUB',
        pidNo: null,
        lockCode: null,
        medium: null,
        position: null,
        reason: null,
        technology: null,
        riskLevel: null,
        lockSize: null,
        remarks: null,
        status: null,
        createrCode: null,
        createdate: null,
        updaterCode: null,
        updatedate: null,
        valveStatus: null,
        deptId: null
      },
    }
  },
  created() {
    this.getList();
  },
  mounted() {
    window.onresize = () => {    //写在mounted中,onresize事件会在页面大小被调整时触发
      return (() => {
        window.screenHeight = document.body.clientHeight - 155;
        this.height = window.screenHeight;
      })();
    };

  },
  watch: {
    height(val) {        //在watch中监听height,浏览器窗口大小变动时自适应高度。
      this.height = val;
      console.log(this.height, "新的高度");
    },
  },
  methods: {
    /** 查询破锁管理列表 */
    getList() {
      this.loading = true;
      listLockBranch(this.queryParams).then(response => {
        this.data = response.data;
        this.loading = false;
      });
    },
    handleClick() {
      setTimeout(function () {
        // 点击事件触发时，判断当前状态是拖拽还是点击，若是拖拽，直接返回不继续执行
        const isDrag = document.getElementById('parent').getAttribute('drag-flag')
        if (isDrag == 'true') {
          return
        }
      }, 50)
    },
    handleTableWheel(event) {
      let obj = this.$refs['branch']
      return this.tableZoom(obj, event)
    },
    tableZoom(obj, event) {
      // 一开始默认是100%
      let zoom = parseInt(obj.style.zoom, 10) || 100
      // 滚轮滚一下wheelDelta的值增加或减少120
      zoom += event.wheelDelta / 12
      if (zoom > 25) {
        obj.style.zoom = zoom + '%'
      }
      return false
    },
    openDialog(id, status, lockCode) {
      // 点击事件触发时，判断当前状态是拖拽还是点击，若是拖拽，直接返回不继续执行
      const isDrag = document.getElementById('parent').getAttribute('drag-flag')
      if (isDrag === 'true') {
        return
      }
      this.id = id
      this.status = status
      if (status == 2) {
        this.visible = true;
        this.lockData = {};
        getLock(id).then(res => {
          this.lockData = res.data
        })
      }
      if (status == 1) {
        this.statusFlag = '';
        this.approveStatusFlag = '';
        this.detail.open = true;
        this.detail.data = {};
        getInfoByLock(lockCode).then(res => {
          if (res.data.type == 1) {
            // this.detail.open1 = true
            this.$router.push({ path: '/process/offlinevalve', query: { lockNo: lockCode }});
          }
          if (res.data.type == 2) {
            // this.detail.open2 = true
            this.$router.push({ path: '/process/safetychange', query: { lockNo: lockCode }});
          }
          if (res.data.type == 3) {
            this.detail.open3 = true
            return
          }
          this.detail.data = res.data.data
          if (this.detail.data.status === 1) {
            this.statusFlag = 'success';
          }
          if (this.detail.data.approveStatus === '2') {
            this.approveStatusFlag = 'success';
          } else if (this.detail.data.approveStatus === '1') {
            this.approveStatusFlag = 'warning';
          } else if (this.detail.data.approveStatus === '3') {
            this.approveStatusFlag = 'danger';
          }
        })

      }
    },
    changeColor(type) {
      updateLock({id: this.id, status: type}).then(response => {
        this.msgSuccess("修改成功");
        this.visible = false;
        this.getList();
      });
    }
  }
}
</script>

<style scoped>
table {
  width: auto;
  border: 1px solid #d0d0d0;
  border-collapse: collapse;
}

th {
  height: 80px;
  color: #4b4b4b;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

tr {
  border: 1px solid #d0d0d0;
  border-collapse: collapse;
}

td {
  height: 200px;
  border: 1px solid #d0d0d0;
  border-collapse: collapse;
  vertical-align: middle;
  text-align: center;
  padding: 20px 10px 20px 10px;
}

i {
  font-size: 200%;
  padding-bottom: 10px;
}

el-button {
  width: 140px;
  height: auto;
}

.fff {
  background-color: #fff;
}

.green {
  background-color: #67C23A;
}

.red {
  background-color: #F56C6C;
}

.yellow {
  background-color: #E6A23C;
}

.grey {
  background-color: #909399;
}
</style>
