<template>
  <div class="left-box">
    <liftInfo
      v-for="(item, index) in liftBox"
      :key="index"
      :liftInfo="item"
      @click="clickLift(item)" />
    <a-drawer
      v-model:visible="visible"
      class="left-item"
      :width="600"
      :forceRender="preload"
      placement="right"
      :body-style="{
        backgroundColor: 'rgba(0, 0, 0, 1)',
        overflow: 'hidden',
        position: 'relative',
      }"
      :closable="false"
      id="drawer"
      :maskStyle="{ 'background-color': 'rgba(0, 0, 0,0.5)' }">
      <a-tabs :activeKey="'1'">
        <a-tab-pane key="1" tab="日志">
          <liftPage ref="leftPage" @clickDrawer="clickDrawer" />
        </a-tab-pane>
      </a-tabs>
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  import liftInfo from './liftInfo.vue';
  import liftPage from './liftPage.vue';
  import { liftSystemApi } from '/@/api/liftSystem';
  import { http } from '/nerv-lib/util';
  // 全局变量
  import { items } from '/@/store/item';
  // 全局变量
  const state = items();
  //位置文件
  import { liftPosition, longPosition } from './liftPosition';
  // 请求

  //弹窗
  const visible = ref(false);
  // 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
  const preload = ref(false);
  //选择的电梯
  const selctLeft = ref({});
  // table页面 ref
  const leftPage = ref(null);
  const liftBox = ref([]);
  // tab页部分 ========================================================
  //获取电梯数据
  const getList = () => {
    let leftIndex = 0;
    let longIndex = 0;
    http
      .get(liftSystemApi.getDeviceState, {
        projectId: state.projectId,
        siteId: state.siteId,
        floor: 1,
      })
      .then((res) => {
        let data = [];
        res.data.forEach((item: any) => {
          //用来区分直梯 还是 扶梯
          if (item.record.deviceId.includes('0301')) {
            data.push({
              ...item,
              type: 2, //扶梯
              isLeft: true, // 扶梯
              styleText: liftPosition()[leftIndex++],
            });
          } else {
            data.push({
              ...item,
              type: 1,
              isLeft: false,
              styleText: longPosition()[longIndex++],
            });
          }
        });
        console.log(data);
        liftBox.value = data;
      });
  };
  //定时
  const intervalId = setInterval(getList, 60000);
  // 初始化 ===========================================================
  onMounted(() => {
    getList();
  });
  // 页面销毁
  onUnmounted(() => {
    // 这里写销毁时需要执行的逻辑
    clearInterval(intervalId);
  });
  //点击获取详情
  const clickLift = (item: any) => {
    visible.value = true;
    selctLeft.value = item;
    setTimeout(() => {
      leftPage.value.toggle(selctLeft.value);
    }, 100);
    // 开始预加载
    preload.value = true;
  };
  const clickDrawer = () => {
    visible.value = false;
  };
</script>
<style lang="less" scoped>
  .left-box {
    // 颜色变量，用于区别颜色
    // 正常 - 开启 - 上行 -下行
    --on: #0dffa4;
    // 关闭
    --off: #bfcde2;
    // 暂停 - 维修
    --pause: #ffbc46;
    // 告警 - 急停
    --stop: #f36163;
    // 故障
    --fault: #ff7636;
    // 未知
    --unknown: #a742ff;
    // 触发图标大小
    --size: 36px;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 4px;
    background-image: url(../image/floor-1-1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
  }
  :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: white !important;
    font-size: 16px;
    font-weight: 700;
  }
  :deep(.ant-tabs-ink-bar) {
    background: linear-gradient(180deg, rgba(86, 221, 253, 1) 0%, rgba(25, 176, 255, 1) 100%);
  }
  :deep(.ant-tabs-tabpane) {
    color: white;
    padding: 20px 20px 0px 20px;
    width: 100%;
    height: 950px;
    overflow: hidden;
  }
</style>
