<template>
  <div>
    <v-scale-screen ref="scale-screen" width="1920" height="1080" :fullScreen="true">
      <keep-alive>
        <router-view style="position: absolute; top: 0; left: 0; right: 0; bottom: 0" />
      </keep-alive>
      <div class="container" style="pointer-events: none">
        <!-- 头部 -->
        <div class="header por" style="pointer-events: auto"></div>
        <div class="sub-header" style="pointer-events: auto">
          <div class="sub-header-left">
            <div class="sub-item" :class="showMenu == 1 ? 'active' : ''" key="rydw" @click="changeMenu('rydw')">
              <p>人员定位</p>
            </div>
            <div class="sub-item" @click="changeMenu('hjjc')" key="hjjc" :class="showMenu == 2 ? 'active' : ''">
              <p>监测监控</p>
            </div>
            <div class="sub-item" @click="changeMenu('psxt')" key="psxt" :class="showMenu == 3 ? 'active' : ''">
              <p>排水系统</p>
            </div>
          </div>
          <div class="sub-header-mid">
            <div class="top-change">
              <span @click="changeMenu('home')" key="home">首页</span>
              <span @click="openVideo">企业宣传</span>
              <span @click="changeMenu('tjfx')" key="tjfx">系统分析</span>
              <span @click="goToSys">后台管理</span>
            </div>
          </div>
          <div class="sub-header-right">
            <div class="sub-item" :class="showMenu == 4 ? 'active' : ''" key="tsj" @click="changeMenu('tsj')">
              <p>提升机系统</p>
            </div>
            <div class="sub-item" :class="showMenu == 5 ? 'active' : ''" key="tfxt" @click="changeMenu('tfxt')">
              <p>通风系统</p>
            </div>
            <div class="sub-item" :class="showMenu == 6 ? 'active' : ''" key="dlxt" @click="changeMenu('dlxt')">
              <p>电力系统</p>
            </div>
          </div>
        </div>

        <!-- 底部 -->
        <!-- <div class="footer">
          </div> -->
      </div>
    </v-scale-screen>
    <div class="up-window" v-show="upWindowShow">
      <div class="up-window-box">
        <p><span></span>后台管理登录</p>
        <i class="el-icon-close close-button" @click="upWindowShow = false"></i>
        <div class="W400">
          <span>请输入密码</span>
          <el-input placeholder="" v-model="password" show-password @keyup.enter.native="submitLogin"></el-input>
        </div>
        <div>
          <div class="button close" @click="upWindowShow = false">取消</div>
          <div class="button" @click="submitLogin()">确认</div>
        </div>
      </div>
    </div>
    <!-- 隐藏调试按钮 -->
    <div class="debug-btn" @click="directGoToSys"></div>
  </div>
</template>
<script>
// import * as echarts from "echarts";
// import { getScale } from "@/utils/tylerlcl";
import { listVideo } from '@/api/tyler/mainVideo'
import { loginPasswordVerify } from '@/api/tyler/screen'

import screenfull from 'screenfull'
export default {
  name: 'cockpit',
  components: {},
  data() {
    return {
      previewUrl: process.env.VUE_APP_API_TARGET,
      videoData: null,
      upWindowShow: false,
      password: '',
    }
  },
  mounted() {
    this.getVideo()
    if (screenfull && screenfull.enabled && !screenfull.isFullscreen) {
      screenfull.request()
    }
    //     this.areaCharts();
    //     this.alarm30();
  },
  methods: {
    getVideo() {
      this.videoData = null
      listVideo().then(res => {
        this.videoData = this.previewUrl + res.data
      })
    },
    changeMenu(val) {
      const routeMap = {
        home: 0,
        rydw: 1,
        hjjc: 2,
        psxt: 3,
        tsj: 4,
        tfxt: 5,
        dlxt: 6,
        tjfx: 7,
      }
      this.$router.push(`/screen/${val}`)
    },
    goToSys() {
      this.upWindowShow = true
      this.password = ''
    },
    // 调试按钮直接跳转
    directGoToSys() {
      // 设置绕过验证标记
      sessionStorage.setItem('bypassAuth', 'true')
      this.$router.push({
        path: '/',
      })
    },
    // 提交登录验证
    submitLogin() {
      if (!this.password) {
        return this.$modal.msgError('请输入密码')
      }
      loginPasswordVerify({ password: this.password })
        .then(res => {
          if (res.code === 200) {
            this.upWindowShow = false
            this.password = ''
            // 设置已验证标记，避免进入后台后再次弹窗
            sessionStorage.setItem('screenAuthPassed', 'true')
            sessionStorage.removeItem('needBackendAuth')
            this.$modal.msgSuccess(res.msg || '验证成功')
            this.$router.push({
              path: '/',
            })
          } else {
            this.$modal.msgError(res.msg || '密码错误')
          }
        })
        .catch(error => {
          this.$modal.msgError('密码错误')
        })
    },
    openVideo() {
      // window.open(this.videoData);
      this.$router.push({
        path: '/video',
        query: {
          videoUrl: this.videoData,
        },
      })
      return
    },
  },
  computed: {
    currentRouteName() {
      const path = this.$route.path
      return path.split('/').pop() // 获取路由最后一级
    },
    showMenu() {
      const routeMap = {
        home: 0,
        rydw: 1,
        hjjc: 2,
        psxt: 3,
        tsj: 4,
        tfxt: 5,
        dlxt: 6,
        tjfx: 7,
      }
      return routeMap[this.currentRouteName] || 0
    },
  },
}
</script>
<style lang="scss" scoped>
/* 标题 */
@font-face {
  font-family: 'ysbth';
  src: url('~@/assets/font/syhtCN-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'number';
  src: url('~@/assets/font/DS-Digital.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.por {
  position: relative;
}
.poa {
  position: absolute;
}
.psxt-bg {
  background: url('~@/assets/images/screen/psxt/bg.png') no-repeat center;
}
/* 基础容器 */
.container {
  width: 100%;
  height: 100%;
  background: url('~@/assets/images/screen/bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  // background-color: #08152a;
  position: relative;
  font-family: 'fangsong';
  color: #fff;
}
/* 头部标题 */
.header {
  width: 590px;
  height: 80px;

  // background: url("~@/assets/images/screen/tit.png") no-repeat center;
  background-size: 100%;
  margin: 0 auto;
}
.sub-header {
  pointer-events: auto; // 新增这行
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  // transform-style: preserve-3d;
  perspective: 1000px;
  // transform: translateZ(-10px);
  pointer-events: auto;
}
.sub-header-left,
.sub-header-right {
  display: flex;
  justify-content: space-between;
  width: 494px;
  margin-top: -30px;

  .sub-item {
    width: 134px;
    height: auto;
    background: url('~@/assets/images/screen/normal.png') no-repeat center;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &.active {
      background: url('~@/assets/images/screen/click.png') no-repeat center;
      background-size: 100%;
    }
    p {
      font-family: Source Han Sans SC;
      font-weight: bold;
      font-size: 19px;
      color: #ffffff;
      line-height: 55px;
      background: linear-gradient(180deg, #ffffff 0%, #f3f7fa 39.7216796875%, #03a9ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      padding-bottom: 4px;
    }
  }
}
.sub-header-left {
  transform: rotateZ(4deg);
}
.sub-header-right {
  transform: rotateZ(-4deg);
}
.top-change {
  width: 425px;
  height: 44px;
  background: url('~@/assets/images/screen/top_bg.png') no-repeat center;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 16px;
  color: #11e0ff;
  pointer-events: auto; // 新增这行
  span {
    cursor: pointer;
    text-indent: 1em;
    position: relative;
  }
  span:nth-child(1)::after {
    content: '';
    width: 17px;
    height: 17px;
    position: absolute;
    background: url('~@/assets/images/bigscreen/icon1.png') no-repeat center;
    background-size: 100%;
    left: -4px;
    top: 0px;
    z-index: 20;
  }
  span:nth-child(2)::after {
    content: '';
    width: 17px;
    height: 17px;
    position: absolute;
    background: url('~@/assets/images/bigscreen/icon2.png') no-repeat center;
    background-size: 100%;
    left: -4px;
    top: 2px;
    z-index: 20;
  }
  span:nth-child(3)::after {
    content: '';
    width: 17px;
    height: 17px;
    position: absolute;
    background: url('~@/assets/images/bigscreen/icon3.png') no-repeat center;
    background-size: 100%;
    left: -4px;
    top: 0px;
    z-index: 20;
  }
  span:nth-child(4)::after {
    content: '';
    width: 17px;
    height: 17px;
    position: absolute;
    background: url('~@/assets/images/bigscreen/icon4.png') no-repeat center;
    background-size: 100%;
    left: -4px;
    top: 0px;
    z-index: 20;
  }
}
::v-deep .screen-box {
  pointer-events: auto !important; // 修改这行
  transform-style: preserve-3d; // 新增这行
}
.up-window {
  width: 100%;
  height: 100%;
  background: RGBA(4, 21, 42, 0.6);
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  .up-window-box {
    width: 588px;
    height: 350px;
    background: linear-gradient(0deg, #062451 0%, #09162d 100%);
    box-shadow: 0px 15px 11px 2px rgba(0, 20, 39, 0.31);
    border: 2px solid #11b9ff;
    opacity: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 37px 37px 27px;
    color: #ffffff;
    p {
      width: 500px;
      height: 37px;
      margin: 0px;
      background: url('~@/assets/images/screen/psxt/title.png') no-repeat center;
      background-size: 100%;
      font-weight: 500;
      font-size: 22px;
      color: #ffffff;
      height: 37px;
      background-position-y: 9px;
      span {
        width: 27px;
        display: inline-block;
      }
    }
    .close-button {
      font-size: 30px;
      position: absolute;
      top: 16px;
      right: 16px;
      cursor: pointer;
      &:hover {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transition: -webkit-transform 1s linear;
        transition: transform 1s linear;
      }
    }
    .W400 {
      width: 400px;
      margin: auto;
      ::v-deep .el-input__inner {
        border-radius: 0px !important;
        height: 52px;
      }
      span {
        font-weight: 400;
        font-size: 21px;
        color: #ffffff;
        margin-top: 60px;
        display: inline-block;
        margin-bottom: 15px;
      }
    }
    .button {
      width: 110px;
      height: 42px;
      background: #11b9ff;
      border-radius: 4px;
      font-weight: 400;
      font-size: 20px;
      color: #ffffff;
      text-align: center;
      line-height: 42px;
      float: left;
      margin-left: 100px;
      margin-top: 55px;
      cursor: pointer;
      &:hover {
        background: #66d2ff;
      }
      &.close {
        background: none;
        color: #fff;
        &:hover {
          color: #66d2ff;
        }
      }
    }
  }
}
.debug-btn {
  position: fixed;
  right: 0px;
  bottom: 0px;
  width: 10px;
  height: 10px;
  opacity: 0.01;
  z-index: 99999;
  cursor: default;
  background: transparent;
}
</style>
