<template>
  <el-card class="alarmDetail dashboard-container">
    <div class="alarmDetail-header">
      <div style="display: flex; align-items: center">
        <div>报警信息详情</div>
      </div>
      <el-button type="text" icon="el-icon-arrow-left" @click="goback">返回</el-button>
    </div>

    <el-container class="alarmDetail-bottom">
      <el-container>
        <div style="display: flex; flex-direction: column">
          <div style="
              height: 35px;
              display: flex;
              align-items: center;
              font-family: 0;
            ">
            <div style="
                height: 14px;
                width: 5px;
                background-color: rgb(39, 102, 221);
                margin-right: 5px;
              "></div>
            <div style="font-size: 16px; line-height: 16px">报警信息</div>
          </div>
          <cameraInfoMessage pageType="alarmDetail" :cameraInfo="cameraInfo" :historicalAlarm="historicalAlarm"
            style="flex: 1; width: 300px"></cameraInfoMessage>
          <div @click="release()" v-if="cameraInfo.isLock == 2" style="
              margin-top: 10px;
              font-family: 0;
              width: 100%;
              height: 35px;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: rgb(39, 102, 221);
              color: #fff;
            ">
            解除警报
          </div>
        </div>
        <el-main style="padding: 0px; margin-top: 20px">
          <palyAndPlayback :items="items" :videoType="videoType" :cameraCode="cameraCode" :id="this.id"
            :alarmTime="cameraInfo.alarmTime" @tabChange="palyAndPlaybackTabChange"></palyAndPlayback>
        </el-main>
      </el-container>
    </el-container>

    <warningDispose v-if="warningDisposeModal.show" :id="warningDisposeModal.id" @close="warningDisposeModal.show = false"
      @success="releaseSuccess"></warningDispose>
  </el-card>
</template>

<script>
import palyAndPlayback from "@/components/videoPlayer/palyAndPlayback";
import cameraInfoMessage from "@/components/videoPlayer/cameraInfoMessage";
import { msgAlarmDetail } from "@/api/alarmList";
import { videoHistoricalAlarm, alarmHistoricalAlarm } from "@/api/video";
import warningDispose from "@/components/warning/warningDispose.vue";

export default {
  name: "AlarmDetail",
  components: { palyAndPlayback, cameraInfoMessage, warningDispose },
  data() {
    return {
      id: "", // id
      alarmId: "",
      cameraCode: "", // 摄像机code
      items: "",
      cameraInfo: {
        cameraCode: "",
        isLock: "",
        alarmTime: "",
        alarmType: "",
        lineDir: "",
        deptId: "",
        alarmMile: "",
        beginMile: "",
        installLongitude: "",
        releasedTime: "",
      },
      historicalAlarm: [],
      warningDisposeModal: {
        show: false,
        id: "",
      },
    };
  },
  created() { },
  mounted() {
    this.id = this.$route.query.id;
    this.alarmId = this.$route.query.alarmId;
    this.cameraCode = this.$route.query.cameraCode;
    this.msgAlarmDetail();
  },
  watch: {
    $route(req) {
      this.id = this.$route.query.id;
      this.cameraCode = this.$route.query.cameraCode;
      this.msgAlarmDetail();
    },
  },
  methods: {
    msgAlarmDetail() {
      msgAlarmDetail(this.id).then((res) => {
        console.log(res.data, 'dadadad')
        this.cameraInfo = res.data;
        var row = JSON.parse(sessionStorage.row)
        if (typeof row.alarmMiles === 'number') {
          var value = row.alarmMiles
          row.alarmMiles = row.alarmMile
          row.alarmMile = value
        }
        this.items = row

        // this.alarmId = this.cameraInfo.alarmId;
        alarmHistoricalAlarm(this.alarmId).then((res) => {
          this.historicalAlarm = res.data;
        });
      });
    },
    release() {
      this.warningDisposeModal.id = this.id;
      this.warningDisposeModal.show = true;
    },
    releaseSuccess() {
      this.warningDisposeModal.id = "";
      this.warningDisposeModal.show = false;
      this.msgAlarmDetail();
    },
    goback() {
      // this.$router.push('/alarmInformation/list')
      // this.$router.push("/list");
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.alarmDetail {
  height: calc(100vh - 125px);

  ::v-deep .el-card__body {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .alarmDetail-header {
    padding: 0 20px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #eff2f6;
  }

  .alarmDetail-bottom {
    padding: 0 20px 20px 20px;
    flex: 1;
    overflow: auto;
  }
}

.dashboard {
  &-container {
    margin: 30px 30px 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.el-menu--horizontal>.el-menu-item.is-active {
  background-color: #20a0ff;
  color: #ffffff;
  height: 35px;
  line-height: 35px;
}

.el-menu--horizontal>.el-menu-item {
  height: 35px;
  line-height: 35px;
}
</style>
