<template>
  <div class="warning-view">
    <div v-if="info.isLock == 1" class="status-icon status-icon-2">已解除</div>
    <div v-if="info.isLock == 2" class="status-icon">未解除</div>
    <!-- <img class="warning-image" :src="info.imageUrls"> -->
    <div class="text-base text-1" style="font-size: 18px">
      {{ info.railwayName }}线路
      <span style="font-size: 12px">-{{ info.lineDir == "1" ? "上行" : "下行" }}</span>
    </div>

    <div style="display: flex; align-items: center; margin-top: 12px">
      <el-image style="color: cornflowerblue" class="warning-image" :src="info.imageUrls[0]" fit="fill" @click="imagePreview(info.imageUrls)"></el-image>
      <div class="warning-content">
        <div class="text-base">{{ info.alarmType == 1 ? "泥石流" : "" }}</div>
        <div class="text-base">里程位置：{{ info.alarmMiles }}</div>
        <div class="text-base">时间：{{ info.alarmTime }}</div>
        <div class="text-base" v-if="info.isLock == 1">
          解除人：{{ info.releasedByName }}
        </div>
      </div>
    </div>
    <div class="warning-operation">
      <img src="@/assets/4.png" style="cursor: pointer; width: 19px; height: 12px; margin-right: 10px" @click="toDetails" />
      <div v-if="info.isLock == 2" class="button-1" @click="release">解除</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Warning",
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    toDetails() {
      this.$router.push({
        path: "/alarmDetail",
        query: { id: this.info.id, cameraCode: this.info.cameraCode },
      });
    },
    imagePreview(images) {
      this.$hevueImgPreview({
        multiple: true, // 开启多图预览模式
        nowImgIndex: 1, // 多图预览，默认展示第二张图片
        imgList: images, // 需要预览的多图数组
      });
    },
    release() {
      this.$emit('onRelease', this.info.id);
    },
  },
};
</script>

<style scoped lang="scss">
.el-image-viewer__close .el-icon-circle-close:before {
  content: "\e78d";
  color: #20a0ff;
}

.warning-view {
  margin: 0px 5px 0 5px;
  width: auto;
  height: 157px;
  background: linear-gradient(0deg,
      rgba(17, 43, 86, 0.5),
      rgba(26, 75, 149, 0.5));
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 13px 10px 10px 15px;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0px 0px 5px #20a0ff;

  .status-icon {
    width: 58px;
    height: 20px;
    background: #ff0000;
    border-radius: 4px;
    position: absolute;
    right: 12px;
    top: 13px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;

    &.status-icon-2 {
      background: #0363c2;
    }
  }

  .warning-image {
    width: 110px;
    cursor: pointer;
    // border: 1px solid #fff;
    margin-right: 10px;
  }

  .warning-content {
    color: #8eacc8;
    font-size: 13px;
    flex: 1;
    line-height: 1.2em;
  }

  .text-base:first-child {
    margin-top: 0px;
  }

  .text-base {
    margin-top: 5px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #a5d4e7;
  }

  .text-1 {
    font-size: 17px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #02b4fe;
  }

  .warning-operation {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 12px;
    color: #fff;
    margin-top: 6px;

    .warning-operation-img {
      width: 19px;
      height: 12px;
      margin-right: 10px;
    }

    .button-1 {
      width: 58px;
      height: 20px;
      border: 1px solid #a8cce8;
      border-radius: 4px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #a8cce8;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .button-1:hover {
      background: #4d85f4 !important;
      // color: #FF0000;
    }

    .button-2 {
      width: 60px;
      padding: 2px 0px;
      border-radius: 5px;
      margin-left: 5px;
      border: 1px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
