<template>
  <div class="box-ventilationSystem">
    <div class="legend-box">
      <template v-for="(item, index) in legend" :key="index">
        <div
          class="legend-box-item"
          :style="{
            'background-image': selectIndex === index ? 'url(' + selectImg + ')' : '',
          }"
          @click="selectLegend(item, index)">
          <div class="legend-box-item-img">
            <img style="width: 42px" :src="item.url" />
          </div>
          <div class="legend-box-item-name">
            {{ item.name }}
          </div>
        </div>
      </template>
    </div>
    <!-- 温度 -->
    <transition name="zep">
      <div v-if="selectIndex === 0">
        <template v-for="(item, index) in sensorData" :key="index">
          <div
            style="position: absolute"
            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
            <singleModel :dataSource="item" />
          </div>
        </template>
      </div>
    </transition>
    <!-- 湿度 -->
    <transition name="zep">
      <div v-if="selectIndex === 1">
        <template v-for="(item, index) in humidityData" :key="index">
          <div
            style="position: absolute"
            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
            <singleModel :dataSource="item" />
          </div>
        </template>
      </div>
    </transition>
    <!-- PM2.5 -->
    <transition name="zep">
      <div v-if="selectIndex === 2">
        <template v-for="(item, index) in pmData" :key="index">
          <div
            style="position: absolute"
            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
            <singleModel :dataSource="item" />
          </div>
        </template>
      </div>
    </transition>
    <!-- CO2e -->
    <transition name="zep">
      <div v-if="selectIndex === 3">
        <template v-for="(item, index) in CO2Data" :key="index">
          <div
            style="position: absolute"
            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
            <singleModel :dataSource="item" />
          </div>
        </template>
      </div>
    </transition>
    <!-- 右侧抽屉的触发按钮 -->
    <div
      class="drawer-box-in"
      v-if="!visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
      @click="toggleDrawer">
      <double-left-outlined class="drawer-icon" style="color: white" />
    </div>
    <!-- 排风扇 -->
    <transition name="zep">
      <div v-if="selectIndex === 4">
        <template v-for="(item, index) in fanData" :key="index">
          <!-- 朝左边 -->
          <template v-if="item.lineType === '1'">
            <div
              style="position: absolute"
              :style="{
                left: 'calc(' + item.styleText.left + ' - 10.6%)',
                bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
              }">
              <boxModel :dataSource="item" />
            </div>
            <img
              style="width: 50px; height: 75px; position: absolute; z-index: 1"
              :style="{
                left: 'calc(' + item.styleText.left + ' - 1.5%)',
                bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
                transform: 'rotateY(180deg)',
              }"
              src="../image/liftState/lift/line.png" />
          </template>
          <!-- 朝右边 -->
          <template v-if="item.lineType === '2'">
            <div
              style="position: absolute"
              :style="{
                left: 'calc(' + item.styleText.left + ' + 4.3%)',
                bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
              }">
              <boxModel :dataSource="item" />
            </div>
            <img
              style="width: 50px; height: 75px; position: absolute; z-index: 1"
              :style="{
                left: 'calc(' + item.styleText.left + ' + 1.5%)',
                bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
                transform: 'rotate(90deg,180deg)',
              }"
              src="../image/liftState/lift/line.png" />
          </template>
          <img
            style="width: 42px; height: 42px; position: absolute"
            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
            src="../image/ventilationSystem/fan.png" />
        </template>
      </div>
    </transition>
    <!-- 弹窗操控 -->
    <a-drawer
      v-if="selectIndex === 4 && visible"
      :visible="selectIndex === 4"
      class="drawer-fan"
      :width="496"
      :forceRender="preload"
      placement="right"
      :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8, color: 'white' }"
      :closable="false"
      id="drawer"
      :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
      <!-- 左侧抽屉的关闭按钮 -->
      <div
        class="drawer-box-out"
        v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
        @click="toggleDrawer">
        <double-right-outlined class="drawer-icon" style="color: white" />
      </div>
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="控制面板"> <fanControl /> </a-tab-pane>
        <a-tab-pane key="2" tab="计划列表" force-render>
          <fanPlant />
        </a-tab-pane>
        <a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
      </a-tabs>
    </a-drawer>
    <!-- 风幕机 -->
    <transition name="zep">
      <div v-if="selectIndex === 5">
        <template v-for="(item, index) in airCurtainData" :key="index">
          <div
            style="position: absolute"
            :style="{
              left: 'calc(' + item.styleText.left + ' - 15.1%)',
              bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
            }">
            <boxModel :dataSource="item" />
          </div>
          <img
            style="width: 50px; height: 75px; position: absolute; z-index: 1"
            :style="{
              left: 'calc(' + item.styleText.left + ' - 1.5%)',
              bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
              transform: 'rotateY(180deg)',
            }"
            src="../image/liftState/lift/line.png" />

          <img
            style="width: 42px; height: 42px; position: absolute"
            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
            src="../image/ventilationSystem/airCurtain.png" />
        </template>
      </div>
    </transition>
    <!-- 弹窗操控 -->
    <a-drawer
      v-if="selectIndex === 5 && visible"
      :visible="selectIndex === 5"
      class="drawer-fan"
      :width="496"
      :forceRender="preload"
      placement="right"
      :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8, color: 'white' }"
      :closable="false"
      id="drawer"
      :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"
      :mask="false">
      <!-- 左侧抽屉的关闭按钮 -->
      <div
        class="drawer-box-out"
        v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
        @click="toggleDrawer">
        <double-right-outlined class="drawer-icon" style="color: white" />
      </div>
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="控制面板"> 风幕机 </a-tab-pane>
        <a-tab-pane key="2" tab="计划列表" force-render> 计划列表 </a-tab-pane>
        <a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
      </a-tabs>
    </a-drawer>
    <transition name="zep">
      <div v-if="selectIndex === 6">
        <template v-for="(item, index) in windowData" :key="index">
          <div
            style="position: absolute"
            :style="{
              left: 'calc(' + item.styleText.left + ' - 10.6%)',
              bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
            }">
            <boxModel :dataSource="item" />
          </div>
          <img
            style="width: 50px; height: 75px; position: absolute; z-index: 1"
            :style="{
              left: 'calc(' + item.styleText.left + ' - 1.5%)',
              bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
              transform: 'rotateY(180deg)',
            }"
            src="../image/liftState/lift/line.png" />

          <img
            style="width: 42px; height: 42px; position: absolute"
            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
            src="../image/ventilationSystem/windowIcon.png" />
        </template>
      </div>
    </transition>
    <!-- 弹窗操控 -->
    <a-drawer
      v-if="selectIndex === 6 && visible"
      :visible="selectIndex === 6"
      class="drawer-fan"
      :width="496"
      :forceRender="preload"
      placement="right"
      :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8, color: 'white' }"
      :closable="false"
      id="drawer"
      :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"
      :mask="false">
      <!-- 左侧抽屉的关闭按钮 -->
      <div
        class="drawer-box-out"
        v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
        @click="toggleDrawer">
        <double-right-outlined class="drawer-icon" style="color: white" />
      </div>
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="控制面板"> 电动窗 </a-tab-pane>
        <a-tab-pane key="2" tab="计划列表" force-render> 计划列表 </a-tab-pane>
        <a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
      </a-tabs>
    </a-drawer>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  //图片
  import temperature from '../image/airConditioningSystem/temperature.png';
  import humidity from '../image/ventilationSystem/humidity.png';
  import PM25 from '../image/ventilationSystem/PM25.png';
  import CO2 from '../image/ventilationSystem/CO2.png';
  import ventilatingFan from '../image/ventilationSystem/ventilatingFan.png';
  import window from '../image/ventilationSystem/window.png';
  import airCurtain from '../image/ventilationSystem/fanMachine.png';
  import selectImg from '../image/airConditioningSystem/selectImg.png';
  import sunRed from '../image/airConditioningSystem/sunRed.png';
  import sunYellow from '../image/airConditioningSystem/sunYellow.png';
  import sunBlue from '../image/airConditioningSystem/sunBlue.png';

  import boxModel from './components/boxModel.vue';
  import singleModel from '../components/singleModel.vue';
  import fanControl from './components/fanControl.vue';
  import fanPlant from './components/fanPlant.vue';
  import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';

  //图例
  const legend = ref([
    { url: temperature, name: '温度' },
    { url: humidity, name: '湿度' },
    { url: PM25, name: 'PM2.5' },
    { url: CO2, name: 'CO2浓度' },
    { url: ventilatingFan, name: '排风扇' },
    { url: airCurtain, name: '风幕机' },
    { url: window, name: '电动窗' },
  ]);
  // 选择的图例
  const selectIndex = ref(0);
  //选择table
  const activeKey = ref('1');
  // 展示
  const visible = ref(true);
  // 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
  const preload = ref(true);
  // 抽屉 - 开关事件
  const toggleDrawer = () => {
    console.log('xxxx');
    visible.value = !visible.value;
  };
  //选择方法
  const selectLegend = (item: any, index: any) => {
    if (selectIndex.value !== index) {
      selectIndex.value = index;
    }
  };
  //温度数组
  const sensorData = ref([
    {
      title: '多功能传感器A',
      styleText: { left: '48%', bottom: '64%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: sunRed,
    },
    {
      title: '多功能传感器B',
      styleText: { left: '48.2%', bottom: '43%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: sunYellow,
    },
  ]);
  //湿度数组
  const humidityData = ref([
    {
      title: '多功能传感器A',
      styleText: { left: '48%', bottom: '64%' },
      type: '湿度',
      unit: '%',
      number: 20,
      url: humidity,
    },
    {
      title: '多功能传感器B',
      styleText: { left: '48.2%', bottom: '43%' },
      type: '湿度',
      unit: '%',
      number: 20,
      url: humidity,
    },
  ]);
  //PM2.5数组
  const pmData = ref([
    {
      title: '多功能传感器A',
      styleText: { left: '48%', bottom: '64%' },
      type: 'pm2.5',
      unit: '',
      number: 20,
      url: PM25,
    },
    {
      title: '多功能传感器B',
      styleText: { left: '48.2%', bottom: '43%' },
      type: 'pm2.5',
      unit: '',
      number: 20,
      url: PM25,
    },
  ]);
  //二氧化碳 浓度
  const CO2Data = ref([
    {
      title: '多功能传感器A',
      styleText: { left: '48%', bottom: '64%' },
      type: '二氧化碳',
      unit: 'CO2e',
      number: 20,
      url: CO2,
    },
    {
      title: '多功能传感器B',
      styleText: { left: '48.2%', bottom: '43%' },
      type: '二氧化碳',
      unit: 'CO2e',
      number: 99,
      url: CO2,
    },
  ]);
  //排风扇
  const fanData = ref([
    {
      title: '排风扇',
      styleText: { left: '43.2%', bottom: '77.8%' },
      type: 'fan',
      lineType: '1',
    },
    {
      title: '排风扇',
      styleText: { left: '50%', bottom: '77.8%' },
      type: 'fan',
      lineType: '2',
    },
    {
      title: '排风扇',
      styleText: { left: '41.2%', bottom: '27.8%' },
      type: 'fan',
      lineType: '1',
    },
    {
      title: '排风扇',
      styleText: { left: '51.2%', bottom: '27.8%' },
      type: 'fan',
      lineType: '2',
    },
  ]);
  // 风幕机
  const airCurtainData = ref([
    {
      title: '风幕机',
      styleText: { left: '38%', bottom: '57.8%' },
      type: 'airCurtain',
    },
    {
      title: '风幕机',
      styleText: { left: '58.5%', bottom: '57.3%' },
      type: 'airCurtain',
    },
    {
      title: '风幕机',
      styleText: { left: '64.2%', bottom: '22.8%' },
      type: 'airCurtain',
    },
  ]);
  // 电动窗
  const windowData = ref([
    {
      title: '电动窗1',
      styleText: { left: '32%', bottom: '28%' },
      type: 'window',
    },
    {
      title: '电动窗2',
      styleText: { left: '33.5%', bottom: '42.8%' },
      type: 'window',
    },
    {
      title: '电动窗3',
      styleText: { left: '35%', bottom: '57.8%' },
      type: 'window',
    },
    {
      title: '电动窗4',
      styleText: { left: '36.5%', bottom: '72.8%' },
      type: 'window',
    },
    {
      title: '电动窗5',
      styleText: { left: '66%', bottom: '28%' },
      type: 'window',
    },
    {
      title: '电动窗6',
      styleText: { left: '64%', bottom: '42.8%' },
      type: 'window',
    },
    {
      title: '电动窗7',
      styleText: { left: '62%', bottom: '57.8%' },
      type: 'window',
    },
    {
      title: '电动窗8',
      styleText: { left: '60%', bottom: '72.8%' },
      type: 'window',
    },
  ]);
  onMounted(() => {});
  onUnmounted(() => {});
</script>
<style lang="less">
  .legend-box {
    width: 5%;
    height: 100%;
    background-color: rgba(33, 40, 54, 0.9);
    border-radius: 4px 0px 0px 4px;
    padding: 4px;
    .legend-box-item {
      width: 100%;
      height: 90px;
      padding: 10px 0;
      cursor: pointer;
      background-size: 75%;
      background-repeat: no-repeat;
      background-position: center; /* 把图片背景居中 */
      .legend-box-item-img {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
      }
      .legend-box-item-name {
        width: 100%;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        color: white;
        font-size: 12px;
        margin-top: 6px;
      }
    }
  }
  .box-ventilationSystem {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    background-image: url('../image/ventilationSystem/ventilationSystemBg.png');
    background-size: 100% 99.9%;
    background-repeat: no-repeat;
    position: relative;
  }
  .zep-enter-active,
  .zep-leave-active {
    animation-duration: 0.6s; /* 增加动画持续时间 */
    animation-timing-function: ease-in-out; /* 使用更平滑的动画曲线 */
  }

  .zep-enter-active {
    animation-name: bounce-enter;
  }

  .zep-leave-active {
    animation-name: bounce-leave;
  }

  /* 进入动画 */
  @keyframes bounce-enter {
    0% {
      opacity: 0; /* 初始时完全透明 */
    }
    100% {
      opacity: 1; /* 结束时完全不透明 */
    }
  }

  /* 离开动画 */
  @keyframes bounce-leave {
    0% {
      opacity: 1; /* 初始时完全不透明 */
    }
    100% {
      opacity: 0; /* 结束时完全透明 */
    }
  }
  .drawer-fan {
    width: 496px;
    // 抽屉关闭按钮
    .drawer-box-out {
      width: 30px;
      height: 40px;
      border-radius: 2px;
      position: fixed;
      right: 466px;
      top: 0;
      bottom: 0;
      margin: auto;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .ant-tabs-tab-btn {
      color: white;
    }
    .ant-tabs-tabpane {
      color: white;
    }
  }
  .drawer-box-in {
    width: 30px;
    height: 40px;
    border-radius: 2px;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
</style>
