<template>
  <div class="map-box">
    <!-- 开关按钮 -->
    <div class="drawer-box-in" v-if="!visible" @click="toggleDrawer">
      <DoubleLeftOutlined class="drawer-icon" style="color: white" />
    </div>
    <!-- 门位置 -->
    <div
      style="
        width: 708px;
        height: 42px;
        background-color: rgba(245, 154, 35, 0.5);
        position: absolute;
        top: 49%;
        left: 23%;
        padding: 6px 6px;
        display: flex;
        gap: 10px;
        cursor: pointer;
      "
      @click="
        () => {
          visible = !visible;
        }
      ">
      <template v-for="index in 4">
        <div
          style="
            flex: 1;
            height: 100%;
            text-align: center;
            line-height: 30px;
            border: 1px solid #ab8757;
            font-weight: 500;
          "
          :style="{ 'background-color': ['#e43e1e', '#f59a23', '#bbcf10', '#62d7a7'][index - 1] }">
          {{ ['A号门', 'B号门', 'C号门', 'D号门'][index - 1] }}
        </div>
      </template>
    </div>
    <!-- 日志弹窗 -->
    <transition name="zep">
      <div v-show="visible" class="table">
        <a-tabs activeKey="1">
          <a-tab-pane key="1" tab="电动门日志">
            <!-- 左侧抽屉的关闭按钮 -->
            <div class="drawer-box-out" v-if="visible" @click="toggleDrawer">
              <DoubleRightOutlined class="drawer-icon" style="color: white" />
            </div>
            <div style="padding: 8px">
              <a-table
                :columns="columns"
                :data-source="dataSource"
                :pagination="false"
                :customRow="customRow">
                <template #bodyCell="{ record, column }">
                  <template v-if="column.dataIndex === 'state'">
                    <a-tag
                      style="background-color: rgba(0, 0, 0, 0.5); width: 50px"
                      :style="{
                        border: '1px solid' + ['#39d7bb', '#f3614d', '#ffa403'][record.status - 1],
                        color: ['#39d7bb', '#f3614d', '#ffa403'][record.status - 1],
                      }"
                      >{{ record.state }}</a-tag
                    >
                  </template>
                </template>
              </a-table>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </transition>
    <!--详细日志 -->
    <div v-show="detailed" class="table-detail">
      <div
        class="close-icon"
        @click="
          () => {
            detailed = !detailed;
            tables.pagination.current = 1;
          }
        ">
        x
      </div>
      <div style="color: rgb(53, 205, 0); font-size: 20px; font-weight: 700">
        {{ infoObject.name }}
      </div>
      <img
        style="width: 100%; margin-top: -10px"
        src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
      <div class="table-detail-box">
        <electricDoorTables ref="tables" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  import electricDoorTables from './tables.vue';

  import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';

  const getDoorList = () => {
    console.log('数据');
  };
  const intervalId = setInterval(getDoorList, 3000);
  //页面 创建
  onMounted(() => {
    //调用电梯接口 定时获取电梯接口 获取当前门状态
    getDoorList();
  });
  // 页面销毁
  onUnmounted(() => {
    console.log('组件已卸载');
    // 这里写销毁时需要执行的逻辑
    clearInterval(intervalId);
  });
  const tables = ref(null);
  const customRow = (record) => {
    return {
      //点击 行 进行查看详情
      onClick: (event) => {
        detailed.value = !detailed.value;
        infoObject.value = record;
        tables.value.toggle(record);
        // 处理点击事件
      },
    };
  };
  //当前点击的电动门对象
  const infoObject = ref({});
  const columns = [
    {
      title: '序号',
      dataIndex: 'name',
      key: 'name',
      width: 100,
    },
    {
      title: '执行时间',
      dataIndex: 'age',
      key: 'age',
      width: 100,
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
      width: 160,
    },
  ];
  const dataSource = [
    {
      key: '1',
      name: 'A号门',
      age: '23:50:20',
      state: '开启',
      status: 1,
    },
    {
      key: '2',
      name: 'B号门',
      age: '23:50:20',
      state: '关闭',
      status: 2,
    },
    {
      key: '3',
      name: 'C号门',
      age: '23:50:20',
      state: '维护中',
      status: 3,
    },
    {
      key: '4',
      name: 'D号门',
      age: '23:50:20',
      state: '维护中',
      status: 3,
    },
  ];
  const visible = ref(false);
  //详情属性
  const detailed = ref(false);
  // 抽屉 - 开关事件
  const toggleDrawer = () => {
    visible.value = !visible.value;
  };
</script>
<style lang="less" scoped>
  .map-box {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 4px;
    background-image: url(../image/electricDoor.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    .table {
      width: 380px;
      height: 632px;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7);
      padding: 32px 24px;
      display: flex;
      position: absolute;
      // 抽屉关闭按钮
      .drawer-box-out {
        width: 24px;
        height: 24px;
        border-radius: 2px;
        position: absolute;
        right: 356px;
        z-index: 2;
        top: 50%;
        margin: auto;
        background: #268aff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border-radius: 0 8px 8px 0;
      }
    }
    .table-detail {
      width: 380px;
      height: 632px;
      position: absolute;
      right: 0;
      bottom: 0;
      background-image: url(../image/door-detail.svg);
      background-size: 100%;
      z-index: 3;
      padding: 32px 32px;
      .close-icon {
        position: absolute;
        right: 2px;
        top: 2px;
        font-size: 28px;
        background-color: rgba(4, 4, 4, 0.9);
        color: rgb(25, 176, 255);
        width: 36px;
        height: 36px;
        text-align: center;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        line-height: 22px;
        border: 2px solid #4d4040;
      }
      .table-detail-box {
        width: 100%;
        height: 500px;
        overflow-y: auto;
        margin-top: 4px;
        padding: 0px 4px;
      }
    }
    // 总容器与抽屉按钮

    // 抽屉打开按钮
    .drawer-box-in {
      width: 24px;
      height: 24px;
      border-radius: 2px;
      position: fixed;
      right: 20px;
      top: 67%;
      margin: auto;
      background: #268aff;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border-radius: 8px 0 0 8px;
    }
  }
  :deep(.anticon) {
    color: #fff !important;
  }
  :deep(.ant-table-thead > tr) {
    height: 30px !important;
  }
  :deep(.ant-table-tbody > tr) {
    height: 30px !important;
  }
  :deep(.ant-table-thead > tr > th) {
    background-color: #1a2230;
    border: 1px solid rgba(163, 192, 243, 1);
    color: white;
    text-align: center;
    font-weight: normal !important;
    padding: 12px !important;
  }

  :deep(.ant-table-tbody > tr > td) {
    background-color: rgba(0, 0, 0, 0.9) !important;
    color: white;
    border: 1px solid rgba(163, 192, 243, 1);
    text-align: center;
    padding: 12px !important;
  }
  :deep(.ant-table-row:hover td) {
    background: #1767f2 !important;
    cursor: pointer;
  }
  :deep(.ant-tabs-tab-btn) {
    font-size: 20px;
    font-weight: bold;
    color: #fff !important;
  }
  .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% {
      transform: translateX(400px); /* 初始位置 */
    }
    100% {
      transform: translateX(0); /* 恢复到初始位置 */
    }
  }

  /* 离开动画 */
  @keyframes bounce-leave {
    0% {
      transform: translateX(0); /* 初始位置 */
    }
    100% {
      transform: translateX(400px); /* 移动到离开位置 */
    }
  }
</style>
