<template>
  <el-aside style="padding: 15px 10px; font-size: 14px">
    <div style="font-size: 18px; color: #2766dd">当前相机信息</div>
    <el-card
      :body-style="{ padding: '5px' }"
      shadow="false"
      style="margin-top: 20px; padding: 5px"
    >
      <div style="line-height: 1.8em; max-height: 300px; overflow-y: auto">
        <div style="display: flex">
          <div>
            <span class="headline">线路：</span
            ><span>{{ cameraInfo_.railwayName }}</span>
          </div>
        </div>
        <div style="color: red">
          {{ cameraInfo_.alarmType == 1 ? "泥石流" : "" }}
        </div>
        <div style="display: flex; margin-top: 10px">
          <div class="headline">行别:</div>
          <div class="text">
            {{ cameraInfo_.lineDir == 1 ? "上行" : "" }}
            {{ cameraInfo_.lineDir == 2 ? "下行" : "" }}
          </div>
        </div>
        <div style="display: flex">
          <div class="headline">所属工务段:</div>
          <div class="text">{{ cameraInfo_.deptName }}</div>
        </div>
        <div style="display: flex">
          <div class="headline">里程位置:</div>
          <div class="text">{{ cameraInfo_.alarmMile }}</div>
        </div>
        <div style="display: flex" v-if="isShow">
          <div class="headline">里程范围:</div>
          <div class="text">{{ cameraInfo_.beginMile }}</div>
        </div>
        <div style="display: flex">
          <div class="headline">报警病害属性:</div>
          <div class="text">{{ cameraInfo_.alarmAttr }}</div>
        </div>
        <div style="display: flex">
          <div class="headline">报警类型:</div>
          <div class="text">
            {{ cameraInfo_.releasedType == 1 ? "实报" : "误报" }}
          </div>
        </div>
        <div style="display: flex; max-height: 200px; overflow-y: auto">
          <div class="headline">报警内容:</div>
          <div class="text">{{ cameraInfo_.content }}</div>
        </div>

        <div style="display: flex">
          <div class="headline">状态:</div>
          <div class="text">
            {{ cameraInfo_.isLock == 1 ? "已解除" : ""
            }}{{ cameraInfo_.isLock == 2 ? "未解除" : "" }}
          </div>
        </div>
        <div style="display: flex">
          <div class="headline">解除人:</div>
          <div class="text">{{ cameraInfo_.releasedByName }}</div>
        </div>
        <div style="display: flex">
          <div class="headline">解除时间:</div>
          <div class="text">{{ cameraInfo_.releasedTime }}</div>
        </div>
        <div style="display: flex">
          <div class="headline">解除说明:</div>
          <div class="text">{{ cameraInfo_.releasedReason }}</div>
        </div>
      </div>
      <div
        style="
          height: 1px;
          width: 100%;
          background-color: #e7e7e7;
          margin: 10px 0px;
        "
      />
      <div style="max-height: 300px; overflow-y: auto">
        <div v-if="isShow">历史报警信息</div>
        <div v-else>本次报警次数信息</div>
        <div
          v-if="historicalAlarm_.length <= 0"
          style="
            color: #b9b9b9;
            width: 100%;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          无报警数据
        </div>
        <el-timeline
          v-else
          style="padding-left: 0px; margin-top: 30px; font-size: 13px"
        >
          <el-timeline-item
            v-for="(activity, index) in historicalAlarm_"
            :key="index"
            :color="activity.isLock == 1 ? '#bebebe' : '#308ded'"
          >
            <div style="display: flex">
              <div>
                {{ activity.alarmTime }}
              </div>
              <div style="width: 60px; margin-left: 20px">
                {{ activity.alarmType == 1 ? "泥石流" : "" }}
              </div>
              <div
                v-if="isShow"
                style="width: 50px"
                :style="{ color: activity.isLock == 1 ? '#00FF00' : 'red' }"
              >
                {{ activity.isLock == 1 ? "已解除" : "未解除" }}
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </el-aside>
</template>

<script>
import { videoHistoricalAlarm, getAlarm } from "@/api/video";

// palyAndPlayback
// 播放与回放
export default {
  name: "PalyAndPlayback",
  props: {
    cameraCode: {
      // 摄像机code
      type: String,
      default() {
        return "";
      },
    },
    isShow: {
      type: Boolean,
    },
    isfalse: {
      type: Boolean,
    },
    cameraInfo: {
      type: Object,
      default() {
        return {
          cameraCode: "",
          alarmType: "",
          lineDir: "",
          deptId: "",
          alarmMile: "",
          beginMile: "",
          installLongitude: "",
          releasedTime: "",
        };
      },
    },
    historicalAlarm: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  watch: {
    cameraCode() {
      this.getInfo("cameraCode");
    },
    cameraInfo(newVal) {
      console.log("111", newVal);
      this.cameraInfo_ = newVal;
    },
    historicalAlarm(newVal) {
      this.historicalAlarm_ = newVal;
    },
  },
  data() {
    return {
      cameraInfo_: {
        cameraCode: "",
        alarmType: "",
        lineDir: "",
        deptId: "",
        alarmMile: "",
        beginMile: "",
        installLongitude: "",
        releasedTime: "",
      }, // 摄像机信息
      historicalAlarm_: [], // 历史信息
    };
  },
  mounted() {
    this.cameraInfo_ = this.cameraInfo;
    this.historicalAlarm_ = this.historicalAlarm;
    this.getInfo("mounted");
  },
  methods: {
    getInfo(source) {
      console.log("请求信息", source, this.cameraCode, !this.cameraCode);
      if (!this.cameraCode) return false;

      if (this.cameraCode) {
        // 获取摄像机信息
        getAlarm(this.cameraCode).then((res) => {
          console.log("通过code获取用户信息", res);

          if (res.code == 200 && res.data instanceof Object) {
            this.cameraInfo_ = res.data;
          } else {
            this.cameraInfo_ = {
              cameraCode: "",
              alarmType: "",
              lineDir: "",
              deptId: "",
              alarmMile: "",
              beginMile: "",
              installLongitude: "",
              releasedTime: "",
            };
          }

          this.$emit("getCameraInfo", this.cameraInfo_);
        });

        // 获取历史信息
        videoHistoricalAlarm(this.cameraCode).then((res) => {
          if (res.code == 200) {
            this.historicalAlarm_ = res.data;
          } else {
            this.historicalAlarm_ = [];
            this.$message.error(res.msg);
          }
        });
      }
    },
  },
};
</script>
<style scoped>
.headline {
  color: #333333;
  flex-shrink: 0;
}
.text {
  color: #787878;
}
</style>