<template>
  <el-tabs
    class="cameraInfoMessage"
    v-model="activeName"
    :class="
      'actionCameraln' +
      activeName +
      '  ' +
      pageType +
      '-message  ' +
      (isfailureToAlarm ? 'isfailureToAlarm' : '')
    "
  >
    <el-tab-pane label="基础信息" :name="1">
      <div style="line-height: 1.8em; padding: 0px 10px">
        <div style="display: flex; justify-content: space-between">
          <!-- <span class="headline">线路：</span -->
          <div>{{ cameraInfo_.railwayName }}</div>
        </div>
        <div style="display: flex">
          <div class="headline">报警类型：</div>
          <div div class="text" style="color: red">
            {{
              cameraInfo_.alarmType == 1
                ? "泥石流"
                : cameraInfo_.alarmType == 2
                ? "异物侵限"
                : "断轨监测"
            }}
          </div>
        </div>
        <div style="display: flex">
          <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="pageType == 'videoService'">
          <div class="headline">监控里程范围:</div>
          <div class="text">{{ cameraInfo_.beginMile }}</div>
        </div>
        <div style="display: flex" v-if="pageType == 'videoService'">
          <div class="headline">相机通道:</div>
          <div class="text">{{ cameraInfo_.channerl }}</div>
        </div> -->
        <!-- <div style="display: flex" v-if="pageType == 'videoService'">
          <div class="headline">经纬度:</div>
          <div class="text">{{ cameraInfo_.installLongitude }}</div>
        </div> -->
        <template v-if="pageType != 'videoService'">
         
          <div style="display: flex; max-height: 200px">
            <div class="headline">报警内容：</div>
            <div class="text">{{ cameraInfo_.content }}</div>
          </div>
          <div style="display: flex; max-height: 200px">
            <div class="headline">报警级别：</div>
            <div class="text" v-if="cameraInfo_.alarmLevel == 1">一级报警</div>            
            <div class="text" v-if="cameraInfo_.alarmLevel == 2">二级报警</div>            
            <div class="text" v-if="cameraInfo_.alarmLevel == 3">三级报警</div>            
          </div>
          <div style="display: flex; max-height: 200px">
            <div class="headline">来源：</div>
            <div class="text">{{ cameraInfo_.sourceName }}</div>
          </div>
          <div style="display: flex">
            <div class="headline">
              报警属性：
              <span style="color: #787878; font-size: 14px">{{
                cameraInfo_.alarmAttrName
              }}</span>
            </div>
          </div>
          <div style="display: flex">
            <div class="headline">状态：</div>
            <div
              class="text"
              :style="{ color: cameraInfo_.isRelease == 2 ? 'red' : '#09BB07' }"
            >
              {{ cameraInfo_.isRelease == 1 ? "已解除" : "" }}
              {{ cameraInfo_.isRelease == 2 ? "未解除" : "" }}
            </div>
          </div>
          <template v-if="cameraInfo_.isRelease == 1">
            <!-- <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_.releaseContent }}</div>
            </div>
            <div style="display: flex">
              <div class="headline">解除时间：</div>
              <div class="text">{{ cameraInfo_.releasedTime }}</div>
            </div>

            <!-- <div style="display: flex">
              <div class="headline">
                解除描述:
                <span class="text">{{ cameraInfo_.releasedReason }}</span>
              </div>
              <div class="text"></div>
            </div> -->
          </template>
        </template>
      </div>
    </el-tab-pane>
    <el-tab-pane
      :label="pageType == 'videoService' ? '历史报警信息' : '本次报警次数信息'"
      :name="2"
      style="height: 100%"
    >
      <div style="padding: 0px 10px; height: 100%">
        <div v-if="historicalAlarm_.length <= 0" class="list-empty">
          无报警数据
        </div>

        <div v-else>
          <div style="color: #b9b9b9; font-size: 12px">
            （以下展示为：当前相机下同一事件报警的次数）
          </div>
          <el-timeline
            style="padding-left: 0px; margin-top: 30px; font-size: 13px"
          >
            <el-timeline-item
              v-for="(activity, index) in historicalAlarm_"
              :key="index"
              :color="activity.isLock == 2 ? 'red' : ''"
            >
              <div style="display: flex; align-items: center">
                <div style="width: 100px">
                  {{ activity.alarmTime }}
                </div>

                <div
                  style="width: 60px; margin-left: 20px"
                  :style="{ color: activity.isLock == 2 ? 'red' : '' }"
                >
                  {{
                    activity.alarmType == 1
                      ? "泥石流"
                      : activity.alarmType == 2
                      ? "异物侵限"
                      : "断轨监测"
                  }}
                </div>

                <div
                  v-if="pageType == 'videoService'"
                  @click="toDetails(activity)"
                  class="list-button"
                >
                  详情
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
  <!-- </el-aside> -->
</template>

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

// palyAndPlayback
// 播放与回放
export default {
  name: "PalyAndPlayback",
  props: {
    pageType: {
      // 页面类型 videoService 视频服务 alarmDetail 报警详情
      type: String,
      default() {
        return "";
      },
    },
    cameraCode: {
      // 摄像机code
      type: String,
      default() {
        return "";
      },
    },
    isShow: {
      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) {
      this.cameraInfo_ = newVal;
    },
    historicalAlarm(newVal) {
      this.historicalAlarm_ = newVal;
      this.historicalAlarmChange();
    },
  },
  data() {
    return {
      activeName: 1,
      cameraInfo_: {
        cameraCode: "",
        alarmType: "",
        lineDir: "",
        deptId: "",
        alarmMile: "",
        beginMile: "",
        installLongitude: "",
        releasedTime: "",
      }, // 摄像机信息
      historicalAlarm_: [], // 历史信息
      isfailureToAlarm: false,
    };
  },
  mounted() {
    this.cameraInfo_ = this.cameraInfo;
    this.historicalAlarm_ = this.historicalAlarm;
    this.historicalAlarmChange();
    this.getInfo("mounted");

    console.log("pageType", this.pageType);
  },
  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);
          }

          this.historicalAlarmChange();
        });
      }
    },
    historicalAlarmChange() {
      this.isfailureToAlarm = false;
      this.historicalAlarm_.forEach((element) => {
        if (element.isLock == 2) {
          this.isfailureToAlarm = true;
        }
      });
    },
    toDetails(info) {
      this.$router.push({
        path: "/alarmDetail",
        query: {
          id: info.id,
          cameraCode: info.cameraCode,
          alarmId: info.alarmId,
        },
      });
    },
  },
};
</script>

<style lang="scss">
.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
}

.actionCameraln1 .el-tabs__active-bar.is-top {
  width: 20px !important;
  left: 20%;
  border: 1px solid #409eff;
}

.actionCameraln2 .el-tabs__active-bar.is-top {
  width: 20px !important;
  left: 74%;
}

.videoService-message.actionCameraln1 .el-tabs__active-bar.is-top {
  left: 17%;
}

.videoService-message.actionCameraln2 .el-tabs__active-bar.is-top {
  left: 70%;
}

.el-tabs el-tabs--top .actionCameraln1 {
}

.actionCameraln2 .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
}

.el-tabs el-tabs--top .actionCameraln1 {
}
</style>
<style scoped lang="scss">
.headline {
  color: #333333;
  /* flex-shrink: 0; */
}

::v-deep .el-tab-pane {
  overflow-y: auto;
}

.text {
  color: #787878;
  font-size: 14px;
}

::v-deep .el-tabs__nav-wrap {
  background: #eff2f6 !important;
}

.cameraInfoMessage {
  border: 1px solid #eaf3fb;
  border-radius: 5px;
  box-sizing: border-box;
  overflow: auto;
  display: flex;
  flex-direction: column;

  &.isfailureToAlarm {
    ::v-deep .el-tabs__item.is-top:last-child::before {
      content: " ";
      display: inline-block;
      margin-right: 5px;
      margin-bottom: 1px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: red;
    }
  }

  ::v-deep .el-tabs__header {
    flex-shrink: 0;
  }

  ::v-deep .el-tabs__content {
    flex: 1;
    overflow-y: auto;
  }

  .list-empty {
    color: #b9b9b9;
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .list-button {
    padding: 5px 10px;
    border-radius: 15px;
    flex-shrink: 0;
    font-size: 12px;
    line-height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2866dd;
    background-color: #dbe6fa;
  }
}
</style>