<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-11-18 14:39:54
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2025-01-14 11:17:03
 * @FilePath: src/views/screen/components/dataManagement/ProjectDetails.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <div class="container">
    <div class="left">
      <div class="_module">
        <div class="module_title"><span>工程信息</span></div>
        <div class="info_container">
          <div style="display: flex;flex-direction: row" v-if="this.proId">
            <span class="info_title">工程名称：</span>
            <el-tooltip class="item" effect="dark" v-if="projectData.name.length > 18" :content="projectData.name"
                        placement="bottom"
            >
              <span class="info_content" v-if="projectData.name.length > 18">
                 {{ projectData.name.length > 18 ? projectData.name.substring(0, 18) + '...' : projectData.name }}
              </span>
            </el-tooltip>
            <span class="info_content" v-if="projectData.name.length <= 18">{{ projectData.name }}</span>
          </div>
          <div style="display: flex;flex-direction: row">
            <span class="info_title">计划开工日期：</span>
            <span class="info_content">{{ projectData.planStartDate }}</span>
          </div>
          <div style="display: flex;flex-direction: row">
            <span class="info_title">计划竣工日期：</span>
            <span class="info_content">{{ projectData.planEndDate }}</span>
          </div>
          <div style="display: flex;flex-direction: row" v-if="this.proId">
            <span class="info_title">工程地址：</span>
            <el-tooltip class="item" effect="dark" v-if="projectData.address.length > 18" :content="projectData.address"
                        placement="bottom"
            >
              <span class="info_content" v-if="projectData.address.length > 18">
                 {{ projectData.address.length > 18 ? projectData.address.substring(0, 18) + '...' : projectData.address
                }}
              </span>
            </el-tooltip>
            <span class="info_content" v-if="projectData.address.length <= 18">{{ projectData.address }}</span>
          </div>
          <div style="display: flex;flex-direction: row">
            <span class="info_title">工程负责人：</span>
            <span class="info_content">{{ projectData.projectManager }}</span>
          </div>
          <div style="display: flex;flex-direction: row">
            <span class="info_title">工程状态：</span>
            <span class="info_content">{{ projectData.status }}</span>
          </div>
        </div>
      </div>
      <div class="_module">
        <div class="module_title"><span>施工人员信息</span></div>
        <div class="info_container" v-if="this.proId">
          <div style="display: flex;flex-direction: row">
            <div class="legend">
              项目经理： <span :title="personData.projectManager"
            >{{ personData.projectManager.length > 7 ? personData.projectManager.substring(0, 7) + '...' : personData.projectManager
              }}</span>
            </div>
            <div class="legend">
              入场人数： {{ personData.entryNum }}
            </div>
          </div>
          <div style="display: flex;flex-direction: row">
            <div class="legend" style="margin-top: 30px;">
              今日入场人数： {{ personData.todayEntryNum }}
            </div>
            <div class="legend" style="margin-top: 30px;">
              特殊工种人数： {{ personData.specialWorkNum }}
            </div>
          </div>
        </div>
      </div>
      <div class="_module">
        <div class="module_title"><span>工器具信息</span></div>
        <div style="position: absolute;top: 78%;left: 13%;font-size: 18px;display: flex;flex-direction: column">
          <div class="legend">
            <div style="width: 15px;height: 15px;background-color: #169fe5;margin: 0 10px 0 0"></div>
            普通工器具 {{ normalRate }}
          </div>
          <div class="legend" style="margin-top: 10px;">
            <div style="width: 15px;height: 15px;background-color: #00c1d2;margin: 0 10px 0 0"></div>
            特殊工器具 {{ specialRate }}
          </div>
        </div>
        <EquipInfo style="height: 24vh" :data="equipData" />
      </div>
    </div>
    <div class="center">
      <div style="width: 100%;background-color: rgb(5, 32, 75)">
        <el-select v-model="proId" filterable placeholder="请选择工程" class="custom-select"
                   :popper-append-to-body="false" clearable @change="change"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div style="display: flex;flex-direction: row;width: 100%;align-items: center;">
        <div class="bk-button-group" style="margin-left: 30px;">
          <span :class="{ active: videoType === 1 }" @click="changeVideoType(1)"
                style="margin-right: 10px;cursor: pointer;font-size: 22px"
          >智能布控球</span>
          <span :class="{ active: videoType === 2 }" @click="changeVideoType(2)"
                style="margin-right: 10px;cursor: pointer;font-size: 22px"
          >作业记录仪 </span>
          <span :class="{ active: videoType === 3 }" @click="changeVideoType(3)"
                style="margin-right: 10px;cursor: pointer;font-size: 22px"
          >智能安全帽 </span>
          <span :class="{ active: videoType === 5 }" @click="changeVideoType(5)"
                style="margin-right: 10px;cursor: pointer;font-size: 22px"
          >固定摄像头 </span>
          <span :class="{ active: videoType === 6 }" @click="changeVideoType(6)"
                style="margin-right: 10px;cursor: pointer;font-size: 22px"
          >无人机 </span>
        </div>
        <div class="status">
          <span>
            <el-badge is-dot class="item" type="primary" style="margin-top: 8px;">
              </el-badge>
             总数：{{ numObj.totalNum }}
           </span>
          <span style="margin-left: 10px;">
             <el-badge is-dot class="item" type="success" style="margin-top: 8px;">
              </el-badge>
            在线：{{ numObj.onlineNum }}
          </span>
          <span style="margin-left: 10px;">
             <el-badge is-dot class="item" type="info" style="margin-top: 8px;">
              </el-badge>
            离线：{{ numObj.offlineNum }}
          </span>
        </div>
      </div>

      <div class="main-body">
        <div class="right">
          <div class="cell">
            <div class="cell-player">
              <div :class="cellClass(i)" v-for="i in cellCount" :key="i">
                <player
                  :title="i"
                  :id="`player${activePlayer}`"
                  @dblclick="toggleFullScreen()"
                  @playerClick="handlePlayerClick"
                  v-if="cellCount != 6"
                  :activePlayer="activePlayer"
                  :is_history="false"
                  :ref="`player${i}`"
                ></player>
                <player
                  :title="i"
                  :id="`player${activePlayer}`"
                  @dblclick="toggleFullScreen()"
                  v-if="cellCount == 6 && i != 2 && i != 3"
                  :activePlayer="activePlayer"
                  @playerClick="handlePlayerClick"
                  :is_history="false"
                  :ref="`player${i}`"
                ></player>
                <template v-if="cellCount == 6 && i == 2">
                  <div class="cell-player-6-2-cell">
                    <player
                      :title="i"
                      :id="`player${activePlayer}`"
                      @dblclick="toggleFullScreen()"
                      @playerClick="handlePlayerClick"
                      :activePlayer="activePlayer"
                      :is_history="false"
                      :ref="`player${i}`"
                    ></player>
                    <player
                      :title="i + 1"
                      :id="`player${activePlayer}`"
                      @dblclick="toggleFullScreen()"
                      @playerClick="handlePlayerClick"
                      :activePlayer="activePlayer"
                      :is_history="false"
                      :ref="`player${i + 1}`"
                    ></player>
                  </div>
                </template>
              </div>
            </div>
            <canvas id="canvas_video" style="display: none"></canvas>
            <canvas id="huaImg" style="display: none"></canvas>
          </div>
          <div class="right-lower"></div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="_module">
        <div class="module_title"><span>固定摄像头巡检</span></div>
        <FixedCamera :data="videoData" :scrollerHeight="16"/>
      </div>
      <div class="_module">
        <div class="module_title"><span>无人机巡检</span></div>
        <Drone :data="droneData"  :scrollerHeight="16"/>
      </div>
      <div class="_module">
        <div class="module_title"><span>终端设备巡检</span></div>
        <Terminal :data="terminalData" v-on:getVideoData="getVideoData" :scrollerHeight="16"/>
      </div>
    </div>
  </div>
</template>
<script>
import FixedCamera from '@/views/screen/components/dataManagement/FixedCamera.vue'
import Drone from '@/views/screen/components/dataManagement/Drone.vue'
import Terminal from '@/views/screen/components/dataManagement/Terminal.vue'
import EquipInfo from '@/views/screen/components/dataManagement/EquipInfo.vue'
import player from '@/views/screen/components/video/components/Player.vue'
import screenfull from 'screenfull'
import {
  getEquipInfo,
  getPersonInfo,
  getProInfo,
  getProjectMapData,
  getProSelect,
  getVideoList
} from '@/api/screen/screen'

export default {
  name: 'ProjectDetails',
  components: { player, EquipInfo, Terminal, Drone, FixedCamera },
  props: {
    data: {
      type: Object,
      default: () => {
      }
    }
  },
  mounted() {
    this.proId = this.$props.data.proId
    this.fetchData()
  },
  data() {
    return {
      proId: '',
      options: [],
      videoType: 1,
      cellCount: 6,
      activeArray: [],
      activePlayer: 1,
      projectData: {},
      personData: {},
      equipData: [{
        name: '特种工器具',
        value: 10,
        label: true,
        itemStyle: {
          // opacity: 1,
          color: '#00d7e9'
        }
      }, {
        name: '普通工器具',
        value: 20,
        label: true,
        itemStyle: {
          // opacity: 1,
          color: '#18b1ff'
        }
      }],
      normalRate: '0%',
      specialRate: '0%',
      videoData: [],
      droneData: [],
      terminalData: [],
      playVideo: [],
      numObj: {
        totalNum: 0,
        onlineNum: 0,
        offlineNum: 0
      },
      lastIndex: 0,
      onlineArray: []
    }
  },
  // created() {
  //   this.fetchData()
  // },
  methods: {
    handlePlayerClick(e) {
      this.activePlayer = e.title
    },
    fetchData() {
      this.getProInfo()
      this.getProSelect()
      this.getPersonInfo()
      this.getEquipInfo()
      this.initVideo()
      this.getVideoInfo()
    },
    initVideo() {
      this.getFixCameraData({proId: this.proId, deviceType: '5', type: 'proInfo' })
      this.getDroneData({ proId: this.proId, deviceType: '6', type: 'proInfo' })
      this.getTerminalData({proId: this.proId,  deviceType: '1', type: 'proInfo' })
    },
    getProSelect() {
      getProSelect().then(res => {
        this.options = res.data
      })
    },
    getProInfo() {
      getProInfo({ proId: this.proId }).then(res => {
        this.projectData = res.data
      })
    },
    getPersonInfo() {
      getPersonInfo({ proId: this.proId }).then(res => {
        this.personData = res.data
      })
    },
    getEquipInfo() {
      getEquipInfo({ proId: this.proId }).then(res => {
        this.equipData = [{
          name: '特种工器具',
          value: res.data.specialNum,
          label: true,
          itemStyle: {
            // opacity: 1,
            color: '#00d7e9'
          }
        }, {
          name: '普通工器具',
          value: res.data.normalNum,
          label: true,
          itemStyle: {
            // opacity: 1,
            color: '#18b1ff'
          }
        }]
        let total = Number(res.data.specialNum) + Number(res.data.normalNum)
        if (total === 0) {
          this.normalRate = '0%'
          this.specialRate = '0%'
          return
        }
        this.normalRate = (Number(res.data.normalNum) / total * 100).toFixed(2) + '%'
        this.specialRate = (Number(res.data.specialNum) / total * 100).toFixed(2) + '%'
      })
    },
    getFixCameraData(params) {
      getVideoList(params).then(res => {
        this.videoData = []
        this.videoData = res.data
      })
    },
    getDroneData(params) {
      getVideoList(params).then(res => {
        this.droneData = []
        this.droneData = res.data
      })
    },
    getTerminalData(params) {
      getVideoList(params).then(res => {
        this.terminalData = res.data
      })
    },
    changeVideoType(type) {
      this.lastIndex = -1
      this.videoType = type
      this.closeAllVideo()
      this.getVideoInfo()
    },
    playBallVideo: function() {
      //循环播放在线视频 每五分钟更换一次 一次最多六个
      if (this.playVideo.length > 0 && this.numObj.onlineNum > 0) {
        this.activeArray = []
        this.onlineArray = []
        // arr   1 2 3 4 5 6
        let cycleNumber = 0
        let index = this.lastIndex
        while (this.onlineArray.length < 6 && cycleNumber < this.playVideo.length * 2) {
          const video = this.playVideo[index]
          if (video && video.status == 1 && !this.onlineArray.some(v => v.puid === video.puid)) {
            this.onlineArray.push(video)
          }
          index = (index + 1) % this.playVideo.length
          cycleNumber++
        }
        this.lastIndex = index
        for (let i = 0; i < this.onlineArray.length; i++) {
          if (this.onlineArray[i].status == 1) {
            if (this.activePlayer < 7) {
              const playerRef = `player${this.activePlayer}`
              const playerInstance = this.$refs[playerRef]
              if (playerInstance && playerInstance[0]) {
                this.activeArray.push(Number(this.activePlayer))
                setTimeout(() => {
                  playerInstance[0].openVideo(this.onlineArray[i].puid, this.onlineArray[i].ballIndex)
                }, 1000 * this.activePlayer)
              } else {
                console.error(`Player instance for ${playerRef} is not available.`)
              }
              this.activePlayer++
            }
          }
        }
        setTimeout(() => {
          this.closeAllVideo()
          this.getVideoInfo()
        }, 1000 * 60 * 5)
      }
    },
    getVideoInfo() {
      this.numObj.totalNum = 0
      this.numObj.onlineNum = 0
      this.numObj.offlineNum = 0
      const param = {proId: this.proId, deviceType: this.videoType, type: 'proInfo' }
      getVideoList(param).then(res => {
        this.playVideo = []
        this.playVideo = res.data
        if (res.data.length > 0) {
          this.numObj.totalNum = res.data[0].totalNum
          this.numObj.onlineNum = res.data[0].onlineNum
          this.numObj.offlineNum = res.data[0].offlineNum
        }
        this.playBallVideo()
      })
    },
    closeAllVideo() {
      for (let i = 0; i <= this.activeArray.length; i++) {
        const playerRef = `player${this.activeArray[i]}`
        const playerInstance = this.$refs[playerRef]
        if (playerInstance && playerInstance[0]) {
          setTimeout(() => {
            playerInstance[0].closeVideo()
          }, 1000 * i)
        }
      }
      this.activePlayer = 1
      this.activeArray = []
    },
    //双击全屏
    toggleFullScreen() {
      const playerRef = `player${this.activePlayer}`
      const playerInstance = this.$refs[playerRef]
      if (playerInstance && playerInstance[0]) {
        if (screenfull.isEnabled) {
          if (screenfull.isFullscreen) {
            screenfull.exit()
          } else {
            screenfull.request(playerInstance[0].$el)
          }
        } else {
          this.$message.error('当前不支持全屏模式！！！')
        }
      } else {
        console.error(`Player instance for ${playerRef} is not available.`)
      }
    },
    getVideoData(index) {
      this.videoType = index
      getVideoList({proId:this.proId, deviceType: '终端设备', type: index }).then(res => {
        this.terminalData = []
        this.terminalData = res.data
      })
    },
    change(val) {
      this.proId = val
      this.closeAllVideo()
      this.fetchData()
    }
  },
  computed: {
    cellClass() {
      return function(index) {
        switch (this.cellCount) {
          case 1:
            return ['cell-player-1']
          case 4:
            return ['cell-player-4']
          case 6:
            if (index == 1) return ['cell-player-6-1']
            if (index == 2) return ['cell-player-6-2']
            if (index == 3) return ['cell-player-6-none']
            return ['cell-player-6']
          case 9:
            return ['cell-player-9']
          case 16:
            return ['cell-player-16']
          default:
            break
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 78vh;
  background-color: #05204BFF !important;
  box-sizing: border-box;
  overflow: auto;

  .left {
    width: 24%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .center {
    width: 52%;
    height: 75vh;
    display: flex;
    flex-direction: column;

  }

  .right {
    width: 24%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  ._module {
    width: 100%;
    height: 24.5vh;
  }

  .info_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 80%;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
  }

  .info_title {
    width: 120px;
    margin-top: 5px;
    font-size: 16px;
    margin-left: 10px;
    display: flex;
    justify-content: flex-end;
  }

  .info_content {
    margin-top: 7px;
    font-size: 15px;
  }

  .bk-button-group .active {
    color: skyblue;
  }

  .status {
    width: 30%;
    float: right;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: right;
    margin-right: 5vh;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    color: white;

    span {
      margin: 0 10px;
      color: white;
    }
  }
}

.main-body {
  width: 100%;
  height: 90%;
  display: flex;
  padding: 0 10px 0 10px;

  .right {
    width: 100%;
    height: 100%;

    .cell {
      margin-top: 0.5%;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
  }
}

.cell-tool {
  height: 40px;
  line-height: 40px;
  margin-top: -1px;
  color: whitesmoke;
  margin-left: 18.5%;
}

.cell-player {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.cell-player-4 {
  width: 50%;
  height: 50% !important;
  box-sizing: border-box;
}

.cell-player-1 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.cell-player-6-1 {
  width: 66.66%;
  height: 66.66% !important;
  box-sizing: border-box;
}

.cell-player-6-2 {
  width: 33.33%;
  height: 66.66% !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.cell-player-6-none {
  display: none;
}

.cell-player-6-2-cell {
  width: 100%;
  height: 50% !important;
  box-sizing: border-box;
}

.cell-player-6 {
  width: 33.33%;
  height: 33.33% !important;
  box-sizing: border-box;
}

.cell-player-9 {
  width: 33.33%;
  height: 33.33% !important;
  box-sizing: border-box;
}

.cell-player-16 {
  width: 25%;
  height: 25% !important;
  box-sizing: border-box;
}

.module_title {
  background: url("../../../../assets/screen/video/title.png") no-repeat;
  background-size: 100% 100%;
  color: white;
  font-size: 1.1rem;
  font-weight: bold;
  width: 100%;
  min-height: 35px;

  span {
    margin-left: 4rem;
  }
}


.legend {
  width: 220px;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: url('../../../../assets/screen/btn.png') 100% no-repeat;
  background-size: 100% 100%;
  color: whitesmoke
}


.el-input--medium .el-input__inner {
  height: 36px;
  line-height: 36px;
  background-color: rgb(5, 32, 75) !important;
}

.el-input--suffix .el-input__inner {
  padding-right: 30px;
  background-color: rgb(5, 32, 75) !important;
}

.custom-select {
  width: 30%;
  float: right;
  margin-right: 20px;
  background-color: rgb(5, 32, 75) !important;
  color: rgb(5, 32, 75);
  font-size: 14px;
}

::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner {
  background: rgb(5, 32, 75);
  color: #fff;
  border: 1px solid rgba(41, 78, 136, 0.8);
  border-radius: 5px;

}

//el-input聚焦的时候 外层的border会有一个样式
::v-deep .el-select .el-input.is-focus .el-input__inner {
  border: 0;
}

//修改的是el-input上下的小图标的颜色
::v-deep .el-select .el-input .el-select__caret {
  color: rgba(174, 197, 234, 0.8);
}

//修改总体选项的样式 最外层

::v-deep .el-select-dropdown {
  background: rgba(21, 43, 94, 0.3);
  margin: 0px;
  border: 0px;
  border-radius: 0px;
  left: 0px !important;
}

::v-deep .el-popper {
  position: absolute !important;
}

//修改单个的选项的样式
::v-deep .el-select-dropdown__item {
  background-color: rgb(5, 32, 75, 0.8);;
  color: #fff;
}

//item选项的hover样式
::v-deep .el-select-dropdown__item.hover,
::v-deep .el-select-dropdown__item:hover {
  color: rgb(212, 215, 220);
  background-color: #146193;
}

//修改的是下拉框选项内容上方的尖角
::v-deep .el-popper .popper__arrow, .el-popper .popper__arrow::after {
  display: none;

}

</style>
