<template>
  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
    <a-spin :spinning="loading" />
    <div id="fanLocal3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
    <div id="fanLocal3DCSS" class="threejs-Object-CSS" style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none">
      <div style="z-index: -1; position: relative" v-if="hasPermission('show:sensorMonitor')">
        <div class="elementTag" id="inputBox0">
          <div class="elementContent" v-if="selectData.windInputSpeed1 || selectData.windInputSpeed_merge">
            <p v-if="selectData.windInputSpeed1 || selectData.windInputSpeed_merge">
              局扇工作面风速：
              <span class="value">
                {{
                  selectData.windInputSpeed1 ? selectData.windInputSpeed1 : selectData.windInputSpeed_merge ? selectData.windInputSpeed_merge : '-'
                }}
              </span>
              <span class="unit"> m/s</span>
            </p>
            <p v-if="selectData.windQuantity1 || selectData.inletAirVolume_merge">
              风筒入口风量：
              <span class="value">
                {{ selectData.windQuantity1 ? selectData.windQuantity1 : selectData.inletAirVolume_merge ? selectData.inletAirVolume_merge : '-' }}
              </span>
              <span class="unit"> m³/min</span>
            </p>
          </div>
        </div>
        <div class="elementTag" id="inputBox1">
          <div class="elementContent" v-if="selectData.windSpeed1 || selectData.gas3 || selectData.windQuantity1 || selectData.inletAirVolume_merge">
            <p v-if="selectData.windSpeed1">
              风筒入口风速：
              <span class="value">{{ selectData.windSpeed1 ? selectData.windSpeed1 : '-' }}</span> <span class="unit"> m/s</span>
            </p>
            <p v-if="selectData.windQuantity1 || selectData.inletAirVolume_merge">
              风筒入口风量：
              <span class="value">
                {{ selectData.windQuantity1 ? selectData.windQuantity1 : selectData.inletAirVolume_merge ? selectData.inletAirVolume_merge : '-' }}
              </span>
              <span class="unit"> m³/min</span>
            </p>
            <p v-if="selectData.gas3"
              >风筒入口瓦斯浓度: <span class="value">{{ selectData.gas3 ? selectData.gas3 : '-' }}</span> <span class="unit"> %</span>
            </p>
          </div>
        </div>
        <div class="elementTag" id="outBox">
          <div
            class="elementContent elementContent-r"
            v-if="
              selectData.windQuantity2 ||
              selectData.gas1 ||
              (selectData.windOutSpeed1 && selectData.windOutSpeed_merge) ||
              selectData.ductOutletAirVolume_merge
            "
          >
            <p v-if="selectData.windQuantity2 || selectData.m3 || selectData.ductOutletAirVolume_merge || selectData.windOutSpeed_merge">
              迎头供风量：<span class="value">{{
                selectData.windQuantity2
                  ? selectData.windQuantity2
                  : selectData.m3
                    ? selectData.m3
                    : selectData.ductOutletAirVolume_merge
                      ? selectData.ductOutletAirVolume_merge
                      : '-'
              }}</span>
              <span class="unit"> m³/min</span>
            </p>
            <p v-if="selectData.gas1"
              >迎头瓦斯浓度：<span class="value">{{ selectData.gas1 ? selectData.gas1 : '-' }}</span> <span class="unit"> %</span></p
            >
            <p v-if="selectData.windOutSpeed1 || selectData.windOutSpeed_merge"
              >风筒出口风速<span class="value">{{
                selectData.windOutSpeed1 ? selectData.windOutSpeed1 : selectData.windOutSpeed_merge ? selectData.windOutSpeed_merge : '-'
              }}</span>
              <span class="unit"> %</span>
            </p>
          </div>
        </div>
        <div class="elementTag" id="returnBox">
          <div class="elementContent elementContent-r" v-if="selectData.gas2">
            <p v-if="selectData.gas2"
              >回风流瓦斯浓度：<span class="value">{{ selectData.gas2 ? selectData.gas2 : '-' }}</span> <span class="unit"> %</span></p
            >
          </div>
        </div>
        <div class="elementTag" id="gateBox" v-if="modalType == 'fm'">
          <div class="elementContent">
            <p>风门状态：关</p>
            <p>风门过风面积：{{ selectData.gas1 ? selectData.gas1 : '-' }}</p>
          </div>
        </div>
        <div class="elementTag" id="windownBox">
          <div class="elementContent" v-if="modalType == 'fc'">
            <p style="pointer-events: auto"
              ><a class="action-link" @click="$emit('goDetailDevice', 'window_fWindowM3')">风窗详情</a>
              <ArrowRightOutlined :style="{ color: '#157DC8' }" />
            </p>
            <p v-if="selectData.windSpeed"
              >风窗风流风速：<span class="value">{{ selectData.windSpeed ? selectData.windSpeed : '-' }}</span> <span class="unit"> m/s</span></p
            >
            <p v-if="selectData.fWindowM3"
              >风窗过风量：<span class="value">{{ selectData.fWindowM3 ? selectData.fWindowM3 : '-' }}</span> <span class="unit"> m³/min</span></p
            >
            <p v-if="selectData.OpenDegree"
              >风窗开度值：<span class="value">{{ selectData.OpenDegree ? selectData.OpenDegree : '-' }}</span> <span class="unit"> %</span></p
            >
            <p v-if="selectData.OpenDegree"
              >风窗过风面积：<span class="value">{{ selectData.frontArea ? selectData.frontArea : '-' }}</span> <span class="unit"> ㎡</span></p
            >
          </div>
        </div>
        <div class="elementTag" id="gasBox3">
          <div class="elementContent" v-if="selectData.gasT3">
            <!-- <div class="elementContent"> -->
            <p v-if="selectData.gasT3"
              >掘进工作面进风流处甲烷传感器T₃：<span class="value">{{ selectData.gasT3 ? selectData.gasT3 : '-' }}</span>
              <span class="unit">(%)</span></p
            >
          </div>
        </div>
        <div class="elementTag" id="gasBox2">
          <div class="elementContent" v-if="selectData.gasT2">
            <!-- <div class="elementContent"> -->
            <p v-if="selectData.gasT2"
              >掘进工作面回风流处甲烷传感器T₂：<span class="value">{{ selectData.gasT2 ? selectData.gasT2 : '-' }}</span>
              <span class="unit">(%)</span></p
            >
          </div>
        </div>
        <div class="elementTag" id="gasBox1">
          <div class="elementContent" v-if="selectData.gasT1">
            <!-- <div class="elementContent"> -->
            <p v-if="selectData.gasT1"
              >掘进工作面混合风流处甲烷传感器T₁：<span class="value">{{ selectData.gasT1 ? selectData.gasT1 : '-' }}</span>
              <span class="unit">(%)</span></p
            >
          </div>
        </div>
        <!-- 双巷风机右侧风机详情框 -->
        <div class="elementTag" id="inputBox2">
          <div class="elementContent">
            <p v-if="fanDualArray[0].windInputSpeed1 || fanDualArray[0].windInputSpeed_merge">
              局扇工作面风速：
              <span class="value">{{ fanDualArray[0].windInputSpeed1 || fanDualArray[0].windInputSpeed_merge || '-' }}</span>
              <span class="unit"> m/s</span>
            </p>
            <p v-if="fanDualArray[0].windQuantity1 || fanDualArray[0].inletAirVolume_merge">
              风筒入口风量：
              <span class="value">{{ fanDualArray[0].windQuantity1 || fanDualArray[0].inletAirVolume_merge || '-' }}</span>
              <span class="unit"> m³/min</span>
            </p>
          </div>
        </div>
        <!-- 双巷风机左侧风机详情框 -->
        <div class="elementTag" id="inputBox3">
          <div class="elementContent">
            <p v-if="fanDualArray[1].windInputSpeed1 || fanDualArray[1].windInputSpeed_merge">
              局扇工作面风速：
              <span class="value">{{ fanDualArray[1].windInputSpeed1 || fanDualArray[1].windInputSpeed_merge || '-' }}</span>
              <span class="unit"> m/s</span>
            </p>
            <p v-if="fanDualArray[1].windQuantity1 || fanDualArray[1].inletAirVolume_merge">
              风筒入口风量：
              <span class="value">{{ fanDualArray[1].windQuantity1 || fanDualArray[1].inletAirVolume_merge || '-' }}</span>
              <span class="unit"> m³/min</span>
            </p>
          </div>
        </div>
        <div class="elementTag" id="T1_1">
          <div class="elementContent" v-if="fanDualArray[0].gasT1">
            <!-- <div class="elementContent"> -->
            <p v-if="fanDualArray[0].gasT1">
              掘进面甲烷T1：
              <span class="value">{{ fanDualArray[0].gasT1 }}</span>
              <span class="unit">(%)</span>
            </p>
          </div>
        </div>
        <div class="elementTag" id="T1_2">
          <div class="elementContent" v-if="fanDualArray[1].gasT1">
            <!-- <div class="elementContent"> -->
            <p v-if="fanDualArray[1].gasT1">
              掘进面甲烷T1：
              <span class="value">{{ fanDualArray[1].gasT1 }}</span>
              <span class="unit">(%)</span>
            </p>
          </div>
        </div>
        <div class="elementTag" id="T2_1">
          <div class="elementContent" v-if="fanDualArray[0].gasT2">
            <!-- <div class="elementContent"> -->
            <p v-if="fanDualArray[0].gasT2">
              掘进面回风甲烷T2：
              <span class="value">{{ fanDualArray[0].gasT2 }}</span>
              <span class="unit">(%)</span>
            </p>
          </div>
        </div>
        <div class="elementTag" id="T2_2">
          <div class="elementContent" v-if="fanDualArray[1].gasT2">
            <!-- <div class="elementContent"> -->
            <p v-if="fanDualArray[1].gasT2">
              掘进面回风甲烷T2：
              <span class="value">{{ fanDualArray[1].gasT2 }}</span>
              <span class="unit">(%)</span>
            </p>
          </div>
        </div>
        <div class="elementTag" id="T3">
          <div class="elementContent" v-if="fanDualArray[1].gasT3">
            <!-- <div class="elementContent"> -->
            <p v-if="fanDualArray[1].gasT3">
              双巷掘进面混合回风流甲烷T3：
              <span class="value">{{ fanDualArray[1].gasT3 }}</span>
              <span class="unit">(%)</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { usePermission } from '/@/hooks/web/usePermission';

  defineProps<{
    loading: boolean;
    selectData: Record<string, any>;
    modalType: string;
    fanDualArray: Array<Record<string, any>>;
  }>();
  defineEmits(['goDetailDevice']);
  const { hasPermission } = usePermission();
</script>
