<template>
  <div class="event-item">
    <div class="container">
      <div class="body">
        <div class="title">
          {{ title }}
        </div>
        <div class="content">
          <div>
            <span class="label"> 发生时间： </span>
            <span class="value">
              {{ data.createDt }}
            </span>
          </div>
          <div>
            <span class="label"> 事件描述： </span>
            <span class="value">
              {{ desc(data) }}
            </span>
          </div>
        </div>
        <div v-if="showCamera" class="bottomTagContainer">
          <div class="title">
            周边摄像头（{{ (cameras && cameras.length) || 0 }}）
          </div>
          <div class="bottomTagContent">
            <div
              v-for="item in cameras"
              :key="item.id"
              class="bottomTagItem"
              @click="(evt) => onCameraClick(evt, item)"
            >
              <img
                v-if="item.cameraStatus == '0'"
                src="~@/assets/images/videoSurveillance/offline.png"
              />
              <img v-else src="~@/assets/images/videoSurveillance/online.png" />
              <span> {{ item.videoName }} </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatStake } from "@/utils/road";
import { getNearbyCameras } from "@/api/video";

export default {
  props: {
    data: {
      type: Object,
      required: true,
    },
    showCamera: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      cameras: [],
      roads: [],
    };
  },
  computed: {
    title() {
      const { data } = this;
      const { roadNo, stake, directionText } = data;
      const arr = [];
      roadNo && arr.push(roadNo);
      arr.push(directionText);
      arr.push(formatStake(stake));
      return arr.join("·");
    },
    // 事件描述
    desc() {
      return (data) => {
        const comments =
          !data.comments || data.comments === "null" ? "" : data.comments;
        const eventDesc =
          !data.eventDesc || data.eventDesc === "null" ? "" : data.eventDesc;
        return comments || eventDesc;
      };
    },
  },
  watch: {
    "data.stake": {
      immediate: true,
      handler() {
        this.getNearbyCameras();
      },
    },
    "data.viewCameraIndex": {
      immediate: true,
      handler() {
        console.log(1111111111112)
        this.triggerCameraItemClick();
      },
    },
  },
  methods: {
    async getNearbyCameras() {
      const { showCamera } = this;
      const { stake, roadNo } = this.data;
      this.cameras = [];
      if ((!showCamera, !roadNo || !stake)) {
        return;
      }
      const res = await getNearbyCameras({
        page: 1,
        size: 5,
        section_code: roadNo,
        kilo_pile: stake,
        pile_range: 500,
      });
      if (res?.msgState === "SUCCESS") {
        this.cameras = res.msgContent;
        this.triggerCameraItemClick()
      }
    },
    triggerCameraItemClick() {
      const { cameras } = this;
      const { viewCameraIndex } = this.data;
      if (!viewCameraIndex || !cameras || !cameras[viewCameraIndex]) {
        return;
      }
      this.onCameraClick(null, cameras[viewCameraIndex]);
    },
    onCameraClick(evt, data) {
      this.$emit("camera-click", { ...evt, camera: data });
    },
  },
};
</script>

<style lang="scss" scoped>
.event-item {
  position: relative;

  .container {
    position: relative;
    max-width: 400px;
    padding: 8px;
    overflow: hidden;
    font-size: 12px;
    border-radius: 6px;
    transition: all 0.5s;

    .body {
      position: relative;
      line-height: 1.5;

      .title {
        font-size: 14px;
      }

      .bottomTagContainer {
        position: relative;
        margin-top: 5px;
        .bottomTagContent {
          max-height: 100px;
          overflow-y: auto;
        }

        .bottomTagItem {
          margin: 3px 0;
          font-size: 13px;
          font-weight: 500;
          color: #21aeff;
          cursor: pointer;
          overflow: hidden;

          img {
            display: inline-block;
            width: 16px;
            height: 16px;
          }
        }
      }
    }

    .content {
      line-height: 20px;

      .label {
        color: #90b1cd;
      }

      .value {
        color: #b5ccda;
      }
    }
  }
}
</style>
