<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { meventListHistory } from "@/api/modules/index";
import dayjs from "dayjs";

interface EventItem {
  type: string;
  location: string;
  time: string;
  status: "处置中" | "待处置";
}

const allEvents = ref<EventItem[]>([
  // {
  //   type: "车辆逆行",
  //   location: "邯郸方向 K34+230",
  //   time: "2025-4-15 12:34:56",
  //   status: "处置中",
  // },
  // {
  //   type: "道路施工",
  //   location: "邯郸方向 K34+230",
  //   time: "2025-4-15 12:34:56",
  //   status: "待处置",
  // },
  // {
  //   type: "车辆逆行",
  //   location: "邯郸方向 K34+230",
  //   time: "2025-4-15 12:34:56",
  //   status: "待处置",
  // },
]);

// const wrongWayEvents = computed(() =>
//   allEvents.value.filter((e) => e.type === "车辆逆行")
// );
// const roadWorkEvents = computed(() =>
//   allEvents.value.filter((e) => e.type === "道路施工")
// );

const formatTime = (time: string) => {
  return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
};
onMounted(()=>{
   const endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
   const startTime = dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss');
  meventListHistory({startTime, endTime}).then((res)=>{
    console.log(res, 'rrreeesss')
    allEvents.value = res.rows.map((item: any) => ({
      type: item.eventType,
      location: (item.direction === '1' ? '黄骅港方向 ' : item.direction === '2' ? '邯郸方向 ' : '') + item.pilenum,
      time: item.time,
      status: item.status == '0' ? '待处置' : '处置中',
    }));
  })
})
</script>

<template>
  <div class="event-task">
    <div v-for="(event, index) in allEvents"
          :key="index" class="event-section">
      <div class="section-header">
        <div style="color: #fbfbfc">{{event.type}}</div>
        <div
          class="event-status"
          :class="{
            processing: event.status === '处置中',
            pending: event.status === '待处置'
          }"
        >
          {{ event.status }}
        </div>
      </div>
      <div class="event-list">
        <div
          class="event-item"
        >
          <div class="event-info">
            <div class="location">{{ event.location }}</div>
            <div class="time">{{ formatTime(event.time) }}</div>
          </div>
        </div>
      </div>
      <!-- <div v-else class="empty-state">暂无逆行事件</div> -->
    </div>

    <!-- <div class="event-section">
      <div class="section-header">
        <div style="color: #fbfbfc">道路施工</div>
        <div
          v-if="roadWorkEvents.length"
          class="event-status"
          :class="{ pending: roadWorkEvents[0].status === '待处置' }"
        >
          {{ roadWorkEvents[0].status }}
        </div>
      </div>
      <div class="event-list" v-if="roadWorkEvents.length">
        <div
          v-for="(event, index) in roadWorkEvents"
          :key="index"
          class="event-item"
        >
          <div class="event-info">
            <div class="location">{{ event.location }}</div>
            <div class="time">{{ formatTime(event.time) }}</div>
          </div>
        </div>
      </div>
      <div v-else class="empty-state">暂无施工事件</div>
    </div> -->
  </div>
</template>

<style scoped lang="scss">
.event-task {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: transparent;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: scroll;
  z-index: 9999;
  &::-webkit-scrollbar {
    width: 8px;
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00c6ff 0%, #085b9f 100%);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 198, 255, 0.08);
    border-radius: 4px;
  }
  .event-section {
    height: calc(50% - 10px);
    background: linear-gradient(
      180deg,
      rgba(4, 49, 128, 0.3) 0%,
      rgba(4, 49, 128, 0.1) 100%
    );
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(0, 198, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 198, 255, 0.1);
    display: flex;
    flex-direction: column;
    position: relative;
    // overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 198, 255, 0.3),
        transparent
      );
    }

    // &::after {
    //   content: "";
    //   position: absolute;
    //   bottom: 0;
    //   left: 0;
    //   right: 0;
    //   height: 1px;
    //   background: linear-gradient(
    //     90deg,
    //     transparent,
    //     rgba(0, 198, 255, 0.3),
    //     transparent
    //   );
    // }

    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border: 1px solid rgba(0, 198, 255, 0.1);
      // position: relative;
      background-color: #0e2d51;
      border-radius: 15px;
      padding: 14px;
      font-size: 22px;

      // &::after {
      //   content: "";
      //   position: absolute;
      //   bottom: -1px;
      //   left: 0;
      //   width: 100px;
      //   height: 1px;
      //   background: linear-gradient(90deg, #00c6ff, transparent);
      // }

      i {
        width: 32px;
        height: 32px;
        background: rgba(0, 198, 255, 0.1);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          inset: -1px;
          background: linear-gradient(45deg, #00c6ff, transparent);
          border-radius: 9px;
          z-index: -1;
        }
      }

      h3 {
        color: #fff;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 198, 255, 0.5);
      }

      .event-status {
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 18px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 6px;
        position: relative;
        overflow: hidden;
        color: #ffffff;

        &::before {
          content: "";
          position: absolute;
          inset: 0;
          opacity: 0.1;
        }

        &.processing {
          background: linear-gradient(90deg, #085b9f, rgba(8, 91, 159, 0.7));
          border: 1px solid rgba(8, 91, 159, 0.3);
        }

        &.pending {
          background: linear-gradient(90deg, #946c25, #ffb52d);
          border: 1px solid rgba(255, 181, 45, 0.3);
        }
      }
    }

    .event-list {
      flex: 1;
      //overflow-y: auto;
      padding-right: 4px;

      &::-webkit-scrollbar {
        width: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(0, 198, 255, 0.2);
        border-radius: 2px;
      }

      &::-webkit-scrollbar-track {
        background: rgba(0, 198, 255, 0.05);
        border-radius: 2px;
      }

      .event-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 14px;
        margin-bottom: 12px;
        border-radius: 8px;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;

        // &::before {
        //   content: "";
        //   position: absolute;
        //   top: 0;
        //   left: 0;
        //   right: 0;
        //   height: 1px;
        //   background: linear-gradient(
        //     90deg,
        //     transparent,
        //     rgba(0, 198, 255, 0.2),
        //     transparent
        //   );
        // }

        // &:hover {
        //   background: rgba(4, 49, 128, 0.3);
        //   border-color: rgba(0, 198, 255, 0.3);
        //   transform: translateY(-2px);
        //   box-shadow: 0 4px 20px rgba(0, 198, 255, 0.15);

        //   &::before {
        //     background: linear-gradient(
        //       90deg,
        //       transparent,
        //       rgba(0, 198, 255, 0.4),
        //       transparent
        //     );
        //   }
        // }

        .event-info {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          gap: 8px;

          .location {
            font-size: 22px;
            color: #fff;
            font-weight: 500;
            text-shadow: 0 0 10px rgba(0, 198, 255, 0.3);
          }

          .time {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.6);
            min-width: 180px;
            text-align: right;
          }
        }

        .event-status {
          padding: 6px 16px;
          border-radius: 20px;
          font-size: 14px;
          font-weight: 500;
          display: flex;
          align-items: center;
          gap: 6px;
          position: relative;
          overflow: hidden;
          color: #ffffff;

          &::before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: 0.1;
          }

          &.processing {
            background: linear-gradient(90deg, #085b9f, rgba(8, 91, 159, 0.7));
            border: 1px solid rgba(8, 91, 159, 0.3);
          }

          &.pending {
            background: linear-gradient(90deg, #946c25, #ffb52d);
            border: 1px solid rgba(255, 181, 45, 0.3);
          }
        }
      }
    }

    .empty-state {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.4);
      font-size: 22px;
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
}
</style>
