<!-- src/views/Landscape.vue -->
<template>
  <div>
    <div id="screen" class="allShow" :style="{
      width: `${style.width}px`,
      height: `${style.height}px`,
      transform: `${style.transform}`,
    }">
      <!--       <div class="user-info-position">
        <UserInfo @logout="handleLogout" />
      </div> -->
      <div class="topBox">
        <span class="title-text">{{ topBoxTitle }}</span>
      </div>

      <div class="time-container">
        <span>{{ formattedDate }}</span>
        <span style="padding: 10px">星期{{ week }}</span>
        <span>{{ formattedTime }}</span>
      </div>

      <el-row>
        <div class="dmt-container">
          <div class="dmt-inner-container">
            <div class="dmt-content">
              <d-m-t v-if="showDmtCom" ref="dmtCom" :key="new Date().getTime()" @changeCameraState="changeCameraState"
                containerHeight="980px" containerWidth="100%" />
            </div>
          </div>
        </div>
        <ProductionInfo ref="productionInfoRef" />
        <!-- 左侧组件 -->
        <ServoLoadCurve />
        <ToolUseTime />
        <PartMaintenance />
        <SenveWorkTime />
        <!-- 右侧组件 -->
        <NowStatus />
        <OEEAnalysis />
        <QualityManagement />
        <Andon mode="landscape" />
        <!-- 底部组件 -->
        <div class="drawing-button-container">
          <ControlButton @watch-paper="handleWatchPaper" />
        </div>
        <EquipmentRuntimeHistory />
        <Warning />
      </el-row>
    </div>


    <!-- 图纸查看器 (支持缩放、拖拽、旋转) -->
    <el-image-viewer
      v-if="drawingDialogVisible"
      :url-list="drawingImages"
      :initial-index="0"
      :zoom-rate="1.2"
      :min-scale="0.2"
      :max-scale="7"
      @close="handleCloseDrawing"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import $ from 'jquery'

// 组件导入
import ServoLoadCurve from '@/components/layout/ServoLoadCurve.vue'
import ToolUseTime from '@/components/layout/ToolUseTime.vue'
import PartMaintenance from '@/components/layout/PartMaintenance.vue'
import SenveWorkTime from '@/components/layout/SenveWorkTime.vue'
import NowStatus from '@/components/layout/NowStatus.vue'
import EquipmentRuntimeHistory from '@/components/layout/EquipmentRuntimeHistory.vue'
import Warning from '@/components/layout/Warning.vue'
import DMT from '@/components/DMT/index.vue'
import OEEAnalysis from '@/components/layout/OEEAnalysis.vue'
import QualityManagement from '@/components/layout/QualityManagement.vue'
import Andon from '@/components/layout/Andon.vue'
import ControlButton from '@/components/layout/ControlButton.vue'
import ProductionInfo from '@/components/layout/ProductionInfo.vue'
import UserInfo from '@/components/layout/UserInfo.vue'
// 类型导入
import type { DeviceStatus, JointData, AlarmInfo } from '@/types'
import { throttle } from '@/utils/tool'

const router = useRouter()
// 响应式数据
const topBoxTitle = ref('')
const style = ref({
  width: '1920',
  height: '1080',
  transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)',
})
const drawingDialogVisible = ref(false)
const drawingImages = ['/PNG/图纸.png']  // 图纸图片列表
const hour = ref('00')
const minute = ref('00')
const second = ref('00')
const year = ref('1900')
const month = ref('01')
const day = ref('01')
const week = ref('一')

// 引用组件实例
const dmtCom = ref(null)
const showDmtCom = ref(false)
const productionInfoRef = ref<InstanceType<typeof ProductionInfo> | null>(null)
// 计算属性
const formattedTime = computed(() => `${hour.value}:${minute.value}:${second.value}`)
const formattedDate = computed(() => `${year.value}/${month.value}/${day.value}`)

// 方法
const getScale = () => {
  const w = window.innerWidth / parseInt(style.value.width)
  const h = window.innerHeight / parseInt(style.value.height)
  return { x: w, y: h }
}

const setScale = () => {
  const scale = getScale()
  style.value.transform = `scaleY(${scale.y}) scaleX(${scale.x}) translate(-50%, -50%)`
}

const updateTime = () => {
  const now = new Date()
  hour.value = String(now.getHours()).padStart(2, '0')
  minute.value = String(now.getMinutes()).padStart(2, '0')
  second.value = String(now.getSeconds()).padStart(2, '0')
  year.value = String(now.getFullYear())
  month.value = String(now.getMonth() + 1).padStart(2, '0')
  day.value = String(now.getDate()).padStart(2, '0')
  const weeks = ['日', '一', '二', '三', '四', '五', '六']
  week.value = weeks[now.getDay()] ?? '一'
}

const handleOpenDoor = () => {
  console.log('开门按钮点击')
}

const handleWatchPaper = () => {
  console.log('查看图纸按钮点击 - 父组件')
  drawingDialogVisible.value = true
}

const handleLogout = () => {
  console.log('退出账号按钮点击 - 父组件')
  // 清除所有相关数据
  localStorage.removeItem('isAuthenticated')
  localStorage.removeItem('username')
  localStorage.removeItem('loginTime')
  localStorage.removeItem('mqttTopic')
  localStorage.removeItem('machineData')
  dmtCom.value?.disposeThreeResources()
  showDmtCom.value = false
  router.push('/')
}

const handleCloseDrawing = () => {
  drawingDialogVisible.value = false
}

// 方向变化处理
const handleOrientationChange = () => {
  const width = window.innerWidth
  const height = window.innerHeight
  const currentRoute = router.currentRoute.value.name
  // 如果方向不匹配，自动跳转到正确页面
  if (width > height && currentRoute !== 'Landscape') {
    router.push({ name: 'Landscape' })
  } else if (width <= height && currentRoute !== 'Portrait') {
    router.push({ name: 'Portrait' })
  }
}

// 接收来自组件的事件
const changeCameraState = (state: any) => { }

// 生命周期
onMounted(() => {
  try {
    showDmtCom.value = true
    topBoxTitle.value = (window as any).dt_Config?.topBoxTitle

    const timer = setInterval(updateTime, 1000)
    updateTime()
    setScale()

    handleOrientationChange()
    dmtCom.value?.disposeThreeResources()
    showDmtCom.value = true
    // 创建节流版本
    const throttledOrientationChange = throttle(function () {
      setScale()
      handleOrientationChange()
    }, 500)
    window.addEventListener('resize', throttledOrientationChange)

    return () => {
      clearInterval(timer)
      window.removeEventListener('resize', handleOrientationChange)
    }
  } catch (error) {
    console.error('组件挂载错误:', error)
  }
})

onUnmounted(() => { })
</script>
<style>
/*css主要部分的样式*/
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 5px;
  /*对垂直流动条有效*/
  height: 5px;
  /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #0e3261ff;
  /*background-color: #ffffff;*/
  border-radius: 2px;
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgb(10, 35, 82);
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
  display: none;
}

/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
  background: #dedede;
}
</style>
<style scoped="scoped">
html {
  overflow: auto;
}

body {
  margin: 0;
  padding: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  position: relative;
}

.allShow {
  overflow-y: hidden;
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  color: white;
  font-family:
    'Microsoft YaHei', 微软雅黑, 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-image: url('/PNG/背景.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.allShow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.dmt-container {
  position: relative;
  height: 1080px;
  width: 1920px;
}

.dmt-inner-container {
  height: 100%;
  width: 100%;
  position: absolute;
}

.dmt-content {
  width: 100%;
  height: 100%;
  filter: blur(10);
  z-index: 999;
}

.title-text {
  font-size: 3rem;
  text-align: center;
  letter-spacing: 5px;
  font-weight: bolder;
  background: linear-gradient(to bottom, white, #3c9fc0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-top: -20px;
}

.time-container {
  height: 80px;
  color: white;
  position: absolute;
  top: 50px;
  right: 50px;
  font-weight: bolder;
  font-size: 18px;
}

.user-info-position {
  position: absolute;
  top: 40px;
  left: 20px;
  z-index: 1000;
}


.left-data-box1 {
  position: absolute;
  width: 392px;
  height: 225px;
  -webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
  -moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
  box-shadow: inset 0 0 30px rgb(24, 78, 135);
  left: 20px;
  top: 20px;
}

.left-data-box2 {
  position: absolute;
  width: 392px;
  height: 225px;
  -webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
  -moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
  box-shadow: inset 0 0 30px rgb(24, 78, 135);
  left: 20px;
  top: 265px;
}

.left-data-box3 {
  position: absolute;
  width: 392px;
  height: 225px;
  -webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
  -moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
  box-shadow: inset 0 0 30px rgb(24, 78, 135);
  left: 20px;
  top: 510px;
}

.left-data-box4 {
  position: absolute;
  width: 392px;
  height: 219px;
  -webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
  -moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
  box-shadow: inset 0 0 30px rgb(24, 78, 135);
  left: 20px;
  top: 755px;
}

.right-data-box1 {
  position: absolute;
  width: 392px;
  height: 120px;
  -webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
  -moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
  box-shadow: inset 0 0 30px rgb(24, 78, 135);
  right: 9px;
  top: 20px;
}

.right-data-box2 {
  position: absolute;
  width: 392px;
  height: 200px;
  -webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
  -moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
  box-shadow: inset 0 0 30px rgb(24, 78, 135);
  right: 9px;
  top: 422px;
}

.right-data-box3 {
  position: absolute;
  width: 392px;
  height: 295px;
  box-shadow: inset 0 0 30px rgb(24, 78, 135);
  right: 9px;
  top: 528px;
}

/* .right-data-box3 {
  position: absolute;
  width: 600px;
  height: 400px;
  box-shadow: inset 0 0 30px rgb(24, 78, 135);
  right: 9px;
  top: 528px;
} */


.topBox {
  position: relative;
  display: flex;
  z-index: 10;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  background-size: 100% 100%;
  background-position: center;
  background-image: url('/PNG/titleImg.png');
  height: 95px;
  width: 1920px;
  pointer-events: none;
  font-size: 3rem;
  text-align: center;
}

.andon-box {
  position: absolute;
  width: 392px;
  height: 135px;
  box-shadow: inset 0 0 30px rgb(24, 78, 135);
  right: 9px;
  top: 837px;
  display: flex;
  flex-direction: column;
}

.bottom-box {
  position: absolute;
  width: 1074px;
  height: 180px;
  -webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
  -moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
  box-shadow: inset 0 0 30px rgb(24, 78, 135);
  left: 429px;
  top: 793px;
}

.warning-box {
  position: absolute;
  width: 392px;
  height: 162px;
  -webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
  -moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
  box-shadow: inset 0 0 30px rgb(24, 78, 135);
  right: 9px;
  top: 350px;
  display: flex;
  flex-direction: column;
}

.right-data-box-oee {
  position: absolute;
  width: 392px;
  height: 170px;
  box-shadow: inset 0 0 30px rgb(24, 78, 135);
  right: 9px;
  top: 162px;
}

.data-box-text-title {
  font-size: 20px;
  margin-left: 20px;
}

.data-box-text-value {
  font-size: 25px;
  margin-right: 12px;
}


.editable-input {
  background: transparent;
  border: none;
  color: white;
  font-size: 20px;
  font-weight: bolder;
  text-align: center;
  width: 120px;
  outline: none;
  padding: 0 12px 0 0;
  margin: 0;
  cursor: pointer;
  color: #409eff;
}

.editable-input:focus {
  border: 1px solid #0070c0;
  border-radius: 4px;
}

.drawing-button-container {
  position: absolute;
  bottom: 300px;
  right: 300px;
  z-index: 1000;
  width: 1300px;
}

.drawing-dialog-content {
  text-align: center;
  width: 100%;
  height: 70vh;
  overflow: auto;
}
</style>
