<template>
  <div class="layer-group">
    <modulen
      :loading="loading"
      :error="error"
      :info="bsMeta && bsMeta['utilities']"
    >
      <template #title> 实时事件列表 </template>
      <div class="w-full flex flex-col" style="height: 240px">
        <empty v-if="topEventList.length < 1 && eventList.length < 1" />
        <template v-else>
          <div>
            <div
              v-for="(item, index) in topEventList"
              :key="index"
              @click="selectEvent(item)"
              class="work-order-item"
              :class="
                item.type == '救援系统对接' ? 'work-order-item-yellow' : ''
              "
            >
              <span class="el-icon-caret-right"></span>
                <span class="work-order-content">
                  {{ item.createDt }}，
                  {{ eventTitle(item) }}
                  {{ item.reportName }}
                  {{ item.comments || item.eventDesc }}
                </span>
            </div>
          </div>
          <div class="flex-1">
            <vue-seamless-scroll
              :data="eventList"
              :limitMoveNum="7 - topEventList.length"
              v-if="eventList.length"
            >
              <div
                v-for="(item, index) in eventList"
                :key="index"
                @click="selectEvent(item)"
                class="work-order-item expandable"
                :class="
                  item.type == '救援系统对接' ? 'work-order-item-yellow' : ''
                "
              >
                <span class="el-icon-caret-right"></span>
                <span class="work-order-content">
                  {{ item.createDt }}，
                  {{ eventTitle(item) }}
                  {{ item.reportName }}
                  {{ item.comments || item.eventDesc }}
                </span>
              </div>
            </vue-seamless-scroll>
          </div>
        </template>
      </div>
    </modulen>
  </div>
</template>

<script>
import { mapState } from "vuex";
import vueSeamlessScroll from "@/components/vueSeamlessScroll/index.vue";
import empty from "@/components/empty.vue";
import { getAllEvents } from "@/api/yygl";
import moment from "moment";
import { formatStake } from "@/utils/road";

export default {
  components: {
    vueSeamlessScroll,
    empty,
  },
  data() {
    return {
      eventList: [],
      time: [],
      timeHappenDt: [],
      query: {
        dimension: "",
        level: "",
      },
      // 置顶根据这个排序
      topEventBizNos: ["202312110018", "202312110013"],
      topEventMap: {},
    };
  },
  computed: {
    ...mapState({
      selectRoadId: (state) => state.road.selectRoadId,
      selectAllRoad: (state) => state.road.selectAllRoad,
    }),
    eventTitle() {
      return (item) => {
        return `${item.roadNo}·${item.roadIdText}·${
          item.directionText
        }·${formatStake(item.stake)} ${
          item.eventOneTypeText && `[${item.eventOneTypeText}]`
        }`;
      };
    },
    topEventList() {
      const arr = [];
      this.topEventBizNos?.forEach((bizNo) => {
        const item = this.topEventMap[bizNo];
        if (item) {
          arr.push(item);
        }
      });
      return arr;
    },
  },
  watch: {
    selectAllRoad(newVal) {
      this.init();
    },
    eventList() {
      this.triggerEventItemClick();
    },
    "$route.query.eventId": function () {
      this.triggerEventItemClick();
    },
    "$route.query.eventIndex": function () {
      this.triggerEventItemClick();
    },
    "$route.query.cameraIndex": function () {
      this.triggerEventItemClick();
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const level = this.selectRoadId.length;
      const queryParam = {
        // level, //0全国1省份2公司3路段
        // dimension: level ? this.selectRoadId[level - 1] : null,
        // queryDate: moment(new Date(this.appDate)).format('yyyy-MM')
        roadIds: this.selectAllRoad.join(","),
        pageSize: 1000,
        // startTime: moment(new Date()).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        startTime: moment(new Date())
          .subtract(1, "days")
          .format("YYYY-MM-DD HH:mm:ss"),
        endTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
      };
      this.getEventList(queryParam);
    },
    async getEventList(queryParam) {
      const { success, data, msg } = await getAllEvents(queryParam);
      if (success) {
        const allEventList = [];
        const eventList = [];
        data?.result.forEach((item) => {
          // 事件取值 comments或eventDesc  两个字段都没有数据不展示该事件
          if (item.comments || item.eventDesc) {
            allEventList.push(item);
            if (this.topEventBizNos?.includes(item.bizNo)) {
              this.topEventMap[item.bizNo] = item;
            } else {
              eventList.push(item);
            }
          }
        });
        this.eventList = eventList;
        this.$store.dispatch("monitor/setEventList", allEventList);
      } else {
        this.eventList = [];
        this.topEventMap = {};
        this.$message.error(`获取实时事件失败；${msg && msg}`);
      }
    },
    selectEvent(item) {
      console.log(item, "ssssssss");
      if (item.lat && item.lng) {
        this.$store.dispatch("monitor/setEventSelected", {
          ...item,
          eventType: "realTimeEvent",
        });
      } else {
        this.$message.error("该事件无经纬度数据，无法实现地图定位");
      }
    },
    triggerEventItemClick() {
      const { eventList } = this;
      const { eventId, eventIndex, cameraIndex } = this.$route.query || {};
      console.log(
        111111,
        eventList,
        eventId,
        eventIndex,
        cameraIndex,
        this.$route
      );
      if ((!eventId && !eventIndex) || !eventList || eventList.length < 1) {
        return;
      }
      let eventItem;
      if (eventId) {
        eventItem = eventList.find((item) => item.id === eventId);
      } else {
        eventItem = eventList[eventIndex];
      }
      if (!eventItem) {
        return;
      }
      if (cameraIndex) {
        eventItem = { ...eventItem, viewCameraIndex: cameraIndex };
      }
      this.selectEvent(eventItem);
    },
  },
};
</script>

<style lang="scss" scoped>
.layer-group {
  width: 100%;
}
.w-full {
  overflow: hidden;
}
.top-box {
  width: 100%;
  @apply flex justify-around items-center mt-2 pb-2;
}
.top-box-item {
  color: #fff;
  background: url("@/assets/images/newLayerContrl/curing.png") no-repeat;
  background-size: 100% 100%;
  width: 80px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.f-title {
  font-size: 10px;
  color: #94a8c6;
  margin-left: 6px;
}
.work-order-item {
  @apply w-full h-auto flex items-center justify-between;
  background: rgba(17, 51, 103, 0.35);
  padding: 5px 7.5px 5px 16px;
  border-left: 2px solid rgba(73, 154, 255, 0.5);
  margin-bottom: 6.5px;
  font-size: 14px;
  color: #def2ff;
  cursor: pointer;
}
.work-order-item-yellow {
  border-color: #ffce5a;
}

.work-order-content {
  @apply w-full overflow-hidden overflow-ellipsis whitespace-nowrap;
}
.work-order-item:hover {
  @apply text-white;
  background: rgba(255, 206, 90, 0.05);
  border-color: #499aff;
}
.work-order-item-yellow:hover {
  border-color: #ffce5a;
}
.work-order-item.expandable:hover > .work-order-content {
  white-space: pre-wrap;
}
.work-order-item.expandable::hover > .el-icon-caret-right {
  visibility: inherit;
}
.work-order-action {
  transform: scale(0.83);
  color: #3da5ff;
}
.el-icon-caret-right {
  color: #3da5ff;
  margin-left: -15px;
  margin-right: -35px;
  visibility: hidden;
}
.work-order-item-yellow .el-icon-caret-right {
  color: #ffce5a;
}
</style>
